0

The Future Of CSS Typography

Posted by Inayaili de Leon on Mar 1, 2010 in CSS, Design & Graphics, Silver Light  | View Original Article
 
Smashing-magazine-advertisement in The Future Of CSS Typography
in The Future Of CSS Typography  in The Future Of CSS Typography  in The Future Of CSS Typography

There has been an increasing and sincere interest in typography on the web over the last few years. Most websites rely on text to convey their messages, so it’s not a surprise that text is treated with utmost care. In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS Text Level 3 specification, which should give Web designers finer control over text.

Keep in mind that these new properties and techniques are either new or still in the works, and some of the most popular browsers do not yet support them. But we feel it’s important that you, as an informed and curious Web designer, know what’s around the corner and be able to experiment in your projects.

[By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]

A Glance At The Basics

One of the most common CSS-related mistakes made by budding Web designers is creating inflexible style sheets that have too many classes and IDs and that are difficult to maintain.

Let’s say you want to change the color of the headings in your posts, keeping the other headings on your website in the default color. Rather than add the class big-red to each heading, the sensible approach would be to take advantage of the DIV class that wraps your posts (probably post) and create a selector that targets the heading you wish to modify, like so:

.post h2 {
	font-weight: bold;
	color: red;
}

This is just a quick reminder that there is no need to add classes to everything you want to style with CSS, especially text. Think simple.

The Font Property

Instead of specifying each property separately, you can do it all in one go using the font shorthand property. The order of the properties should be as follows: font-style, font-variant, font-weight, font-size, line-height, font-family.

When using the font shorthand, any values not specified will be replaced by their parent value. For example, if you define only 12px Helvetica, Arial, sans-serif, then the values for font-style, font-variant and font-weight will be set as normal.

The font property can also be used to specify system fonts: caption, icon, menu, message-box, small-caption, status-bar. These values will be based on the system in use, and so will vary according to the user’s preferences.

Other Font Properties

A few font-related properties and values are not as commonly used. For example, instead of using text-transform to turn your text into all caps, you could use font-variant: small-caps for a more elegant effect.

You could also be very specific about the weight of your fonts, instead of using the common regular and bold properties. CSS allows you to specify font weight with values from 100 to 900 (i.e. 100, 200, 300, etc.). If you decide to use these, know that the 400 value represents the normal weight, while 700 represents bold. If a font isn’t given a weight, it will default to its parent weight.

Another useful property, sadly supported only in Firefox for now, is font-size-adjust, which allows you to specify an aspect ratio for when a fall-back font is called. This way, if the substitute font is smaller than the preferred one, the text’s x-height will be preserved. A good explanation of how font-size-adjust works can be found on the W3C website.

Dealing With White Space, Line Breaks And Text Wrapping

Several CSS properties deal with these issues, but the specs are still in the works (at the “Working Draft” stage).

White Space

The white-space property lets you specify a combination of properties for which it serves as a shorthand: white-space-collapsing and text-wrap. Here’s a breakdown of what each property stands for:

  • normal
    white-space-collapsing: collapse/text-wrap: normal
  • pre
    white-space-collapsing: preserve/text-wrap: none
  • nowrap
    white-space-collapsing: collapse/text-wrap: none
  • pre-wrap
    white-space-collapsing: preserve/text-wrap: normal
  • pre-line
    white-space-collapsing: preserve-breaks/text-wrap: normal

This property can be useful if you want to, for example, display snippets of code on your website and preserve line breaks and spaces. Setting the container to white-space: pre will preserve the formatting.

Wordpress in The Future Of CSS Typography
WordPress uses white-space: nowrap on its dashboard so that the numbers indicating posts and comments don’t wrap if the table cell is too small.

Word Wrap

One property that is already well used is word-wrap. It supports one of two values: normal and break-word. If you set word-wrap to break-word and a word is so long that it would overflow the container, it is broken at a random point so that it wraps within the container.

International-gorilla in The Future Of CSS Typography
The International Gorilla Conservation Programme website uses word-wrap for its commenters’ names.

In theory, word-wrap: break-word should only be allowed when text-wrap is set to either normal or suppress (which suppresses line breaking). But in practice and for now, it works even when text-wrap is set to something else.

Bear in mind that according to the specification, the break-strict value for the word-break property is at risk of being dropped.

Word And Letter Spacing

Two other properties that are often used are word-spacing and letter-spacing. You can use them to control—you guessed it—the spacing between words and letters, respectively. Both properties support three different values that represent optimal, minimum and maximum spacing.

