Topics: Code: HTML and XHTML
Proper document markup. Separating structure from presentation and behavior. The lowercase semantic web. Building accessible, cross-platform, cross-browser pages. Using web standards correctly. Converting from HTML to XHTML and why you would want to. Site display hosed? A faulty DOCTYPE may be at fault. DOCTYPE switching and beyond. (126 articles)
Say No to Faux Bold
by Alan Stearns
Issue 350May 8, 2012
Browsers can do terrible things to type. If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and italic styles themselves. The results are an awkward mimicry of real type design, and can be especially atrocious with web fonts. Adobe’s Alan Stearns shares quick tips and techniques to ensure that your @font-face rules match the weight and styles of the fonts, and that you have a @font-face rule for every style your content uses. If you’re taking the time to choose a beautiful web font for your site, you owe it to yourself and your users to make certain you’re actually using the web font — and only the web font — to display your site’s content in all its glory.
Building Twitter Bootstrap
by Mark Otto
Issue 342January 17, 2012
Bootstrap is an open-source front-end toolkit created to help designers and developers quickly and efficiently build great stuff online. Its goal is to provide a refined, well-documented, and extensive library of flexible design components created with HTML, CSS, and JavaScript for others to build and innovate on. Today, it has grown to include dozens of components and has become the most popular project on GitHub, with more than 13,000 watchers and 2,000 forks. Mark Otto, the co-creator of Bootstrap, sheds light on how and why Bootstrap was made, the processes used to create it, and how it has grown as a design system.
CSS Floats 101
by Noah Stokes
Issue 325March 8, 2011
The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don’t fully understand how it works. Test or refresh your knowledge as Noah Stokes explores float theory and behavior, and guides us through common float-related coding pitfalls.
Cross Platform Scalable Vector Graphics with svgweb
by Jim Ray
Issue 323February 8, 2011
Pity Scalable Vector Graphics. It’s been an official standard since before IE6 was released yet has never found much of an audience on the web, certainly not the one it deserves. Just as SVG was starting to establish some browser support, along came the canvas tag, stealing the thunder of dynamically generated client-side images. Yet despite all the attention being paid to canvas, there’s still a place for SVG, particularly for developers looking to replace plug-ins like Flash for data visualization. Unlike canvas or other script-only approaches, SVG can be easily divided into design and code elements, with just a little code to add interactivity. It even works on devices like the iPad and iPhone. And now, thanks to svgweb and a clever use of Flash, it works on older platforms no one could have ever imagined supporting SVG. Jim Ray shows how.
CSS Positioning 101
by Noah Stokes
Issue 318November 16, 2010
If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. Designer slash developer Noah Stokes scrutinizes the CSS position property to show how you can use it to create standards-compliant, table-free CSS layouts. Test or refresh your knowledge of static, relative, absolute, fixed, and inherited positioning, and how they work together to create any web layout the mind can conceive.
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.
Design Patterns: Faceted Navigation
by Peter Morville, Jeffery Callender
Issue 304April 20, 2010
Faceted navigation may be the most significant search innovation of the past decade. It features an integrated, incremental search and browse experience that lets users begin with a classic keyword search and then scan a list of results. It also serves up a custom map that provides insights into the content and its organization and offers a variety of useful next steps. In keeping with the principles of progressive disclosure and incremental construction, it lets users formulate the equivalent of a sophisticated Boolean query by taking a series of small, simple steps. Learn how it works, why it has become ubiquitous in e-commerce, and why it’s not for every site.
Web Standards for E-books
by Joe Clark
Issue 302March 9, 2010
E-books aren’t going to replace books. E-books are books, merely with a different form. More and more often, that form is ePub, a format powered by standard XHTML. As such, ePub can benefit from our nearly ten years’ experience building standards-compliant websites. That's great news for publishers and standards-aware web designers. Great news for readers, too. Our favorite genius, Joe Clark, explains the simple why and how.
Using SVG for Flexible, Scalable, and Fun Backgrounds, Part II
by Shelley Powers
Issue 299January 26, 2010
In Part II, dig deeper into the technology behind using SVG for your site design. Explore how to incorporate SVG in a cross-browser friendly manner, including using SVGWeb to ensure that the SVG shows in Internet Explorer. And discover the unique characteristic that makes SVG ideal for page backgrounds: scalability.
Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I
by Shelley Powers
Issue 299January 26, 2010
Many of us think of Scalable Vector Graphics (SVG) as an also-ran: fine for charts and tables, but not much else. Yet SVG can actually enhance a site’s overall design, and can be made to work in even the most stubborn browser. In Part I of a two-part series, Shelley Powers covers important basics of working with SVG, including browser support and accessibility.
Get Ready for HTML 5
by J. David Eisenberg
Issue 291September 1, 2009
Ready or not, here it comes. Despite the confusion surrounding its evolution, real-world HTML 5 is right around the corner. Longtime ALA contributor J. David Eisenberg returns to get us all up to speed on the markup we’re about to be writing.
Unwebbable
by Joe Clark
Issue 288July 21, 2009
It’s time we came to grips with the fact that not every “document” can be a semantic “web page.” Some forms of writing just cannot be expressed in HTML—or they need to be bent and distorted to do so. But for once, XML can help. Joe Clark explains.
Introduction to RDFa II
by Mark Birbeck
Issue 287July 7, 2009
In part I of this series, we looked at how semantic features normally confined to the head of an HTML document can be used to add semantic richness to the elements of the body. Along the way, we defined six rules of RDFa. In part II, we’ll learn how to add properties to an image, and how to add metadata to any item—and we’ll add a few more rules to that list.
Introduction to RDFa
by Mark Birbeck
Issue 286June 23, 2009
In part one of a two-part primer on RDFa, learn how semantic features normally confined to the head of an HTML document can be used to add semantic richness to the elements of the body. Mark Birbeck shows us how.
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.
Semantics in HTML 5
by John Allsopp
Issue 275January 6, 2009
The BBC's dropping of hCalendar because of accessibility and usability concerns demonstrates that we have pushed the semantic capability of HTML far beyond what it can handle. The need to clearly and unambiguously add rich, meaningful semantics to markup is a driving goal of the HTML 5 project. Yet HTML 5 has two problems: it is not backward compatible because its semantic elements will not work in 75% of our browsers; and it is not forward compatible because its semantics are not extensible. If "making up new elements" isn't the solution, what is?
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.
A More Useful 404
by Dean Frickey
Issue 272November 18, 2008
When broken links frustrate your site's visitors, a typical 404 page explains what went wrong and provides links that may relate to the visitor's quest. That's good, but now you can do better. With Dean Frickey's custom 404, when something's amiss, pertinent information is sent not only to the visitor, but to the developer—so that, in many cases, the problem can be fixed! A better 404 means never having to say you're sorry.
Progressive Enhancement with JavaScript
by Aaron Gustafson
Issue 271November 4, 2008
Our introductory series on progressive enhancement and the ways it can be implemented concludes with a look at the mindset needed to implement PE in JavaScript, and a survey of best practices for doing so.
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).
They Shoot Browsers, Don’t They?
by Jeremy Keith
Issue 253February 19, 2008
Version targeting will allow Microsoft to reach new heights of standards compliance where CSS and (especially) scripting are concerned. But to benefit from it, developers must explicitly opt in. That’s just not right, says Jeremy Keith. And it’s doomed to fail, because standardistas, by their very nature, will refuse to opt in.
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.
From Switches to Targets: A Standardista’s Journey
by Eric Meyer
Issue 251January 21, 2008
Grab your galoshes and walking stick and follow along with A List Apart's Eric Meyer as he considers the vices and virtues of version targeting as a standards toggle.
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?
A Preview of HTML 5
by Lachlan Hunt
Issue 250December 4, 2007
Who's afraid of HTML 5? Not Lachlan Hunt! As both a front-end web developer and a contributor to HTML 5, he tells us what we can expect from the emerging markup specification, whose goals include more flexibility and greater interoperability.
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.
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.
Setting Type on the Web to a Baseline Grid
by Wilson Miner
Issue 235April 9, 2007
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.
Where Our Standards Went Wrong
by Ethan Marcotte
Issue 233February 26, 2007
To validate or not to validate; that is the question. A List Apart's own Ethan Marcotte helps us to re-examine our approach to standards advocacy and how we can better educate our clients on the benefits of web standards.
Semantic Flash: Slippery When Wet
by Dan Mall
Issue 233February 26, 2007
Love it or hate it, Flash has become a fixture of modern web design. Author Dan Mall cuts through the misconceptions to show us how Flash can be used to enhance our standards-based web designs. ("Shiny floor" standards-friendly Flash project included.)
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.
Quick CSS Mockups with Photoshop
by Casper Voogt
Issue 231January 23, 2007
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.
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.
Switchy McLayout: An Adaptive Layout Technique
by Marc van den Dobbelsteen
Issue 229December 19, 2006
The introduction of new mobile and computing devices challenges us to look beyond the liquid layout. Marc van den Dobbelsteen offers a way to bring appropriate layouts to a wider range of screens and devices.
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.
Long Live the Q Tag
by Stacey Cordoni
Issue 224September 26, 2006
IE/Win's lack of support for the Q tag has stymied fans of semantic markup. Stacey Cordoni offers a CSS-based workaround.
Bye Bye Embed
by Elizabeth Castro
Issue 219July 11, 2006
Break the chains of <embed> and live free. Elizabeth Castro explains how to embed movies without using invalid markup.
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.
World Grows Small: Open Standards for the Global Web
by Molly E. Holzschlag
Issue 217May 23, 2006
Molly Holzschlag explains how the practices you already use to create standards-based, accessible websites can serve you in the growing field of internationalization.
Community Creators, Secure Your Code! Part II
by Niklas Bivald
Issue 217May 23, 2006
In part two of his two-part series on protecting your community site from malicious cross-site scripting attacks, Niklas Bivald rolls up his trousers and wades into the JavaScript.
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.
The Accessibility Hat Trick: Getting Abbreviations Right
by Colin Lieberman
Issue 210January 17, 2006
The acronym element is missing in XHTML 2.0. Internet Explorer 6 ignores the abbr element. JAWS doesn't like dfn. AAA-level compliance requires you to find a solution. Make it work.
Sensible Forms: A Form Usability Checklist
by Brian Crescimanno
Issue 209December 19, 2005
Sometimes it's the little things that drive you nuts. As many of us have probably noticed during this season of holiday shopping, usability problems in online forms can be infuriating. Brian Crescimanno helps solve the problem with a checklist of form-usability recommendations.
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.
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.
High Accessibility Is Effective Search Engine Optimization
by Andy Hagans
Issue 207November 8, 2005
It's no coincidence that search engines love highly accessible websites; in fact, by designing for accessibility, you're already using effective search-engine optimization techniques. Andy Hagans explains yet another reason to pay attention to accessibility.
More About Custom DTDs
by The W3C QA Group
Issue 199May 17, 2005
Your web page uses non-standard elements, so, following the advice of earlier ALA articles, you bang out a custom DTD to make sure your document still validates. Not so fast, says the W3C’s Quality Assurance team, who argue that crafting a custom DTD for the sole purpose of validation is a mistake … and then tell when it is the right thing to do.
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.
Validating a Custom DTD
by J. David Eisenberg
Issue 194February 1, 2005
In his article in this issue, Peter-Paul Koch proposes adding custom attributes to form elements to allow triggers for specialized behaviors. The W3C validator won’t validate a document with these attributes, as they aren’t part of the XHTML specification. Not to worry! This article will show you how to create a custom DTD that will add those custom attributes, and will also show you how to validate documents that use those new attributes.
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.
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.
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.
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.
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.
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.
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.
Accessible Pop-up Links
by Caio Chassot
Issue 174March 19, 2004
Sometimes we have to use pop-ups — so we might as well do them right. This article will show you how to make them more accessible and reliable while simplifying their implementation.
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.
JavaScript Image Gallery
by Jeremy Keith
Issue 170February 6, 2004
Making an online gallery of pictures should be a quick process. The gap between snapping some pictures and publishing them on the web ought to be a short one. Here’s a quick and easy way of making a one-page gallery that uses JavaScript to load images and their captions on the fly.
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.
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.
Keeping Navigation Current With PHP
by Jason Pearce
Issue 162November 7, 2003
Turning unordered lists into elegant navigational menus has become a new favorite pastime for many web designers. A dash of PHP can add intelligence to your CSS-styled menu.
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.
Random Image Rotation
by Dan Benjamin
Issue 160October 20, 2003
Readers return to sites that appear fresh and new on each visit. On a news site, magazine, or blog, stories or headlines will be updated frequently. But how can static sites keep that fresh feeling? Dan Benjamin’s free image randomizer may do the trick, and you needn’t be a programmer to install it.
Sliding Doors of CSS
by Douglas Bowman
Issue 160October 20, 2003
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!
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.
A Standards-Compliant Publishing Tool for the Rest of Us?
by Jeffrey Zeldman
Issue 157June 6, 2003
Publishing with web standards is not for experts alone. A new tool hopes to make it easier for anyone. ALA interviews Six Apart’s Anil Dash about his company’s easy-to-use, standards-compliant publishing tool, TypePad.
Cross-Browser Variable Opacity with PNG: A Real Solution
by Michael Lovitt
Issue 156December 21, 2002
Think you’re stuck with wimpy GIFs and their rigid binary transparency? Well, think again, Sunshine. Michael Lovitt shows how to overcome flaky browser support for PNG so you can take advantage of this graphic format’s lossless compression, alpha transparency, and variable opacity.
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.
Flash Satay: Embedding Flash While Supporting Standards
by Drew McLellan
Issue 154November 9, 2002
By default, Macromedia Flash generates HTML that is invalid (but it works). Can you have your Flash and web standards, too? Drew McLellan has found a way to embed Flash content using only valid tags and attributes.
Inline XML
by Lachlan Cannon
Issue 153November 1, 2002
What’s in a namespace? For one thing, the power to use multiple XML languages in a single document. Lachlan Cannon explains how inline XML can extend the capability of your sites.
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.
Using XML
by J. David Eisenberg
Issue 147July 19, 2002
More than a rulebook for generating your own markup, XML is part of a family of technologies that work together in powerful ways. Eisenberg demonstrates some of that power by creating an XML-based markup language from scratch and transforming it for a variety of formats, using nothing but his noggin and some off-the-shelf tools.
Win the SPAM Arms Race
by Dan Benjamin
Issue 145May 24, 2002
SPAM is evil, moronic, and pervasive, but help is on the way. All it takes is a bit of JavaScript, a smidgen of PHP, and the ten minutes it takes to read this short, sweet tutorial. Reduce dreck mail with Dan Benjamin’s easy-to-implement address encoder.
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.
Modifying Dreamweaver to Produce Valid XHTML
by Carrie Bickner
Issue 141March 22, 2002
You don’t have to wait for Dreamweaver 5 (or 6) to squeeze valid XHTML out of the web’s most popular visual editor. Carrie Bickner’s illustrated tutorial will show you how to modify Dreamweaver to make it a standards–friendly authoring tool.
CSS Design: Mo’ Betta Rollovers
by Tim Murtaugh
Issue 140March 8, 2002
Design smarter, faster, better rollovers with CSS.
Slash Forward (Some URLs are Better Than Others)
by waferbaby
Issue 138February 22, 2002
Some URLs are better than others: easier for visitors to remember, easier for designers and developers when it comes time to change the technology that drives the site. Waferbaby neatly and briefly considers the effect of web addresses on usability, design, and ease of maintenance and technological transition.
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.
What the Hell is XML?
by Troy Janisch
Issue 132January 4, 2002
Attention, content managers, developers, site owners and designers: XML is here, and the time to start using it is now.
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.
*Can’t find what you’re looking for? View all topics and subtopics »
