Responsive Design
Why
- There are tons of different devices out there
- Different screen sizes
- Different resolutions
How
- 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
