Save 10% off ANY FITC event with discount code 'slideshare' See our upcoming events at www.fitc.ca OVERVIEW 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.

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

15. Mobile
Websites:
Advantages!

16. Mobile Websites: Advantages
• Completely custom UI

17. Mobile Websites: Advantages
• Completely custom UI
• Lightweight

18. Mobile Websites: Advantages
• Completely custom UI
• Lightweight
• Target mobile browsers only

19. Mobile Websites:
Challenges

20. Mobile Websites: Challenges
• Separate projects, duplicate code

21. Mobile Websites: Challenges
• Separate projects, duplicate code
• Feature disparity

22. Mobile Websites: Challenges
• Separate projects, duplicate code
• Feature disparity
• URL fragmentation

23. The Present
Responsive Web

24. 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

27. “2013 Is The Year of
Responsive Web Design”
- Mashable.com (in 2012)

28. Responsive
Web:
Advantages!

29. Responsive Web - Advantages
• Simple technology

30. Responsive Web - Advantages
• Simple technology
• Single project

31. Responsive Web - Advantages
• Simple technology
• Single project
• Feature parity

32. Responsive Web - Advantages
• Simple technology
• Single project
• Feature parity
• Unified URLs

33. Responsive
Web:
Challenges

34. Responsive Web - Challenges
• Contorting your HTML

35. Responsive Web - Challenges
• Contorting your HTML
• Responsive images

36. Responsive Web - Challenges
• Contorting your HTML
• Responsive images
• HTML and CSS bloat

37. Responsive Web - Challenges
• Contorting your HTML
• Responsive images
• HTML and CSS bloat
• Tricky design

38. Mobile Web
Fast loading
Custom UI
Mobile Optimized
Unified URLs
Single Project
Feature Parity
Responsive

39. The Future
It just might work!

40. “I’m increasingly
interested in solutions
that bring together the
best of both worlds.”
-Luke W. on “RESS”
[RESS intro]

41. RESS - Defined
• Device detection (but no redirects)
• Switching view templates server-side
• Using responsive css techniques where appropriate

42. Server-side MVC frameworks

43. MVC
Model
View
Controller
User

44. Model
Desktop View
Controller
Tablet View
Phone View
Phone
Tablet
Desktop

48. Client-side MVC

49. Food for Thought
• Do you want the same experience on web & mobile?

50. Food for Thought
• Do you want the same experience on web & mobile?
• How critical is performance and load time?

51. 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

52. Questions?

53. Thanks!
Derek Watson
@dcwca @twg