By Louis Lazaris

The web form has been one of the most discussed elements in web design for more than ten years now. We can’t help it. Call-to-action functionality often leads users to a form; purchases are made using forms; users register or subscribe using forms — the uses for forms are endless.

While it is fairly easy to slap together a form in HTML, it’s not as easy to code, style, and design your form in a manner that makes it usable and accessible to the majority of users. Since forms play such a large role in website conversions and success rates, the tips below, as well as the resources provided at the end of this article, should prove valuable for developers creating and coding web forms.

Two-Column vs. One

This decision will generally depend on the content of the form, but it’s often preferable to avoid a two-column layout if the form is fairly simple.

Below is a good example of a simple form that places each label above its related form element.

What are the benefits to this type of form layout, as opposed to a two-column form? First, the form labels have plenty of space to allow for future changes to the text inside them. A two-column form could be limited in this regard, and might require the entire form to be restructured if changes are made. Another benefit is that the form is not as cluttered looking, having plenty of whitespace in the label areas, so it’s easy to read and easy to associate the labels with the fields. Additionally, the background color given to each label/field pairing makes the form more visually inviting.

By contrast, look at the two-column form below:

Especially because of the left-aligned text and lack of color, this form doesn’t have the same clean, visual effect as the previous example. In fact, the vertical space between the labels and the fields is somewhat distracting, giving the sense of multiple entities, when in fact a simple form like this should visually be presented as one grouped entity.

It’s not impossible, however to achieve a clean, organized look with a two-column layout, as shown by the example below from Chapters Indigo Books:

So, although there are no definite rules for the general layout of your form, effective guidelines include avoiding a two-column layout for simple forms, and aligning the text labels right if a two-column layout is used.

Use Inline Form Validation

Recently Luke Wroblewski wrote about the effectiveness of inline form validation on A List Apart. To quote directly from that article:

Our participants were faster, more successful, less error-prone, and more satisfied when they used the forms with inline validation.

jQuery Inline Form Validation, Because Validation is a Mess is a step-by-step tutorial describing how to use jQuery to add inline validation to a lengthy form.

Really Easy Field Validation

Dexagogo provides a simple script that can be used to add inline validation to your forms. The demo example is not the prettiest, but of course it can be customized to suit your needs. The script uses Scriptaculous for the fade-in effect.

Group Related Fields

With a lengthy form, you’ll be limited as to what you can do to improve its usability, but grouping related fields together to divide the form into manageable visual components will make the form a little less intimidating. Thus, the form will be perceived to be easier to fill out, even though it will probably take about the same amount of time as a form that has no grouping of fields.

To group related fields, use <fieldset> and the optional <legend> element, as shown in the code below:

