Over the last week I have been trying to add the Mobile option to a web site and come across numerous problems trying to convert the pages and I was wondering if anyone else has tried this yet.

The site that I tried this on was built and live on the internet and I changed the layout to Dual Layout - Desktop + Mobile and then added the site to the mobile tab using "select all" and right click on the Synchronize in All Layouts.

I deleted a couple of items from the Mobile site and checked to make sure this was not affecting the Desktop version and all seemed to be OK
I then started deleting and changing the objects for the Mobile Site, i.e. Reduced the size of the text; deleted the pictures; took out the slide shows; grouped and resized the buttons; etc. which is when the problems started.

1) All of the buttons and logo where includes on all pages, these would not delete with Ctrl.X; unchecking the include box; or Excluding from Mobile Layout, without affecting the Desktop Layout.

2) Some of the text objects would allow a change of format from Bold to Not Bold others would not.

3)Some pictures deleted from the Mobile Layout also deleted from the Desktop Layout.

4) After resizing one image and aligning it next to another it was out of alignment on Preview.

5) It was not possible to remove the empty space at the bottom of the page with a Select All Below> Delete

In addition to the above my SSPro seem to have developed an annoying habit of intermittently of opening text boxes; object boxes; and Page Editor on one click of the mouse instead of two.

After getting the Mobile layout uploaded to the website and checking it with an emulator I found that there is still a lot of work to do to make it user friendly, (buttons don't display properly and images require sizes to be stated & more) and then some work to put the desktop layout back to how it was before.

Hope this will help others to take greater care than I when trying this for the first time.

This message has been edited. Last edited by: TonyC,

I haven't done much with mobile design but I'll make these suggestions anyway:

Make sure you have the latest version of SS Pro -- Ver 2.91.

There have been some problems with deletions in the past (with the Betas), so I suggest rather than delete or cut from the mobile layout, you instead "Exclude from Mobile layout". Use the Quick Editor > Layout tab, or the right-click menu option.

On the subject of your mouse seeming to double-click where it shouldn't, try another mouse. Or try cleaning the switch contacts, if you're not afraid of dismembering your mouse.

For the other problems, can you create a test project that illustrates some or all of them? -- I'm sure the folks at VM will be interested too.

Hi Bruce,

The site is here and the one deletion problem with the buttons is on this page. Most of the other problems I have resolved, except the validtion. I don't know if I can repeat them, as I said they were not consistent in any way.
The ims file is LeDuc.ims

I did try a new mouse but that isn't any better, thanks for the suggestion anyway.

Got your .ims file, thanks.

I can duplicate your CTRL+X problem on your mobile gallery page. Multiple CTRL+Xs cause the view to lock up for me.

Some alternates that seem to work better:

Use the Del Key instead of CTRL+X; or

Make a multiple selection by "lassoing" a group of objects -- then a single CTRL+X will work.

I already tried both of those and neither worked. Just tried again to make sure, it still deletes all the other includes in Mobile Layout.

Thanks for the suggestions.

quote:

In addition to the above my SSPro seem to have developed an annoying habit of intermittently of opening text boxes; object boxes; and Page Editor on one click of the mouse instead of two.

i had the same problem.but noting to do with cleanliness.

The constant clicking of pictures change...can you take it off?

images allignement on le petite grange is not precise (explorer)

w3c validator 12 errors

Just to let you know.

For mobile lay out i did not start anything yet but i know ( and you are confirming it) there is going to be lot of problems.

Hi newer,

Thanks for your imput.

If your problem was not cleanliness what was the cause?

I don't know how to take the clicking off the pictures. You may have to turn your volume down a bit

I know about the 12 errors, I have removed the W3c validation for the time being.

Thanks again

Hi.Toni.

Look i don't know if it has anything to do ( previous posts conferm that i'm no pc expert) but it made it desappear just when i kept cleaning temporary files, history and than last touch with a software name " c cleaner".
After that back to normal.If you confirm this teraphy is ok let me know.
By the way the place in the web site it's nice.

Re the clicking: This happens in IE whenever Windows opens a new window. It is a "system sound" and can be disabled or changed for the computer via the Windows Control Panel. As you note, the volume control also works.

Thank you Brucee.

Tony i should thank you because the fading effect you have on your pages is the one i have been looking for long time without paying for it, and without sending title tag in third position as happens in site spinner pro now, after charset and page effect.

I stool it. Thank you.

Thanks Bruce I had forgotten that you can turn off the sound in IE.

