Adactio: Links

IE10 Snap Mode and Responsive Design - TimKadlec.com

Useful advice from Tim on preparing your responsive site for IE10’s new “snap mode”. Don’t worry: it doesn’t involve adding any proprietary crap …quite the opposite, in fact.

IE-friendly mobile-first CSS with Sass 3.2

Jake demonstrates his technique for preprocessor-generated stylesheets for older versions of Internet Explorer (while other browsers get the same styles within media queries).

Issue #408: Generate a separate css with flattened media queries

This is an excellent idea from Jake: use a preprocessor to automatically spit out a stylesheet for older versions of IE that includes desktop styles (garnered from the declarations within media queries).

If you’re a dab hand with Ruby and you’d like to see this in SASS, you can help.

Springload: OnMediaQuery - Responsive Javascript

This is nice: the solution I blogged about for conditional CSS (reading media queries from JavaScript) all wrapped up in a nice small reusable bundle.

Official Google Webmaster Central Blog: Responsive design – harnessing the power of media queries

Advice on creating responsive designs from Google. It’s not exactly the best tutorial out there (confusing breakpoints with device widths) but it’s great to see the big guns getting involved.

Deciding what Responsive Breakpoints to use | Tangled in Design

Another call for design-based (rather than device-based) breakpoints in responsive sites.

Creating a Mobile-First Responsive Web Design - HTML5 Rocks

A great step-by-step tutorial from Brad on developing a responsive site with a Content First mindset.

Breakpoint Checking in Javascript with CSS User Values | Sparkbox

A smart response to the little conundrum I posted on my blog yesterday about detecting media-query quarantined CSS properties from JavaScript.

Media Query & Asset Downloading Results | TimKadlec.com

Tim has published the results of a whole bunch of testing he did on how different browsers deal with hidden or replaced images.

Script Junkie | Flexibility: A Foundation for Responsive Design

Emily walks us through a responsive design case study, stressing the importance using percentages for layout.

Jordan Moore | Web Design, Northern Ireland, Bangor, Freelance

A sweet little meditation on the nature of the web and responsive design.

Abstract Sequential - Print Styles Are Responsive Design

An excellent piece by Stephanie on how to approach print stylesheets. I’ve always maintained that Print First can be as valid as Mobile First in getting you to focus on what content really matters.

Scaling with EM units

Using em-based media queries to incrementally bump up the font size for larger viewports.

How I’m implementing Responsive Web Design – JeffCroft.com

Jeff documents some of the techniques he’s using to tackle responsive design, with some tips specifically for SASS.

Wilson Miner

Wilson has turned his site into a single-serving page that’s doing some interesting things with media queries (using height as well as width).

A Responsive Design Approach for Navigation, Part 1 | Filament Group, Inc., Boston, MA

A detailed overview by Filament Group on progressively enhancing navigation for responsive sites.

JoshEmerson.co.uk · Blog · The Responsive Process

Josh goes through the talking points from the recent Responsive Summit he attended. Sounds like it was a great get-together.

Responsive Design: Why You’re Doing It Wrong | Design Shack

A rallying cry for a content-focused—rather than device-focused—approach to responsive design. Despite the awful title and occasionally adversarial tone, this article is making a very good point about being future friendly.

Choosing device sizes to support for your responsive designs | Matt Wilcox .net

Another plea for content-out rather than canvas-in design.

Leaving Old Internet Explorer Behind — Joni Korpi

Joni points out a great advantage to the mobile-first approach if you choose not to polyfill for legacy versions of IE: you can go crazy with all sorts of CSS3 goodies in the stylesheet you pull in with media queries.

“Mobile first” CSS and getting Sass to help with legacy IE – Nicolas Gallagher

If you use Sass, this could be a really handy technique for handling IE<9 support with mobile-first responsive designs.

#816: Revert mobile-first media queries and remove respond.js - Issues - h5bp/html5-boilerplate - GitHub

This thread on whether HTML5 Boilerplate should include Respond.js by default (and whether the CSS should take a small-screen first approach) nicely summarises the current landscape for web devs: chaotic, confusing …and very, very exciting.

zomigi.com » Essential considerations for crafting quality media queries

A wonderfully in-depth article from Zoe on all the practical aspects of using media queries for layout.

Responsive images without Javascript - Notebook

This isn’t recommended as a robust means of delivering responsive images, but it’s still quite clever: using media queries to pass information to the server about the viewport size.

dConstruct and Responsive Design - Ubelly

A look under the hood of the dConstruct website (including some nth-child selectors I threw in there).

Are Media Queries the answer to the Fold? « Boagworld

In a break with tradition, Paul posts something sensible and smart (I kid, I kid): using media queries to detect height rather than just width and adjust content accordingly to make sure that your most important content is visible in the viewport.

Techniques For Gracefully Degrading Media Queries - Smashing Magazine

There are some inaccuracies and misrepresentations in here, but on the whole this is a pretty good round-up of your options when dealing with responsive design in older browsers.

Responsive Containers - Blog | Andy Hume

This is an excellent idea from Andy: selector queries. Like media queries but at the component level. Quite often it isn’t the width of the viewport that matters, it’s the width of the containing element for whatever you’re trying to style.

The Goldilocks Approach to Responsive Web Design

A nice little demo of the “content out” approach to responsive design.

Fit To Scale | Trent Walton

More documentation of a responsive redesign, this time from Trent Walton. Be sure to check out the FitText jQuery plug-in that was created as a result.

Design for the changing web: Our response :: Studio :: Headshift

Documenting the process of switching to a responsive design. I think there’s always insight to be gained from seeing how your peers are approaching these challenges.

css Zen Garden: All-In-One

This is cute: using media queries to display multiple CSS Zen Garden submissions without refreshing the page — just adjust your browser window.

David Emery Online: Response

David rejects a redesign in favour of a bit of responsive tweaking — and very nice it is too.

Developing the OAuth user experience at Twitter

Ben documents the improvements in Twitter’s OAuth flow. Maybe this will help to stop people blindly giving permission to dodgy third-party sites to update their Twitter stream.

It’s the Little Things - “Mobile” versus “Small Screen”

A “small screen” user is not necessarily a mobile user.
A “small screen” device is not necessarily a mobile one.

Tags: mediaqueries

More information

About this site

Customise

Search

Subscribe