<form id="form" action="register.php" method="post">

	<fieldset>
		<legend>Basic Info</legend>
		<div>
		<label for="name">Name:</label>
		<input type="text" name="name" id="name" />
		</div>
		<label for="password">Password:</label>
		<input type="text" name="password" id="password" />
		<div>
		<label for="password-confirm">Confirm Password:</label>
		<input type="text" name="password-confirm" id="password-confirm" />
		</div>
	</fieldset>

	<fieldset>
		<legend>Address</legend>
		<label for="address">Address:</label>
		<input type="text" name="address" id="address" />

		<label for="address2">Address (cont'd):</label>
		<input type="text" name="address2" id="address2" />

		<label for="zip">Zip/Postal:</label>
		<input type="text" name="zip" id="zip" />

		<label for="city">City:</label>
		<input type="text" name="city" id="city" />

		<label for="country">Country:</label>
		<input type="text" name="country" id="country" />

	</fieldset>

</form>

The <fieldset> element by default has a border, which can be changed, and is often removed in a CSS reset. Below is an example of a single form that is divided into two sections using <fieldset> and <legend> elements:

Cosmicsoda Registration Form

Unfortunately, the display of the border on the <fieldset> is not the same across all browsers, so it is usually best to disable the border in your stylesheet and create a custom border by some other means. This will also affect the look of the <legend> element, so it’s rare to see the use of these two elements nowadays. But the <fieldset> can still be used to group elements, and custom borders and headings can be included to provide the same basic effect. The <fieldset> and <legend> elements also have the added benefit of contributing to a form’s accessibility.

Clearly Indicate Required Fields

It’s common to indicate required fields by means of the asterisk symbol (*) in a different color than the rest of the text, so the required indicator stands out. Although most sites nowadays include this indicator, some still fail to use it properly.

The explanatory text that describes the purpose of the asterisk should be placed immediately above the form that is to be filled out, so the users see it before they begin filling it out. Some sites have used the asterisk character somewhat like a footnote indicator, placing the description of the asterisk below the form. The example below from the Elderluxe contact page demonstrates this poor placement of the the text that explains the meaning of the asterisk:

Elderluxe Contact Form

The example above has two problems: the asterisks are the same color as the rest of the text, and the explanation of the asterisk is near the bottom of the form. In many instances, asterisks alone would be enough, without any explanation, but if your target audience is not as computer-savvy, you will likely want to include at the top of the form a brief description of what the asterisk means.

The example below from Office Depot’s registration page demonstrates a properly-placed asterisk description:

Office Depot Registration Form

Although the example form above does have problems (left aligned text, small type, little use of whitespace), it clearly indicates required fields and explains the meaning of the asterisk before the user begins filling it out. This is especially important in this example, since the first three fields are not required, thus the user can safely skip them.

Fancier Checkboxes, Radio Buttons, and Select Elements

Forms can look awfully dull, especially since the styling of <select> elements, checkboxes, and radio buttons is limited in most browsers, and it is impossible to use CSS alone to style those elements to look exactly the same in every browser. Fortunately, there are a number of JavaScript library plugins and code that allow developers to include fancier, cross-browser form elements that degrade gracefully.

jQuery Checkbox allows you to insert custom checkboxes and radio buttons into your forms. I don’t particularly care for the look of the radio buttons in this case (they look nothing like radio buttons), but it’s one option to consider.

jQuery Image Combobox is a fully skinnable image-based replacement for the browser’s usually-ugly <select> element.

Giva Labs mcDropdown jQuery Plug-in is an intuitive, keyboard-accessible, easy-to-implement replacement for a typical <select> element that allows for nested data.

Display a Hint When a Field Gets Focus

Complex forms with many different fields can be easier for the user to fill out if some help text is given. Of course, you don’t want to overwhelm the user with one or more paragraphs of text above the form explaining what the fields are for.

As a simple alternative, you can write some JavaScript (or use a customizable plugin) that will display a custom tooltip-style message to explain form elements that might be confusing, or that require a certain type of input (for example, a username that only allows letters or numbers and must have at least 6 characters).

jQuery Input Floating Hint Box is a simple plugin that displays a fully-customizable floating hint when a field gets focus.

DHTML Goodies Form Field Tooltip is another variation of the form field helper text that displays the helper text based on what is entered in the form field’s title attribute.

Be Generous with Whitespace

As mentioned earlier, forms can look ugly and cluttered if the elements in the form are not displayed in a clean, usable manner. We generally think of the use of whitespace in our overall site design, but the same principle can be applied within a form, even down to the smallest details.

You can improve a form’s design by adding appropriate amounts of space around field elements, giving the elements themselves a larger and more usable size, and also allowing plenty of space inside text fields by using padding in your CSS. For example, try typing some text into the two fields below.

With just a small difference in size and padding, the second input field has a more usable feel. When multiple text fields appear in the same form, this can make quite a difference in how the overall experience is perceived, even though technically it might not make a whole lot of difference as far as how long it takes the user to fill it out.

It also helps to allow text fields to have plenty of visible characters. A name field especially should have plenty of space to allow for longer names. Overflow of characters will start pushing the text out of view, so it’s best to have enough space to accommodate longer names so that the user can more easily spot mistakes. The example field below demonstrates how a longer name would be cut off.

A text field that is similar in size to the ones in the previous example would be more appropriate and would allow for longer input to be entered without the risk of cutting anything off. The same principle would apply to a search box that may potentially receive long queries as input.

Make Your Forms Accessible

The topic of accessible forms could easily encompass an entire article and much more, but here are just a few tips to ensure your forms are more accessible and usable to a diverse audience.

• Use the title attribute for inputs, to assist those using screen readers
• If a label doesn’t wrap around the field it is associated with, use a for attribute that matches the accompanying field’s id
• Set a tab order using the tabindex attribute on each element
• For the tab order, increment the tab numbers by large amounts (e.g. “10, 20, 30…” instead of “1, 2, 3…”), to allow for later additions that don’t require rewriting all the tab indexes
• For radio buttons and checkboxes, put the label after the associated element so screen readers read the item first and the word “checkbox” or “radio button” second
• Use the <optgroup> tag to group <select> items
• Use the accesskey attribute on form elements, to allow keyboard access

Further Reading

• Creating Accessible Forms
• Beautiful Forms – Design, Style, & make it work with PHP & Ajax
• HTML Forms and Input on W3Schools
• 25 Web Form Optimization Tips
• Accessible Forms
• Web Form Design: Modern Solutions and Creative Ideas

  

Web development can be tricky and time-consuming. To be more effective and productive, we, designers and developers, can integrate useful tools in our daily routine. Also, handy resources can be very valuable as they can help us enhance communication with clients and other developers as well as improve the quality of our work. We are permanently looking for new tools, techniques, resources and services that can improve your workflow and increase your productivity.

In this post we present a couple of extremely useful and valuable tools and resources that we found over the last months. Please make sure to follow us on Twitter for a stream of useful resources, tools and design-related articles.

Getting Inspired: Interesting Redesign Projects

Boarding Pass / Fail
A boarding pass redesign project by Tyler Thompson, the Creative Director at Squarespace. How would you design a boarding pass? The result is very impressive.

You’re killing me, Zappos
Andrew Wilkinson’s attempt to redesign Zappos.

Dollar ReDe$ign Project
An attempt to rebrand the US Dollar, rebuild financial confidence and revive our failing economy. Created by Richard Smith.

Useful Front-End and Back-End Tools

ie-css3.js
CSS3 pseudo selector emulation for Internet Explorer 5-8. ie-css3.js allows Internet Explorer to identify CSS3 pseudo selectors and render any style rules defined with them. Simply include the script in your pages and start using these selectors in your style sheets — they’ll work in IE. An alternative is Offspring.js.

CorMVC
CorMVC is a jQuery-powered Model-View-Controller (MVC) framework that can aide in the development of single-page, web-based applications. CorMVC stands for client-only-required model-view-controller and is designed to be lowest possible entry point to learning about single-page application architecture. It does not presuppose any server-side technologies, or a web server of any kind, and requires no more than a web browser to get up and running.

Typograph
A typographic tool that generates CSS for beautiful web typography, according to traditional scale and vertical rhythm.

Venkman JavaScript Debugger project page
Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Gecko-based browsers namely Firefox 3.x, the Netscape 7.x series of browsers, Netscape 9.x series, Mozilla Seamonkey 1.x and Mozilla Seamonkey 2.x. It does not include Gecko-based browsers such as K-Meleon 1.x, Galeon 2.x and Netscape 8.x. The debugger is available as an add-on package in XPI format. Venkman JavaScript Debugger has been provided as part of the Mozilla install distribution since October 3rd 2001.

JavaScript Frameworks Playground: jsFiddle
jsFiddle is a shell editor that eases writing JavaScript code by creating a custom environment based on popular JS frameworks.

jslib
Mozilla gives a great flexibility and power to Javascript. This popular client side scripting language can be used to create application level logic and services for cross platform application development.
Goal: jslib has a simple goal, “Make life easier for Mozilla Application Development by creating logical, easy to use API’s for general purpose routines that lend themselves to living in library code.”

PHP debug tools
A set of useful PHP debugging tools for debugging script trace, errors and database queries.

The Automatic CSS Inliner Tool
If you’ve ever sent an email campaign, you know that if your CSS is not coded inline, it is likely to get stripped out by email clients, which can make your email design pretty funky looking. Writing CSS inline can be time consuming, and repetitive. MailChimp has a CSS inline conversion tool built right in that will automatically transform all of your local styles into inline styles. Designers have found it so useful, we thought we’d share it with everyone else – even if you don’t have a MailChimp account.

HTML Purifier – Filter your HTML the standards-compliant way!
HTML Purifier is a standards-compliant HTML filter library written in PHP. HTML Purifier will not only remove all malicious code (better known as XSS) with a thoroughly audited, secure yet permissive whitelist, it will also make sure your documents are standards compliant, something only achievable with a comprehensive knowledge of W3C’s specifications. Tired of using BBCode due to the current landscape of deficient or insecure HTML filters? Have a WYSIWYG editor but never been able to use it? Looking for high-quality, standards-compliant, open-source components for that application you’re building? HTML Purifier is for you!

InAppSettingsKit
InAppSettingsKit is an open source solution to to easily add in-app settings to your iPhone apps. It uses a hybrid approach by maintaining the Settings.app pane. So the user has the choice where to change the settings.

Dabr
Dabr is a PHP web interface to the Twitter API for mobile devices.

SproutCore
SproutCore: JavaScript HTML5 Application Framework

Your Bookmarklets, On Steroids
Quix is an extensible bookmarklet, that allows you to easily access all your bookmarks and bookmarklets, across all your browsers, while maintaining them in only one spot. All you have to do is remember the shortcut for the bookmarklet, so, basically, it’s like a command line for your browser.

IxEdit
IxEdit is a JavaScript-based interaction design tool for the web. With IxEdit, designers can practice DOM-scripting without coding to change, add, move, or transform elements dynamically on your web pages. Especially, IxEdit must be useful to try various interactions rapidly in the prototyping phase of your web application.

minibuilder
Flash MiniBuilder is a lightweight IDE created for developing programs written in ActionScript 3.

Real-time HTML Editor
Type HTML in the textarea above, and it will magically appear in the frame below.

Unicode code converter v7.0.1
Type or paste text in any of the green or grey shaded boxes and click on the button Convert button above it. Alternative representations will appear in all the other boxes. You can then cut & paste the results into your document.

Detect Mobile Browser
Open source mobile phone detection script.

Show {if}
A script for a better targeting of site visitors.

typeQuery
typeQuery, change website typography with jQuery.

Gipetto’s wordpress.tmbundle
A WordPress focused TextMate bundle to rule all WordPress Textmate bundles.

Graudit
Graudit is a simple script and signature sets that allows you to find potential security flaws in source code using the GNU utility grep. It’s comparable to other static analysis applications like RATS, SWAAT and flaw-finder while keeping the technical requirements to a minimum and being very flexible.

WordPress Plugin Maker
This plugin is made for developers or WordPress users who love Cut and Paste and hate FTP . If you have ever been in a pinch where you wanted to create a quick WordPress plugin to do something but didn’t have FTP info or weren’t at your terminal you can use this plugin to be a life saver.

Web development and deployment tools
Free online-based IDE for professional web-development.

Create diagrams online Real time collaboration
Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts. Cacoo can be used free of charge.

UKI – Simple UI Kit for complex web apps
Uki is a fast and simple JavaScript user interface toolkit for desktop-like web applications. It comes with a rich view-component library ranging from Slider to List and SplitPane.

snap{css}: an open-source CSS editor for Windows
snap{css} is an extremely light-weight, notepad-like application that allows css designers to easily edit their code in a familiar environment while having quick acccess to helpful features such as our beautify and collapse functions.

jQuery Browser Plugin
A jQuery plugin extending browser detection capabilities.

jsPDF
jsPDF generates PDF documents using pure JavaScript

Grid System Generator
Grid System Generator includes generated grids, tutorials and resources.

User Agent Switcher Firefox Extension
The User Agent Switcher extension adds a menu and a toolbar button to switch the user agent of the browser. It is designed for Firefox, Flock, Seamonkey and Songbird, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

Useful Resources For Web Developers

ASCII Table – The Pronunciation Guide
The ASCII Symbols Pronunciation Guide

Five Awesome On-Screen Rulers
They’re not the sexiest programs in the world, but for many designers, on-screen rulers are must-haves. Here are five of the best- including the one I can’t live without. All free.

Using HTML Symbol Entities

Editorial Style Guides
This page provides a list of resources available for the web designer or developer who needs to create an editorial style guide for writing web site copy.

Open standards Web design with CSS, XHTML, Java servlets and Javascript
Code Style answers key questions for Web developers. Which Web fonts are most common? How to use media dependent style sheets? Make more robust, accessible Websites with open standards technology.

20+ Must have documents for Designers and Developers
In this post, you would find a list of over 20 free PDF files covering aspects of Web Development as well as Graphic design. These include cheat sheet for web developers, client questionnaires for Graphic and Web design, helpful checklists as well as some useful resources for designers and developers. All of these are available in PDF format as they are easy to print. I have a number of them hanging around in my work area and find them quite useful. It would be great if you have any helpful documents to share.

45 Incredibly Useful Web Design Checklists and Questionnaires
45 checklists to make your design process easier and more organized. Consider using these checklists as a jumping off point for creating your own customized list, based on your own needs.

PowerPoint Search Engine with detailed thumbnail results
SlideFinder: a search engine for slides and presentations.

Web Development for the iPhone: HTML & CSS Support
Safari and Safari for the iPhone support all HTML elements, including deprecated elements and even some proprietary elements that were never part of any W3C specifications. In addtion, Safari supports some HTML5 elements, even though the HTML5 specifications have not been finalized.

GrepDocs.com – all your docs are belong to us – PHP, Perl, CSS, HTML, Java, JavaScript, MySQL, Ruby, Python, and more
GrepDocs: a search engine for programming documentation

Last Click (= a bit of fun)

ASCII Fire Animation with JavaScript
This is when JavaScript is abused: ASCII Fire with JavaScript.

256b.htm (D)HTML Competition
256b.htm Competition: create a website in just 256 bytes

Browser Pong
This is definitely the best use of pop-ups for a long time. If you haven’t seen this, you must see it. It will make your day. Press “P’ for start.

  

By Tim Wright and TJ Kelly

CSS is the best thing to happen to the web since Tim Berners-Lee. It’s simple, powerful, and easy to use. But even with all its simplicity, it hides some important capabilities. Ask any designer, and they’ll tell you that the majority of their code headaches are caused and ultimately solved by CSS.

All designers at some point in their career go through the process of encountering a weird display issue, searching for a resolution, and discovering a trick, technique, or hack could have saved them hours of frustration—if they had only known when they started.

We’ve put together a list of the most frustrating and time-consuming CSS headaches and, more importantly, their solutions (along with examples and further resources). I hope this list will help you save some gray hairs. As for me, I think I feel some coming in right now…

Resets & Browser Inconsistencies

Not all browsers are created equal. In fact, every browser is different. What is the default margin, padding, or font-size of a <p> element? You might be surprised at the wide range of values. To handle the differences between browsers, many of us want to level the playing field and start from scratch, by using CSS reset styles.

The early stages of resets, designers dealt with differing margin and padding values, using a global reset:

* { margin: 0; padding: 0; }

But, as more people used and discussed resets, it became clear that resetting only margin & padding wasn’t enough (and, applying the above rule to every element is taxing on the rendering engine). Thanks to the work of Eric Meyer and other CSS pioneers, a better, more complete collection of reset rules was created:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	}
/* remember to define focus styles! */
:focus {
	outline: 0;
	}
