Tags: layout

Solved By Flexbox — Cleaner, hack-free CSS

Documenting common layout issues that can be solved with Flexbox. I like the fact that some of these can be used as enhancements e.g. sticky footer, input add-ons …the fallback in older browsers is perfectly acceptable.

Full-width pinned layouts with flexbox

Zoe uses one little case study to contrast two different CSS techniques: display-table and flexbox. Flexbox definitely comes out on top when it comes to true source-order independence.

Layout in Flipboard for Web and Windows — Flipboard Engineering

A fascinating look at how Flipboard combines art direction and algorithms to generate layouts.

intention.js

This smells bad: adding a JavaScript dependency for responsive layouts.

I disapprove.

The State Of Responsive Web Design on Smashing Mobile

A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.

On Responsive Layout and Grids by David Bushell

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.

Learn CSS layout

A handy step-by-step guide to all the ways you can use CSS for layout.

Logical breakpoints for your responsive design

Vasilis examines the multitude of factors that could influence an ideal measure.

On layout and web performance by Kelly Norton

This is handy: a look at which DOM properties and methods cause layout thrashing (reflows).

The responsive web will be 99.9% typography

An intriguing extrapolation of current design trends: perhaps typographically-strong single-column layouts will become popular out of sheet necessity.

A New Canon | Journal | The Personal Disquiet of Mark Boulton

An excerpt from Mark’s forthcoming book, which promises to be magnificent.

LukeW | Responsive Navigation: Optimizing for Touch Across Devices

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.

Rhythm And Proportion In Grids And Type - Vanseo Design

A really nice piece on scale, ratio and rhythms in web design.

Responsive Web Design Patterns | This Is Responsive

A great collection of layout, navigation, and interaction patterns for responsive sites, delivered by Brad.

Grids, Design Guidelines, Broken Rules, and the Streets of New York City (Global Moxie)

Josh writes about the importance of using rules and systems as tools without being bound by them.

Fluid Type | Trent Walton

Trent shares his ideas on handling line lengths in fluid, responsive layouts.

FixMyStreet

Not only is FixMyStreet responsive, it’s using the “display: table-caption” trick I documented for adjustable “content first/navigation second” source order.

Jordan Moore | Building With Content Choreography

Using flexbox to creata a narrow-column stacking order that’s unrelated to the source order.

Resizable Displays | Fluid Interfaces

See now, this is why liquid layouts are the way to go.

What’s the Deal With Display: Inline-Block? | Design Shack

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.

Toast | A simple CSS framework

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.

Paying attention to content hierarchy across screen sizes | Stuff & Nonsense

Andy points one of the potential pitfalls in linearising your content for small screens.

Content Folding | CSS-Tricks

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.

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.

Off Canvas

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.

LukeW | Multi-Device Layout Patterns

Luke catalogues layout patterns in responsive designs.

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.

Learn You a Flexbox for Great Good! | The Haystack.

Stephen gives an excellent run-down of flexbox and how you can use it today.

ART=WORK · Responsive Advertising

Some more thoughts on the challenges of combining advertising with responsive design.

Sly Mongoose: A Responsive Digital Comic Proof-of-Concept

A responsively designed comic. Yeah, you heard me right. Responsive. Comic!

First Responder | Rob Weychert

Rob documents how he approached his first responsive design.

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.

Caleb Ogden

The process behind a responsive realignment …and the end result is very nice indeed.

Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit

A set of default styles to get started on a mobile-first responsive design.

Mark Boulton on layouts and grid systems | Interview | .net magazine

In this interview Mark discusses the “content out” rather than “canvas in” thinking that informs his new canon.

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.

Rethinking CSS Grids| Mark Boulton

Some great, considered thoughts from Mark on how CSS Grid Layout could work as part of a larger tradition in design.

You Say Responsive, I Say Adaptive | Sparkbox

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.

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.

Experimenting with responsive design in Iterations - (37signals)

37 Signals document their experiments with responsive web design. Looking good.

The 1140px CSS Grid System/Framework · Fluid down to mobile

A fluid grid that linearises at smaller viewport widths.

Finally ° a fluid Hicksdesign ° The Hickensian ° Hicksdesign

Jon gets flexible. This is the mark of a true web designer.

Talking Animal blug

This is the way to do an adaptable liquid layout. Media queries are your friend. Oh, and the content's good too.

In Defense of Lorem Ipsum « Karen McGrane

Good points, well made.

Radio - The New York Moon

Gorgeous visual design for an interestingly eclectic site.

CSS3 – a big storm is coming | Reinhold Weber

A nice rundown of media queries and multiple columns in CSS3.

A List Apart: Articles: Fluid Grids

Superb article by Ethan on calculating percentages for liquid layouts. Read it. Do it.

gridr buildrrr

A handy tool for planning grids. Limited, alas, to pixels.

web.without.words

Weekly gallery of popular websites reconstructed by removing all words and images, replacing them with blocks.

Simon Wiffen - Acoustic Singer Songwriter from Leeds

Just for the record, this is a superb example of a bulletproof liquid layout: Simon Wiffen, solo acoustic singer-songwriter from Leeds.

Edge to edge alignment with CSS | Matt Wilcox .net

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.

960 Grid System

Here's another CSS framework for grids. It could prove to be very useful for wireframing.

kropp

Good typography + stylish grid + liquid layout = WIN!

How to create CSS layouts without using FLOAT

An interesting CSS technique that uses table-layout instead of float.

The Rissington Podcast | Like Gardeners Question Time, but for geeks

Check out the redesigned site for the podcast from Jon and John. Acknowledge the divinity in its gloriously liquid splendour. Smashing work, chaps!

Design View / Andy Rutledge - quiet structure

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 Boulton Design : +44 (0)845 603 2399

Mark has launched his business site. Lovely grids and typography, as you'd expect.

Guardian Unlimited

The front page of The Guardian website has been redesigned with some good use of typography and colour. Shame it's so wide though.

Resolution vs. browser size vs. fixed or adaptive width | 456 Berea Street

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."

hicksdesign: design for print and new media Ο°

Jon redesigns too. It's lovely, but a bit wide for my taste.

A List Apart: Articles: Thinking Outside the Grid

Molly has written a great article about CSS and urban planning. The ensuing comments are sometimes thought-provoking, but mostly just plain antfucking.

Liquid Designs

This is something I always meant to do but never got around to: a gallery site for good liquid design.

Progressive Layout

Using JavaScript to serve up fixed or liquid layout based on browser width.

CSS Beauty | Designer in Action

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."

About fluid and fixed width layouts

Roger Johansson details his elastic design.