Topic: Layout & Grids
-
Multi-Column Layouts Climb Out of the Box
“Holy Grail,” “One True Layout,” “pain in the @$$”... Alan Pearce presents a cleaner approach to designing multi-column layouts.
-
Faux Absolute Positioning
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!
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
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?
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
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
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
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
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…
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
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?
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
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
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
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
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.
-
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.
-
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.
-
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.
-
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.