Newer,

I used this:

<meta http-equiv="Page-Enter" content="progid:
DXImageTransform.Microsoft.fade (duration=1.)">

Inserted on that site in the Page Editor Header.

Re the mouse problem, I already use CCleaner regularly which cleans out the Temp Files and History so I don't think that will help.
Thanks anyway.

Tony

Back to the main thread of this post I have now deleted the offending objects from the Mobile Layout and added them by copy & paste this is previewing OK with the Preview Tab.

I have then uploaded the dual layout to the internet, however when I check the site with an emulator it is only showing the desktop version.

Having read the Tutorial on building a mobile friendly site I assumed SSPro would add the necessary code for a mobile to detect the Moblie section of the website, but having just read torweb's post here on Mobile Detect and Redirect I think that was a wrong assumption.

So how does the mobile find the Mobile section of the site, can anyone help with this please?

SSPro uses Media Queries to control what the browser uses for display. A mobile should use the mobile CSS; the desktop should use the Desktop CSS. Settings are in Options > Project Options > Advanced.

The line in the code that controls this for your index page is

@media handheld, only screen and (max-device-width: 241px)

which means (I think!) that anything that identifies itself as handheld or has a screen width of less than 241px should use the mobile version CSS. I suspect the emulator is ignoring this.

How does your page display on a real mobile? -- always the acid test.

The emulator is interesting -- reinforcing the thought that mobile pages must be really lean and mean. No slideshows or scripts -- mouseovers for buttons are out. Minimal images and minimal page size. It seems that even the CSS should be minimal.

If that is so, then Torweb's thread may be the way to do it -- although I think that means a completely separate set of pages for mobiles.

We have found that 'none' of the on-line emulators provide a true representation of what mobile devices actually display. We're currently looking into what we can safely recommend, along with any necessary caveats.

Having said that, I'll have to deffer to Harpo on this one (as soon as he gets back) as he can better describe how Dual Layout pages are parsed by the different mobile devices.

This message has been edited. Last edited by: Derry,

Sorry for the delay in replying Bruce, thanks for pointing out the line of code that controls the mobile display.

The display on my mobile, a Nokia N70, shows the full desktop layout, reduced in page width to fit the screen, and at the bottom of the page shows a shortened version of the Mobile Layout with the text links out of place(I removed the Buttons and reduced the amount of text).

I tried torweb's code at the top of the page and this only stopped the site beng used at all, I got an error stating that the page could not be accessed.

Maybe Harpo can shed some light on the problem when he gets back after the holidays, in the meantime I have some others testing how the site looks on Blackberry and i.phone

Hi Tony,

As Bruceee mentioned, SiteSpinner Pro uses media queries to define desktop and mobile layouts. Basically, the two layouts are defined as two cascading stylesheets (CSS's) and the browser, knowing which type of browser it is, uses one or the other.

Unfortunately, some older mobile browsers, which do not support media queries, also do not fail gracefully. In your Nokia example it sounds like it is using both stylessheets.

I am looking into this. There may be a way to adjust the query text that appeases the Nokia browser without breaking the others. The alternative is to create separate mobile and desktop pages then use a mobile detector to choose which page to use. When SiteSpinner Pro creates a separate mobile page it uses more mobile specific code which means it does better when tested on mobile validator.

We don’t have a separate mobile detector option at this time but there are third party options that do this. For example, http://www.handsetdetection.com , recommended by quertydesign seems like it would work well if you have access to php on your server.

Speaking of validators, I see that the validation errors on your page are from your added script and classes. You can probably find a workaround to prevent the errors.

I couldn’t reproduce the lock up that you saw but I have asked Bruceee if he can tell me how he did. If there is a bug there we will fix it.

Hi Harpo,

Thanks for getting back to me, hope you had a nice holiday & good Christmas & New Year celebrations.

Not sure if you checked out the problems that I experienced creating the Mobile Layout from the Desktop version. The Mobile Layout did not disassociate itself completely from the Desktop Layout which caused the following:

1) All of the buttons and logo where includes on all pages, these would not delete with Ctrl.X; unchecking the include box; Delete; or Excluding from Mobile Layout, without affecting the Desktop Layout.

2) Some of the text objects would allow a change of content and format others would not.

3)Some pictures deleted from the Mobile Layout also deleted from the Desktop Layout others did not.

4) After resizing one image and aligning it next to another it was out of alignment on Preview.

5) It was not possible to remove the empty space at the bottom of one of the pages with a Select All Below> Delete command.

