Layout

Mobile & Responsive

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

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

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

High DPI

• Retina Sprites: Ratios

Media Types/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

@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

• 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
  • 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;
 }
}

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/

Navigation

• responsive navigation patterns - Feb 24 2012
• Responsive Multi Level Navigation - June 19, 2012

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.

Video

• CSS: Elastic Videos
• Responsive Media
• FitVids: Which class selector to use with embed videos from youtube
• Media: YouTube - Responsive Embeds

• http://drupal.org/project/fitvids - js lib