A handy way of automating the creation of old-IE stylesheets using Grunt. This follows on from Jake’s work in using preprocessors and conditional comments to send a different stylesheet to IE8 and below—one that doesn’t contain media queries. It’s a clever way of creating mobile-first responsive sites that still provide large-screen styles to older versions of IE.
Some good ideas on the idea of element-level media queries, a feature that developers are crying out for and browser makers are saying is too hard. This post has some thoughts on how to deal with the potential issues.
Looks like Google are offering responsive (or at least adaptive) ad sizes.
A page to demonstrate the conditional CSS technique I documented a while back.
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.
Jake demonstrates his technique for preprocessor-generated stylesheets for older versions of Internet Explorer (while other browsers get the same styles within 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.
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.
Another call for design-based (rather than device-based) breakpoints in responsive sites.
A great step-by-step tutorial from Brad on developing a responsive site with a Content First mindset.
Tim has published the results of a whole bunch of testing he did on how different browsers deal with hidden or replaced images.
Emily walks us through a responsive design case study, stressing the importance using percentages for layout.
A sweet little meditation on the nature of the web and 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.
Using em-based media queries to incrementally bump up the font size for larger viewports.
Jeff documents some of the techniques he’s using to tackle responsive design, with some tips specifically for SASS.
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 detailed overview by Filament Group on progressively enhancing navigation for responsive sites.
Josh goes through the talking points from the recent Responsive Summit he attended. Sounds like it was a great get-together.
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.
Another plea for content-out rather than canvas-in design.
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.
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.
A wonderfully in-depth article from Zoe on all the practical aspects of using media queries for layout.
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.
A look under the hood of the dConstruct website (including some nth-child selectors I threw in there).
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.
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.
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.
A nice little demo of the “content out” approach to responsive design.
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.
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.
This is cute: using media queries to display multiple CSS Zen Garden submissions without refreshing the page — just adjust your browser window.
David rejects a redesign in favour of a bit of responsive tweaking — and very nice it is too.
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.
- A “small screen” user is not necessarily a mobile user.
- A “small screen” device is not necessarily a mobile one.
See also: bandwidth.
Testing ways of only displaying background images on large screens whilst ensuring that they aren’t downloaded for smaller screens.
The redesign of the Do Lectures site is gorgeous (and responsive).
Fellow Brightonians, the brothers Ribot and co., launch an excellently responsive company site.
A curated collection of responsive web designs.
A really nice example of responsive web design from an unexpected source.
A beautiful new responsive design from Mark.
37 Signals document their experiments with responsive web design. Looking good.
An excellent overview of the evolution of the St. Paul's School website from David Smith, noting an increasing emphasis on mobile usage.
A great explanation of the responsive enhancement of this site.
Ethan shares his thoughts on the role of the reference design in the responsive workflow.