Layout

Things and Stuff Wiki - An organically evolving personal wiki knowledge base. An on-the-fly taxonomy containing a patchwork trail of topic outlines, descriptions, notes, stubs and breadcrumbs, with links to sites, systems, software, manuals, organisations, people, articles, guides, slides, papers, books, comments, videos, screencasts, webcasts, scratchpads and more. Content is orientated towards mostly free/libre/open, mostly Linux. Quality and age varies drastically. Sometimes old things are first, sometimes last. Use the Table of Contents menu to navigate long pages. Zoom in if text is too small. Dead link? Wayback Machine. I probably need to fix the theme CSS after an update. See also libreav.org. Chat to msg me (not checking tho atm). e

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

This Is Responsive. - Patterns, resources and news for creating responsive web experiences.
- http://bradfrost.github.io/this-is-responsive/patterns.html

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
- Image loading continues when IMG elements or Image JavaScript objects are removed - from comments

http://news.ycombinator.com/item?id=4570193

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

http://paulstamatiou.com/responsive-retina-blog-development-part-1

Examples

Multi-Device Layout Patterns
Media Queries - Many great examples

Templates

http://goldilocksapproach.com/

Viewport

device-width and how not to hate your users - January 24, 2011

Device sizes

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
CSS 3: Media Queries - W3C Recommendation 19 June 2012
- MDN: CSS media queries

Examples

@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" />

Firefox needs spaces before and after "and"

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)" />

http://blog.55minutes.com/2012/04/media-queries-and-browser-zoom/

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.

css3-mediaqueries-js

http://adapt.960.gs/

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
- This is the new 320 and Up
- https://github.com/malarkey/320andup/

@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

https://github.com/johannaruiz/propotional-mqs - modern

Rearrange

http://www.jtudsbury.com/thoughts/rearrange-div-order.php

http://stackoverflow.com/questions/220273/css-positioning-div-above-another-div-when-not-in-that-order-in-the-html

text formatting;

http://www.maratz.com/blog/archives/2011/02/21/remove-html-line-breaks-for-mobile-devices-with-media-query/

@media (max-width: 480px) {
   .your-particular-selector br { display:  none; }
}

text-content; responsive text

Navigation

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/

https://github.com/mattkersley/Responsive-Menu - 2.052 kb

https://github.com/joggink/jquerymobiledropdown

Images

Retina Sprites: Ratios

http://www.sencha.com/learn/how-to-use-src-sencha-io/

https://github.com/estelle/clowncar

JavaScript

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.