Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsibly Responsive

Responsibly Responsive

Responsive design is one of the hottest web trends happening, but are we doing it right? We should consider a few problems before we instantly grace this exciting new development technique. Things like performance, readability, and the ability to discern data can all be hindered without a validated and responsible view of responsive designing.

Tony Coconate

May 22, 2013
Tweet

More Decks by Tony Coconate

Other Decks in Technology

Transcript

  1. CSS

  2. .button { // fallback flat color background-color: #ED9C47; // mega-hottnezz

    gradient background-image: gradient(linear, top left, bottom right, from(#EFB67B), to(#DB7306)); }
  3. 320px 480px 600px 768px 900px 1200px iPhone (Portrait) iPhone (Landscape)

    iPad Desktop http://cssmediaqueries.com/target
  4. • Page weight • JavaScript up the kazoo • Making

    “old” browsers feel older • HTTP calls
  5. • When smartphone customers are forced to wait an extra

    second, conversion rates drop by an additional 3.5%. • By the three second mark, 57% of users will have left your site. http://venturebeat.com/2013/04/01/make-the-mobile-web-better-by-not-making-these-4-responsive-design-mistakes
  6. var cssFile = ‘small.css’; if (window.innerWidth > 640) cssFile =

    ‘large.css’; if (window.innerWidth >= 320) cssFile = ‘medium.css’; document.write(‘<link type=”stylesheet” rel=”stylesheet” href=”’ + cssFile + ’”/>’);
  7. • http://www.starbucks.com • http://www.about.com • http://www.latimes.com • http://www.worldwildlife.org • http://www.time.com

    • http://www.sony.com • http://stumbleupon.com • http://smashingmagazine.com • http://www.tonycoconate.com • http://www.greygoose.com • http://www.iwantedrock.com • http://www.bbc.co.uk • http://www.disney.com • http://thenextweb.com • http://harvard.edu • http://www.nd.edu