Mobile Web Design

About the Meetup Group  East Toronto Web Design  Started late 2006  Meet (sort of) monthly at Marketcrashers  Find us online at EastTorontoWeb.com  We offer support and resources for Web Designers and Developers

About Me – Peter Meth  Degree in Computer Science  Full time web application developer  Also do websites, hosting, consulting  PHP, MySQL, HTML, CSS, Javascript  More of a programmer than a designer  Follow me on

Presentation Overview  What is a Mobile Device?  Mobile Challenges and Rewards  Mobile Site vs App  Which Mobiles to Target  Sniffing and Redirecting  Recommended Best Practices  Frameworks and Templates  Discussion

What is a Mobile Device?  Difficult to define, lines are blurred  Phones, Tablets, maybe Netbooks  Gaming Devices, Media Players, eBook Readers  Consider Kiosks, Digital Signs, Smart TVs  Most of them have internet access  Anything other than a desktop or laptop

Challenges of Mobile Web Design  Mobiles usually slower than desktops  Slow / unreliable mobile networks  Wide variety of browsers and resolutions  Orientation change on the fly  Different input methods like touch  Differing capabilities like Flash

Rewards of Mobile Web Design  Mobile is very popular  Get closer to your users  Location based browsing  Social Browsing  Less competition for designers  Mobile should overtake desktop by 2014

Mobile vs Desktop Browsing

Mobile Site vs App  Apps have access to –Camera –Address Book –Accelerometer –File System  Otherwise mobile site should suffice  Phonegap can make site into app

Which Mobiles to Target

Sniffing & Redirection  Detect if user is on a mobile – – –  Redirect to yoursite.com/mobile  Should give user option to go to full site

Recommended Best Practices  Use HTML5 for enhanced mobile support  Reduce page elements, compress resources –YUI Compressor, Google PageSpeed  More navigation, less content per page  Use Single Column layouts  Encourage user to bookmark / add to homescreen –check out “mobile-bookmark-bubble”  Start with a framework or template

Frameworks & Templates  jQTouch –  jQuery Mobile –  Sencha Touch –  WPTouch for Wordpress  Phonegap for making apps –

Discussion