A List Apart


Topic: Layout & Grids

  • Whitespace

    by Mark Boulton · Issue 230 ·

    So you think you know all about whitespace. You may be surprised. Mark Boulton, type expert to the stars, shows how micro and macro whitespace push brands upscale (or down) and enhance legibility in print and online.

  • Sliced and Diced Sandbags

    by Rob Swan · Issue 222 ·

    Wouldn't it be great if there were a way to get text to flow around an irregularly shaped image? Wouldn't it be even better if we could automate the process? Have no fear: Rob Swan is here to show us the way.

  • Introducing the CSS3 Multi-Column Module

    by Cédric Savarese · Issue 204 ·

    Cédric Savarese would like you to meet the CSS3 multi-column module. It may not have extensive browser support yet, but this semantically sound method of dividing content into columns may be more relevant than you think.

  • In Search of the Holy Grail

    by Matthew Levine · Issue 211 ·

    Just in case you might want a three-column layout that doesn't require the usual sacrifices, we thought we'd share this technique. Not that you'd want that or anything.

  • Design Choices Can Cripple a Website

    by Nick Usborne · Issue 207 ·

    Do you test your designs? If not, Nick Usborne wants you to take responsibility for your design choices and the very quantifiable effect they can have on websites that are built for business.

  • CSS Swag: Multi-Column Lists

    by Paul Novitski · Issue 204 ·

    Multi-column lists: can't live with ’em, can't achieve perfect bliss without ’em. Paul Novitski offers a staggering six possible methods for accomplishing this commonly requested layout trick. Examine your options and choose wisely.

  • ALA’s New Print Styles

    by Eric Meyer · Issue 203 ·

    Print away, you fiends! Eric Meyer presents the ALA 4.0 print styles and discusses the challenge of translating a complex screen layout into a well-designed and useful printed page.

  • Home Page Goals

    by Derek Powazek · Issue 211 ·

    Home pages may get plenty of design attention, but that doesn't mean they don't need improvement.

  • Pocket-Sized Design: Taking Your Website to the Small Screen

    by Jorunn D. Newth, Elika Etemad · Issue 187 ·

    Among the many websites that are out there, few are standards-compliant. Among those few, only a handful sport style sheets adjusted to the needs of handheld devices. Of those which do offer styling for handhelds, not all will fit the smallest, lowest-resolution screens without presenting the user with the ultimate handheld horror: namely, horizontal scrolling. This article presents a set of general suggestions for creating a handheld-friendly style sheet that works well even on handheld screens no wider than 120px.

  • Thinking Outside the Grid

    by Molly E. Holzschlag · Issue 209 ·

    CSS has broken the manacles that kept us chained to grid-based design...so why do so few sites deviate from the grid? Molly E. Holzschlag can tell us that the answer has something to do with airplanes, urban planning, and British cab drivers.

  • CSS Design: Taming Lists

    by Mark Newhouse · Issue 151 ·

    Do you crave the disciplined order of proper (X)HTML lists but long for control over their presentation? You can put a stop to their wild ways and bad behavior. Mark Newhouse shows you how to tame those lists by making them submit to your CSS while maintaining logical HTML structure.

  • CSS Design: Going to Print

    by Eric Meyer · Issue 144 ·

    Say no to “printer-friendly” versions and yes to printer-specific style sheets. CSS expert Eric Meyer shows how to conceive and design print style sheets that automatically format web content for off-screen delivery. Includes tips on hiding inappropriate content, styling text for the printer, and displaying the URL of every link on the page.

  • Cross-Column Pull-Outs

    by Daniel M. Frommelt · Issue 190 ·

    Print designers like to wrap text around images that sit between columns. Now you can, too. Daniel Frommelt takes us where no web layout has gone before.

  • Cross-Column Pull-Out Part Two: Custom Silhouettes

    by Daniel M. Frommelt · Issue 191 ·

    The cross-column pull-out gave us a new technique for marking up a layout with a pull-out positioned between columns. Now we examine a variation of the technique for wrapping around the edges of a non-rectangular image positioned between columns.

  • Hybrid CSS Dropdowns

    by Eric Shepherd · Issue 197 ·

    Yup. It’s yet another CSS dropdown article — but one that resolves many problems associated with common dropdown methods and degrades beautifully. Hybrid CSS dropdowns allow access to all pages, keep the user aware of where she is within the site, and are clean and light to boot. It’s a tasty little vitamin pill, so quit sighing and try it.

  • Big, Stark & Chunky

    by Joe Clark · Issue 191 ·

    You’ve designed for the screen and made provision for blind, handheld, and PDA browser users. But what about low-vision people? Powered by CSS, “zoom” layouts convert wide, multicolumn web pages into low-vision-friendly, single column designs. Accessibility maven Joe Clark explores the rationale and methods behind zoom layouts. Board the zoom train now!

  • Bulleted Lists: Multi-Layered Fudge

    by Nandini Doreswamy · Issue 195 ·

    A passion for web standards can become a broken heart when effects that are easy to achieve with table layouts seem to defy the earnest CSS- and markup-conscious designer. Fortunately, new ALA author Nandini Doreswamy loves a challenge. Here she shows how to create two columns of bulleted lists in the flow of text.

  • Spruced-Up Site Maps

    by Kim Siever · Issue 197 ·

    The clean-n-simple site map gets a nice haircut and and a shoe-shine as Kim Siever shows us how to hook custom bullet styles to troublesome nested lists.

  • Flexible Layouts with CSS Positioning

    by Dug Falby · Issue 155 ·

    Want to spend less time on CSS hacking and more time on design? Need your site to look as good on a 160x160 PDA screen as it does on a 1024x768 PC monitor? In Flexible Layouts with CSS Positioning, designer Dug Falby shares two techniques for practical grid-building.

  • Practical CSS Layout Tips, Tricks, & Techniques

    by Mark Newhouse · Issue 119 ·

    Think you need HTML tables to craft complex liquid layouts? Not so! In this tip-packed tutorial, Mark Newhouse shares advanced yet practical CSS techniques any working web designer can use.