1. Mobile Web Design

2. 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

3. 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 Twitter @mrpmeth

4. 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

5. 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

6. 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

7. 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

8. Mobile vs Desktop Browsing

9. 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

10. Which Mobiles to Target

11. Sniffing & Redirection  Detect if user is on a mobile –http://detectmobilebrowser.com http://detectmobilebrowser.com –http://detectmobilebrowsers.mobi http://detectmobilebrowsers.mobi –http://formfactorjs.com http://formfactorjs.com  Redirect to yoursite.com/mobile  Should give user option to go to full site

12. 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

13. Frameworks & Templates  jQTouch –http://jqtouch.com http://jqtouch.com  jQuery Mobile –http://jquerymobile.com http://jquerymobile.com  Sencha Touch –http://sencha.com/products/touch http://sencha.com/products/touch  WPTouch for Wordpress  Phonegap for making apps –http://phonegap.com http://phonegap.com

14. Discussion