Mobile Web Design

sprocketexponentialMobile - Wireless

Dec 10, 2013 (3 years and 8 months ago)

48 views

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