A List Apart

Menu

Topic: Layout & Grids

  • Fluid Grids

    by Ethan Marcotte · Issue 279 ·

    How awesome would it be if you could combine the aesthetic rigor and clarity of fixed-width, grid-based layouts with the device- and screen size independence and user-focused flexibility of fluid layouts? Completely awesome, that's how awesome. And with a little cunning and a tad of easy math, ALA's Ethan Marcotte gets it done. We smell a trend in the offing.

  • In Defense of Readers

    by Mandy Brown · Issue 278 ·

    As web designers, we concern ourselves with how users move from page to page, but forget the needs of those whose purpose is to be still. Learn the design techniques that create a mental space for reading. Use typographic signals to help users shift from looking to reading, from skimming along to concentrating. Limit distractions; pay attention to the details that make text readable; and consider chronology by providing transitions for each of the three phases of the online reading experience.

  • The Details That Matter

    by Kevin Potts · Issue 277 ·

    We no longer lay out pages with composing sticks and straight edges, and design is no longer a trade position requiring a lengthy apprenticeship, but an eye for details is every bit as important today as it was in the early days of graphic arts. Learn the habits of successful designers, who think critically as well as creatively, and who see the forest while never losing sight of the trees.

  • Zebra Striping: More Data for the Case

    by Jessica Enders · Issue 267 ·

    As designers or marketers, we share a desire that our tables and forms be easy to scan, read, and use. Does the widely practiced shading of alternate rows help, hurt, or have no effect? A previous study proving inconclusive, designer and researcher Jessica Enders has tackled the conundrum again, coming up with statistically relevant data and a set of recommendations.

  • Multi-Column Layouts Climb Out of the Box

    by Alan Pearce · Issue 232 ·

    “Holy Grail,” “One True Layout,” “pain in the @$$”... Alan Pearce presents a cleaner approach to designing multi-column layouts.

  • Faux Absolute Positioning

    by Eric Sol · Issue 261 ·

    CSS layout is awesome, except when your layout calls for a header, a footer, and columns in between. Use float, and content changes can cause columns to wrap. Use absolute positioning, and your footer can crash into your columns. Add the complexity of drag-and-drop layouts, and a new technique is needed. Enter "faux absolute positioning." Align every item to a predefined position on the grid (as with absolute positioning), but objects will still affect the normal flow (as with float).

  • Fix Your Site With the Right DOCTYPE!

    by Jeffrey Zeldman · Issue 142 ·

    You’ve done everything right, but your site is breaking in the latest browsers. A faulty DOCTYPE is likely to blame. This essential ALA article will provide you with DOCTYPEs that work, enabling you to fix your site with just one tag.

  • Sketching in Code: the Magic of Prototyping

    by David Verba · Issue 261 ·

    The rise of Ajax and rich internet applications has thrown the limitations of traditional wireframing into painful relief. When you leave the world of page-based interactions, how do you document all but the simplest interactions? Flowcharts and diagrams don’t work. Prototyping saves the day by focusing on the application and conveying its "magic." Prototypes can help you sell a decision that is fundamentally or radically different from the client’s current solution or application. Sit a stakeholder down in front of a working prototype and show him or her why your approach is compelling.

  • Zebra Striping: Does it Really Help?

    by Jessica Enders · Issue 258 ·

    Just because a design convention exists doesn't mean it works. Our field runneth over with design patterns, but is low on evidence of their utility. Jessica Enders drops some science on the widespread belief that zebra stripes aid the reader by guiding the eye along a table row.

  • Sign Up Forms Must Die

    by Luke Wroblewski · Issue 255 ·

    You load a new web service, eager to dive in and start engaging, and what’s the first thing that greets you? A sign-up form. We can do better, says Luke Wroblewski, author of Web Form Design: Filling in the Blanks. Via a technique of "gradual engagment," we can get people using and caring about our web services instead of frustrating them (or sending them to a competitor's site) by forcing them to fill out a sign-up form first.

  • Designing For Flow

    by Jim Ramsey · Issue 250 ·

    Ask a web designer what makes a site great, and you're likely to hear "ease of use." Jim Ramsey begs to differ. Web applications in particular, he tells us, work best and engage most profoundly when they challenge users to overcome difficulties.

  • How to Size Text in CSS

    by Richard Rutter · Issue 249 ·

    It's a tug-of-war as old as web design. Designers need to control text size and the vertical grid; readers need to be able to resize text. A better best practice for sizing type and controlling line-height is needed; and in this article, Richard Rutter obligingly supplies one.

  • Understanding Web Design

    by Jeffrey Zeldman · Issue 249 ·

    We'll have better web design when we stop asking it to be something it's not, and start appreciating it for what it is. It's not print, not video, not a poster—and that's not a problem. Find out why cultural and business leaders misunderstand web design, and learn which other forms it most usefully resembles.

  • If I Told You You Had a Beautiful Figure…

    by Aaron Gustafson · Issue 246 ·

    Laying out images consistently within a design is difficult, especially when you hand the keys over to someone else to fill in the content. ALA Staffer Aaron Gustafson demonstrates how a little clever JavaScript goes a long way toward resolving inconsistencies in image layout.

  • Conflicting Absolute Positions

    by Rob Swan · Issue 241 ·

    All right, class. Using CSS, produce a liquid layout that contains a fixed-width, scrolling side panel and a flexible, scrolling main panel. Okay, now do it without JavaScript. By chucking an assumption about how CSS works in browsers, Rob Swan provides the way and means.

  • Where Am I?

    by Derek Powazek · Issue 221 ·

    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.

  • Setting Type on the Web to a Baseline Grid

    by Wilson Miner · Issue 235 ·

    As web designers, we sometimes may feel we're on a relentless journey to bridge the gap between digital and traditional processes. Wilson Miner brings us one step closer by offering up a way to work with typographic baselines on the web.

  • Quick CSS Mockups with Photoshop

    by Casper Voogt · Issue 231 ·

    It may seem like we're trying to party like it's 1999, but rest assured, we're not. Casper Voogt shows us a way to use Photoshop, ImageReady, and slices to produce mockups that utilize clean XHTML and CSS.

  • Paper Prototyping

    by Shawn Medero · Issue 231 ·

    Running with scissors isn't recommended for kids, but it might be ideal for your next big development project. With interfaces becoming more complex and schedules growing shorter, the best prototyping tools may be simpler than you think.

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

Topics