body {
	line-height: 1;
	color: black;
	background: white;
	}
ol, ul {
	list-style: none;
	}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
	}
caption, th, td {
	text-align: left;
	font-weight: normal;
	}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
	}
blockquote, q {
	quotes: "" "";
	}

As important as it is to note which elements are included in the most popular CSS reset available today .It’s also important to note some of the elements that are deliberately excluded from this list:

• input
• button
• hr

These elements were excluded because their cross-browser differences are so vast that you would have to completely unstyle them to create a "bulletproof" element. They’re so weird, that even then, there’s no guarantee.

Resources for Resets

• Eric Meyer’s Resets and the reasoning behind them
• Smashing article: “Design from Scratch”
• Google BluePrint CSS & Resets
• Yahoo YUI CSS Resets

Box Model — Margin, Padding & Borders

The box model is the basis for all layouts. It governs the dimensions & spacing of the elements on a page. To understand it, we have to understand the difference between block-level elements and inline elements.

Block-level elements, by default, take up the entire width of their containing element and the height of the default line-height. They will stack up underneath each other, top-to-bottom. Therefore, by default, they will take up their own line on a page. Some block-level elements are: <div>, <pre>, <p>, <ul>, <ol>, <li>, etc.

Inline elements are, just as their name implies, in-line. They will stack up next to each other, left-to-right. When given content, they will take up the exact width and height of that content. Given no content, they will collapse down and have no width or height. Some in-line elements are: <img>, <em>, <strong>, <a>, <span>, etc.

