Mobile design, usability, user experience
Visual and interaction design
- Effective design for multiple screen sizes: Bryan's article for MobiForge on the challenges of small screen design. Includes detailed examples using the BBC web site as (a most excellent) guinea pig.
- Mobile inputs: Luke Wroblewski's presentation on form design for small screens. Presented at Design 4 Mobile 2010.
- Mobile web design patterns: A series of mobile web design patterns on Forum Nokia.
- Mobile design for newcomers: A guide to visual design for mobile on Forum Nokia. Covers topics such as use of fonts, colour, design principles and understanding the impact of screen size and pixel density. Covers general design guidelines and aspects specific to mobile web and native.
- W3C mobile web best practices: Note that following these best practices does not preclude the use of progressive enhancement techniques to improve content and functionality on more capable devices. See also this set of extended guidelines and explanation of the default delivery context.
- Relationship between mobile web best practices and the Web content accessibility guideline: Document describing the many similarities between these two sets of W3C guidelines. Quite useful to validate use of mobile design best practices to stakeholders.
- Mobile web application best practices: Guidelines from the W3C for the design and development of web applications.
↑ back to top
Design tools and templates
- Flowella: Rapid prototyping tool from Nokia enabling almost anyone to create prototypes without writing code. Exports to Nokia's Web Runtime widget format, Flash Lite and Qt. Not completely ideal for mobile web design as there is no native scrolling behaviour but can be useful to quickly mock things up.
- Briefs: A Cocoa Touch based wireframing and prototyping tool.
- WordPress mobile pack: A robust set of mobile templates designed to suit a wide variety of devices. The pack includes a mobile switching algorithm and two sets of themes (...three actually as one of the themes serves a separate style-set if a low-end device is detected.
- Nokia mobile web templates: A series of templates suitable for Nokia high-end, mid-range and low-end devices. Also works well with the iPhone, Android and many BlackBerry devices. See our project case study for more information.
- Nokia mobile web layouts: A series of mobile web optimised HTML layouts for a corporate site, news site and online store. These layouts were designed using the Nokia mobile web templates and versions are available for high end lower-end devices.
- Nokia design stencils: These aren't specifically meant for web design (they're based on native UI) but can still be useful to quickly mock up a UI or interaction flow. Comes in three flavours: detailed, full-colour concepting stencils, simple black and white wireframing stencils and a papercraft version ideal to cut and paste into prototypes.
↑ back to top
Stephanie is a designer and closet anthropologist with a passion for the many ways people interact with technology. With a diverse background, Stephanie's expertise lies in marrying design, technology and business goals to craft simple, elegant experiences. A compulsive researcher, Stephanie is always keen to discover and share insights on the mobile web and mobility trends in emerging economies.