Home » Education

tools & info for mobile design

Ranked #1,935 in Education, #45,009 overall | Donates to Global Giving

Mobile design web resources

I've been working in user interface and user experience for wireless phones since 1999, and have helped hundreds of designers and developers improve their applications, services, and web sites. What I put here is good stuff for getting started in mobile design. A quick note: if you call them "cellular phones" or "cell phones", you'll sound like a yokel in most parts of the world. Contents include feeds from leading mobile design bloggers, links to key online and paper resources, and a bookmark feed.

Online communities

Here's where to go to talk to others

Mobile Design: Brian Fling's blog (he's looking for contributors) and link to sign up for the email discussion list.
Usable Mobile: The email discussion list brainchild of Scott Weiss.
Mobile Design Resources wiki: Not a discussion list, but a wiki community with UI patterns, design guidelines, even scripting information. Want to talk about a page? Click the Talk tab.
mobiThinking : Ten Mistakes in Mobile Web Marketing: Mobile marketing tips (and future community) from the folks over at dotMobi.
Mobile Web Design section of Mobility.mobi: Discussion of .mobi web design techniques, advice, browser issues, phone issues, and WAP.
Threads tagged "mobile" at IxDA: The Interaction Design Association (IxDA) mailing list frequently talks about mobile.
Mobile Design UK: Mobile Design UK aims to provide an open forum for UK designers working with mobile technologies to share knowledge, encourage exploration of technologies, tools and ideas, and showcase the UK as an influential hub of mobile design to the world.
Mobile Web Development: Mobile web tips, forums, and more, though focused on development. There's a lot of design there as well.
Wireless Informatics Forum: Wireless Informatics represents a new success driver for the mobile industry, and the Wireless Informatics Forum is the first and only resource dedicated to promoting its place in the enhancement of the mobile user experience.

Mobile Web Strategy

General advice for selecting a target platform is in my presentation Going Mobile.

I was asked about detecting device characteristics locally or on the server. My response:

Detecting device characteristics locally, via Javascript, has major issues:
- the browser must support Javascript
- the set of characteristics available is limited
- the characteristics are frequently wrong. This can be due to insufficient Quality Assurance, or due to different interpretations of what, for example, "maximum image width" might mean (screen width? screen minus scroll bar?)

So I'm far more enthusiastic about using data that gets reviewed by people who care a lot about its accuracy, as well as has more values for me to design with.

As far as a separate mobile site: there is an increasing number of "full feature" browsers, with an increasing number of people who want to do everything from their mobile browser. The mobile context is still important, and the devices are still small. Mobile versions are still important. Evidence: the plethora of iPhone-targeted sites, made by the same people who are in love with the fact that it has a "full browser".

My current advice is to make a mobile-targeted version of the site, with mobile-appropriate features, and then provide a link to the full site.

Note that the mobile site might have more features or capability than the "full" site: it could have camera or calendar interaction, using some of the "widget" technologies coming online.

Mobile Design conferences

Design For Mobile conference: North American mobile design conference, April 20-22, 2009
Mobile User Experience: UK conference organized around an annual design manifesto, in May
Mobile HCI (2008): Academic mobile HCI conference; moves to a new city each year.
Mobile Device & User Experience: Professional conference with mobile UX focus; emphasis on networking; November in London.
Mobile Usability: Usability Week 2009 Conference: This seminar is based on a multinational study with participants ranging from students to early technology adopters and business people using a variety of mobile devices. We will also report on the latest findings from articles published in prestigious journals and conferences.

Our user research included feature phones, smartphones, and touchphones from several different vendors, and the seminar will discuss the issues in designing for this range of devices. It does not target any individual phone model.

Stencils & Templates

Mobile UI Stencils for Omnigraffle - Graffletopia: Includes stuff from Yahoo
Mobile design template: Includes screens, elements, gestures, and more.
Free library of iPhone UI elements: Photoshop library
Touchscreen Stencils: Drawings by Rachel Glaves did for Dan Saffer's book, suitable for using in documentation. Especially useful for those of us who can't draw well, the drawings are of hands performing common touchscreen gestures like tap, slide, point, drag, pinch, and spread.
Mobile 2.0 Documentation Strategy « Handheld Usability: At the Euro IA Summit in Amsterdam this year I presented a talk on Mobile 2.0 Documentation Strategy. Fundamentally, it's a 5-step process:

1. Mock-ups
2. Flow charts
3. Component Drawings
4. Tables
5. Further Descriptions (clarifying issues)

Beyond that, it's nice to have some examples and instructions, which you can find in the attached PDF.
IDEO Labs » LiveView: an iPhone app for on-screen prototyping: LiveView: an iPhone app for on-screen prototyping Hack, iPhone Well, our Nicholas is at it again. This time he's taken up iPhone application development, and has released a little app intended to help designers get pixel-perfect visualization of what their app will look like on an iPhone.

Miscellaneous Resources