All HTML block-level elements have five spacing properties: height, width, margin, padding, and border (inline elements have them too, they just work a bit differently). Width and height are tricky attributes, as they require a bit of calculation. When measuring an element’s width, designers must consider the entire box.

In the example below, the box has a total width of 260px. The margin, padding, and border are 30px each (remember, that’s 30px on top, 30 on bottom, 30 right, and 30 left). So, in this example, the margin takes up 60 pixels of the box’s width. Likewise, the border and padding consume 60px each. All together, the margin, border, and padding amount to 180 pixels of the box’s total width.

We know that the box’s total width is 260px, but in CSS the width attribute refers to the content area on the inside of the box. So, for this example, we have to subtract 180 pixels (for margin, border, and padding) from 260 (total box width), leaving us with a content area of 80px. Therefore, our CSS looks like this:

div {
  margin:30px;
  border:30px solid yellow;
  padding:30px;
  width:80px;
  height:80px;
}

Extras

1. All of the examples and rules we’re discussed for the width property also apply to height.
2. margin can support negative values. Use them cautiously but they can prove to be very strong design elements.
3. Don’t forget the units with the box model. Only a zero-value (margin:0;) can be written without a unit specified.

Resources for CSS Box Model

• W3C CSS Specifications
• HTMLsource Box Model tutorial by Ross Shannon
• “Beginner’s Guide to Margins and Paddings” at Web Designer Notebook

Dimensions — Width, Height, Min & Max

Now that we understand how to use width and height in unison with the box model, let’s look at some of the flexibility of CSS dimensions. Modern browsers support min- and max-width (and the same for height), allowing us to get creative with dimensions and create flexible layouts.

