Your SlideShare is downloading. ×
  • Like
Mobile Website or Responsive Design? The Answer is NEITHER.
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Mobile Website or Responsive Design? The Answer is NEITHER.

  • 642 views
Published

By Derek Watson, Senior Developer at The Working Group …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
642
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
12
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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