Topics: Code: CSS
Using Cascading Style Sheets (CSS) as part of standards-based web design. Separating presentation from structure and behavior. CSS layout techniques, tips, and tricks. Crafting a print style sheet. Spruced-up site maps, CSS drop-downs, zoom layouts, cross-column pull-outs. Emulating print design, Flash, PDF, and table layouts. Style sheet switching for user customization, accessibility, and creative purposes. Pocket-sized design: taking your website to the small screen. Faux backgrounds, sliding doors, CSS sprites. CSS support; browser bugs and workarounds. Showing and hiding elements, replacing text with images. Fixed and liquid layouts. See also typography. (107 articles)
Supersize that Background, Please!
by Bobby van der Sluis
Issue 309July 6, 2010
Background images that fill the screen thrill marketers but waste bandwidth in devices with small viewports, and suffer from cropping and alignment problems in high-res and widescreen monitors. Instead of using a single fixed background size, a better solution would be to scale the image to make it fit different window sizes. And with CSS3 backgrounds and CSS3 media queries, we can do just that. Bobby van der Sluis shows how.
Prefix or Posthack
by Eric Meyer
Issue 309July 6, 2010
Vendor prefixes: Threat or menace? As browser support (including in IE9) encourages more of us to dive into CSS3, vendor prefixes such as -moz-border-radius and -webkit-animation may challenge our consciences, along with our patience. But while nobody particularly enjoys writing the same thing four or five times in a row, prefixes may actually accelerate the advancement and refinement of CSS. King of CSS Eric Meyer explains why.
Taking Advantage of HTML5 and CSS3 with Modernizr
by Faruk AteÅŸ
Issue 308June 22, 2010
Years ago, CSS browser support was patchy and buggy, and only daring web designers used CSS for layouts. Today, CSS layouts are commonplace and every browser supports them. But the same can't be said for CSS3 and HTML5. That's where Faruk AteÅŸ’s Modernizr comes in. This open-source JavaScript library makes it easy to support different levels of experiences, based on the capabilities of each visitor’s browser. Learn how to take advantage of everything in HTML5 and CSS3 that is implemented in some browsers, without sacrificing control over the user experience in other browsers.
Stop Forking with CSS3
by Aaron Gustafson
Issue 308June 22, 2010
You may remember when JavaScript was a dark art. It earned that reputation because, in order to do anything with even the teensiest bit of cross-browser consistency, you had to fork your code for various versions of Netscape and IE. Today, thanks to web standards advocacy and diligent JavaScript library authors, our code is relatively fork-free. Alas, in our rush to use some of the features available in CSS3, we’ve fallen off the wagon. Enter Aaron Gustafson’s eCSStender, a JavaScript library that lets you use CSS3 properties and selectors while keeping your code fork- and hack-free.
Responsive Web Design
by Ethan Marcotte
Issue 306May 25, 2010
Designers have coveted print for its precision layouts, lamenting the varying user contexts on the web that compromise their designs. Ethan Marcotte advocates we shift our design thinking to appropriate these constraints: using fluid grids, flexible images, and media queries, he shows us how to embrace the “ebb and flow of things” with responsive web design.
Creating Intrinsic Ratios for Video
by Thierry Koblentz
Issue 284May 26, 2009
Have you ever wanted to resize a video on the fly, scaling it as you would an image? Using intrinsic ratios for video and some padding property magic, you can. Thierry Koblentz shows us how.
Return of the Mobile Stylesheet
by Dominique Hazaël-Massieux
Issue 275January 6, 2009
At least 10% of your visitors access your site over a mobile device. They deserve a good experience (and if you provide one, they'll keep coming back). Converting your multi-column layout to a single, linear flow is a good start. But mobile devices are not created equal, and their disparate handling of CSS is like 1998 all over again. Please your users and tame their devices with handheld style sheets, CSS media queries, and (where necessary) JavaScript or server-side techniques.
Fluid Grids
by Ethan Marcotte
Issue 279March 3, 2009
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.
Progressive Enhancement with CSS
by Aaron Gustafson
Issue 270October 21, 2008
Organize multiple style sheets to simplify the creation of environmentally appropriate visual experiences. Support older browsers while keeping your CSS hack-free. Use generated content to provide visual enhancements, and seize the power of advanced selectors to create wondrous (or amusing) effects. Part two of a series.
Understanding Progressive Enhancement
by Aaron Gustafson
Issue 269October 7, 2008
Steven Champeon turned web development upside down, and created an instant best practice of standards-based design, when he introduced the notion of designing for content and experience instead of browsers. In part one of a series, ALA’s Gustafson refreshes us on the principles of progressive enhancement. Upcoming installments will translate the philosophy into sophisticated, future-focused design and code.
CSS Sprites2 - It’s JavaScript Time
by Dave Shea
Issue 266August 26, 2008
In 2004, Dave Shea took the CSS rollover where it had never gone before. Now he takes it further still—with a little help from jQuery. Say hello to hover animations that respond to a user's behavior in ways standards-based sites never could before.
Faux Absolute Positioning
by Eric Sol
Issue 261June 17, 2008
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).
Accessible Data Visualization with Web Standards
by Wilson Miner
Issue 256April 8, 2008
When designing interfaces for browsing data-driven sites, creating navigation elements that are also visualization tools helps the user make better decisions. Wilson Miner demonstrates three techniques for incorporating data visualization into standards-based navigation patterns.
Version Targeting: Threat or Menace?
by Jeffrey Zeldman
Issue 253February 19, 2008
Version targeting shakes our browser-agnostic faith. Its default behavior runs counter to our expectations, and seems wrong. Yet to offer true DOM support without bringing JScript-authored sites to their knees, version targeting must work the way Microsoft proposes, argues Jeffrey Zeldman.
Keeping Your Elements’ Kids in Line with Offspring
by Alex Bischoff
Issue 252February 5, 2008
Alex Bischoff introduces Offspring, a JavaScript library bringing the power of advanced CSS selectors to browsers that can’t quite handle the real thing.
Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8
by Aaron Gustafson
Issue 251January 21, 2008
For seven years, the @DOCTYPE@ switch has stood designers and developers in good stead as a toggle between standards mode and quirks mode. But when IE7, with its greatly improved support for standards, "broke the web," it revealed the flaw in our toggle. The quest was on to find a more reliable ensurer of forward compatibility. Is version targeting the answer?
How to Size Text in CSS
by Richard Rutter
Issue 249November 20, 2007
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.
Put Your Content in My Pocket
by Craig Hockenberry
Issue 244August 28, 2007
In this first of two articles on bringing your content to the iPhone, the Iconfactory's Craig Hockenberry offers detailed guidance on tuning your site for the hot new phone, and making changes that can enhance even non-iPhone-users’ experience. Hotcha!
CSS @ Ten: The Next Big Thing
by HÃ¥kon Wium Lie
Issue 244August 28, 2007
Ten years ago, Håkon Wium Lie and Bert Bos gave us typographic control over web pages via CSS. But Verdana and Georgia take us only so far. Now Håkon shows us how to take web design out of the typographic ghetto, by harnessing the power of real TrueType fonts.
Conflicting Absolute Positions
by Rob Swan
Issue 241July 13, 2007
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.
Frameworks for Designers
by Jeff Croft
Issue 239June 12, 2007
Frameworks like Rails, Django, jQuery, and the Yahoo User Interface library have improved web developers' lives by handling routine tasks. The same idea can work for designers. Learn how to harness the power of tools, libraries, conventions, and best practices to focus creative thought and energy on what is unique about each project.
Multi-Column Layouts Climb Out of the Box
by Alan Pearce
Issue 232February 6, 2007
“Holy Grail,� “One True Layout,� “pain in the @$$�... Alan Pearce presents a cleaner approach to designing multi-column layouts.
How to Grok Web Standards
by Craig Cook
Issue 230January 9, 2007
For designers who find web standards as easy to grasp as a buttered eel, Craig Cook shows how to stop the hurting and turn on the understanding. Learn how web standards work, and why they are more than simply an alternative means of producing a visual design.
Super-Easy Blendy Backgrounds
by Matthew O'Neill
Issue 227November 13, 2006
Gradients: a nutritious part of your Web 2.0 breakfast. Wouldn't it be swell if you could get all that goodness without opening Photoshop every time you needed a little gradient bliss? Matthew O'Neill explains how you can.
12 Lessons for Those Afraid of CSS and Standards
by Ben Henick
Issue 224September 26, 2006
If you're new to CSS and web standards, you may feel as though you've fallen down a rabbit hole. Ben Henick is here to ease your pain.
Sliced and Diced Sandbags
by Rob Swan
Issue 222August 22, 2006
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.
Automatic Magazine Layout
by Harvey Kane
Issue 219July 11, 2006
You can't always count on having a professional designer around to resize and position your images for you, but you'd rather your page layout didn't look like it was created by orangutans. Harvey Kane builds a script that makes your life easier.
Prettier Accessible Forms
by Nick Rigby
Issue 218June 20, 2006
Forms are a pain. You can make them pretty, make them accessible, or go a little crazy trying to achieve both. Nick Rigby offers a happy solution.
A More Accessible Map
by Seth Duffey
Issue 215April 18, 2006
Nifty web maps powered by Google and Yahoo! APIs are all the rage. And rage is what a visually impaired user may feel when trying to use them. Is there a way to make beautiful web maps accessible? In a word, yes.
In Search of the Holy Grail
by Matthew Levine
Issue 211January 30, 2006
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.
Thinking Outside the Grid
by Molly E. Holzschlag
Issue 209December 19, 2005
CSS has broken the manacles that kept us chained to grid-based design...so why do so few sites deviate from the grid? Molly E. Holzschlag can tell us that the answer has something to do with airplanes, urban planning, and British cab drivers.
Printing a Book with CSS: Boom!
by HÃ¥kon Wium Lie, Bert Bos
Issue 208November 28, 2005
You like microformats? We'll give you some freakin' microformats. CSS luminaries Håkon Wium Lie and Bert Bos introduce the boom! microformat and show you how to make book the easy way.
CSS Swag: Multi-Column Lists
by Paul Novitski
Issue 204September 26, 2005
Multi-column lists: can't live with ’em, can't achieve perfect bliss without ’em. Paul Novitski offers a staggering six possible methods for accomplishing this commonly requested layout trick. Examine your options and choose wisely.
ALA’s New Print Styles
by Eric Meyer
Issue 203September 19, 2005
Print away, you fiends! Eric Meyer presents the ALA 4.0 print styles and discusses the challenge of translating a complex screen layout into a well-designed and useful printed page.
Introducing the CSS3 Multi-Column Module
by Cédric Savarese
Issue 204September 26, 2005
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.
High-Resolution Image Printing
by Ross Howard
Issue 202September 5, 2005
Your client looks up and says, "Why does our logo look funny when we print the pages?" Do you sigh dramatically, or learn about Ross Howard's technique for printing high-resolution images via CSS? We vote for option B.
A List Apart 4.0
by Jeffrey Zeldman
Issue 201August 22, 2005
From the crown of its cranium to the tips of its Ruby-slippered toes, A List Apart 4.0 is both old and new.
Complex Dynamic Lists: Your Order Please
by Christian Heilmann
Issue 200May 24, 2005
Help your site’s visitors reach their goals quickly with a dynamic menu that takes its cue from the Mac OS X Finder.
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.
The Way It’s Supposed to Work
by Erin Kissane
Issue 192January 18, 2005
Groundbreaking accessibility information. Project management and information architecture theory from old-school experts. Plug-and-play solutions to universal design and development problems. Experimental CSS/DOM hacks that use non-semantic elements to do funky design tricks. One of these things is not like the others...which is why we’re introducing a tiny new feature to the magazine.
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.
Invasion of the Body Switchers
by Andy Clarke, James Edwards
Issue 189November 19, 2004
Wouldn’t it be great if we could update the classic ALA style switcher to accommodate multiple users and devices, including some that aren’t even traditional browsers, all from a single JavaScript and CSS file? Well, now we can! Enter the Body Switcher.
Pocket-Sized Design: Taking Your Website to the Small Screen
by Elika Etemad, Jorunn D. Newth
Issue 187August 31, 2004
Among the many websites that are out there, few are standards-compliant. Among those few, only a handful sport style sheets adjusted to the needs of handheld devices. Of those which do offer styling for handhelds, not all will fit the smallest, lowest-resolution screens without presenting the user with the ultimate handheld horror: namely, horizontal scrolling. This article presents a set of general suggestions for 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.
Dynamically Conjuring Drop-Down Navigation
by Christian Heilmann
Issue 183June 15, 2004
Got content? Got pages and pages of content? Wouldn’t it be nice if you could offer your readers a drop-down menu providing instant access to any page, without having to sit down and program the darned thing? By marrying a seemingly forgotten XHTML element to simple, drop-in JavaScript, Christian Heilmann shows how to do just that. There’s even a PHP backup for those whose browsers lack access to JavaScript. Turn on, tune in, drop-down.
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.
Print It Your Way
by Derek Featherstone
Issue 182May 21, 2004
Because ALA’s readers are web users as well as designers and developers, we offer this tidbit from Derek Featherstone on creating user stylesheets to print articles to your own specifications.
Onion Skinned Drop Shadows
by Brian Williams
Issue 182May 21, 2004
Animators use onion skinning to render a snapshot of motion across time. Now, web designers can use this technique to create the truly extensible CSS-based drop shadow.
Separation: The Web Designer’s Dilemma
by Michael Cohen
Issue 181May 14, 2004
Presentation separated from structure. Structure separated from content. The foot bone connected to the ... what were we talking about? Michael Cohen steps in to examine our assumptions and relieve our separation anxiety.
Mountaintop Corners
by Dan Cederholm
Issue 179April 30, 2004
Most of us have experience creating “rounded” corners by erasing pixels. It’s a rudimentary web design technique — or so we always thought. But in the hands of Dan Cederholm, author of Web Standards Solutions, this seemingly simple technique paves the way for boxes and borders that can change sizes and colors at your whim.
CSS Drop Shadows II: Fuzzy Shadows
by Sergio Villarreal
Issue 178April 23, 2004
Picking up where Part I left off, in Part II designer Sergio Villarreal takes his standards-compliant drop-shadow to the next level by producing warm and fuzzy shadows.
Power To The People: Relative Font Sizes
by Bojan Mihelac
Issue 176April 9, 2004
Relative font sizes may make websites more accessible — but they’re not much help unless the person using the site can find a way to actually change text size. Return control to your audience using this simple, drop-in solution.
CSS and Email, Kissing in a Tree
by Mark Wyner
Issue 175March 26, 2004
Despite prevailing wisdom to the contrary, you can safely deploy HTML emails styled with good old-fashioned CSS. If you’re not content to roll over and use font tags in your HTML emails, read on.
The Table Ruler
by Christian Heilmann
Issue 175March 26, 2004
Make your site easier to use by giving your visitors a virtual “ruler” to guide and track their progress down long data tables. With a pinch of JavaScript and a dash of the DOM, your table rows will light up as your visitors hover over them.
Zebra Tables
by David F. Miller
Issue 173March 5, 2004
While misused tables are becoming increasingly rare, the table retains a legitimate role in data formatting. A little CSS and JavaScript magic can make tables better at what they do best: displaying tabular data.
CSS Sprites: Image Slicing’s Kiss of Death
by Dave Shea
Issue 173March 5, 2004
Say goodbye to old-school slicing and dicing when creating image maps, buttons, and navigation menus. Instead, say hello to a deceptively simple yet powerful sprite-based CSS solution.
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.
CSS Drop Shadows
by Sergio Villarreal
Issue 172February 27, 2004
Much used, oft maligned but always popular, drop shadows are a staple of graphic design. Although easy to accomplish with image-editing software, they’re not of much use in the fast-changing world of web design … until now.
Designing for Context with CSS
by Joshua Porter
Issue 171February 20, 2004
The medium is the message: Imagine providing unique information exclusively for people who read your site via a web-enabled cell phone — then crafting a different message for those who are reading a printout instead of the screen. Let your context guide your content. All it takes is some user-centric marketing savvy and a dash of CSS.
Exploring Footers
by Bobby van der Sluis
Issue 170February 6, 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.
CSS Design: Custom Underlines
by Stuart Robertson
Issue 169February 2, 2004
While web designers generally have a great deal of control over how a document should be presented, basic CSS doesn’t provide many options for the style of underlines below the links on a page. But with a few nips and tucks, you can take back creative control of the way your links look. Frequent ALA contributor Stuart Robertson shows how.
Improving Link Display for Print
by Aaron Gustafson
Issue 203September 19, 2005
Some time ago, Eric Meyer showed you how to add URIs to the printed version of your pages using print styles. Sometimes, though, too many inline URIs can make pages hard to read. Aaron Gustafson comes to the rescue with a JavaScript add-on that'll have you loving your linkage again.
Elastic Design
by Patrick Griffiths
Issue 167January 9, 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 9, 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.
Night of the Image Map
by Stuart Robertson
Issue 166December 12, 2003
CSS design from beyond the grave: all the secret ingredients you’ll need to resurrect the image map using CSS and structurally sensible XHTML.
Retooling Slashdot with Web Standards Part II
by Daniel M. Frommelt
Issue 165December 4, 2003
In Part I, we showed how Slashdot could save money and reduce bandwidth requirements by converting to semantic XHTML markup and CSS layout. In Part II, we explore how standards-compliant markup and deft use of CSS could make Slashdot and your sites play nicely in print and on handheld devices.
JavaScript Image Replacement
by Christian Heilmann
Issue 164November 21, 2003
Perhaps it’s time to consider the ups and downs of a JavaScript-based alternative to the Fahrner Image Replacement technique. This version uses plain vanilla XHTML with no special IDs or CSS tricks.
Retooling Slashdot with Web Standards
by Daniel M. Frommelt
Issue 164November 21, 2003
A look at the markup behind Slashdot.org demonstrates how simple and cost-effective the switch to a standards-compliant Slashdot could be. (Part I of a two-part series.)
Suckerfish Dropdowns
by Patrick Griffiths, Dan Webb
Issue 162November 7, 2003
Teach your smart little menus to do the DHTML dropdown dance without sacrificing semantics, accessibility, or standards compliance or writing clunky code.
Sliding Doors of CSS, Part II
by Douglas Bowman
Issue 161October 30, 2003
In Sliding Doors of CSS Part I, Douglas Bowman introduced a new technique for creating visually stunning interface elements with simple, text-based, semantic markup. In Part II, he pushes the technique even further with rollovers, a fix for IE/Win’s CSS bugs, and lots more.
Sliding Doors of CSS
by Douglas Bowman
Issue 160October 20, 2003
![[Stylized tabs using rounded corners and subtle three-dimensional shading.]](/d/slidingdoors/tabex2.gif){kind=small}
Image-driven, visually compelling user interfaces. Text-based, semantic markup. Now you can have both! Douglas Bowman’s sliding doors method of CSS design offers sophisticated graphics that squash and stretch while delivering meaningful XHTML text. Have your cake and eat it, too!
Facts and Opinion About Fahrner Image Replacement
by Joe Clark
Issue 160October 20, 2003
Fahrner Image Replacement and its analogues aim to combine the benefits of high design with the requirements of accessibility. But how well do these methods really work? Accessibility expert Joe Clark digs up much-needed empirical data on how FIR works (and doesn’t) in leading screen readers.
Using XHTML/CSS for an Effective SEO Campaign
by Brandon Olejniczak
Issue 159September 1, 2003
Improve your search engine ranking by harnessing the benefits of well-authored XHTML and using CSS to boost your code-to-content ratio.
Accesskeys: Unlocking Hidden Navigation
by Stuart Robertson
Issue 158June 16, 2003
Your favorite applications have shortcut keys. So can your site, thanks to the XHTML accesskey attribute. Accesskeys make sites more accessible for people who cannot use a mouse. Unfortunately, almost no designer uses accesskeys, because, unless they View Source, most visitors can’t tell that you’ve put these nifty navigational shortcuts to work on your site. In this issue, Stuart Robertson unlocks the secret of providing visible accesskey shortcuts.
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 160x160 PDA screen as it does on a 1024x768 PC monitor? In Flexible Layouts with CSS Positioning, designer Dug Falby shares two techniques for practical grid-building.
Build a PHP Switcher
by Chris Clark
Issue 152October 13, 2002
ALA’s open source style sheet switchers are swell as long as your visitors use compliant browsers and have JavaScript turned on. But what if they don’t? Perhaps, this: Chris Clark tells how to build a cross-browser, backward-compatible, forward-compatible, standards-compliant style sheet switcher in just five lines of code.
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.
Manage Your Content With PHP
by Christopher Robbins
Issue 148August 9, 2002
XHTML for structured markup. CSS for presentation. What more could you ask? How about an easy way to manage your site, using free, open-source tools? Christopher Robbins shows how to use PHP to build an intro-level, template-driven system that handles site maintenance chores and remembers your visitors’ preferences.
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.
CSS Design: Mo’ Betta Rollovers
by Tim Murtaugh
Issue 140March 8, 2002
Design smarter, faster, better rollovers with CSS.
Better Living Through XHTML
by Jeffrey Zeldman
Issue 137February 15, 2002
Everything you wanted to know about converting from HTML to XHTML, including why you’d want to, tools that help, changes in the way browsers display XHTML pages, shortcuts, bugs, workarounds, and other tips you won’t find elsewhere.
A Backward Compatible Style Switcher
by Daniel Ludwin
Issue 136February 8, 2002
You asked for it, you’ve got it: an Open Source alternate style sheet switcher that actually works in Netscape 4. No, really. Daniel Ludwin shows how it’s done.
Why Don’t You Code for Netscape?
by Jeffrey Zeldman
Issue 129December 7, 2001
Long considered the Holy Grail of web design, “backward compatibility” has its place; but at this point in web development history, shouldn’t we be more concerned about forward compatibility? ALA makes the case for authoring to web standards instead of browser quirks.
Alternative Style: Working With Alternate Style Sheets
by Paul Sowden
Issue 126November 2, 2001
Build a standards-compliant Style switcher: After explaining the basics of alternate style sheets, Sowden shows how to make them work in IE, Mozilla, and other modern browsers with just a few lines of JavaScript. Use style switchers to make your site more accessible, to facilitate user customization, or to develop creative effects.
How to Read W3C Specs
by J. David Eisenberg
Issue 121September 28, 2001
Although they appear maddeningly incomprehensible at first, W3C specifications are actually great sources of information, once you understand their secrets. Learn how to read the specs.
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.
CSS Talking Points: Selling Clients on Web Standards
by Greg Kise
Issue 116July 6, 2001
Selling your clients on standards-compliant design doesn’t have to hurt. Kise's four-point CSS Selling Plan helps the medicine go down.
CSS Design: Size Matters
by Todd Fahrner
Issue 109May 11, 2001
Everything you think you know about controlling text sizes on the web is either wrong, or else it doesn’t work. In this much-bookmarked ALA classic, UI designer and CSS Todd Fahrner provides a way out of the mess by showing how to make CSS font size keywords work – even in stubborn browsers that get CSS wrong.
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.
This HTML Kills: Thoughts on Web Accessibility
by Jim Byrne
Issue 98February 9, 2001
Activist Jim Byrne sounds off on the importance of web accessibility, and the difficulty of doing it right.
Separation Anxiety: The Myth of the Separation of Style from Content
by Bob Stein
Issue 89November 17, 2000
The separation of style from content has long been the web’s holy grail. But is it a myth? Stein claims that when design communicates, style and content are inextricably wed.
Daemon Skins: Separating Presentation from Content
by Mark Newhouse
Issue 87November 3, 2000
There ’s more than one way to skin a website. Newhouse demonstrates creative scripting techniques that give viewers and designers the control they crave.
DOM Design Tricks II
by J. David Eisenberg
Issue 73July 21, 2000
Part 2 of this exclusive ALA series shows how to use the DOM’s events and nodes to create nifty interactive menus and more. Design cool stuff while learning about emerging standards.
Meet the DOM
by J. David Eisenberg
Issue 60April 21, 2000
We’ve read about it. We’ve waited for it. Now we can actually start to use it. In this gentle introduction to the W3C Document Object Model, new ALA contributor Eisenberg shows how to make friends with the DOM, and use its power to manipulate dynamic HTML elements on the web.
*Can’t find what you’re looking for? View all topics and subtopics »
