Mobile Web Design. Less is More

jeff@brightwhite.ca @brightwhite on twitter mobile design. why less is more. mobile tech for social change halifax | 05 23 2009 Saturday, May 23, 2009

Saturday, May 23, 2009 share a little story with you • This photo was taken a little under 20 months ago • my wife and I were having our third child • water broke a week early, even though it was a scheduled c-section • my son aspirated amniotic fluid and developed pneumonia and ended up in the NICU • took turns staying there in a windowless room on the third floor of the IWK for 8 days • coming home to look after my girls • didnʼt have an iPhone then or a Blackberry or anything else • all i had was a basic Samsung Flip phone • but that let me post updates to Facebook, read peopleʼs comments and words of encouragement and similar stories • thatʼs when i knew that this mobile web thing was probably going to take off • the Facebook mobile site back them was rudimentary, but surfing it was still a good experience and it allowed me to continue the conversation

Seven tenets of good mobile design 1.Making it smaller doesn’t mean it works. 2.Mobile data costs time and money. Respect that. 3.Determine if users are mobile and send em to the right place. 4.Decide which content users want and give it to them. 5.Remove navigation users don’t need. 6.Testing is essential. And costly. 7.Content isn’t king in the mobileverse. Saturday, May 23, 2009

making it smaller doesn’t mean it works photo by flickr user chadmiller Saturday, May 23, 2009

Saturday, May 23, 2009 Miniaturization doesnʼt work - In many cases, the iPhone is changing this rule because Mobile Safari is incredibly useable. - But even that can be a pain to use when you have to access todayʼs media rich, complex layouts. - To navigate this, I have to zoom in, scroll around, lose context of the rest of the page, wait for all of that page to load - on an iPhone, this is still a pretty amazing experience. - on a ﬂip phone, I donʼt think I would have even bothered.

Saturday, May 23, 2009 Miniaturization doesnʼt work - Compare that previous experience with the NYT iPhone app - incredibly easy to read, large type - great navigation system, just the bits you want when youʼre on the bus, trying to read the headlines - if you need to, you can always go to the full web-based version - but in 9/10 situations this experience is adequate and even exceptional

mobile data costs money. respect that. photo by flickr user Jessica Shannon Saturday, May 23, 2009

Saturday, May 23, 2009 Mobile data costs money - remember back in the day of 14,4 modems? - you couldnʼt put up huge images - the average homepage today can weigh in easily at half a MB or more - The speed of the network is only one factor here - if someone doesnʼt have a good data plan, youʼre not going to encourage heavy data use if they get slapped with data overages - the processors in todayʼs phones can also choke on data-heavy pages. these are not desktop-level Core2Duos. -

stats from mobileactive.org/countries Saturday, May 23, 2009 Mobile data costs money - Stats: • Some european countries have more mobile accounts than people. • For example the UK has 1042 mobile accounts for every 1,000 people. How do they do this? Who knows. • Yet less than 540 people are internet users. Fewer still have personal computers. • If Mobile use is top expand further into the smartphone era where weʼve got these rich experiences, the prices need to get more affordable

if users are mobile send em to the right place photo by flickr user Zoom Zoom Saturday, May 23, 2009

Saturday, May 23, 2009 • youʼre not using a mobile website in the same place as a site youʼd use from your laptop or desktop • Youʼre outdoors, on a bus, in a cab, at a club or café • The conditions arenʼt ideal • You need to get at what you want quickly • The sites need to be simpler • Time and location are essential to the use of mobile

Saturday, May 23, 2009 - Yahoo really understands this and tries to send you to the right content automatically. - it also tries to ﬁgure out where you are but fails pretty badly - as a designer/developer, try to ensure that this sort of deduction doesnʼt make for a bad experience - if for example this was a site for travel plans and i didnʼt notice, it could be much more of a problem

decide what content users want photo by flickr user raindog Saturday, May 23, 2009

Saturday, May 23, 2009 - CBC does a great job of this. - they strip out everything extraneous including the navigation and just send you to the top three stories in each category - then at the bottom they give you the option to view the full CBC site--this is good, give the option - we donʼt have much time - so itʼs good thing when our news can be broken down into bite sized chunks that we can consume when we have time

