The Alpine Designer Toolbox

Handy Tools, Tips and Techniques for Creating an Alpine Design


W3Schools - W3Schools is an excellent educational resource, with introductions and tutorials on HTML, CSS, JavaScript, PHP, SQL, etc.

Web Design Weblogs

Jeffrey Zeldman's Daily Report - Zeldman used to be the nexus of the web design world, but things have gone rather quiet now that he's got a bundle of child.

A List Apart: For People Who Make Websites - Not a blog, per se, but one of the best standards-based web design resources out there. Even though A List Apart is updated infrequently, the archives are so full of useful techniques that you can easily spend hours learning new things.

Douglas Bowman's Stopdesign - Doug was the force behind the standards-based redesign of Blogger.

Ryan Sims' Justwatchthesky - Ryan does some really pretty work.

Dave Shea's Mezzoblue - The excellent weblog for the man behind CSS Zen Garden.

Jason Santa Maria - A great standards-based web designer from Pennsylvania.

Shaun Inman - Shawn pioneered the Flash dynamic text image replacement technique that is taking the web design world by storm.

W3C Resources

The Word Wide Web Consortium - The nerve center for specifications and guidelines for web standards. Unfortunately their website is extremely difficult to navigate, and content is difficult to locate.

Index of HTML Elements - An index of all HTML elements. Note that this resource references HTML 4, not XHTML, so some translation as to what is and is not appropriate may be necessary, depending on the language you are coding in. Unfortunately, it seems that the W3C does not yet have an index of XHTML elements.

Index of CSS Elements - The grand master index of all CSS elements, properties and selectors.

Valid DOCTYPES - A list of all valid DOCTYPES, which ensure that your HTML will be processed correctly by a user's browser.

Code Validation Tools

HTML Validator - The W3C tool for validating HTML code. The validator is great first line of defense when resolving display issues in a CSS design.

CSS Validator - The W3C tool for validating CSS code.

Color Tools

EyeDropper - Excellent tool for zooming in on tiny parts of a design, and capturing pixel-perfect hex values for design colors.

4096 Color Wheel - A color wheel that gives hex values for web-safe, web-smart and web-unsafe colors

Color Blender - Generate multiple midpoint colors between any two color values. Absurdly useful when trying to choose colors for subtle hover states, adjusting text and background contrast values, etc.

Color Harmonizer - Enter one color, and this little program will spit out mathemagically appealing complementary colors. It's a good starting point for color inspiration for new designs, but ultimately the human eye can create better combinations than any program.

ColorMatch Remix - Generates eight complementary colors from one color. This tool was much more usable before it got dropped in an orange and yellow site redesign.

CSS Inspiration

CSS Zen Garden - A collection of beautiful websites, all styled with CSS. The amazing thing is that all of these sites, for how different they may appear to the eye, share the exact same HTML structure.

Web Standards Awards - A gallery of beautiful websites that embrace web standards.

CSS Layouts

Little Boxes - A large collection of basic page layouts, all done in CSS

The Layout Reservoir - A few CSS layouts, submitted for your approval.

Faux Columns - A major frustration when using CSS instead of tables for design is the difficulty in getting two side-by-side columns to appear at the same height. The technique illustrated in this article solves the problem once and for all.

CSS Lists (navigation)

Listutorial - An introduction to using HTML lists and CSS-based design for creating website navigation. Alpine's content management system dynamically generates HTML list code for navigation, and by using CSS we are able to reuse this architecture and create diverse and attractive navigation on any website.

Listamatic - A huge collection of attractive examples of CSS navigation, all built using basic HTML lists.

List-O-Matic - A tool that automatically generates lean and attractive CSS navigation from your input.

CSS Image Replacement

Mezzoblue: Revised Image Replacement Techniques - An excellent survey of all existing image replacement techniques. The one that Alpine regularly employs is the Phark Revisited method, which is coded as follows:

