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

Bl...
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 reb...
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...
“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 techni...
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

Pe...
Questions?
Thanks!
Derek Watson
@dcwca @twg
Mobile Website or Responsive Design? The Answer is NEITHER.
Mobile Website or Responsive Design? The Answer is NEITHER.
Mobile Website or Responsive Design? The Answer is NEITHER.
Mobile Website or Responsive Design? The Answer is NEITHER.
Mobile Website or Responsive Design? The Answer is NEITHER.
Mobile Website or Responsive Design? The Answer is NEITHER.
Upcoming SlideShare
Loading in...5
×

Mobile Website or Responsive Design? The Answer is NEITHER.

701

Published on

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.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
701
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mobile Website or Responsive Design? The Answer is NEITHER.

  1. 1. Mobile Website or Responsive Design? Neither! Derek Watson, TWG Oct 4th, 2013 - #FITCSCREENS13
  2. 2. Derek Watson Developer at TWG @dcwca @twg
  3. 3. Agenda • Mobile websites • Responsive web • Pros / Cons • How to combine the best of both
  4. 4. Web Architecture
  5. 5. Web Architecture - 1999 HTML Pages
  6. 6. Web Architecture - 2004 Content Management System Website
  7. 7. Web Architecture - 2007 Content Management System Mobile Web Website
  8. 8. Web Architecture - 2010 Content Management System Mobile Web iPhone App Website
  9. 9. Web Architecture - 2013 Content Management System HTTP API Mobile Web iPhone App Android App Website Windows App Blackberry App
  10. 10. Many mobile platforms lead to complicated architecture
  11. 11. Goals for The Web • Native look & feel • Lightweight • Performant • Wide device support
  12. 12. The Past Mobile Websites
  13. 13. Mobile Websites - Defined • Users are redirected to m.domain.com • Separate project from the main website • Views are rebuilt for mobile • Limited functionality
  14. 14. Mobile Websites: Advantages!
  15. 15. Mobile Websites: Advantages • Completely custom UI
  16. 16. Mobile Websites: Advantages • Completely custom UI • Lightweight
  17. 17. Mobile Websites: Advantages • Completely custom UI • Lightweight • Target mobile browsers only
  18. 18. Mobile Websites: Challenges
  19. 19. Mobile Websites: Challenges • Separate projects, duplicate code
  20. 20. Mobile Websites: Challenges • Separate projects, duplicate code • Feature disparity
  21. 21. Mobile Websites: Challenges • Separate projects, duplicate code • Feature disparity • URL fragmentation
  22. 22. The Present Responsive Web
  23. 23. 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
  24. 24. “2013 Is The Year of Responsive Web Design” - Mashable.com (in 2012)
  25. 25. Responsive Web: Advantages!
  26. 26. Responsive Web - Advantages • Simple technology
  27. 27. Responsive Web - Advantages • Simple technology • Single project
  28. 28. Responsive Web - Advantages • Simple technology • Single project • Feature parity
  29. 29. Responsive Web - Advantages • Simple technology • Single project • Feature parity • Unified URLs
  30. 30. Responsive Web: Challenges
  31. 31. Responsive Web - Challenges • Contorting your HTML
  32. 32. Responsive Web - Challenges • Contorting your HTML • Responsive images
  33. 33. Responsive Web - Challenges • Contorting your HTML • Responsive images • HTML and CSS bloat
  34. 34. Responsive Web - Challenges • Contorting your HTML • Responsive images • HTML and CSS bloat • Tricky design
  35. 35. Mobile Web Fast loading Custom UI Mobile Optimized Unified URLs Single Project Feature Parity Responsive
  36. 36. The Future It just might work!
  37. 37. “I’m increasingly interested in solutions that bring together the best of both worlds.” -Luke W. on “RESS” [RESS intro]
  38. 38. RESS - Defined • Device detection (but no redirects) • Switching view templates server-side • Using responsive css techniques where appropriate
  39. 39. Server-side MVC frameworks
  40. 40. MVC Model View Controller User
  41. 41. Model Desktop View Controller Tablet View Phone View Phone Tablet Desktop
  42. 42. Client-side MVC
  43. 43. Food for Thought • Do you want the same experience on web & mobile?
  44. 44. Food for Thought • Do you want the same experience on web & mobile? • How critical is performance and load time?
  45. 45. 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
  46. 46. Questions?
  47. 47. Thanks! Derek Watson @dcwca @twg
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×