Responsive Design


  • There are tons of different devices out there
    • Different screen sizes
    • Different resolutions

Device Stats


  • Fluid Design - No fixed widths (relative units like %)
  • Media Queries

@media only screen and (min-width : 320px) and (max-width : 480px){/** Your Styles **/ }

Mobile first

  • Start building the UI for mobile devices before desktop
  • Start with the minimum amount of information and UI
  • Add information and UI as the screen size increases (progressive enhancement)

Why Mobile first

  • In the U.S. 25% of web browsers are mobile-only
  • There are 1.2 Billion mobile web users worldwide
  • Mobile device sales are increasing

Responsive Design

By Matt Null

Responsive Design

  • 1,242
Loading comments...

More from Matt Null