Mobile web — is your site always a good fit?

Design­ing for the Mobile User

Twenty­four­ten read recently that 2012 is expec­ted to be the first year where mobile users will exceed tra­di­tional desktop users. There are more Internet-capable (smart) phones than desktop com­puters in the U.S, UK, Ger­many, France and Japan.

True, the num­ber of smart phones cap­able of web brows­ing doesn’t neces­sar­ily mean you will record more mobile devices hit­ting your site than desktop PCs, but it’s still a sig­ni­fic­ant pointer towards web view­ing habits.

Twenty­four­ten have always delivered web­sites aimed at the desktop user. Each build always has a cross-browser check (IE6-9, Fire­fox, Chrome, Safari etc) and cross-platform check (Windows/Mac) check­ing for styl­ing issues across browsers is a massively time-consuming part of the job. It’s espe­cially annoy­ing (as of course), it’s the browsers that all choose to inter­pret the HTML code dif­fer­ently to one another not the web developer who has writ­ten ‘bad’ code, Twenty­four­ten have to write ‘work-around’ code that tar­gets those spe­cific browsers hav­ing prob­lems, and it can take a long time to get a con­sist­ent look across all browsers.

“As the shift to mobile con­tin­ues, hand­held device sup­port will become increas­ingly important”

So, at what point in the future does a web­site build include mobile con­sid­er­a­tions? It’s a good ques­tion. And what even defines ‘Mobile’? Should it be con­cen­trat­ing on design­ing for iPhones only as they are the most pop­u­lar in mar­ket share, or should it cover Android mobiles too? Should tab­lets come into it as well?

There are many ways you can code a site to appear dif­fer­ently for dif­fer­ent devices, some are reas­on­ably quickly imple­men­ted, more dir­ect and are ‘tweaks’, whilst oth­ers require a lot of thought and a com­plete web­site over­haul. This more thor­ough approach would require cre­at­ing a single fluid design, that scales down per­fectly from a high res­ol­u­tion mon­itor, to a small res­ol­u­tion mobile device, and cov­ers everything in between. This is known as “Respons­ive web design” and is prob­ably the best solu­tion, but also the most expens­ive in terms of time to produce.

Con­tent slim down

How mobile devices dis­play your web­site is one thing, but you should also con­sider how appro­pri­ate your web­site con­tent is for mobile users:

• Should con­tent be tailored to device?
• Is the Mobile user want­ing the same thing from your web­site that a desktop user does?

There are already many web­sites that serve out a dif­fer­ent ver­sion of the web­site to mobile vis­it­ors. There is a school of thought that says — yes, your Mobile users are dif­fer­ent to your Desktop users, and they might require a dif­fer­ent type of more sim­pli­fied nav­ig­a­tion, less graph­ics and cer­tain con­tent might not be appro­pri­ate to offer to them at all.

How we can help

Twenty­four­ten plan to cre­ate a mobile spe­cific ver­sion of our web­site soon. We can then dis­cuss and demo solu­tions at that time.

For now, we have one of those more simple ‘tweak’ options men­tioned earlier that we can offer, aimed spe­cific­ally at the iPhone.

You might have noticed that the iPhone has a really annoy­ing way of decid­ing that cer­tain text areas should be bumped up in size to appear more import­ant than other sec­tions of text, mean­ing that as a con­sequence pixel per­fect beau­ti­ful lay­outs can get eas­ily broken, leav­ing align­ments ruined by the iPhone over-blowing text size way bey­ond the inten­ded look and feel.

If you look at the Twenty­four­ten web­site on an iPhone you’ll see that this isn’t hap­pen­ing. We are using some device recog­ni­tion code to single out the iPhone and ask it nicely to stop mess­ing with the text in the way described. It leaves the affected text still zoom­able with a double-tap and now looks exactly as you’ve come to expect your lay­out to look on a desktop view.

This solu­tion is a couple of hours work to imple­ment (depend­ing on scale of issue), if any cli­ents are inter­ested in enabling this styl­ing to their web­site — just get in touch.

Update — 23rd May 2012

U.S. Pres­id­ent Barack Obama has ordered all major gov­ern­ment agen­cies to make key ser­vices avail­able on mobile phones within a year, in an effort to embrace a grow­ing trend toward Web surf­ing on mobile devices.

“Many gov­ern­ment ser­vices are not optim­ized for smart­phones or tab­lets, and other ser­vices aren’t avail­able at all on those devices”, Obama wrote.

A heads up there for UK pub­lic sec­tor to expect sim­ilar dir­ect­ives before too long?