Width/height specify the space an object should occupy. They can be measured in pixels (10px), ems (10em) and percentages (10%), as well as a few other units. Defining a width or height for an element will force that element to keep those dimensions, regardless of the content inside it. So, if our content is too big for its container, it will be cut off, hiding the bottom of our content (or just look really messed up).

Min-width & min-height

Giving an element a min-width or min-height will set the element to our exact dimension by default. But, since we only provided a minimum dimension, as the content grows, the containing element will allowed to stretch and all of our content will remain visible.

Min-width & min-height can he useful for form elements like <input /> and <textarea>. We can define them with a minimum width/height and let them expand as the user types.

In IE6, "height" acts the same way "min-height" does in modern browsers as a container will grow with content (something to be aware of when using building for IE6).

Max-width & max-height

If we give an element a max-width or max-height, it will collapse down to the size of our content by default. As our content grows, the container will stretch—until it reaches our maximum. Then our remaining content will be cut off or look really weird hanging of the bottom of a content block.

Max-width & max-height can be useful for browsing long lists (if you correctly manage your overflow – create scrolling if the list goes too long).

Using Max & Min width in IE6

Min & Max width are both great tools to have in your design arsenal, but unfortunately they don’t work in IE6, so what do we do? We usually lock down the width of our site instead of creating the ideal fluid layout we want, sacrificing user experience for out of date browsers.

Luckily, we can use a short JavaScript command targetting IE to accomplish a nice fluid layout with max & min widths in IE6:

#page-wrap{
min-width:800px;
max-width:1000px;
width:expression(document.body.clientWidth < 800? "800px" : document.body.clientWidth > 1000? "1000px" : "auto");
}

In the above example, you can see that the smallest width for this page is 800px, and the largest is 1000px; not much of a flex, but the concept can be applied to any element.

And if you only wanted to use min-width:

#page-wrap{
min-width:800px;
width:expression(document.body.clientWidth < 800? "800px": "auto" );
} 

Resources for dimensions

• Top 10 CSS Tricks from SitePoint
• Cross Browser Min-height
• Min-width for Internet Explorer
• CSS Dimension Properties

Floats & Clearing

A float will place an element outside the normal flow of elements and moves the element right or left until it reaches the margin or padding of another block-level element. Float and clear are some of the most powerful—and the most misunderstood—properties in CSS. To understand it, we must refer back to block-level vs. inline elements.

Applying float to an element will automatically make it a block-level element. This means two things: 1) by default, all floated elements (even <span> and <strong>) will behave like block-level elements, 2) Giving an element both float:left; and display:block; is redundant and unnecessary. Also, using display:inline on a floated image is actually a very popular method of fixing many cross-browser quirks.

Floating a div to clear a div

Floating a div to clear a div is one of those things you stumble upon with some experimenting and frustration. What basically happens is that you can apply a float to a parent element that contains other floated elements and they will all equalize and clear properly:

HTML

<div class="parent-element">
     <div class="floating-element"></div><!--/.floating-element-->
     <div class="floating-element"></div><!--/.floating-element-->
     <div class="floating-element"></div><!--/.floating-element-->
</div><!--/.parent-element-->

CSS

.floating-element   { float:left;width:33%; }
.parent-element     { float:left; }

And, of course you’ll need some content in there to fill out the divs.

There are a lot of clearing techniques you can use to clear floated divs. Some require extra markup, some don’t work in IE 6 and some are great, but don’t apply to every situation. What did I wish I knew about clearing floats when I started? Everything.

Resources for clear and float

• CSS Float Theory
• CSS Float Property
• Clearing Floats
• Using Floats for Layout

Conditional Comments

Back in 2004, when I really got into full-time Web design I used a lot of IE hacks and techniques to patch together sites in an attempt to achieve some level of cross browser compatibility. This can cause very bloated and slow loading style sheets. Everyone was doing it, heck, there were even articles about how to best organize your IE hacks.

Little by little the design community discovered a hidden gem buried within the functionality of the Triton rendering engine (Internet Explorer). You could use IE specific HTML to target specific versions of the browser and then load a special style sheet just to deal with those issues.

<!--[if IE]>
Target all versions of IE
<![endif]-->

<!--[if lte IE 7]>
Target all versions of IE that are less than or equal to "7"
<![endif]-->

<!--[if IE 6]>
Target IE 6
<![endif]-->

Using conditional comments to target IE and cut out your hacks, will slim down your main style sheet, and help load the page quicker in browsers that don’t need the correction code.

Resources for Conditional Comments

• Conditional Comments
• How to: CSS Conditional Comments
• About Conditional Comments from Microsoft

Overflow & Zoom

Like many designers, if there’s time to be wasted on a project, it usually gets wasted dealing with IE 6 and some of it’s weirder quirks. This is where overflow and zoom have helped me a great deal.

Overflow

Many-a-times when I’ve encountered a serious layout issue, a simple application of overflow:hidden on the offensive div would solve the problem. It’s difficult to pin point specific issues for this, but it can happen in any browser (I just had it happen in Safari a couple weeks ago) and the overflow property can provide a quick solution to your cross browser woes.

Zoom

To my surprise, the zoom property is not very well know, but a very powerful tool in dealing with cross browser issues; particularly IE 6/7. Zoom is a proprietary IE property that actually does effect the zoom level of a page (if you set the zoom to 2 you’ll see everything get bigger). As a site effect it also triggers hasLayout on the offending element, and fixes a lot of layout issues. Try it out, it actually saves a lot of time.

body { zoom:1; }

Since hasLayout won’t trigger in any other browser, it’s generally thought to be safe to put zoom in your main style sheet, but it you’re doing IE specific work anyway, I’d advise putting it in with the rest of the IE CSS just in case there are any problems in the future, "future proofing".

