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

Mobile Website or Responsive Design? The Answer is NEITHER.

on

  • 827 views

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.

Statistics

Views

Total Views
827
Views on SlideShare
677
Embed Views
150

Actions

Likes
1
Downloads
12
Comments
0

4 Embeds 150

http://blog.twg.ca 118
http://svx.dev 18
http://cloud.feedly.com 8
https://twitter.com 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile Website or Responsive Design? The Answer is NEITHER. Mobile Website or Responsive Design? The Answer is NEITHER. Presentation Transcript

  • 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 Blackberry App
  • 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 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 techniques where appropriate
  • 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 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