This document discusses responsive web design. It begins by explaining that current grid/layout thinking is based on pages, but with responsive design there is no page. It then discusses how responsive design works by using fluid grids, flexible images and media, and media queries to adapt the layout based on screen size. It provides examples of how to implement a fluid grid and make images flexible. Finally, it gives some tips for responsive design such as using relative sizing and media queries to define breakpoints for different screen widths.
12. 12
Tips
Fluid Grids
§ Remember: It’s relative to the parent element
§ Beware of subpixel rendering
Flexible Images/Media
§ Use AlphaImageLoader to improve image quality in IE-browsers
§ Use fitvids.js for flexible video
§ Serve different image sizes dependent on resolution
Media Queries
§ Go mobile content first
§ Define your breakpoints early on and don’t overdo it
§ IE6-8? Use respond.js (or don’t bother)
§ Remember your <meta viewport ..> tag
14. 14
The Links
The article: http://www.alistapart.com/articles/responsive-web-design/
The book: http://www.abookapart.com/products/responsive-web-design
The tweets: @beep @rwd @adactio @markboulton