Designing for the mobile web is supposedly not a difficult transition to make for a web designer. Smartphones are already the norm and are beginning to overtake desktop browsing of the web. I’ve recently begun to read a great book by Cameron Moll “Mobile Web Design” and have used this to inform some of my article today. Moll compares the Mobile Web to the Car, TV and Web in terms of the impact it will have upon our lives…quite simply it is going to be major! He also makes a rather salient point that mobile refers to the user and not the device itself.
I’m going to attempt to break this subject matter down into bite size chunks…so without further ado let’s go in!
What mark-up do I use?
The key is not to mix your mark-up. There are two types of mark-up which you can use. One you should be familiar with (XHTML) whilst the other you may not have even heard of (WML)!
Mobiles understand two different types of HTML: XHTML and XHTML MP (Mobile profile). I have been told though that regular XHTML is fine to use which in itself means the transition from designing for the desktop to the mobile device should be far more seamless.
Know your phones
There are lots of different sized screens which you’ll need to consider but your mass market will reside on the android and the i-phone. I recently went to a breakfast conference which talked about designing for the mobile web and was shown some stats indicating that the android is about to gain the mass market share in the US ahead of the iphone. As UK technology trends typically follow on from the US we need to bear this in mind.
Context is now definitely king!
Your users will most likely be away from their desks when viewing a site on their mobile device. Most likely they will be in a queue or multitasking on the train. This means that their attention span will be even less than on a desktop (with so many distractions) which makes it imperative to get your message across instantaneously. I wrote on article “Context is king” btw…check it out.
It is best practice to keep the same domain name to avoid confusion.
Unique mobile search results
Another point mentioned at the brekky conference was that Google will index these mobile sites under a separate set of search results thus making this a great opportunity to get high up in the Google rankings. Just think how hard it is to get a good search ranking now…well in maybe 5 years time the case will no doubt be similar for mobile search, which is why it’s imperative to take advantage of this under population right now.
From a design perspective
Your content will need to be minimal as mobile devices are typically smaller than desktop browsers. 3G and other forms of mobile internet connection are also much slower than broadband connections which means that keeping your site to the minimum amount of content is imperative. This could actually be a good thing though as it will force clients to focus on what they want from the website as there will simply only be room for one key piece of content or CTA. In many ways this will help streamline the design process. Quite simply web users have a different set of needs and requirements to desktop browsers.
Location aware
Mobile devices are now location aware with inbuilt GPS’s opening up a whole realm of possibilities of the designer. User agent detection will detect if a mobile device and send out the mobile version of the site. Currently apps like around me allow you to see where the best curry house is around you and maybe even get a quick review. Go walla also also uses this technology by letting you check into famous areas and leave comments. Context has never been so important.
Mobilize don’t just Minimise
Seeing mobile sites as the baby brother of the main website is an archaic way of thinking. Even though the screen is smaller and the connection speed slower, the new possibilities on offer means that it will almost be the case that we design for the mobile device first then the website second. You can also make phone calls in one click or download a company’s contact details to your address book for future reference with mobile sites.
Validate your mark-up
Desktop browsers are forgiving and correct the odd misplaced tag without a problem, this means you need to check and recheck your mark-up more so than when you were just designing for the desktop. There is a W3C validator which is mobile specific and is worth using. Finally be rigorous with your testing , you can get mobile emulators for your browser which you can use to test in, but it would be best to buy in at least an iphone or android if you don’t already have them and ask friends and colleagues to give it a test as well.
You want one?
Interested in a mobile site? Then drop me an email and see how your mobile site can flourish in a currently under populated market.
And one more thing…
I will soon be building my first mobile site so once this has been built, I will be giving mown step by step guide to the process. Keep your eyes peeled for this one.
