should i build a separate mobile site or a responsive site? neither! with derek watson
DESCRIPTION
Presented at SCREENS 2013 in Toronto. Details at fitc.ca/screens Derek Watson, Senior Developer at TWG, reviews the two most popular strategies for creating mobile web properties (separate mobile-specific sites vs. responsive css), the pros and cons of each, and and a little known third technique that marries the best of both worlds.TRANSCRIPT
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