<div id="header"><h1>Text to be Replaced</h1></div>
/* css */
div#header h1 {
	display: block;
	height: 50px;
	width: 200px;
	background: transparent url(replacement_image.gif) top left no-repeat;
	text-indent: -9999px;
	font-size: 14px; /* keeps the actual text from pushing out the height in IE */

To make it clickable (such as for a header logo), you would write it as follows:

<div id="header"><h1><a href="#">Text to be Replaced</a></h1></div>
/* css */
div#header h1 a {
	display: block;
	height: 50px;
	width: 200px;
	background: transparent url(replacement_image.gif) top left no-repeat;
	text-indent: -9999px;
	text-decoration: none; /* keeps underlines from appearing in Gecko browsers */
	font-size: 14px;

CSS Floats

Floatutorial - A step-by-step tutorial for CSS floats. The float property is what we use to align things in CSS, and it can be a bit tricky and intimidating when first starting out.

CSS Rollovers

Fast CSS Rollovers without Preload - This is the technique that Alpine uses on all its rollover images. We have completely sworn off javascript in this respect. Learn this CSS technique, love it, and do it.

CSS Hacks

Box Model Hack - IE 5.x misinterprets the CSS box model, which causes boxes that have both width (or height) and padding defined to display incorrectly. This is an excellent resource that explains where the box model hack is necessary, and describes various ways of implementing it.

Tantek: Box Model Hack - Our original introduction to the box model problem and solution.

Centering a <div> - IE doesn't center things correctly in CSS. Other browsers do. Here's how to get everyone to play the game.

Minimizing Flickering CSS Background Images in IE6 - Flicker is an esoteric but rather annoying CSS problem, especially if the client's (or the client's boss') computer is configured in such a way that they are seeing it.

CSS Filters

Star HTML Selector Bug - Allows you to pass styles specifically to Internet Explorer (5.0/Win, 5.5/Win, 6.0/Win, 5.x/Mac).

IE5.x/Mac Band Pass Filter - Allows you to pass styles specifically to Internet Explorer 5.x for the Macintosh.

IE5/Win Mid Pass Filter - Allows you to pass styles specifically to Internet Explorer 5.x Windows. The styles will not be read by IE 6.0 Windows, nor IE 5.x Mac, nor any 4.x browser, nor any other browser (Firefox, Mozilla, etc.) for that matter.

High Pass Filter - Allows you to pass styles specifically to browsers that have good support for CSS. These styles will be seen by IE5/Mac, IE6/Win, Mozilla, Firefox, Opera, etc. They will not be seen by IE5/Win, IE4, NN4, etc.

Advanced CSS Techniques

Sliding Doors of CSS - Learn how to create stylized, tabbed navigation with variable widths. The sliding doors technique is hugely useful, especially when working with dynamic content where you don't actually know how much content there is, or how large it will be.

Sliding Doors of CSS, Part II - The second part of the sliding doors series has a number of fixes and enhancements over the first edition.

Creating Custom Corners - Break out of that boxy box, and learn how to give your website some style with custom, rounded corners.

Creating Custom Corners, Part II - Creating Custom Corners Part II - Once you've got the basics down, take it up a notch with gradients and other advanced techniques.

Fluid Shadows - The latest design trend.

CSS Flyover Navigation

Son of Suckerfish Dropdowns - Alpine's dynamic navigation package uses this approach to create flyover navigation. The navigation design is extremely flexible, once you learn the underlying HTML and CSS code.

Suckerfish Dropdowns - If you feel like a fish out of water, this is the original A List Apart article that discusses the suckerfish approach to flyover navigation. Alpine chooses to embrace the technique championed at Son of Suckerfish Dropdowns, due to its happier compliance in multiple browsers. Note: This approach seems to work in everything but IE5/Mac. In the comments there are tips for making the flyovers work in IE5/Mac, though Alpine does not currently use these techniques.

Internet Explorer Bugs and Fixes

Windows Explorer vs. the Standards - A good introduction to the CSS issues that dog Internet Explorer, with strategies for isolating, diagnosing and curing CSS bugs.

Explorer Exposed - An excellent collection of known Internet Explorer CSS bugs, and fixes for each.