Email design for mobile devices: Articles on how to design email for viewing on cell phones, PDAs, handhelds and other mobile or wireless devices
MobileCrunch » Android vs. LiMo: What's the difference?: Point-by-point discussion on Google Android and LiMo, the two emerging mobile device operating systems. A must for understanding how the market will evolve in the next two years.
Mobile Community Design: Research and design information for mobile community developers.
Slides from Mobile Internet Portal Strategies 08 (London): Paul Golding, Mobilist for 19 years, last 12 in applications, presents business and technology strategies for going mobile.
Getting Started with Mobile Design from Forum Nokia.: This document provides an overview to different aspects of mobile designing, such as the mobile context, tools, and standards. And they reference both my book and our pattern library, so it must be good.
Mobile Internet Programming: Browser, Web Runtime, Local-based Applications: C. Enrique Ortiz, in his About Mobility weblog, takes on mapping out different mobile internet platforms and capabilities. Pay attention, as his company is developing a really nifty mobile context platform. He's doing this stuff, not just talking about it.
Small Screen Design - Recommended Links - Paul Hibbitts: A list of recommended design links from Paul Hibbitts.
devCentral | Universal Design: AT&T's discussion of universal design principles
We deliver elephants » Blog Archive » Writing for the small screen: Writing for the small screen - Al Briggs, 07 16th, 2008
Working on the small screen is a different discipline and one with lots of new rules, over the past two years we have learnt many lessons ....
Mobile Marketing Association Resources: Guidelines, requirements information, best practices, and getting started information for banner ads, opt-in, short codes, search, privacy, and coupons. Lots of resources ... and the Mobile Advertising Guidelines is the best place to look for what your advertising inventory is going to look like. It's frequently updated, so pay attention.
90 Mobiles in 90 Days: Rachel Hinman of Adaptive Path is blogging a new mobile design concept every day for 90 days.
A List Apart: Articles: Return of the Mobile Style Sheet: This article discusses a first step toward mobile design that uses CSS to maximize interoperability across platforms. By starting simple, you can provide a decent initial experience, solicit user feedback, and iterate toward a more mobile-friendly design. This is the approach we are taking in our redesign of the W3C site.
Forum Nokia - Visual Design for Mobile Devices: A fairly comprehensive look at visual design.
Mobile Web Design Trends For 2009 | Design Showcase | Smashing Magazine: Don't let the title fool you ... this is 6 articles on design approaches, design trends, and design/test tools.
Effective Design for Multiple Screen Sizes | mobiForge: Bryan Rieger's excellent discussion on designing for multiple screen sizes.
Carnival of the Mobilists: The Carnival of the Mobilists is a weekly collection of the Web's best writing on mobile and wireless. There's usually a design post or two.

Books!

Closely Related to Mobile Design

gestures, research, and older books

Companies to help you in mobile design

These companies have a primary focus on mobile design. You can also get help from a standard web design firm, full design firm (such as Frog Design), or interactive agency. If you do, be sure that the resources they assign to your project have both recent and frequent mobile experience. The space changes, and quickly.

Asentio Design ¨C Personal Experience Design Studio: Their site says, "we design personal experiences."
Cloud Four: A newcomer to the field, Cloud Four does mobile web design and development.
Idean.com: Idean designs interaction between humans and digital devices.
Little Springs Design: Little Springs Design designs mobile applications, web sites, and services, with a focus on interaction design.
Ocean Observations: Beautiful, Easy to Use, Graphic User Interfaces and Industrial Design that Maximise Brand Equity and provide a Superior Wireless User Experience.
Punchcut: Punchcut is a full mobile design firm, focusing on "next generation" user interfaces. Focus is on uiOne, Flash Lite, and other rich interactive experiences.
Ribot: Ribot is the effort of brothers Antony and Jerome, focusing on interaction design for mobile.
TAT: TAT is a Swedish software technology and design company offering products and services to differentiate and enhance the user experience of portable devices. Serving primarily device manufacturers.
iconmobile group: mobile design, concepts, and implementation for the mobile channel
Yiibu : Mobile user experience and design: Mobile user experience and interface design in Brighton, UK. UI customization and themes for Series 60.
pinch/zoom: pinch/zoom is a interactive collective focused on building the next generation of mobile and web applications. We are seasoned experts with a passion for creating something new and cool. We believe in transparency, honesty and putting every ounce of energy we have into whatever we touch.
Fjord: At Fjord we create new digital services. At the heart of our work are talented people and one guiding principle: elegant simplicity.
Omega Mobile: Omega Mobile creates compelling mobile multimedia that engages consumers and achieves profitable business results.
Bamboudesign: User experience design and development solutions for next generation high-end mobile sites and applications.

Developer Resources

stuff more for the people writing the code

Designing for the Mobile Web [Design Principles]: The mobile web is here to stay -- but is your site optimized for users that are on the run? In this article, Brian reveals seven fundamental tips to make sure your web site is a joy to use for all users -- including those browsing from a mobile phone.
Windows Mobile device emulator (Windows download): This is the v3 release of the Device Emulator, that released with Visual Studio 2008. V3 updates the V2 emulator that released with Windows Mobile 6.
Mobile Processing: Mobile Processing is an open source programming environment for people who want to design and prototype software for mobile phones. Sketches run in Java ME.
WAP 2.0 How-to Guide - Mobility.mobi: WAP 2.0 How-to Guide Mobile Web Design in the mobility.mobi discussion forum.
iPhone Dev Center: Couldn't have a list of developer resources without it ....
The Wireless FAQ: Lots and lots of questions, largely technical, answered by leading developers. And I answered one or two of them.

Thoughts from the Web

mobile designers' blogs

tools & info for mobile design

Mobile design web resources

Online communities

Here's where to go to talk to others

Mobile Web Strategy

Mobile Design conferences

Stencils & Templates

Miscellaneous Resources

Books!

Closely Related to Mobile Design

gestures, research, and older books

Companies to help you in mobile design

Developer Resources

stuff more for the people writing the code

Thoughts from the Web

Twitter Users To Follow

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

Please pick your widget size and display. Then click "Make the Widget" to get the code that's just right for you.

Voila! Just copy and paste this code into your own site. Have fun!

Oopsey! Please login to Squidoo in order to add this module to your lens.

Mobile Design Blogs

by BarbaraBallard

Explore related pages

Related Tags

Want our Newsletter?