Resources for Overflow & Zoom

• Web Master World Forum
• The Power of Zoom
• About Overflow from QuirksMode

When CSS isn’t the Answer

Believe it or not, CSS is not always the answer. Especially now when we live on a Web that is in the middle of the biggest browser war to date. Sometimes CSS just doesn’t do everything we want on as many platforms as we need it to.

Spending hours searching for a CSS solution to a non-critical element that can be easily fixed with JavaScript usually just isn’t worth it. Now that we have great libraries like jQuery readily available to us, anyone well versed in CSS can quickly pick up JavaScript. And let me tell you… if I new more about JavaScript when I started it would have saved me a lot of time and frustration.

Conclusion

There are a lot of little idiosyncrasies with CSS that you’ll encounter over time with experience and frustration, but we’re looking for ways to minimize that frustration. The best advice I can give someone in dealing with CSS is the same advice someone gave me when I was in college: go to class. If you read the blogs, keep up with all the information and learn everything you can you’ll save a lot of time when you do encounter the inevitable rendering problem. To be honest, half the battle is knowing what a bug is called so you can Google it.

But of course an article like this always poses the question: What do you YOU wish you knew when you started?

About the Author

Tim Wright is a web designer/developer and blogger. He has been an advocate for Web standards and accessibility since 2004. You can find more of his writing at CSSKarma or follow Tim on Twitter.

TJ Kelly is a web designer/developer from Boston, MA, USA. He specializes in UX/UI design, CSS/jQuery, WordPress, SEO, and Social Media. He’s passionate about W3C Web Standards, accessibility, and usability. Check out his blog and portfolio at www.tjkelly.com and follow TJ on Twitter.

  

Over the last decade web designers managed to come up with a plethora of useful techniques and design solutions that make today’s web development process much more straightforward and simple. Some techniques were simply applied to the Web, while others were developed from scratch, helping developers to use off-the-shelf-solutions to problems quicker and in a more elegant way. However, finding little slick tricks to fix your site takes a tremendous amount of time, and that’s not counting the time to implement them. We have put together a list of resources for developers and designers, to save you time so you can have enough time to have some fun too.

Here we present 45 very useful development tools such as grids, image solutions, typography, iPhone tools, HTML 5 helpers, testing resources, WordPress tools and helpers, CSS code tools and other further useful tools, time savers and resources. Enjoy this web development goodies bag!

Also consider our previous articles:

Fresh Web Development Goodies Bag with 30 useful development tools to inspire you and make your life easier.

Typeface and Terminology

eXtreme Type Terminology
eXtreme Type Terminology is a five-part article that covers most anything you might have wanted to know about the evolution of type terminology.

CSS Web-Typography Matrix and code generator
CSS Web Typography Matrix and code generator is a matrix for calculation of font sizes and line spacing in em and px. It’s a very handy tool to utilize!

Differential Presentation of 40 Onscreen Typefaces
This article presents results from a study investigating the personality of typefaces. 40 typefaces (from serif, sans serif, display, and handwriting classes) were rated, using semantic differential scales. Responses are shown by typeface class and individual typeface using scaled scores. These results are helpful to practitioners when deciding which typeface to use for online text.

iPhone tools

jQTouch
jQTouch is a jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.

iphonedebug
iPhonedebug is the iPhone Debug Console meant to give greater visibility and interactivity on your iPhone/iPod Touch while doing development. This was created after the frustration of having to go through the “include console.log statement then reload” method of debugging. It is similar to Firebug’s fantastic console and debugger.

iUI: iPhone User Interface Framework
iUI: Framework for Safari development on iPhone iUI is a framework consisting of a JavaScript library, CSS, and images for developing iPhone webapps. It makes WebApps look and feel like iPhone native Apps.

Pipho -PHP iPhone Optimized Image Gallery
Pipho reads photos from any directory, creates resized thumbnail and slide images, and combines it with the Jaipho javascript. It also supports text files as descriptions for both gallery and slides. Pipho requires PHP5 and is written in the Zend Framework, but does not requires any Zend class. All PHP classes are stored in library folder.

iPhone 3G Stencil
iPhone 3G Stencil includes the standard interface components for the iPhone 3G: buttons, fields, map elements, keyboards, icons. All components are on a transparent background and should re-size nicely.

Grids

GridFox – The Grid Layout Firefox Extension
GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.

Layout grids for Axure and Pencil
These layout grids are designed for use with Axure RP Pro 5 and the Pencil extension for Firefox. For Axure, this resource will help you layout prototype web pages using the 960-grid system, having grids for 2, 3, 4, 5, 6, 8, 12 and 16-column layouts as well as a thirds (and a reverse-thirds) grid. The Pencil grids are for 12 and 16-column layouts.

960 Gridder
960 Gridder is an excellent tool for any web developer/ designer that wants to easily align, match and/or lay out websites. Essentially, it is a bookmarklet that can be used to put an overlay on a given website.

Grid System Generator
This tool generates grid systems on the fly: supported are the frameworks 960.gs, Golden Grid, 1kb grid and a plain simple grid system. You can select the width of the layout, a number of columns as well as horizontal margins.

Blueprint Cheatsheet (PDF)
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing. This cheat sheet refers to the recently released version 0.8 of the Blueprint CSS framework.

Easy Image Solutions

ImageOptim
ImageOptim is a front-end (GUI) for set of tools for optimization of PNG/JPEG images and GIF animations. Optimization makes files smaller by finding optimal compression parameters and by removing unnecessary information, like file comments, EXIF tags and color profiles. It’s excellent for publishing images on the web and also useful for making Mac and iPhone applications smaller.

