Responsive Web Design Best Practices

Responsive Web Design Best Practices

1. Primary Concepts

   • Fluid Grids
     • Structure content in a predictable and consistent manner
   • Flexible Images
     • Vsual content or media that adjusts to fit a user’s screen size
   • Media Queries
     • Styles within the media attribute are applied

2. Advantages

   • Increases audience, sales and conversion rates
   • Forces you to prioritize content
   • Future-proof
     • Screen heignt proportional to screen widht
     • Layouts benefit from relative units
     • Vector-based arts scales
     • Blocks of content
   • Improves your SEO
   • Detail oriented

3. To elaborate

   • Sensible layouts
   • Imagery that doesn´t degrade
   • User needs
   • Prioritizing content
   • Providing Freedom

4. Content First

   • Your navigation, functionality, art, imagery, typography, and layout should all be constructed with the message of your content at the forefront of your thinking.

5. Personalization

   • Users Control
     • Pinch & zoom
     • Show/hide
     • Tap to close
     • Adjust brightness

6. Layouts

   • Mostly fluid
     • Pattern reflows content dynamically within a fixed parent container instead of the browser’s viewport.
   • Column dorps
     • Pattern turns a stack of columns on its side
   • Layout shifter
     • Many breakpoints
       • The different minimum and maximum widths that media queries use.
   • Tiny tweaks
     • Content, margins and padding all subtly increase with viewport size while using the same layout.
   • Off-Canvas
     • Pattern pushes secondary content out of sight

7. Touch Targets

   • Using the cornets
   • Tap targets
   • Don´t place items too closely
   • Forget hove states for smaler viewports
   • Natural interactions

8. Feedback

   • Animation
   • Loading
   • Modals
   • Haptic feedback

9. Clarity

   • Clear labels
   • Search as a backup option
     • Conceptually
     • Practically
     • Technically
     • Structurally
   • Alternatives to hamburguer menu
   • Navigation
     • Patterns
       • Shrinking sticky bar
       • Anchor to the header:
       • Off-canvas navigation drawer:
       • Navigation as content

10. Typography

    • Reading Distance
    • Establishing Responsive Text Size
      • Reference pixels
      • Ems
      • Rems
        • Recommended
    • Line Heignt
      • trial and error
    • Line lenght
      • Ideal: 45-75 characters

11. Images

    • JPG
      • lossy compression
        • Photos
    • PNG-8bit
      • lossless compression
    • PNG-24bit
      • no compression
    • GIF
      • compression less efficient
    • SVG
      • lines instead of pixels
    • Code Considerations
      • Essential CSS properties
      • Future HTML image elements
      • Browser rendering

12. Putting it all Together

    • Collaborate from the beginning
      • Mobile First Process
        • Progressive enhancement
          • Mobile desing should be done first
        • Gracegul degradation
          • Build the all-inclusive design right from the start, the core and supplementary elements merge and become harder to distinguish and separate.
        • Mobile First-Content First
        • 1.-Content Inventory
          • 2.-Visual Hierarchy
            • 3.-Design with the smallest breakpoinst and then scale up
              • 4.-Enlarge touch target
                • 5.-Dont coun on hovers
                  • 6.-Think app
                    • 7.-Avoid large graphics
                      • 8.- Test