I agree with David: most pre-rolled grid “solutions” are way too complicated. And in any case, applying a pre-existing grid framework for a new project seems kind of like applying a pre-existing colour palette.
As David points out, it really needn’t be so complicated.
A handy step-by-step guide to all the ways you can use CSS for layout.
Vasilis examines the multitude of factors that could influence an ideal measure.
This is handy: a look at which DOM properties and methods cause layout thrashing (reflows).
An intriguing extrapolation of current design trends: perhaps typographically-strong single-column layouts will become popular out of sheet necessity.
An excerpt from Mark’s forthcoming book, which promises to be magnificent.
Luke and Jason have done some excellent research (and put together some demos) into how the placement of navigation could be optimised for touch screens of all sizes. Turns out that the “standard” convention of having navigation along the top is far from ideal on a touch-enabled device.
A really nice piece on scale, ratio and rhythms in web design.
A great collection of layout, navigation, and interaction patterns for responsive sites, delivered by Brad.
Josh writes about the importance of using rules and systems as tools without being bound by them.
Trent shares his ideas on handling line lengths in fluid, responsive layouts.
Not only is FixMyStreet responsive, it’s using the “display: table-caption” trick I documented for adjustable “content first/navigation second” source order.
Using flexbox to creata a narrow-column stacking order that’s unrelated to the source order.
See now, this is why liquid layouts are the way to go.
When I linked to the Toast framework the other day, I mentioned that I was intrigued by its use of inline-block for layout. Here’s a more detailed analysis of how display: inline-block works, along with some caveats.
This is interesting, not because it’s yet another grid framework (which I never use anyway) but because of the way it’s doing layout: with border-box and inline-block, rather than floats. If you’re only serving up your layout styles to browsers that support media queries (which would discount older versions of IE anyway), this could make a lot of sense.
Andy points one of the potential pitfalls in linearising your content for small screens.
An interesting idea from Chris: instead of linearising content on smaller screens, what if you could interweave it instead? Theoretically, CSS regions makes it possible, regardless of source order.
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.
Inspired by Luke’s documentation of layout patterns in responsive designs, Jason goes into more detail on the pattern of hiding navigation and extra content to the left and right of the viewport on small screens.
Luke catalogues layout patterns in responsive designs.
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.
Stephen gives an excellent run-down of flexbox and how you can use it today.
Some more thoughts on the challenges of combining advertising with responsive design.
A responsively designed comic. Yeah, you heard me right. Responsive. Comic!
Rob documents how he approached his first responsive design.
A wonderfully in-depth article from Zoe on all the practical aspects of using media queries for layout.
The process behind a responsive realignment …and the end result is very nice indeed.
A set of default styles to get started on a mobile-first responsive design.
In this interview Mark discusses the “content out” rather than “canvas in” thinking that informs his new canon.
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.
Some great, considered thoughts from Mark on how CSS Grid Layout could work as part of a larger tradition in design.
On the importance of using fluid grids as part of responsive web design:
We do responsive web design, but we don’t do it for the sake of being trendy. We do it because we believe it’s the way websites should be made. This is an opportunity for us to finally embrace the dynamic medium we build for. The web is not fixed width.
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.
37 Signals document their experiments with responsive web design. Looking good.
A fluid grid that linearises at smaller viewport widths.
Jon gets flexible. This is the mark of a true web designer.
This is the way to do an adaptable liquid layout. Media queries are your friend. Oh, and the content's good too.
Good points, well made.
Gorgeous visual design for an interestingly eclectic site.
A nice rundown of media queries and multiple columns in CSS3.
Superb article by Ethan on calculating percentages for liquid layouts. Read it. Do it.
A handy tool for planning grids. Limited, alas, to pixels.
Weekly gallery of popular websites reconstructed by removing all words and images, replacing them with blocks.
Just for the record, this is a superb example of a bulletproof liquid layout: Simon Wiffen, solo acoustic singer-songwriter from Leeds.
Here's a very handy CSS technique for floating a group of objects edge to edge. I've been in this situation quite a few times in the past.
Here's another CSS framework for grids. It could prove to be very useful for wireframing.
Good typography + stylish grid + liquid layout = WIN!
An interesting CSS technique that uses table-layout instead of float.
Check out the redesigned site for the podcast from Jon and John. Acknowledge the divinity in its gloriously liquid splendour. Smashing work, chaps!
A nice overview of avoiding clutter in web design. It's not just about whitespace; the number of edges and gradients can also add up to an undifferentiated design.
Mark has launched his business site. Lovely grids and typography, as you'd expect.
The front page of The Guardian website has been redesigned with some good use of typography and colour. Shame it's so wide though.
Roger hits the nail on the head: "fixed widths are used for the wrong reason - designer vanity. Come on, you’re designing for the Web, which means it’s your job to let things be flexible when you can."
Jon redesigns too. It's lovely, but a bit wide for my taste.
Molly has written a great article about CSS and urban planning. The ensuing comments are sometimes thought-provoking, but mostly just plain antfucking.
This is something I always meant to do but never got around to: a gallery site for good liquid design.
Using JavaScript to serve up fixed or liquid layout based on browser width.
I've been suckered into another debate on fixed width layouts: "Discussing whether 800 is better than 1024 is like discussing whether Coke is better than Pepsi when all you really want is a nice drink of water."
Roger Johansson details his elastic design.
This is the plain vanilla look.
You can subscribe to the RSS feed of links.