Notes at Breaking Development :focus on responsive
Minneapolis, MN
6/4/2012
What is responsive design?
Responsive Web Design (RWD) consists of three things
- Flexible grids
- target / context = result
- multiplied by 100 to get a percentage
- don’t round, let it go.
- best practice provide formula /* 280/960 */
- Think Proportionally
- Flexible media
- max-width: 100%
- Media queries
- max-width vs min-width
- max-width
- max-width = desktop down
- good for first timers
- good for “legacy” sites
- But what about really large monitors?
- min-width
- Mobile first
- start with a small base and build on it.
- progressive enhancement, rebranded™
- Data face: In 2011, more smartphones were sold then PC’s.
Make a responsive grid, flexible grid + media queries.
respond.js – polyfill to give IE 6,7,8 the ability to understand media queries.
Typography
- Recommends em’s
- rem’s are not cross browser
- font size / base size = result
- build off of the body font size
- typically 16px = 100%
- Change as needed in media queries
- Style tiles and Style guides – page on web site that describes everything on your site.