Apr 06

Designing an Accessible Site Without Losing Your Mind

One of the biggest mistakes I see from web designers is making accessibility more complicated than it actually is. Most designers think of creating accessible content as something that will take weeks of exaggerated tagging, designing tab-browsing and hot keys for every minute function of a site, and writing over-descriptive metadata, so most people just give up and don’t even bother. However, by using some simple techniques and following some basic guidelines, you can make your website accessible to a wide audience of users without spending too much time and energy.

I define web accessibility as:

“Making web content available to a wide audience regardless of physical abilities, web clients, and personal preferences.”

To simplify our tasks as accessible web designers, there a few specific categories that can be helpful as we evaluate some of the different types of users:

  • Visually Impaired: Those with low or no vision. These users may use screenreading software or may use the browser’s functionality to increase text size and contrast.
  • Hearing Impaired: Those with low or no hearing. These users will need to be able to see a textual representation of any audio that is part of the site.
  • Physically Impaired: Those who lack the physical dexterity to use a mouse or a traditional keyboard. These users may use a variety of interface devices, many of which parallel the functionality of the traditional [TAB] key. Continue reading
Mar 29

10 Web Design Elements that You Shouldn’t Overlook

When it comes to designing and building websites, it never seems to happen fast enough.

Given this fast pace, many small details that are eventually required to build the website are often left out of the design process. While these details might be minor, they are what take a website from nice to truly awesome.

These details are often easy to miss because they don’t drive the overall look and feel of the website. The problem is that as your development team works through the design, it will be forced to design and create these elements for you anyway.

You could adjust the production cycle so that the developers have time to return these assets to you, but why not just get it all done up front so that the process is that much cleaner?

Even worse, the development team might decide to forge ahead and just create the assets as they go.

While many developers have a keen eye for design, the creative who is charged with designing the website should ultimately be the one who plans for these elements. Planning ahead for the subtlest nuances can have a profound impact on the quality of the final product.

Every element covered in this article stems from a question that a developer would ask the designer if an element were missing from the design.

Let’s dig into the 10 key elements to keep in mind as you polish your website.

1. Links

While styling the various states of a link is indeed rather basic, you might be surprised by just how often all of the extra details are overlooked. Include the following states for all links on the page: Continue reading

Mar 18

45 Incredibly Useful Web Design Checklists and Questionnaires

Designing websites can be a long and complicated process. Dealing with clients, designing prototypes, coding, programming, and testing – there’s a lot to keep track of and a lot to make sure gets done. That’s where checklists can make your life a whole lot easier. With lists of points covering multiple areas from content to usability to accessibility to standards, you’re a lot less likely to overlook important parts of a site.

Below are 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.

1. Client-Focused Checklists and Questionnaires

These questionnaires and checklists are focused on making your relationships with your clients better. Use these to gather information from your clients or prospects at the beginning of each project so that everyone is on the same page.

How to Extract the Facts with a Web Design Client Questionnaire
This questionnaire from Freelance Switch is meant to send out to prospective clients to get a good idea of what they’re looking for from a website. It can save you valuable time and allow you to create more accurate proposals.

Ext in 45 Incredibly Useful Web Design Checklists and Questionnaires Continue reading

Mar 16

30 New Free High-Quality Fonts

Every now and then we look around, select fresh high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually time you should be investing in your current projects. We search for them and find them so that you don’t have to.

In this selection, we’re pleased to present Piron, Nobile, St Marie, Code, Arcus, Crimson Text, Quadranta, Juice, Prociono, Mr Jones, Ibarra Real and various useful symbol fonts. Please note that some fonts are for personal use only and are clearly marked as such. Please read the license agreements carefully before using the fonts; they can change from time to time.

New Free High-Quality Fonts

Piron
Piron is a highly legible typeface, very well suited to any display or text usage: Web, print (especially magazines), brochures, logos, posters, flyers, motion graphics. The font comes in two weights: regular and oblique. Designed by Alexander Nedelev and Veronika Slavova. Available for free and commercial use, and available in OpenType format.

Piron in 30 New Free High-Quality Fonts Continue reading

Mar 15

10 Useful Usability Findings and Guidelines

1. Form Labels Work Best Above The Field

A study by UX Matters found that the ideal position for labels in forms is above the fields. On many forms, labels are put to the left of the fields, creating a two-column layout; while this looks good, it’s not the easiest layout to use. Why is that? Because forms are generally vertically oriented; i.e. users fill the form from top to bottom. Users scan the form downwards as they go along. And following the label to the field below is easier than finding the field to the right of the label.

Tumblr in 10 Useful Usability Findings and Guidelines Continue reading

Mar 14

A New Way to Trigger hasLayout on Elements in Older Versions of IE?

I’ll be the first to admit that I haven’t given this too much thought, so I admit there could be some drawbacks I haven’t considered, but I thought I’d throw the idea out there and see what my readers think.

Suppose we have an element that, for design and flexibility purposes, has no set width, and no set height. But obviously it has content, so in most browsers it expands to hold its content. We want that element to have a linear gradient background using CSS3, and we add a Microsoft proprietary filter to cover all versions of IE.

Here’s the element, demoed live on the page, with the aforementioned characteristics:

I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout.

In every browser except IE6 and IE7, the above box should appear just fine with its gradient background. In IE6 and IE7, it looks like this: Continue reading