10 Things Web Designers Need to Do Before Going Mobile


Published on

10 (actually 12) topics web designers need to consider in the mobile space

Published in: Design, Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

10 Things Web Designers Need to Do Before Going Mobile

  1. 1. Ten things web designers need to do before going mobile 16 April 2009 CHI*A
  2. 2. One Live a mobile life 2 Start using a phone for accessing the Internet. •Use it as much as you can; don’t whip out a laptop or wait till you get home. •Try not to make it an iPhone. •If you have the means or resources, switch to other devices periodically, so you see the strengths and weaknesses of the various platforms, and don’t get stuck in a single UI mindset.
  3. 3. Two Believe it’s a phone 3 It's a phone first. •Your customers might have a high end large screen phone with unlimited 3G data and/or wi-fi and a battery charger at hand ... or they might not. And you probably won't know. So: fast, responsive, light. •Add weight only when it significantly enhances the user experience. •Want more interaction logic? Make an app instead.
  4. 4. Three Use mobile analytics Desktop web tools won’t cut it 4 Use a mobile analytics package. •Bango, Admob, Flurry, Pinchmedia. •The desktop-focused packages don't understand mobile. •Analytics are boring. Any ideas. This is a generic cool photo instead, but it sorta implies heatmap, etc. Thoughts?
  5. 5. Four Know your platform 5 Learn the capabilities of your platform. •Your developers may not already know. •For example, we were told by a developer that Android couldn't use CSS layout to do something we provided code for; they insisted on using tables. •If you only do what they say you can, you aren't serving your users. •Above: VZW doesn’t allow links in SMS messages they didn’t originate. How does this affect your install process? •stream of consciousness: platform defines what you can and can’t do but if you don’t know what it can’t do you can only do what you think it can and your design gets smaller with each assumption - especially when developers take things way
  6. 6. Five Target the devices your users have 6 Think carefully about how to target devices. •Remember that most people do not have a high end phones. Are they target customers? You might not want to abandon them. •But don't shortchange your high end device users, either. Like personas, you might need to work with multiple types of devices. •Texting and even web are not high end features, think what you really mean by categorizing features in any particular manner; don’t just assume everyone knows what a “smartphone” means anymore. •While not a low-end appeal, it works I think.
  7. 7. Six Design for contexts of use 7 Think carefully about the users and what they are doing. •Don't just consider the quot;in a cafequot; or quot;on a busquot; contexts, but the quot;lying in bed before falling asleepquot; and quot;while watching televisionquot; contexts. (Or even, while “riding a bike”). •And of course quot;I don't have another device to access the Internet.” •Are your users task-based or otherwise-engaged? If you don’t know, find out. •A mobile is not used like a computer on a desk or lap. It can only capture attention for brief periods.
  8. 8. Seven Understand the region and culture 8 Remember that devices vary from country to country. •Don't assume that because a phone type is popular where you live, that it's popular where your customers live. •Devices, networks, and customers will vary from region to region. •Knowing is not the same as understanding.
  9. 9. Eight Learn the implications of intermediaries 9 Learn about what impact operators, transcoders, and aggregators have. •They can change your content and may block messaging. •They can also give you access to deeper user data.
  10. 10. Nine Use device repositories 10 Learn about assistive technologies. •You should know what device description repositories are, and how they can help you. E.g., DeviceAtlas, WURFL (shown) •Make your content and layout and software intelligent so it behaves appropriately based on device capabilities
  11. 11. Ten Send only what is needed 11 Don't put all rendering logic on the page. •Don't, for example, pull three image versions down to the page and then render only one. •Obviously, I don’t think much of this photo •I am not sure I love this point as stated, anyway. Something else about client vs. server, or page weight or what?
  12. 12. Eleven Design with rules and patterns Not pixels 12 (and last of all) embrace flexible design. •Abandon pixel-perfect design. •Photoshop rendering is not your friend. •Use rules, charts, themes, patterns, styles. •Use modular design principles and polymorphic objects.
  13. 13. Twelve Be part of the community 13 Come to Design for Mobile •April 20-22, 2009 in Lawrence •Or visit the design pattern wiki http://patterns.design4mobile.mobi. •Or at least read some books, subscribe to blogs, etc. •Don’t live in a cave, or silo. Understand the whole mobile ecosystem.
  14. 14. Barbara Ballard Usability, human factors, interaction design, industrial design, marketing, engineering, entrepreneurship, MBA Product designer, product strategist, blogger Mobilist 14
  15. 15. P.O. Box 44-2302 Lawrence, KS 66044 785 838 3003 littlespringsdesign.com design4mobile.mobi 15