[richy96]

5. Creating the mobile site layout
------------------------------------------

OK we now have the basic tools in place. We have two styles, and as we select each style we automatically select the CMPS layout defined in either admincp or smadmincp

Here are a few things I learned while designing a mobile layout....

Change all the absolute pixel widths to percentages

Add a meta tag like this to your mobile style headinclude

<meta name="viewport" content="width=device-width; initial-scale=1.0">

This will force the pages to fit the width of the mobile device in both portrait and landscape orientations

Use the CMPS in smadmincp to create a single column mobile layout. You can have modules that are present on only one version of your site, or on both but in different locations

In your mobile style options get rid of most of the 'padding' as youy only have a llimited width on the screen that you can use

Instead of dsiplaying avatars in postibts use the thumbnails instead - they look better on mobile devices

Create a simple navigation system with buttons taking your forwards and backwards through site pages, rather than having a navigation bar. Keep the navigation consistent on all pages. For example I have buttons that have actions specific to a page in bold and buttons for general navigation in normal type.

Use CSS as much as you can to create buttons etc - it keeps the bandwidth down

Strip out unneccesary stuff to reduce bandwidth and 'clutter'

6. Templates
----------------

Now it is just a matter of going through all the templates in your mobile style and editing them to suit your single 'narrow' column layout. This is time consuming but not dificult as it is generally a matter of removing parts of the template you don't need for your mobile version. Try to keep things simple on your mobile site, for instance have only one post editor rather than quick reply and advanced

You can edit the templates in your mobile style to your hearts content without affecting your main site. Remember that phrases are global to both styles - so create new phrases as required for your mobile site and name them mobile_foo etc so you know which style they relate to

So thats about it really - not a full tutorial but a good starting point at least

I'll post up a few screen grabs so you can see my site in both classic and mobile style

enjoy.
Rich