Designing web content for mobile apps

Replies to This Discussion

Permalink Reply by Tony Rolfe on January 11, 2010 at 22:06

Hi Dave,

Depending on what you have used to create your website, there are several ways to help make sure that your site is viewable on mobile devices.

If you are using a CMS solution such as word press or Joomla, then there are several plugins that you can install and they will take care of the work for you. They will detect which device you are using and then automatically switch to a friendly interface for that device.

If you are using HTML coded sites, then there is a few simple suggestions when designing your site:

1. The most important rule to remember is to make sure that your site is structured correctly using the correct HTML markup and as compliant as possible with W3c standards. Make sure you use H1, H2 and H3 etc headings and lists where appropriate. This way if the mobile doesn’t like the style sheet it could at least view well structured HTML.

2. Flash is a no no. Not only does it slow the site down, most devices still do not have a flash player version for it, so avoid using flash at all costs.

3. Make sure that the source code is correct, ensuring that the most important information is first. Smaller screen mobile devices could see less important information first and place that above any important content.

4. Create a css style sheet for mobile devices. You can add the media attribute with the value device = handheld

More information on this can be found at:

http://www.w3.org/TR/CSS2/media.html

For example, you could remove pixel sizes and add in % instead so that the content adjusts for smaller screens.

5. Test test and test again - View your site on a mobile device to see what it actually looks like. Test it in a number of browsers such as the mobile default browser and http://www.opera.com/mini/

Also try it on different mobile devices so you can compare how it looks on other devices and browsers.

There are several strategies that you could implement as well as the above, but these are just my suggestions. There is also a very good book for help on this that can be found here:

http://mobilewebbook.com/

Hope this helps.

Regards

Tony

Permalink Reply by Dave Cooper on January 12, 2010 at 23:34

Thanks for that helpful advice, Tony. I'm a write-it-yourself html addict, so joomla and wordpress aren't going to ride to the rescue! A quick browse with my phone indicates that the amount of content it can happily handle is very limited indeed! My initial solution is to add a php script to the start of the index page to peel off mobile users and send them to a /mobile/ directory with a very few tiny pages. Actually handling the content for these is a bit of a laugh. One of the must-have pages is a fixture list: the data's held in MySQL, so it's just a question of a new query and a new table to restrict the content to what the screen can handle. The other must-have is a results page. This is in XML (content is amazingly quick and easy to upload) on the main site with XSLT sorting it into readable content. It turns out that mobile browsers don't support XSLT! Fortunately, php has a feature called SimpleXml which allows server-side parsing, just a matter of finding out how to work it. For a nasty moment it looked as though XML might turn out a flawed solution which would have been a real shame.
CSS so far is really minimal: black text on a light screen, small h1 headers (no room for h2, h3!), minimal navigation, no pics, obviously. The up side of this miniature coding is that the bandwidth requirement is tiny. Even on a crappy 2g phone the speed's acceptable. Current concerns are getting the page cache-control max-age values right (the browser doesn't load a page if it's got a cached copy) and finding a better way to handle contact details: mailto doesn't look like it's going to be very handy in the mobile sphere, either because mail is web-based or because the phone doesn't support email. I think I'll try writing a php page to handle mail from the server, formmail style, can't think of any other way to handle that with any certainty.
I've still got a little way to go before W3C's mobile validator (http://validator.w3.org/mobile/) really loves me: evidently I need to be in XHTML basic 1.1, also somehow I don't have a utf-8 coding declaration: must have found a rather obsolete DOCTYPE declaration from somewhere!
Dave