Derek Watson, TWG

Mobile Websiteor Responsive Design?

Neither!

Oct 4th, 2013 - #FITCSCREENS13

Derek Watson

@dcwca @twg

Developer at 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

HTTP API

Content Management

System

Mobile Web iPhone App Android App Windows App Blackberry App

Website

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 Responsive

Fast loading

Custom UI

Mobile Optimized

Unified URLs

Single Project

Feature Parity

The Future

It just might work!

[RESS intro]

“I’m increasingly interested in solutions that bring together the best of both worlds.”-Luke W. on “RESS”

RESS - Defined

• Device detection (but no redirects)

• Switching view templates server-side

• Using responsive css techniques where appropriate

Server-side MVC frameworks

Model

ControllerView

User

MVC

Model

Controller

Phone

Tablet View

Desktop View

Phone View

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