Saturday, May 23, 2009 - this detection can be difﬁcult and itʼs not infallible - you need to test for ﬁve different conditions - detect_mobile_device() Windows vs Windows Mobile - test the user agent - test http_accept header - test _server header - test for any one of known mobile browsers - if any of these conditions are true, you send the user to an appropriate subdomain like m.yahoo.ca - you can also force users to know that .mobi is an extension, but they may not get this - using subdomains is a better idea and with the right tools in place on your server you can serve the right content in the right way

remove navigation users don’t need photo by flickr user Håkan Dahlström Saturday, May 23, 2009

Saturday, May 23, 2009 • Flickr is one of the best examples of how to do mobile design right • the ﬂickr internet site is pretty sparse, but the mobile site rearranges everything perfectly. • puts the options you need right up front • this is one of the few sites that can get away with keeping almost everything, theyʼve done it by reorganizing very well and optimizing the mobile experience • this is no small feat • got rid of all the stylized buttons, simpliﬁed like crazy optimized layout for smaller screens • compare this with the digg layout from earlier

Saturday, May 23, 2009 • digg assumes that if youʼre coming here, you must already be a user • ﬂickr is very different, they provide virtually the same experience, pared down.

testing is essential. and costly. photo by flickr user cobalt123 Saturday, May 23, 2009

Saturday, May 23, 2009 Why canʼt yʼall just buy iPhones and make our lives easier? • while that may sound ridiculous, the second biggest hurdle to good mobile design is poor browser support • Opera Mini and Openwave have free simulators • Device anywhere starts at $200/month • RIM provides simulators of different blackberrys, but itʼs PC only and you need to download a separate sim for each model • The same BB on different networks can render sites completely differently • Blackberries donʼt have JS or CSS on by default • typography will make the most seasoned of web designers cringe • RIMʼs choice of Blackberry font makes my eyes bleed. • anti-aliasing isnʼt an option • you canʼt even specify a font, you take what you can get in most cases

Saturday, May 23, 2009 • the example on the left is what SmartPhone Emulator says it provides • but the right is what I got when trying to access the demo I downloaded • the best thing to do is to pick up unlocked handsets that accept SIM cards and swap cards • of course, in canada where half the country uses CDMA phones on Bell and Telus, this means that you may not know what things look like on these devices.

content isn’t king in the mobileverse photo by flickr user ucumari Saturday, May 23, 2009

photo by flickr user Mark McLaughlin Saturday, May 23, 2009 On the mobile web, content isnʼt king, CONTEXT is. - simplify simplify simplify - create experiences people need. understand that the screens are smaller, browsers are limited and connections/processors are slow - as devices get faster and data packages get cheaper, weʼll be able to provide more immersive desktop-like experiences - but maybe thatʼs not a good thing, because the context of a desktop app on a mobile is all wrong.

Saturday, May 23, 2009 On the mobile web, content isnʼt king, CONTEXT is. - simplify simplify simplify - Google gets this - they provide the quick links to the things youʼre most likely to need, local, news, images - layout is optimized - The University of Texas has created a great mobile site for people to search the school directory. - very simple, will work on any mobile device. sure, itʼs not pretty from a design perspective, but itʼs functional and thatʼs whatʼs important - create experiences people need. understand that the screens are smaller, browsers are limited and connections/processors are slow - as devices get faster and data packages get cheaper, weʼll be able to provide more immersive desktop-like experiences - but maybe thatʼs not a good thing, because the context of a desktop app on a mobile is all wrong.

Seven tenets of good mobile design 1.Making it smaller doesn’t mean it works. 2.Mobile data costs time and money. Respect that. 3.Determine if users are mobile and send em to the right place. 4.Decide which content users want and give it to them. 5.Remove navigation users don’t need. 6.Testing is essential. And costly. 7.Content isn’t king in the mobileverse. Saturday, May 23, 2009

jeff@brightwhite.ca @brightwhite on twitter slideshare.net/brightwhite thanks! Saturday, May 23, 2009

http://www.dalezak.ca	59
http://dalezak.ca	7
http://brightwhite.ca	6
http://www.slideshare.net	6
http://kulapartners.com	4
http://www.brightwhite.ca	2
http://www.linkedin.com	1

Mobile Web Design. Less is More

by Jeff White

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 85

Statistics

Mobile Web Design. Less is More Presentation Transcript