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

The good, the bad and the ugly with responsive ...

14islands
February 26, 2015

The good, the bad and the ugly with responsive web design

Responsive Web Design has been around for a while and it’s worth taking a step back to see what a successful responsive project actually requires.

14islands

February 26, 2015
Tweet

More Decks by 14islands

Other Decks in Technology

Transcript

  1. There are more devices connected than people in the world

    today. http://www.bizjournals.com/prnewswire/press_releases/2014/10/06/NY30877
  2. “ It’s about designing across an ever-widening array of devices,

    browsers, and whatever-the- heck-comes-next. - Ethan Marcotte
  3. “ Get your content ready to go anywhere because it’s

    going to go everywhere. - http://bradfrost.com/blog/web/for-a-future-friendly-web/ - Brad Frost
  4. “ Shoot me now…responsive design has seemingly become confused with

    an opportunity to reduce performance rather than improve it. - Stephanie Rieger - https://twitter.com/stephanierieger/status/245240465572642816
  5. “ 85% of mobile users expect pages to load as

    fast or faster than they load on the desktop. - http://blog.radware.com/applicationdelivery/applicationaccelerationoptimization/2014/01/55-web-performance-stats-youll-want-to-know/
  6. “ There’s three topics I avoid discussing: religion, politics, and

    RESPONSIVE IMAGES. http://bradfrost.com/blog/post/responsive-images/ - Brad Frost
  7. now it’s fluid! .canvas-selector { position: absolute; width: 100%; height:

    100%; } .canvas-parent-selector { padding-bottom: 100%; /*1:1*/ height: 0; }
  8. .canvas-selector { position: absolute; width: 100%; height: 100%; } .canvas-parent-selector

    { padding-bottom: 100%; /*1:1*/ height: 0; } and with ratio
  9. @media (min-width: 1000px) and (max-width: 1200px) { .scene { transform:

    scale(0.8); width: 125%; /* 100/80 = 1.25 * 100 */ height: 125%; /* 100/80 = 1.25 * 100 */ } }