1 / 14

Mobile Web Design Tips for East Toronto Web Designers

Join East Toronto Web Design Meetup group to learn about mobile challenges, best practices, & frameworks. Connect with fellow web developers. Speaker: Peter Meth, a programming expert. Follow on Twitter @mrpmeth.

keira
Télécharger la présentation

Mobile Web Design Tips for East Toronto Web Designers

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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://detectmobilebrowsers.mobi • 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 • jQuery Mobile • http://jquerymobile.com • Sencha Touch • http://sencha.com/products/touch • WPTouch for Wordpress • Phonegap for making apps • http://phonegap.com

  14. Discussion

More Related