Content Aware Image Resizing
This technique resizes images depending on the current browser window size, making the content more adaptive for various screen resolutions. It is implemented with JavaScript: Drag the right border of the top image or use left (and right) arrow keys. Then use the form to change settings. This demo requires Firefox 3.5 at least.

CSS Sprite Generator
CSS Sprite Generator allows you to choose and upload the image files you want to use in your CSS Sprite and click “Create CSS Sprite.” The application will join all your image files into a single file and will generate the corresponding CSS and HTML code along with the rollover effect if any chosen.

Horinaja
Horinaja is a ready-to-use slide-show implementation, utilizing either scriptaculous/prototype or jQuery. When the mouse is outside of the slide-show area, it scrolls. When hovering over the slide-show, the scrolling pauses. It can automatically create slide indices (pagination), if required. To manually scroll, either click on the slide index links (pagination) or use your mouse wheel.

SpriteMe
Background images make pages look good, but also make them slower. Each background image is an extra HTTP request. There’s a fix: combine background images into a CSS sprite. But creating sprites is hard, requiring arcane knowledge and lots of trial and error. SpriteMe removes the hassles with the click of a button.

HTML 5 Helpers

Google Chrome Frame
GoogleChrome Frame is an early-stage open source plug-in that seamlessly brings Google Chrome’s open web technologies and speedy JavaScript engine to Internet Explorer. With Google Chrome Frame, you can: Start using open web technologies – like the HTML 5 canvas tag – right away, even technologies that aren’t yet supported in Internet Explorer 6, 7, or 8. Take advantage of JavaScript performance improvements to make your apps faster and more responsive.

Modernizr
Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Testing Resources

The myth of the page fold: evidence from user testing
As web professionals, we all know that the concept of the page fold being an impenetrable barrier for users is a myth. Over the last 6 years and over 800 user testing sessions later, only 3 occasions did the page fold act as a barrier to users getting to the content they want. This article breaks down the page fold myth and give some tips to ensure content below the fold gets seen.

Browsera
Browsera offers automated browser compatibility testing. It can automatically detects cross-browser layout problems and scripting errors on your website. Discover layout problems, test pages behind login, test dynamic pages, locate JavaScript errors, test your entire site.

ABtests
ABtests is setup to let you test your websites/applications and share that knowledge with others, making everyone smarter in the process. Here are some things you can do at ABtests: View and learn from other people’s test results;Upload your own test results and share with colleagues or clients; Follow ABtests on Twitter to get a firehose of A/B and multi-variate testing related information.

Browserscope
Browserscope is a community-driven project for profiling web browsers. The goals are to foster innovation by tracking browser functionality and to be a resource for web developers. Gathering test results from users “in the wild” is the most important and useful feature of Browserscope – and you can participate! Try it and find out how your browser compares.

Effective A/B Testing
Say you’ve created a new design which you feel is more effective but you’d like to know for sure. A/B testing is a simple idea. Create two versions of something and put people through the different versions. Track what they do afterwards and figure out which version causes more people to do what you want. Go with the better version. This slideshow will be both very informative as to why and how to effectively A/B test. Even the S5 used for the slideshow is available for free download.

WordPress Tools & Helpers

WordPress Debug Theme
Sometimes you need to see what’s wrong with a WordPress install, and you need to see it fast. This shows you the important URL’s, editor, and memory settings, etc. On subpages it will show you something else: the page type, all the query vars that are set and the SQL query for that page. When just doing a print_r or var_dump of $wp_query is hard to read, but this theme tries to be a bit smarter about that. This theme also works in the preview, so that might be enough in a lot of cases.

Web Design WordPress Template Tag Reference Guide
Do you need a WordPress Reference Guide? This content was reformatted for quick reference from the Template Tag section of the WordPress.org Codex, a relative encyclopedia to WordPress theming, and great reference for your WordPress questions.

List of all WordPress hooks
This is precisely what it claims to be, a list of all WordPress hooks. That’s right, currently a list of 989 WordPress hooks. You can click a column name to sort, view a specific hook’s version history and file locations, or find out the deprecated hooks so you do not use them.

Launching Freebie Images WordPress Plugin
Spice up your blog with professional, high quality, free stock photos and images. With an amazingly simple Drag and Drop interface, blogging has never been this easy. The Freebie Images Plugin gives you a micro format search interface inside your WordPress Admin where you can search for and add images to your blog post – free of charge. The images are perfectly sized for blogs – between 300px and 400px width.

CSS and Code Tools

CSS-JS-Booster
CSS-JS-Booster is a PHP-script that tries to automate as many performance optimizing steps related to CSS and JS embedding as possible. This is an easy to use PHP-Library that combines, optimizes, dataURI-fies, re-splits, compresses and caches your CSS and JS for quicker loading times.

xCSS
xCSS bases on CSS and empowers a straightforward and object-oriented workflow when developing complex style cascades. Using xCSS means a dramatic cut down to your development time by: having a intuitive overview of the overall CSS structure, using variables, re-using existing style cascades and many other handy features. But most frameworks are bulky and inflexible, aren’t they? Not xCSS! It’s lightweight and seamlessly integrates into any existing workflow. Aside from that, the CSS overhead is getting reduced while your (X)HTML attributes remain semantic.

DBG
DBG is a a full-featured PHP debugger, an interactive tool that helps you debug PHP scripts. It works on a production and/or development web server and allows you to debug your scripts locally or remotely, from an IDE or console.

CSS Browser Selector
CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

Detecting unused CSS selectors
Many selectors and classes come and go while developing and testing. After a while, you will easily see style files that become untouchable: you don’t know which classes or selectors are being used or not. The same uncertainty creeps in when you maintain someone else’s site. There are several solutions out there about detecting unused classes and selectors, but here you can find the most popular.