Show-and-tell in The Future Of CSS Typography
Show & Tell uses letter-spacing on its navigation links.

For word-spacing, setting only one value corresponds to the optimal spacing (and the other two are set to normal). When setting two values, the first one corresponds to the optimal and minimum spacing, and the second to the maximum. Finally, if you set all three values, they correspond to all three mentioned above. With no justification, optimal spacing is used.

It works slightly different for letter-spacing. One value only corresponds to all three values. The others work as they do for word-spacing.

The specifications contain a few requests for more information and examples on how white-space processing will work and how it can be used and be useful for languages such as Japanese, Chinese, Thai, Korean, etc. So, if you’d like help out, why not give it a read (it’s not that long), and see how you can contribute?

Indentation And Hanging Punctuation

Text indentation and hanging punctuation are two typographical features that are often forgotten on the Web. This is probably due to one of three factors:

  1. Setting them is not as straightforward as it could be;
  2. There has been a conscious decision not to apply them;
  3. Designers simply aren’t aware of them or don’t know how to properly use them.

Sushi-robots in The Future Of CSS Typography
The Sushi & Robots website has hanging punctuation on bulleted lists.

Mark Boulton has a good brief explanation of hanging punctuation in his “Five Simple Steps to Better Typography” series, and Richard Rutter mentions indentation on his website, The Elements of Typographic Style Applied to the Web. These are two very good reads for any Web designer.

So, the theory is that you should apply a small indentation to every text paragraph after the first one. You can easily do this with an adjacent sibling combinator:

p + p {
	text-indent: 1em;
}

This selector targets every paragraph (i.e. p) that follows another paragraph; so the first paragraph is not targeted.

Another typographic rule of thumb is that bulleted lists and quotes should be “hung.” This is so that the flow of the text is not disrupted by these visual distractions.

The CSS Text Level 3 specification has an (incomplete) reference to an upcoming hanging-punctuation property.

For now, though, you can use the text-indent property with negative margins to achieve the desired effect:

blockquote {
	text-indent: -0.2em;
}

For bulleted lists, just make sure that the position of the bullet is set to outside and that the container div is not set to overflow: hidden; otherwise, the bullets will not be visible.

Web Fonts And Font Decoration

font-face

Much talk has been made on the Web about font-face and whether it’s a good thing—especially after the appearance of Typekit (and the still-in-private-beta Fontdeck). The debate is mainly about how much visual clutter this could bring to Web designs. Some people (the argument goes) aren’t sufficiently font-savvy to be able to pull off a design in which they are free to use basically any font they wish. Wouldn’t our sensitive designer eyes be safer if only tested, approved Web-safe fonts were used?

On whatever side of the argument you fall, the truth is that the examples of websites that use font-face beautifully are numerous.

Snook in The Future Of CSS Typography
Jonathan Snook’s recently redesigned website uses the font-face property.

The font-face property is fairly straightforward to grasp and use. Upload the font you want to use to your website (make sure the licence permits it), give it a name and set the location of the file.

In its basic form, this is what the font-face property looks like:

@font-face {
	font-family: Museo Sans;
	src: local(“Museo Sans”), url(MuseoSans.ttf) format(“opentype”);
}

The two required font-face descriptors are font-family and src. In the first, you indicate how the font will be referenced throughout your CSS file. So, if you want to use the font for h2 headings, you could have:

h2 {
	font-family: Museo Sans, sans-serif;
}

With the second property (src), we are doing two things:

  1. If the font is already installed on the user’s system, then the CSS uses the local copy instead of downloading the specified font. We could have skipped this step, but using the local copy saves on bandwidth.
  2. If no local copy is available, then the CSS downloads the file linked to in the URI. We also indicate the format of the font, but we could have skipped that step, too.

For this property to work in IE, we would also need the EOT version of the font. Some font shops offer multiple font formats, including EOT, but in many cases we will need to convert the TrueType font using Microsoft’s own WEFT, or another tool such as ttf2eot.

Some good resources for finding great fonts that can be used with font-face are Font Squirrel and Fontspring.

text-shadow

The text-shadow property allows you to add a shadow to text easily and purely via CSS. The shadow is applied to both the text and text decoration if it is present. Also, if the text has text-outline applied to it, then the shadow is created from the outline rather than from the text.

Neutron in The Future Of CSS Typography
Neutron Creations website uses text-shadow.

With this property you can set the horizontal and vertical position of the shadow (relative to the text), the color of the shadow and the blur radius. Here is a complete text-shadow property:

