Your SlideShare is downloading. ×
Going Mobile - A Pragmatic Look At Mobile Design
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Going Mobile - A Pragmatic Look At Mobile Design


Published on

Presentation by Bryan Rieger of Future Platforms at Mobile Creativity 2008 in London, UK.

Presentation by Bryan Rieger of Future Platforms at Mobile Creativity 2008 in London, UK.

Published in: Technology, Business

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Mobile Creativity 2008 Going Mobile A Pragmatic Look at Mobile Design Bryan Rieger
  • 2. mobile is different
  • 3. multiple networks limited memory tiny small cpu screen one app many variations no mouse limited battery life indirect manipulation numerous platforms and technologies
  • 4. context of use
  • 5. private device – public context
  • 6. expect distractions
  • 7. expect diversity
  • 8. a few walled gardens...
  • 9. WAP T9 MMS predictive text location-based services GPRS transcoding SMS WURFL GPS GSM 3GP EDGE WiFi NTT DoCoMo OEMs haptics CLDC 3G MIDP OpenWave .mobi NetFront SVG WebKit operators Symbian Java ME Android Opera UiQ Flash Lite Series 60 Bluetooth Series 40 nSeries tri-band and lots of jargon.
  • 10. Some things change quickly...
  • 11. voice monochrome sms wap bitmaps circa 2001
  • 12. voice web WiFi Java 3G podcasting Bluetooth mega-pixel+ video cameras gesture blogging haptic SVG full colour music Flash gigabytes location-based services circa 2007
  • 13. but not everywhere at once...
  • 14. 2003 device VERY popular in SE Asia in 2007.... Silicon Valley South East Asia circa 2007
  • 15. and other things change very slowly...
  • 16. two hands two eyes two ears two feet
  • 17. design for human beings
  • 18. do research
  • 19. iterate quickly
  • 20. test ideas often
  • 21. get something on a device quickly
  • 22. focus on the content
  • 23. don’t forget the context
  • 24. design for mobile the problem with pixels...
  • 25. 2.0“ 2.6“ right there 240 x 320 pixels 240 x 320 pixels ~100 ppi exactly how big is a pixel? A real problem faced when dealing with pixel fonts...
  • 26. limited support SVG vs Flash? the future... what about vectors?
  • 27. small medium large bold italic regarding mobile typography...
  • 28. but it’s starting to get better!
  • 29. design-time to runtime from _________________ to _______________ insert favorite design tool insert final runtime
  • 30. filters animation multiply, screen, inverse, etc great animation sequence created in Flash gradients typically can’t be rendered dynmaically effects anti-aliasing drop shadows, glows, reflections, etc often makes re-use difficult custom fonts different sizes, colours and styles large images backgrounds, buttons, splash screens, etc 12.34K+ original design
  • 31. Does this text change? might need to include other versions... unselected? we’ll need to include the white versions as well background still haven’t included 13.86K image... custom fonts do we need to include different sizes, colors? 8.68K+ original resources
  • 32. index transparency animation 1bit instead of 8bit transparency revisit animation later solid colours much faster to render dynamically no effects box drawn dynamically at least simple Photoshop effects no resources required system fonts designed for the device flat background no additional memory/storage required 5.35K+ simplified design
  • 33. margins + padding as numeric values composite anti-aliased angle is added to drawn box composite elements shadow combine bits and pieces as required simple offset solid drop shadow adds depth device fonts no additional resources or cpu cycles needed design notes
  • 34. animation + states single image - works much like a flipbook aliased edges can be used on different colours 2.87K all resources
  • 35. highlight_colour: 0x00FFFF like css, no? use what already works margin: 4 easy to update colour changes can often be made by developers padding: 4 shadow_colour: 0x333333 shadow_offset-x: 2 shadow_offset-y: 2 screen_width: 240 or 176 x 220 screen_height: 320 tweaking values making porting ui much easier! constants
  • 36. simple expressions header.height = icon.height + (padding*2) known value much more flexible than highlight.width = (screen_width/2) - (padding*2) highlight.height = icon.height + font.leading + (padding*2) value easily tweaked useful when porting to different screen sizes constraints
  • 37. + 871 bytes base shape reused by all similar elements + 530 bytes font could be separate composited from a complete set of glyphs + 388 bytes transparent overlay typically used as a ‘screen’ filter = 1,789 bytes vs 2,147 bytes final composite image single exported image requires designer + developer co-operation designer as lone wolf... composites
  • 38. design for humans the mobile web is different don’t just design on a computer Flash, SVG, Ajax, etc aren’t standard do research and prototypes define constants understand your users and the experience border: 4px; text-colour: 0xFF33EE; get something on a device asap apply constraints solve design problems in context ${this.width = screen.width/2} very limited typography create composites type on mobile has a long way to go button = base + icon + highlight; pixel sizes will likely vary design flexible layouts as will pixel density on many devices for screen widths of 176px to 240px+ colour will vary between devices optimize for file size and memory no standard gamuts or depths render just-in-time if possible tips + techniques
  • 39. Little Springs Mobile Resources Adobe Mobile & Devices dotMobi: Mobile Web Development Forum Nokia Mobile Monday Squidoo: Mobile Design Mobile Processing Cameron Moll: Mobile Web Design Mobile User Experience mobile design resources
  • 40. thank you Bryan Rieger