Mobile Web Design

sprocketexponentialMobile - Wireless

Dec 10, 2013 (4 years and 7 months ago)


Mobile Web Design

About the Meetup Group

East Toronto Web Design

Started late 2006

Meet (sort of) monthly at Marketcrashers

Find us online at

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


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


Address Book


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

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

Start with a framework or template

Frameworks & Templates


jQuery Mobile

Sencha Touch

WPTouch for Wordpress

Phonegap for making apps