p {
	text-shadow: #000000 1px 1px 1px;
}

Both the color and blur radius (the last value) are optional. You could also use an RGBa color for the shadow, making it transparent:

p {
	text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 1px;
}

Here we define the R, G and B values of the color, plus an additional alpha transparency value (hence the a, whose value here is 0.5).

The specification still has some open questions about text-shadow, like how should the browser behave when the shadow of an element overlaps the text of an adjoining element? Also, be aware that multiple text shadows and the text-outline property may be dropped from the specification.

New Text-Decoration Properties

One problem with the text-underline property is that it gives us little control. The latest draft of the specification, however, suggests new and improved properties that may give us fine-grained control. You can’t use them yet, but we’ll give you a condensed sneak peek at what may come.

  • text-decoration-line
    Takes the same values as text-decoration: none, underline, overline and line-through.
  • text-decoration-color
    Specifies the color of the line of the previous property.
  • text-decoration-style
    Takes the values of solid, double, dotted, dashed and wave
  • text-decoration
    The shorthand for the three preceding properties. If you specify a value of only one of none, underline, overline or line-through, then the property will be backwards-compatible with CSS Level 1 and 2. But if you specify all three values, as in text-decoration: red dashed underline, then it is ignored in browsers that don’t support them.
  • text-decoration-skip
    Specifies whether the text decoration should skip certain types of elements. The proposed values are none, images, spaces, ink and all.
  • text-underline-position
    With this property, you can control, for example, whether the underline should cross the text’s descenders or not: auto, before-edge, alphabetic and after-edge.

Controlling Overflow

The text-overflow property lets you control what is shown when text overflows its container. For example, if you want all of the items in a list of news to have the same height, regardless of the amount of text, you can use CSS to add ellipses (…) to the overflow to indicate more text. This technique is commonly seen in iPhone apps and websites.

Nyt-app in The Future Of CSS Typography
The New York Times iPhone app uses an ellipsis for overflowing text.

This property works in the latest versions of Safari and Opera and in IE6 (where the overflowing element should have a set width, such as 100%) and IE7. To be able to apply the property to an element, the element has to have overflow set to something other than visible and white-space: nowrap. To make it work in Opera, you need to add the vendor-specific property:

li {
	white-space: nowrap;
	width: 100%;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
}

In the Editor’s draft of the specification, you can see that other properties related to text-overflow are being considered, such as text-overflow-mode and text-overflow-ellipsis, for which text-overflow would be the shorthand.

Alignment And Hyphenation

Controlling hyphenation online is tricky. Many factors need to be considered when setting automatic hyphenation, such as the fact that different rules apply to different languages. Take Portuguese, in which you can hyphenate a word only at the end of a syllable; for double consonants, the hyphen must be located right in the middle.

The specification is still being developed, but the proposed properties are:

  • hyphenate-dictionary;
  • hyphenate-before and hyphenate-after;
  • hyphenate-lines;
  • hyphenate-character.

Hyphenation in The Future Of CSS Typography
Proposed specification for hyphenation on the W3C website.

This is a good example of how the input of interested Web designers is vital. Thinking about and testing these properties before they are finalized has nothing to do with being “edgy” or with showing off. By proposing changes to the specification and illustrating our comments with examples, we are contributing to a better and stronger spec.

Another CSS3 property that hasn’t been implemented in most browsers (only IE supports it, and only partially) is text-align-last. If your text is set to justify, you can define how to align the last line of a paragraph or the line right before a forced break. This property takes the following values: start, end, left, right, center and justify.

Unicode Range And Language

Unicode Range

The unicode-range property lets you define the range of Unicode characters supported by a given font, rather than providing the complete range. This can be useful to restrict support for a wide variety of languages or mathematical symbols, and thus reduce bandwidth usage.

Imagine that you want to include some Japanese characters on your page. Using the font-face rule, you can have multiple declarations for the same font-family, each providing a different font file to download and a different Unicode range (or even overlapping ranges). The browser should only download the ranges needed to render that specific page.

To see examples of how unicode-range could work, head over to the spec’s draft page.

Language

Use the :lang pseudo-class to create language-sensitive typography. So, you could have one background color for text set in French (fr) and another for text set in German (de):

div:lang(fr) {
	background-color: blue;
}

div:lang(de) {
	background-color: yellow;
}

You might be wondering why we couldn’t simply use an attribute selector and have something like the following:

div[lang|=fr] {
	background-color: blue;
}

