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. (47 articles)
Return of the Mobile Style Sheet
by Dominique Hazaël-Massieux
Issue 275January 06, 2009
What can be done for mobile browsers that do not read handheld style sheets, or parse CSS Media Queries? Short of ignoring them, there are two options.
Zebra Striping: More Data for the Case
by Jessica Enders
Issue 267September 09, 2008
Don’t let personal preference, habit, or the (untested) status quo drive your design decisions—go out there and get some user data.
Sketching in Code: the Magic of Prototyping
by David Verba
Issue 261June 17, 2008
Proponents of Agile Development look askance at documentation because they want to stay focused on building the actual product. This attitude should translate to prototyping as well. Use the quickest and most lightweight method that gets you the results you’re after.
Faux Absolute Positioning
by Eric Sol
Issue 261June 17, 2008
Another advantage of the technique is that it mitigates much of the fragility of floats. When the content of a floated box is wider than the box itself, it pushes the next box to the right (and by consequence, the box often drops down). With faux absolute positioning, the box to the right stays in place, no matter what.
Zebra Striping: Does it Really Help?
by Jessica Enders
Issue 258May 06, 2008
The user of a table would be looking for one or more data points. Therefore, if we set a task that uses a table, and zebra striping does make things easier, then we would expect to see improvements in accuracy and speed.
Sign Up Forms Must Die
by Luke Wroblewski
Issue 255March 25, 2008
When planning a customer’s initial experience for your web service, think about how you can avoid sign-up forms in favor of gradual engagement. Show potential customers how they can use your service and why they should care.
Designing For Flow
by Jim Ramsey
Issue 250December 04, 2007
Flow, as a mental state, is characterized by a distorted sense of time, a lack of self-consciousness, and complete engagement in the task at hand. For designers, it’s exactly the feeling we hope to promote in the people who use our sites.
Understanding Web Design
by Jeffrey Zeldman
Issue 249November 20, 2007
Web design, like a typeface, is an environment for someone else’s expression. Stick around and I’ll tell you which site design is like Helvetica.
How to Size Text in CSS
by Richard Rutter
Issue 249November 20, 2007
In this article, we will reconcile the designer’s requirement for accuracy with the user’s need to resize text on demand, arriving at a best practice that satisfies designers and users and works across browsers and platforms.
If I Told You You Had a Beautiful Figure...
by Aaron Gustafson
Issue 246September 25, 2007
Lay out images consistently across your site using a liitle clever JavaScript.
Put Your Content in My Pocket
by Craig Hockenberry
Issue 244August 28, 2007
Many of these ideas can be useful and effective with other mobile devices. The processing power of these devices will continue to increase, bringing an end to a “dumbed down” mobile web. The iPhone may be just the beginning of an exciting new chapter in the storied life of HTML.
Conflicting Absolute Positions
by Rob Swan
Issue 241July 13, 2007
All right, class. Using CSS, kindly produce a liquid layout that contains a fixed-width, scrolling side panel and a flexible, scrolling main panel. Okay, now do it without JavaScript.
Setting Type on the Web to a Baseline Grid
by Wilson Miner
Issue 235April 09, 2007
“Over the last year or so, there’s been a lot of talk about grid systems and using column grids for website layouts.”
Multi-Column Layouts Climb Out of the Box
by Alan Pearce
Issue 232February 06, 2007
Create an elastic multi-column layout of equal height.
Quick CSS Mockups with Photoshop
by Casper Voogt
Issue 231January 23, 2007
Create quick design mockups in clean XHTML and CSS, using code generated by Photoshop. No, really.
Paper Prototyping
by Shawn Medero
Issue 231January 23, 2007
With interfaces becoming more complex, and development schedules growing shorter the best prototyping tools may be simpler than you think.
Whitespace
by Mark Boulton
Issue 230January 09, 2007
Sometimes, as in web design, it’s difficult to add whitespace because of content requirements. Newspapers often deal with this by setting their body content in a light typeface with plenty of whitespace within and around the characters.
Sliced and Diced Sandbags
by Rob Swan
Issue 222August 22, 2006
Automate text flow along an irregular outline with PHP.
Where Am I?
by Derek Powazek
Issue 221August 08, 2006
We’ve got web standards. We’ve got Ajax. We’ve got content. So why are we still messing up global navigation? Derek Powazek gets back to basics and offers a few simple guidelines for getting it right.
Home Page Goals
by Derek Powazek
Issue 211January 30, 2006
”...home pages are anxiety-inducing for companies. The home page is your first impression. And like the old saying goes, you only get one chance. So home pages themselves have a unique set of design goals.”
In Search of the Holy Grail
by Matthew Levine
Issue 211January 30, 2006
“Many articles have been written on the grail, and several good templates exist. However, all the existing solutions involve sacrifices: proper source order, full-width footers, and lean markup are the usual compromises made in pursuit of this elusive layout.”
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.”
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.
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…
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.
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.
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.
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.
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.
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.
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 »
