A A A
|

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. 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
      1. Breakpoints often set for mobile, tablet, and/or desktops
      2. Must use viewport meta tag for breakpoints to work!
      3. Example using grid layout with 2 breakpoints to alter design for tablet and desktop screens 
        <!doctype html>
<html lang="en">
	<title>Responsive web page
	
	
	<body>
		
        Header
        
		
		
        Main
        
		
		
        Footer
        
	</body>
</html>
  3. 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 
      
Fox
      Fox
    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, 
            100vw"
    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 -->
<picture>
   <source media="(min-width: 600px)"
           srcset="dog-wide.jpg">
   <source media="(min-width: 400px)"
           srcset="dog.jpg">
   <img src="dog-narrow.jpg" alt="dog">
</picture>