Here, we are targeting all div elements whose lang attribute is or starts with fr, followed by an -. But if we had elements inside that div, they wouldn’t be targeted by this selector because their lang attribute isn’t specified. By using the :lang pseudo-class, the lang attribute is inherited to all children of the elements (the whole body element could even be holding the attribute).

The good news is that all latest versions of the major browsers support this pseudo-class.

Conclusion

In surveying the examples in this article, you may be wondering why to bother with most of them.

True, the specification is far from being approved, and it could change over time, but now is the time for experimentation and to contribute to the final spec.

Try out these new properties, and think of how they could be improved or how you could implement them to make your life easier in future. Having examples of implementations is important to the process of adding a property to the spec and, moreover, of implementing it in browsers.

You can start with the simple step of subscribing to the CSS Working Group blog to keep up to date on the latest developments.

So, do your bit to improve the lot of future generations of Web designers… and your own!

Resources and Interesting Links

(al)

© Inayaili de Leon for Smashing Magazine, 2010. | Permalink | 8 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Tags: , ,

 
0

Really Useful Tutorials You Should Have Read in February 2010

Posted by W3Avenue Team on Feb 27, 2010 in CSS, Javascript, PHP, Silver Light, Tutorials  | View Original Article
 

This update covers really useful tutorials, tips and techniques that you should have read in February 2010. Featured publications include: Nettuts+, Queness, Codrops, The Phuse, Ravelrumba, Web Designer Wall, AddyOsmani, AEXT, Smashing Magazine, SpoonGraphics, Sitepoint, Insic Designs, Webtint, Marcofolio, IT Shala, David Walsh Blog, Line25, OpenBit, CSS-Tricks, Tutorialzine, Soh Tanaka, Think Vitamin, Code Diesel, and Snook.ca.

Featured authors include: Matt Hedberg, Kevin Liew, Mary Lou, James Costa, Rob Flaherty, Nick La, Adnan Osmani, Lam Nguyen, Christian Heilmann, Chris Spooner, Madhuri & Mona, Mike More, David Walsh, Johnny, Marco Kuiper, Mitesh Sheta, Nikunj Sakhrelia, Jeffrey Way, Chris Coyier, Martin Angelov, Louis Simoneau, Soh Tanaka, Chris Lea, Sameer Borate, and Jonathan Snook.

So which tutorials you found most useful. Also feel free to recommend any good article that we may have missed.

Similar Posts:

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.

Tags: , , , ,

 
0

CSS efficiency tip: use a single stylesheet file for multiple media

Posted by Roger Johansson on Feb 22, 2010 in CSS, Design & Graphics, Silver Light  | View Original Article
 

The way most people link CSS intended for different media types, such as screen, print, or handheld, is to use multiple files. The files are then linked either through link elements with a media attribute or through @import statements with one or more media types specified.

There is nothing wrong with splitting your CSS into multiple files and linking them this way (I currently do that here on this site), but there are two drawbacks: it leads to more HTTP requests from the browser to the server and the need to maintain multiple CSS files.

Read full post

Posted in .


Tags: ,

 
0

Controlling animation using CSS3

Posted by Matthew David on Feb 22, 2010 in CSS, Flex, Silver Light  | View Original Article
  Controlling animation using CSS3 Transition and animation control is new to Cascading Style Sheets Level 3, CSS3. With a basic understanding of CSS you can add animation to your Web site without needing to know complex JavaScript or use...

Tags: , , , ,

 
0

The Most Common HTML and CSS Mistakes to Avoid

Posted by snoak on Feb 15, 2010 in CSS, Design & Graphics, Silver Light  | View Original Article
 

Beginners through advanced coders make mistakes in their HTML and CSS files, either through carelessness or lack of experience. Clean code is very important though and will help further your skills as a developer, as well as save you time in editing later on! It never hurts to review if you’re a skilled developer, many mistakes are caused by going too quickly and not practicing good coding skills from the beginning. Here’s a helpful list of common mistakes and missteps that I’ve encountered through my own work, as well as working with others.

HTML Mistakes

Forgetting to Close a Tag

This is very common, especially in beginners. Several tags require closing tags such as divs, strong tags, and links to name a few. Other tags require a closing slash to end the line such as an img tag.

<div>Text inside the div.</div>

<img src="images/imagename.jpg" />

Incorrect DOCTYPE

HTML requires that you start out the document with the correct DOCTYPE declaration. It needs to be before anything else in the code, starting the document by declaring what type of HTML you’re using. Here’s the DOCTYPE for XHTML 1.0 Transitional.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Improperly nesting tags