To workaround this I had to make all the objects on the Desktop Layout "excluded fom the Mobile Layout" (which deleted them from the Mobile Layout) then copy and paste them back into the mobile layout.

Another point worth mentioning when the Z order is altered in one layout it changes the Z order in the other layout also, so it is necessary to group all the z order of one layout to the front and the other layout to the back.

I do have php available so I registerd with the handsetdetection.com site but that looks really scarey, don't understand it at all, far too complicated for my meagre knowledge.

I also tried the one that "torweb" posted in another thread but that only caused the page to be "not accessable" to mobiles. Would the line of media code; @media handeld....etc, need to be deleted to make these work?

On the question of validation, (the attribute "class" is duplicated in the same tag)
I'm having trouble with a workaround that will work in SSPro rather than have to change it in Notepad and then upload it.

Your thoughts on all this would be appreciated,
Thanks
Tony

Yes thanks, I did have a good holidays. I trust you did too.

None of those things (1-5) should be happening but there might be an odd combination of settings that makes it appear to work a certain way. I looked at your project (LeDuc.ims) but I could see any of that. Would you be able to describe the steps to make any of those happen?

For z-order: it will be the same on both layouts but I am not sure I understand the problem. Only objects that are visible in both layouts will show up at the same z-order. Could you explain that a bit more?

I am not sure which torweb post you are using code from but you would want to publish to ‘Single Layout: mobile’ (or desktop, depending) to create separate pages for mobile and desktop. Then let the detection code choose which page to send to the client. In this case, where you are using your own detection code, you can take out the query text for ‘Mobile stand-alone’. quertydesign might be able to offer some advice for you on the handsetdetection

To add your custom hover color without duplicating "class" you could do this:
(There are probably other ways to do the same thing)

In the links you want to add hover to:
- open the text link editor.
- remove the code ‘class="myhover"’.
- click ‘assign unique color’ and choose the color you want the link to be.

Do that for all the links in qustion. Choose the same color for each one. That will generate a class for the link color.

Look in the preview’s css to see what name the class was given. For example you might see:
.txt4:link {color: #000040;}
.txt4:visited {color: #000040;}

In that case the class is ‘txt4’. So, in the code you added to CSS, take out your myhover class definition and add:
.txt4:hover {color: #ff0000;}

That’s it.

Yes thanks we had a good but quiet Xmas & New Year.

The site was already up and running on the internet and all of the occurences 1-5 happened after changing the layout from single (desktop)to combined (Desktop + Mobile). The only way I could find to get around that was to delete all of the mobile objects by right clicking the object; checking the "Exclude from Mobile Layout" option; and then replacing them by copying and pasting the required ones back into the mobile layout.

One specific example of the problem (which is still there) is on the /index page. In desktop there is a grey stripe down the left hand side of the page (obj363geo345 at x-53 and y510). On the mobile layout obj363geo345 is at x287 and y609 (even though it has been deleted from the mobile layout), if this object is deleted on the mobile page it deletes the object on the desktop even though they are in different positions. This was basically the problem with all the objects on the Mobile Layout, no matter if they were resized and repositioned if one was deleted off the mobile layout it was deleted the "original" off the desktop.

The Z order was not really a problem, rather I was just pointing out that the objects show in outline on the Mobile when in Desktop Layout and vice versa, so I found it easier to set the Z order with all the desktop objects at the back of the project and all the mobile objects at the front. As I have deleted all objects from the mobile layout and then copied and pasted objects required in the mobile I do not have any objects that are common to both layouts.

The mobile detect & redirect posted by torweb that I tried was in this post

Thanks for the information on the "class" duplication, that worked fine. I have pages that validate again; except for the /gallery.html which has a flash slide show

Hi lsoo,

If you are using SiteSpinner Pro, then what you would do is open and save the project under a new name (so you have a backup of it). You should then be able to select the Layout Options function, and select Dual Layouts.

Your original, desktop layout should be the same as before, and you can confirm this by Previewing. You should also be able to create a new layout for mobile devices. Once you Publish the Project, one or the other layout should be displayed, depending on the device the page is being viewed on (and the settings under Options > Project Options > Advanced).

Keep in mind when you view the page on different devices, that they all behave a differently. If you want a page to display differently on all different devices, you would need to create multiple layouts. Your best course of action would be to say 'I want my pages to look good on desktop browsers, and on these specific mobile devices (such as the iPhone, or cell phones).