I love Dan Cederholm’s designs and have been influenced by them quite a lot (small, capitalised, extended letter spacing anyone?). However, due to my lack of creative output recently, I’ve realised I haven’t been keeping up to date with SimpleBits work. Or news. So I was surprised their was another member of the team. Anyway Meagan Fisher is her name and she covered a few points in her Designing Effective Mobile Interface talk.
There are three types of mobile interface that you must choose from for your site.
Naked.
Simply your site with no styles. Mmmmmm…raw HTML. This is how some older mobiles will view a website anyway as it strips out all styles automatically. So no cheating with poorly structured headings or the developer favourite method of rendering lists - line breaks. You will be exposed!
The big advantage of doing it this way is it’s easy and quick. The disadvantage is that it can look a bit ugly (unless you are an HTML purest like me) and doesn’t reinforce your brand.
Add some style.
This is pretty much the Naked approach with some small styling of links and headings to continue your brand and remove some of the annoying browser default styles.
The advantage is this is relatively quick and easy to feed the mobile device with specific stylesheet and also add also add your important branding to reassure the user of their location.
The disadvantage, as with the Naked route, is that the content isn’t particularly optimised for the mobile browsing experience, serving up extraneous weight to the page which causes loading delays and frustration. So…
Deck it out.
This is basically creating a separate website optimised for mobile phones. And why not? A mobile phone and your desktop computer are both different in size and screen resolution and most of the time you will be using them in different situations to access different types of content. Therefore the design of your regular website will never really be suited to mobile phone use.
So surely you should develop a different solution for this media? The best answer is yes, however most of the time (at the moment anyway) a mobile interface will be secondary in requirements to a regular website. So do you have enough time, resources and money to produce this separate solution? Possibly not. Therefore route 1 and 2 will usually be chosen.
Whatever interface design you choose, you should alway use the following to improve the user experience:
- Clean, accessible code - This should be done always of course
- Mobilize layout, single column - So much easier to manage than multi-column
- Stay branded - As simple as colouring heading and link colours