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