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

Responsive Web Design for Non-Designers

Responsive Web Design for Non-Designers

Note: There was extensive use of video in this presentation that is lost on Speaker Deck

A responsive website or application provides an optimal experience across a wide range of mobile and desktop devices. In this talk, we'll start with the basics of responsive design and cover the various server side and client side approaches used to improve the usability of your web applications and content.

Andrew Cassell

May 21, 2015
Tweet

More Decks by Andrew Cassell

Other Decks in Design

Transcript

  1. If you think your design sucks. That just means you

    are becoming a better designer.
  2. 48

  3. 49

  4. 50

  5. 52

  6. 53

  7. 54

  8. 55

  9. 61

  10. Consistent Urls •No separate mobile site •The URL doesn’t change

    dependent on the device accessing it •Shared links always work
  11. Consistent Urls •No separate mobile site •The URL doesn’t change

    dependent on the device accessing it •Shared links always work
  12. “Since humans are more pliable than computers, it can be

    easier to make a human fit the computer’s limitations than to design the computer to fit the human’s needs. When that happens, the human becomes a prisoner trapped by the computer rather than liberated by it.” - Karla Jennings
  13. Good RWD? •Legible and easy to read •No panning •No

    zooming or pinching •Feels natural •Loads Fast
  14. mobile first design forces you to focus on only the

    most important data and actions in an application
  15. a /* small */
 #logo
 {
 width: 200px;
 }
 


    /* medium */
 @media (min-width: 700px)
 {
 #logo
 {
 width: 300px;
 }
 }
 
 /* large */
 @media (min-width: 1200px)
 {
 #logo
 {
 width: 400px;
 }
 }
  16. <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg

    1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture> <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A rad wolf">
  17. $server = League\Glide \ServerFactory::create([ 'source' => 'path/to/source/folder', 'cache' => 'path/to/cache/folder',

    ]); $server->outputImage('example.jpg', ['w' => $_GET[‘w’], 'h' => $_GET[‘h’]]); Using Glide For Responsive Images