Transcript Mobile Web Design - East Toronto Web

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 Twitter @mrpmeth
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
– http://detectmobilebrowser.com
– http://detectmobilebrowsers.mobi
– http://formfactorjs.com


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
– 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
Discussion