It’s very important to open and close tags in the proper order. Once something (for example a div) has opened, it must close before anything above it can close. The following is incorrect.

<div><strong>text</div></strong>

Capitalizing tags

This is just considered bad practice, but won’t result in your code not being validated. You should always use lowercase for tags like divs, links, and images. The following is incorrect. 

<DIV></DIV>

Forgetting to open or close quotes

I’ve seen this a lot in beginners and will result in broken code and things not functioning properly. HTML requires double quotes that open and close correctly. Here’s an example of correct usage.

<img src="images/headerimage.jpg" />

Using Inline Styles

This is another one that is considered bad practice. Inline styles do work but will result in headaches later on! Items should be styled globally through an external stylesheet. It will be much easier to edit and add styles to in the future. An example of inline styles:

<a href="link.html" style="color: #000; text-decoration: none;">link name</a>

Not Encoding Special Characters

Characters like “©” and “&” should be shown with the proper HTML code for the character. Here’s a great list of characters and their HTML counterparts that you should use.

Confusing Classes and Ids

Classes are for items that are used more than once on one page. This can be a link style that you’ll call in multiple times on one page but doesn’t follow the global link styling. Ids are items that are called in just once, like the header div. Classes and ids are often overused and used in unnecessary places as well. Stick to the minimum amount of classifications that you need.

CSS

Forgetting to Close Things Properly

Each div or item called in starts with the opening curly bracket and ends with the closing curly bracket. Each style called in needs to end with a semicolon. The last declaration within an item doesn’t need a semicolon, but it’s best to use it in case you plan on adding more items later on, you may forget to add it back in. An example of proper use: 

#divname {
width: 40px;
height: 30px;
}

Condensing your stylesheet and putting all declarations for a div on one line is up for debate. I prefer to put each declaration on its own line, I think it’s easier to edit that way, but some may say that it just produces longer code.

Not Using Global Styles

Many things should be styled globally like paragraph and heading styles for text as well as link styles. This will reduce the risk of mistakes and will also cut down on the amount of code in your stylesheet.

Not Using Unique Names for Ids and Classes

It’s very important to choose names that are unique so that it’s easy to edit later on, and easy to identify in your stylesheet. Name your divs specific things like #home-left-column which is better than just #left.

Not Using Shorthand Code

Shorthand code is another way to condense your stylesheet, which is helpful for speeding up user load times as well as finding things when you’re editing later on. Instead of calling in padding-top, -left, -bottom, and -right you can just use:

padding: 5px 10px 0 10px;

Shorthand code can be used for many declarations including: padding, margin, border, and font.

Not Using Shortened Color Declarations

Hex numbers that repeat like #ffffff and #000000 can be condensed to #fff and #000. This is another way to condense your code and keep things short and easy to look at.

Incorrectly Using Positioning

Positioning is tough to understand when you’re first starting out with CSS. Your choices are static, relative, absolute, and fixed. Static is the default option and is positioned according to the normal page flow. A relative item is positioned relative to itself, meaning you can move it up, down, left or right, based on where it would normally sit. Absolute allows you to place an item anywhere on the page, and is the most misused positioning statement. The values you set for it will be relative to the last parent item with relative or absolute, and if there aren’t any, it defaults back to the html tag, allowing you to position it anywhere by declaring top left right or bottom values. Fixed is positioned relative to the browser window, so an item will stay in place if a user has to scroll. Learning how to use positioning correctly is important, but shouldn’t be used excessively. I rarely use these at all in my stylesheets.

Validate

Validating your HTML and CSS files will help in reducing errors and figuring out where a problem might be coming from. Your website may function correctly with some of the common HTML and CSS mistakes, but it doesn’t make it good practice or valid code. The validator will help identify these problems and you’ll be able to adjust the way you code for the future.

More Resources

Many of us are guilty of these HTML and CSS errors, myself included! We can only strive to learn from our mistakes and practice better coding in the future. Cleaning up your code will help you further your coding skills and allow you to create better sites with more functionality for your users.

About the Author

Shannon Noack is a designer in Arizona and the Creative Director of Snoack Studios. Designing is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs regularly here and you can connect with her on Twitter as well.

Tags: , ,

 
0

Specify a text colour for img elements

Posted by Roger Johansson on Feb 11, 2010 in CSS, Design & Graphics, Silver Light  | View Original Article
 

