Your SlideShare is downloading. ×
Should I Build a Separate Mobile Site or a Responsive Site? Neither! with Derek Watson
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Should I Build a Separate Mobile Site or a Responsive Site? Neither! with Derek Watson

1,792
views

Published on

Presented at SCREENS 2013 in Toronto. …

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.

Published in: Technology, Design

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,792
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
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

×