A List Apart

Menu

Topic: Layout & Grids

  • Sliced and Diced Sandbags

    ·

    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.

  • Where Am I?

    ·

    It’s 2006 and we’re still messing up global navigation. Derek Powazek gets back to basics and offers a few simple guidelines for getting it right.

  • Home Page Goals

    ·

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

  • In Search of the Holy Grail

    ·

    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.

  • Thinking Outside the Grid

    ·

    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.

  • Design Choices Can Cripple a Website

    ·

    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

    ·

    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.

  • Introducing the CSS3 Multi-Column Module

    ·

    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.

  • ALA’s New Print Styles

    ·

    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.

  • Spruced-Up Site Maps

    ·

    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.

  • Hybrid CSS Dropdowns

    ·

    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.

  • Bulleted Lists: Multi-Layered Fudge

    ·

    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.

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

    ·

    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.

  • Big, Stark & Chunky

    ·

    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!

  • Cross-Column Pull-Outs

    ·

    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.

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

    ·

    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.

  • Drop-Down Menus, Horizontal Style

    ·

    Multi-tiered drop-down menus can be a hassle to build and maintain — especially when they rely on big, honking chunks of JavaScript. Nick Rigby presents a way to handle this common navigation element with a cleanly structured XHTML list, straightforward CSS, and only a few concessions to browser quirks.

  • CSS Design: Creating Custom Corners & Borders Part II

    ·

    Part I showed how to create fluid, dynamic CSS layouts with customized borders and corners. Part II advances to the next level, extending the technique to work with more complicated backgrounds such as gradients and patterns.

  • Exploring Footers

    ·

    With old-school table layout methods, vertical positioning is a piece of cake. With CSS layout, it’s a piece of something else. New ALA contributing writer Bobby van der Sluis shows how to regain control of footers and other vertically positioned layout elements via CSS, JavaScript, and the DOM.

  • Elastic Design

    ·

    Not quite liquid, yet not fixed-width either, Elastic Design combines the strengths of both. Done well, it can enhance accessibility, exploit neglected monitor and browser capabilities, and freshen your creative juices as a designer. Patrick Griffiths shows how to start.