When an image specified with an img element is missing from a web page, some browsers display the alt text instead. Why not all browsers do that is a separate topic which I talk a bit about in Safari, WebKit and alt text for missing images.

I think most people will agree that it is a good thing for web browsers to display the contents of an image’s alt attribute when the image is missing or broken, or image rendering has been disabled. However, many web professionals forget to check what the alternative text will actually look like in those cases.

Read full post

Posted in , , .


Tags: , , ,

 
0

sIFR default CSS hides content from at least one screen reader

Posted by Roger Johansson on Feb 8, 2010 in CSS, Design & Graphics, Silver Light  | View Original Article
 

Just a heads-up to anyone using sIFR to render text: the default CSS that comes with sIFR hides the replaced text from the VoiceOver screen reader. I don’t know if any others are affected – VoiceOver is the only screen reader I have been able to verify this problem in.

Read full post

Posted in , , .


Tags: , , ,

 
0

Forgotten CSS selectors

Posted by Roger Johansson on Feb 4, 2010 in CSS, Design & Graphics, Silver Light  | View Original Article
 

Anyone who has been using CSS for any length of time has probably been frustrated by the lack of selector support in Internet Explorer 6. There are quite a lot of cases where a CSS 2.1 selector will let you target elements in all other relevant browsers, but where you, if you want it to work in IE 6, have to add a class or id attribute to the HTML.

Well, the market share of IE 6 is now finally at a level where we as developers can say that a site “supporting” IE 6 does not mean “looking pixel perfect”. Fortunately more and more clients understand this as well. So I think it’s time to revive those CSS selectors that you never got to use just because IE 6 doesn’t understand them.

Read full post

Posted in .


Tags: ,

 
0

Really Useful Tutorials You Should Have Read in January 2010

Posted by W3Avenue Team on Jan 30, 2010 in CSS, Javascript, PHP, Silver Light, Tutorials  | View Original Article
 

This update covers tutorials, tips and techniques that you should have read in January 2010. Featured publications include: A List Apart, Perishable  Press, DevSnippets, Webdesigner Depot, Nettuts+, Inspiring Pixel, Gaya Design, PV.M Garage, Line25, Woork Up, Six Revisions, Tutorialzine, Papermashup, WPWebHost, TechPortal, Yehuda Katz, Codrops, NuRelm, Queness, PHP Web and IT Stuff, DLOCC, WebM.ag, Jon Galloway, DevMoose, CSSKarma, AEXT, Viral Patel, and JankoAtwarpSpeed.

Featured authors include: Lam Nguyen, Tuhin Kumar, Chris Spooner, Jason Schuller, Louis Lazaris, Dan Wellman, Martin Angelov, Siddharth, Ashley Ford, Navjot Singh, Gaya Kessler, Burak Guzel, Piervincenzo Madeo, Peter Verhage, Yehuda Katz, Jeff Starr, Mary Lou, Chris Taylor, Kevin Liew, James Padolsey, Noura Yehia, Jason Cranford Teague, Devin Walker, Bill Peña, McBonio, Jon Galloway, Jean-Paul Bernadina, Tim Wright, Viral Patel, Shelley Powers, Janko Jovanovic,

So which articles you found most useful. Also feel free to recommend any good article that we may have missed.

Similar Posts:

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.

Tags: , , , ,

 
0

Tips for Coding and Designing Usable Web Forms

Posted by vitaly on Jan 21, 2010 in CSS, Design & Graphics, Silver Light  | View Original Article
 


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.

Simple in Tips for Coding and Designing Usable Web Forms

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:

Two-col in Tips for Coding and Designing Usable Web Forms

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:

Indigo in Tips for Coding and Designing Usable Web Forms

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.

Inline in Tips for Coding and Designing Usable Web Forms

Really Easy Field Validation

Easy in Tips for Coding and Designing Usable Web Forms

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

Fieldsets in Tips for Coding and Designing Usable Web Forms

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

Required in Tips for Coding and Designing Usable Web Forms

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

Required-good in Tips for Coding and Designing Usable Web Forms

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-checkbox in Tips for Coding and Designing Usable Web Forms

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

Select in Tips for Coding and Designing Usable Web Forms

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.

Dropdown in Tips for Coding and Designing Usable Web Forms

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.

Hint in Tips for Coding and Designing Usable Web Forms

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.

Hint-2 in Tips for Coding and Designing Usable Web Forms

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

Tags: , , ,

Copyright © 2010 Answer My Query All rights reserved. Maintained by Orange Brains .