mobile website or responsive design? the answer is neither
DESCRIPTION
By Derek Watson, Senior Developer at The Working Group 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 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