Responsive Web Design

  1. Responsive web design (RWD) is a collection of techniques to create web pages that adapt to the browser's size
    1. Elements are laid out on fluid, proportion-based grids that use relative units like percentages instead of absolute units like pixels
    2. Images are sized with relative units to adapt to various screen sizes
    3. CSS media queries apply different CSS styles depending on the browser's width
  2. Fluid layout used to make web page fill available width
    1. Percentage width used in CSS instead of px values
      nav {
         width: 20%;
         float: left;
      article {
         width: 60%;
         float: left;
      aside {
         width: 20%;
         float: right;
    2. Flexbox may be used in place of floating elements
      1. Flex container is an element that has display:flex or display:inline-flex and holds flex items
      2. Flex item is an element in a flex container that is positioned and sized accourding to various CSS flexbox properties
      3. Flexbox CSS properties:
        1. justify-content - Flex container property that defines the alignment of the flex items
        2. flex-basis - Flex item property that defines the default size of the item before the remaining space is distributed
        3. flex-direction - Flex container property that indicates which direction the flex items are placed in the flex container
        4. flex-grow - Flex item property that indicates the growth factor of the flex item
        5. flex-shrink - Flex item property that indicates the shrink factor of the flex item
        6. flex - Flex item property that indicates flex-grow, flex-shrink, and flex-basis combined
      4. Example
  3. Media queries used in combination with media type and expression that evaluate to true or false based on various media features. Ex: @media screen and (max-height:300px)
    1. Media types
      1. all - All devices
      2. print - Printers and documents viewed on screen in print preview mode
      3. screen - All devices that don't match "print" or "speech"
      4. speech - Screenreaders
    2. Common media features
      1. device-height - Height of the output device (entire screen)
      2. device-width - Width of the output device (entire screen)
      3. height - Height of the output device's viewport
      4. width - Width of the output device's viewport
      5. orientation - portrait or landscape
    3. Media features may be prefaced with min- or max- to express ≥ and ≤ constraints
    4. Examples
    5. Numbers used in media queries are often called breakpoints
  4. Responsive images are images that scale to fit different layouts in a responsive web page
    1. Low DRP images appear pixelated on high DPR screens, so images with higher DPRs should be used on devices with hight DPRs
    2. SVG images are vector images defined in XML using <svg> tags that scale nicely to any viewport size
    3. <img> srcset attribute used to download image based on minimum DPR
      <!-- dog-small.jpg downloaded on 1 DPR screen,
           dog-medium.jpg on 2 DPR screen, 
      	 dog-large.jpg on 3 or above DPR screen -->
      <img src="dog-small.jpg" alt="Dog"
        srcset="dog-medium.jpg 2x,
      	      dog-large.jpg 3x">		  
    4. <img> sizes attribute used to specify relative size of image needed, and browser uses srcset attribute to download correct image
      <!-- 3X screen 500px wide needs 500px * 50% * 3X = 750px wide image, so dog800.jpg downloaded -->
      <!-- 2X screen 250px wide needs 250px * 100% * 2X = 500px wide image, so dog800.jpg downloaded -->
      <!-- 1X screen 1000px wide needs 1000px * 25% * 1X = 250px wide image, so dog400.jpg downloaded -->
      <!-- Browser that does not know sizes and srcset attributes downloads dog400.jpg -->
      <img src="dog400.jpg" alt="dog"
           sizes="(min-width: 600px) 25vw, 
                  (min-width: 400px) 50vw, 
          srcset="dog200.jpg 200w, 
                  dog400.jpg 400w,
                  dog800.jpg 800w">	  
    5. <picture> element uses <source> elements to specify media queries that are used to determine which image should be downloaded - ideal for art direction
      <!-- Browser 300px wide does not match any media query, so dog-narrow.jpg downloaded -->
      <!-- Browser 400px wide downloads dog.jpg -->
      <!-- Browser 1000px wide downloads dog-wide.jpg -->
      <!-- If no media queries match or browser doesn't know picture tag, dog-narrow.jpg downloaded -->
         <source media="(min-width: 600px)"
         <source media="(min-width: 400px)"
         <img src="dog-narrow.jpg" alt="dog">