Layout
and responsive, etc.
Basics
- Responsive Web Design - A List Apart, MAY 25, 2010
- Responsive Web Design: Layouts and Media Queries - difference between basic fluid, adaptive and responsive layout, April 23rd, 2012
- Mobile First - Luke Wroblewski, Nov 3 2009
- How to make your CSS *really* mobile-friendly - 12.10.2010
- “The absence of support for @media queries is in fact the first @media query”
- Optimizing content for different browsers: the RIGHT way - w3c wiki
- CSS Media Query for Mobile is Fool’s Gold - August 3, 2010
- http://adactio.com/journal/4494/
- http://www.html5rocks.com/en/mobile/responsivedesign/
- http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
to review;
- Effective Design for Multiple Screen Sizes - effective design strategies to target a diverse range of mobile devices and screen sizes. to review
- Design Process in the Responsive Age - A UX perspective
- Supporting high-dpi pixel-dense "Retina" Displays like iPhones or the iPad 3 with CSS or IMG
- A non-responsive approach to building cross-device webapps
Examples
- Responsive Design, Responsively Illustrated
- Multi-Device Layout Patterns
- Media Queries - Many great examples
Templates
Viewport
- Safari Developer Library: Configuring the Viewport
- MDN: Using the viewport meta tag to control layout on mobile browsers
- tuts+: Quick Tip: Don’t Forget the Viewport Meta Tag
- device-width and how not to hate your users - January 24, 2011
Media Types and Queries
- CSS 2: Media types
- Recognized media types
- e.g., all, screen, print, projection, etc.
- https://developer.mozilla.org/en/CSS/@media
- Recognized media types
- CSS 3: Media Queries - W3C Recommendation 19 June 2012
- MDN: CSS media queries
@media <media type (expressions)> { /* media-specific rules */ } @media screen and (min-width: 500px) and (max-width: 800px) { ... }
or
<link rel="stylesheet" media="<media type (expressions)>" href="specific.css" />
- Simple responsive design test page - html file and bookmarklet iframe based viewport size simulation
newer
<link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" /> <link rel="stylesheet" type="text/css" href="enhanced.css" media="screen and (min-width: 40.5em)" />
Poly, etc.
- Respond.js - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
- device.js - a starting point for doing semantic, media query-based device detection without needing special server-side configuration, saving the time and effort required to do user agent string parsing.
Articles
- CSS3 Media Queries - web designer wall , Aug 18, 2010
- CSS Media Queries & Using Available Space - css tricks, Jul 6 2010
- How To Use CSS3 Media Queries To Create a Mobile Version of Your Website - July 19th, 2010
- The EMs have it: Proportional Media Queries FTW! - March 28, 2012
- CSS3 Animated Media Queries - April 2012
320 and Up
- 320 and Up - The ‘tiny screen first’ responsive boilerplate
@media only screen and (min-width: 480px) { /* 480 =================================================== */ } @media only screen and (min-width: 600px) { /* 600 =================================================== */ } @media only screen and (min-width: 768px) { /* 768 =================================================== */ } @media only screen and (min-width: 992px) { /* 992 =================================================== */ } @media only screen and (min-width: 1382px) { /* 1382 =================================================== */ body { max-width: 1440px; } }
Need to confirm 320andup Sass to multifile so mobile doesn't get desktop sized styles.
Other
- http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/ - deprecated method
- http://internet-alacarte.com/media-queries-template-for-browser-window-adjustments/ - basic example
- http://nmsdvid.com/snippets/
- http://www.getskeleton.com/
Rearrange
- responsive navigation patterns - Feb 24 2012
- Responsive Multi Level Navigation - June 19, 2012
select menu;
- TinyNav.js is a tiny jQuery plugin (362 bytes minified and gzipped) that converts ul and ol navigations to a select dropdowns for small screen. It also automatically selects the current page and adds selected="selected" for that item. This isn't the first plugin to do this and it doesn't provide a lot of options, but it might be the smallest (file size).
- http://css-tricks.com/blog/convert-menu-to-dropdown/
Images
- http://css-tricks.com/on-responsive-images/
- http://www.brucelawson.co.uk/2012/html5-urgently-needs-adaptive-images-mechanism/
- http://adaptive-images.com/
Shim
- css3-mediaqueries.js by Wouter van der Graaf is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support.
Performance
Video
- http://drupal.org/project/fitvids - js lib
Tools
- http://respon.si/ - draggable