Textmate: Re-Usable Command Basics
With Textmate, there are a whole host of available commands and bundles, but what if you need to extend existing ones or create your own? This covers some of the basics like using filter through command, re-using commands, adding simple UI elements which will help you get started.

Further Useful Tools, Time Savers & Resources

Quick Tip: Dynamically add an icon for external links
A common feature on Web 2.0 sites and wikis is the “external link” icon: external link. This is a great candidate for using progressive enhancement. By using just a little jQuery, you can easily add the images. So, that’s it. Short and sweet, a quick tip, how-to and code to help you accomplish it fast.

XRAY
XRAY is the easiest way to look beneath the skin. XRAY is a bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (including Safari, Firefox, Camino or Mozilla). Use it to see the box model for any element on any web page.

An AJAX Based Shopping Cart with PHP, CSS & jQuery
In this tutorial, you will learn to create a functional AJAX driven shopping cart. You are free to download the code and modify it any way you wish. You can build upon it and even turn it into a full-fledged online shop.

jsHub
jsHub simplifies connecting software services to websites. Websites typically connect to many different software services – web analytics, audience measurement, optimization, and many more. Each connection is made with a small piece of code called a ‘tag’. Some sites have 10 or more tags on a page, and each one adds to the time it takes for the page to load. Each tag needs similar information to be written into the page, but in a slightly different format, and this can cause awkward inconsistencies. jsHub is a suite of tools and a set of standards, that help you to make better websites. Tagging doesn’t have to be painful.

Kotatsu – a simple HTML table generator
When you need to create a table, here is a tool to help create a table and row in column classes quickly. It’s called Kotatsu.

iWebSkel
iWebSkel is the ultimate ready to use kit for website design. It features only the latest version essential components to start developing quickly using XHTML, CSS, and Javascript.

Patterns for the Color Blind
About 8% of the male population has some sort of color blindness. The color blind have the inability to clearly distinguish different colors of the spectrum, they tend to see colors in a limited range of hues. Because of this, the color blind have trouble with a lot of websites. The patterns and examples on this site help you create websites the color blind can use without problems.

Ident Engine.
Without much conscious thought, most of us have built identities across the web. We’ve filled in profiles, uploaded photos, videos, reviews and bookmarks. The Ident Engine uses semantic web API’s to bring together these web footprints.

Beautiful Email Newsletters
Here you will find page after page of aesthetically pleasing newsletters.

  

Testimonials from happy clients are an important part of any service business’s website, lending trustworthiness and experience to a business. Showing those testimonials in their best light is important, as you want visitors to see them without allowing them to dominate your site’s design.

One great way to figure out how to design the testimonials on your own projects is to look at how others are doing it. There are five predominant trends in testimonial design: speech bubbles, quotation marks, images or icons, minimalism, and video. Read on for information about and examples of each, and some bonus best practices at the end.

1. Speech Bubbles

Speech bubbles create an informal, friendly atmosphere in website design. Some sites use them to surround the entire testimonial, while others might use them around an image or as an icon. In any case, they immediately set apart the text or image inside, and make it recognizable as a quote from someone.

2. Quotation Marks

Quotation marks are another way to indicate that nearby text is something someone said, and are a bit more formal than speech bubbles. They’re more appropriate for corporate sites when done in a traditional font, though using funkier fonts can make them look informal and fresh.

3. Images, Icons, or Other Graphic Elements

Displaying an image next to each testimonial is a popular trend in testimonial design. The image could be a photo of the person who gave the feedback, the logo of the company the work was completed for, or an icon or other graphic element that sets the text apart from that around it.

4. Minimalist

A lot of sites display their testimonials using a minimalist style, usually with plain text, often italic, set near other text blocks of similar shape and size. This is the most subtle method of displaying testimonials, and works best on a site that has a minimalist design, otherwise the testimonials can get lost on the page.

5. Video

Video testimonials are a fairly new trend, and make a lot of sense for sites catering to tech-savvy clients. Video testimonials add another layer of trust that straight text doesn’t have; people will naturally trust hearing and seeing someone vouch for a product or service — rather than just reading about it. After all, as far as the visitor is concerned, your testimonials could be fabricated. Video is a lot harder to fake.

5 Best Practices in Testimonial Design

Integrating testimonials in your website design follows the same rules as integrating virtually any other text- or image-based content. But there are additional things to remember when adding a testimonial section to a website.

Adhere to the rules of good typography.
There are plenty of articles that offer tips for improving the typography in your website designs. Pay attention to them as you would for any other element on your site.

Make your testimonials stand out.
Don’t just put a couple testimonials on your about page or in your footer; do something to make them stand out and grab people’s attention without cluttering your design. You want your potential customers to see what your happy customers are saying. You can accomplish this through color, icons, or through prominent placement on your pages.

Correct grammar and spelling.
Although you wouldn’t make content changes, it’s perfectly acceptable to correct any grammar or spelling errors in testimonials given to you by your clients. This will ensure the testimonials look and sound professional.

You don’t have to use the entire testimonial.
Nothing says you have to quote an entire testimonial on your site. While being careful not to alter the overall impression the testimonial gives, it’s often preferable to shorten a lengthy message. The proper way to do this is by only quoting one or two lines, in context, that show your business in its strongest light.

Always ask for permission to use a testimonial.
In many locations around the world, you’ll legally need permission to use a testimonial from a client. Even if you don’t need it legally, it’s the polite thing to do. Most satisfied customers will be happy (and even honored) to let you use what they’ve said about your company to promote yourself. And especially ask permission if you want to use a photo or the logo of a client, or if you want to include their name and company along with the quote. After all, you want to keep your happy customers happy!

Further Resources

Showcase of Testimonials in Web Design
A gallery of great testimonial design from Vandelay Design Blog.

(ll)