Responsive Design - first look

  • Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)
  • Can include these features:
    • Fluid layout design for different devices
    • Stripping unimportant elements in response to limited data stream
      • Reduce the amout of http requests
      • Simplified layout for a limited veiwport
    • Convenient objects to facilitate interactivity
  • viewport meta tag:
    • Mobile browsers render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.
    • The "viewport meta tag" to let web developers control the viewport's size and scale.
    • <meta name="viewport" content="width=device-width, initial-scale=1">
  • The main ingredient includes a Media Query in your style sheet
    • This will create a "breakpoint" when the browser size reaches a certain condition
    • @media only...
      • Ex:
        @media only screen and (max-width: 481px) 
        { ... }
        • Translates that any style within the curly brackets will apply under 481px
      • @media (min-width: 481px) and (max-width: 1200px) { ... }
        • Translates that any style within the curly brackets will apply between 800px and 1200px
      • @media only screen and (min-width: 481px)
        • Translates that any style within the curly brackets will apply over 481px
    • Simple example
    • Why would we use min-width instead of max-width?
  • How to handle images based on browser size
      • Demonstration
        <picture>  	<source media="(min-width: 1025px)" srcset="images/space-large.jpg">  	
<source media="(min-width: 801px)" srcset="images/space-medium.jpg">  	
<source media="(min-width: 601px)" srcset="images/space-small.jpg">  	
<img src="images/space-small.jpg"><!--fallback-->
        </picture>