Mobile Website
or Responsive Design?
Neither!
Derek Watson, TWG
Oct 4th, 2013 - #FITCSCREENS13
Derek Watson
Developer at TWG
@dcwca @twg
Agenda

• Mobile websites
• Responsive web
• Pros / Cons
• How to combine the best of both
Web Architecture
Web Architecture - 1999

HTML
Pages
Web Architecture - 2004

Content
Management
System

Website
Web Architecture - 2007

Content
Management
System

Mobile Web

Website
Web Architecture - 2010

Content
Management
System

Mobile Web

iPhone App

Website
Web Architecture - 2013
Content
Management
System

HTTP API

Mobile Web

iPhone App

Android App

Website

Windows App

Blackberry App
Many mobile platforms
lead to complicated
architecture
Goals for The Web

• Native look & feel
• Lightweight
• Performant
• Wide device support
The Past
Mobile Websites
Mobile Websites - Defined

• Users are redirected to m.domain.com
• Separate project from the main website
• Views are rebuilt for mobile

• Limited functionality
Mobile
Websites:
Advantages!
Mobile Websites: Advantages

• Completely custom UI
Mobile Websites: Advantages

• Completely custom UI
• Lightweight
Mobile Websites: Advantages

• Completely custom UI
• Lightweight
• Target mobile browsers only
Mobile Websites:
Challenges
Mobile Websites: Challenges

• Separate projects, duplicate code
Mobile Websites: Challenges

• Separate projects, duplicate code
• Feature disparity
Mobile Websites: Challenges

• Separate projects, duplicate code
• Feature disparity
• URL fragmentation
The Present
Responsive Web
Responsive Web - Defined

• Term coined in May 2010 by Ethan Marcotte
• CSS3 changes the layout of an HTML document
• Site “responds” to different screen sizes
“2013 Is The Year of
Responsive Web Design”
- Mashable.com (in 2012)
Responsive
Web:
Advantages!
Responsive Web - Advantages

• Simple technology
Responsive Web - Advantages

• Simple technology
• Single project
Responsive Web - Advantages

• Simple technology
• Single project
• Feature parity
Responsive Web - Advantages

• Simple technology
• Single project
• Feature parity

• Unified URLs
Responsive
Web:
Challenges
Responsive Web - Challenges

• Contorting your HTML
Responsive Web - Challenges

• Contorting your HTML
• Responsive images
Responsive Web - Challenges

• Contorting your HTML
• Responsive images
• HTML and CSS bloat
Responsive Web - Challenges

• Contorting your HTML
• Responsive images
• HTML and CSS bloat

• Tricky design
Mobile Web
Fast loading
Custom UI
Mobile Optimized
Unified URLs
Single Project
Feature Parity

Responsive
The Future
It just might work!
“I’m increasingly
interested in solutions
that bring together the
best of both worlds.”
-Luke W. on “RESS”
[RESS intro]
RESS - Defined

• Device detection (but no redirects)
• Switching view templates server-side
• Using responsive css techniques where appropriate
Server-side MVC frameworks
MVC

Model

View

Controller

User
Model

Desktop View
Controller
Tablet View
Phone View

Phone

Tablet

Desktop
Client-side MVC
Food for Thought

• Do you want the same experience on web & mobile?
Food for Thought

• Do you want the same experience on web & mobile?
• How critical is performance and load time?
Good Reads

A gallery of Responsive Web Designs

http://mediaqueri.es

Responsive Image Workflow

http://bit.ly/17JS1Lv

Performance Implications of Responsive Design

http://bit.ly/L9gEDg

RESS: Responsive Design + Server Side Components

http://bit.ly/nsW1nq
Questions?
Thanks!
Derek Watson
@dcwca @twg

Should I Build a Separate Mobile Site or a Responsive Site? Neither! with Derek Watson