Topics: Design: Layout
Web page layouts: ways and means and meaning. Grids and rules; columns fixed, liquid, and elastic. Size, color, and contrast. To center or not to center. Layout and genre. Print paradigms and new media approaches. Let the web be the web. (26 articles)
Thinking Outside the Grid
by Molly E. Holzschlag
Issue 209December 19, 2005
“There is a new kid on the block, and her name is ‘I’ve never designed with a table in my career.’”
Design Choices Can Cripple a Website
by Nick Usborne
Issue 207November 08, 2005
”...just pause for a moment and think of all the design choices you have made over the last year, and the reasons why you made them. And think about the huge impact those choices might have had on the performance of the sites you worked on.”
CSS Swag: Multi-Column Lists
by Paul Novitski
Issue 204September 26, 2005
If you want to present a list in multiple columns you’ll need to compromise. Choose your poison…
Introducing the CSS3 Multi-Column Module
by Cédric Savarese
Issue 204September 26, 2005
The module’s intent is to allow content to flow into multiple columns inside an element. It offers new CSS properties that let the designers specify in how many columns an element should be rendered. The browser takes care of formatting the text so that the columns are balanced.
ALA’s New Print Styles
by Eric Meyer
Issue 203September 19, 2005
...we figured that we could wait until after the launch to fix up and deploy the print styles, with little or no impact or notice. Okay, so we were wrong.
Spruced-Up Site Maps
by Kim Siever
Issue 197March 30, 2005
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
by Eric Shepherd
Issue 197March 30, 2005
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
by Nandini Doreswamy
Issue 195February 16, 2005
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
by Daniel M. Frommelt
Issue 191January 11, 2005
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
by Joe Clark
Issue 191January 11, 2005
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
by Daniel M. Frommelt
Issue 190December 21, 2004
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
by Elika Etemad, Jorunn D. Newth
Issue 187August 31, 2004
Creating a handheld-friendly style sheet that works well even on handheld screens no wider than 120px.
Drop-Down Menus, Horizontal Style
by Nick Rigby
Issue 184June 29, 2004
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.
Dynamic Text Replacement
by Stewart Rosenberger
Issue 183June 15, 2004
Let your server do the walking! Whether you’re replacing one headline or a thousand, Stewart Rosenberger’s Dynamic Text Replacement automatically swaps XHTML text with an image of that text, consistently displayed in any font you own. The markup is clean, semantic, and accessible. No CSS hacks are required, and you needn’t open Photoshop or any other image editor. Read about it today; use it on personal and commercial web projects tomorrow.
Creating Liquid Layouts with Negative Margins
by Ryan Brill
Issue 183June 15, 2004
Two- and three-column, liquid page designs with header and footer are easy to dash off using old-school HTML table layout methods. Designing them in CSS is trickier, and can sometimes even require you to structure your page’s content elements in a specific (and undesirable) order. Negative margins to the rescue! Ryan Brill whips up two quick CSS layouts to demonstrate the power of negative thinking.
CSS Design: Creating Custom Corners & Borders Part II
by Søren Madsen
Issue 172February 27, 2004
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
by Bobby van der Sluis
Issue 170February 06, 2004
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
by Patrick Griffiths
Issue 167January 09, 2004
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.
Faux Columns
by Dan Cederholm
Issue 167January 09, 2004
It’s a beginning CSS designer’s nightmare and a frequently asked question at ALA: Multi-column CSS layouts can run into trouble when one of the columns stops short of its intended length. Here’s a simple solution.
Flexible Layouts with CSS Positioning
by Dug Falby
Issue 155November 15, 2002
Want to spend less time on CSS hacking and more time on design? Need your site to look as good on a 160×160 PDA screen as it does on a 1024×768 PC monitor? In Flexible Layouts with CSS Positioning, designer Dug Falby shares two techniques for practical grid-building.
CSS Design: Taming Lists
by Mark Newhouse
Issue 151September 27, 2002
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 144May 10, 2002
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.
Fix Your Site With the Right DOCTYPE!
by Jeffrey Zeldman
Issue 142April 12, 2002
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.
Practical CSS Layout Tips, Tricks, & Techniques
by Mark Newhouse
Issue 119August 17, 2001
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.
From Table Hacks to CSS Layout: A Web Designer’s Journey
by Jeffrey Zeldman
Issue 99February 16, 2001
Redesigning A List Apart using CSS should have been easy. It wasn’t. The first problem was understanding how CSS actually works. The second was getting it to work in standards-compliant browsers. A journey of discovery.
A Dao of Web Design
by John Allsopp
Issue 58April 07, 2000
Web designers often bemoan the malleable nature of the web, which seems to defy our efforts at strict control over layout and typography. But maybe the problem is not the web. Maybe the problem is us. John Allsopp looks at web design through the prism of the Tao Te Ching, and decides that designers should let the web be the web.
*Can’t find what you’re looking for? View all topics and subtopics »