No. 210

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Issue 167January 09, 2004

figure 3

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

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

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

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!

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

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

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

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 »

Хостинг от uCoz