Feeds:
Posts
Comments

Here are 5 important elements to keep in mind for improving the ease-of-use during the design process.

Is It Learnable: How easy is it for users to accomplish basic tasks the first time they encounter the design?
Is It Efficient: Once users have learned the design, how quickly can they perform tasks?
Is It Memorable: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
Is It Error Free: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
Customer Satisfaction: How pleasant is it to use the design?

It’s very important to reflect on what customers plan to do on your site. Any business with an online presence needs to continuously learn about their various customer segments. Some of your segments could be more profitable customers, as well as customers coming for a sense of community or self-gratification. Your website needs to cater to both of these audiences.

Your specific customer segments will represent obvious categories which to profile customers within. The importance of this is to help you understand required features, services or even products your customers expect on your website. I call this “Thinking from the Customers Perspective”. This requires that you learn about everyone of your customer segments. And then provide a customer experience specific for  each of these segments. Over time, segments change and you should consistently be looking at the value your customers represent and in return offer them the online experience they expect. This generates loyal customers and generates steady traffic for your site.

In the online world, content is king and video content is the king of kings. People use the Internet to search for solutions and videos are a great way to provide visual answers, as well as an exceptional way to demonstrate your expertise. Because of this YouTube has become a popular free way to drive visitors to websites through videos. Good how-to-videos and instructive videos will keep visitors coming back for more and drive-up your site’s traffic.

The the sad reality is that the accessibility of videos is difficult for those who are physically disabled. Audio files and podcasts are equally as difficult. If there is content-rich information presented via video without audio describing the information conveyed by the video, the information will not be accessible by individuals who are blind or have low vision. Or hearing impaired users will be able to view and understand the visual content, but the audio podcast content is inaccessible to these users.  This is because visitors with disabilities depends on-screen readers or keyboards to access online content. Without built-in accessibility feature for videos, audio, podcasts and multimedia, they can’t activate the play, pause, rewind or volume buttons/controls.

Importantly, if your site has any governmental ties or is funded even partial through a government grant, the site is required to be accessible to all users and be Section 508 compliant. These requirements pertain not only to videos, but to podcast (even MP3s), audio files and other multimedia. I am going to offer a brief outline with explanations these requirements.

Accessibility for Video

First, for video, according to the W3C, captions should be available for every published video. These captions should be text equivalents in the same language as the audio and be synchronized with the video or multimedia presentation. Visitors should have the option to turn captions on or off at will.

Secondly, an audio description should be included which will make the video accessible to the visually impaired.

Other generally accepted rules of thumb are:

  • Don’t enable auto play so that a media file automatically plays on page load (audio/video should be user-activated).
  • Don’t substitute HTML or text files for captions and audio descriptions. The caption should be in sync with the video.

Accessibility for Podcasts and Sound Files

For sound files and podcast to be accessible, we need to include transcripts for the hearing-impaired audiences. These can be provided as an HTML page or linked to a separate text file.

Include captions in video podcasts and make sure that captions are appropriately synchronized

Provide audio descriptions of visual content that conveys important information in video podcasts.

How to Generate Captions?
Unfortunately, there are only few applications available for creating closed captions:

  1. NCAM’s magPIE (free, also for MAC)
  2. URUSoft’s Subtitle Workshop (free)
  3. Manitu Group’s Captionate ($60)
  4. VideoToolShed’s SubBits subtitler ($199)
  5. World Caption is a free Macintosh software program created at the University of Wisconsin-Madison that makes it easy to add captions to any QuickTime compatible video.

Accessibility with Flash has been a challenge over the years and prevented many organizations, especially U.S. Government agencies, from using Flash. I have been doing some research on making Adobe Flash 508 compliant and found some great resources I would like to share.

Flash’s benefit is how well-supported  it is on Web browsers — something like 95-98% of the Web browsers out there. So if you build a site or application in Flash, you know that it will be viewed correctly by anyone who has the Flash plugin. It is operating system and browser independent.

The disadvantages of Flash are its heavy use of graphic/non-text content. This has been a major issue causing not just high bandwidth, but accessibility issues with screen readers and keyboard access. Of which can be controlled with planning and during the Flash development stage.

There are three ways that Flash designers can deal with this issue:

  • Make the Flash content self-voicing, eliminating the need for the screen reader.
  • Provide an accessible alternative to the Flash content. (e.g. HTML)
  • Make the Flash content natively accessible to the screen reader.

Flash player 10 exposes all text elements to screen readers by default, and making Flash non-text elements natively accessible to the screen reader is now easier since adding text equivalents has been introduced to the Flash authoring application with the “Accessibility Panel”.

For a good overview of how to create accessible sites in Flash, watch this instructional Adobe video “Creating Accessible Sites in Flash”.  This video explains and demonstrates accessible Flash features. Watching this video provides a better understanding and enhances the importance of making Flash accessible with simple built-in design features.

TheBottom Line Question: Should You Use Flash, Videos, Audio or Podcasts?

They are all wonderful tools that provide stickiness, instruction, problem solving and  knowledge about products and services. If these will offer important features to your site, and your site is in the public or government sector or receives government funding follow the Section 508 guidelines. In general, overall it’s good practice to follow the guidelines I have outlined for any site.

Accessibility Resources
Useful resources to learning more about accessibility.

WebAIM
WebAIM is a nonprofit organization within the Center for Persons with Disabilities at Utah State University and provides comprehensive web accessibility techniques, training, and tools.

National Center for Accessible Media (NCAM)
NCAM is a research and development facility dedicated to the issues of media and information technology for people with disabilities in their homes, schools, workplaces, and communities.

Trace Center
The Trace Research & Development Center is part of the College of Engineering, University of Wisconsin-Madison. Since 1971, Trace has been a pioneer in the field of technology and disability.

Adobe

Adobe® is an industry leader in accessibility and supports the creation of outstanding web experiences by encouraging web developers to produce rich, engaging content that is accessible to all.

CSS Rational

This is the start of my design rational list that will become a compilation of some of the most important CSS techniques that I think should be known to create a consistent layout.

Set Base Font Size
body { font-size: 62.5%; }
Setting the body font-size to 62.5% will set a pages font size to 10 pixels. That way, 1em is equal to 10 pixels.

Have Consistant Margins
Include a reset stylesheet to reduce browser inconsistencies in the beginning of the CSS. A good source is meyers.com

Or simply removing the margin and padding from every element will allow the margins to be set consistently.
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Set a Float to Clear a Float
A way to clear the float, is to insert a clearing element — use an empty div set to clear: both.

The code below will not float elements to the left or the right side of an image:
img
{
float:left;
clear:both;
}

Faux Columns to Balance Columns
A layout has Two or three columns next to each other, and one or two of the  columns have different background colors, and one column has white. Since the columns will almost never have the same amount of content in them, they will never line up. An inventive way to fake this, is to have a 1px tall background image of the color for that column repeated vertically in the containing element of the column with color. Now the bottoms will always line-up.

Font Stacks
Font stacks are important to providing fonts that look and fit well with a sites design. Font stacks are used as fallback mechanisms when an operating system does not have the preferred font installed.

An example of a good font stack is shown below. The fonts in the font stack are fairly popular, most likely installed in most operating systems, also do not vary greatly with the aspect ratio, and are quite similar in style.

Font stack example: font-family: Helvetica, Verdana, Arial, sans-serif;

I’m developing sites using the the CMS Joomla and building my own custom templates. Generating a custom template for Joomla or any other CMS offers some fun challenges. This small obstacle means that to get Joomla to serve up the page layout I created with CSS and html, I’ll need to tweak CSS, html and reset paths in Joomlas back-end. My wonderful Web Standards instructor, Barb Ackemann developed a great cheat sheet to help with many fixes required to get a custom Joomla template looking the way I’d like it to. This is one of Barb helpful adjustment.

This fix is to make your template fluid with conditional statements and variables

This example uses a liquid design with a left column width of 20%, and a right column width of 30%. Left and center columns are floated left, right column is floated right. Two background images are used to create the faux columns. The content area will be either 50%, 70%, 80% or 100% depending on the presence of modules for the left or right columns. This is going to allow a three column layout to to become a two layout if nothing is position in one the columns and content will expand across the empty column. This allows the flexibility of having more than one layout from one template.

Add these 4 lines to the opening php block:
if($this->countModules(‘left + right’) > 0) $layout=”50″;
if($this->countModules(‘right’) <= 0) $layout=”80″;
if($this->countModules(‘left’) <= 0) $layout=”70″;
if($this->countModules(‘left + right’) <= 0) $layout=”100″;

and in my html I reference that variable wherever needed like this:
<div id=”content”>

Then write css rules:
.content-50 {width:50%;}
.content-70 {width:70%;}
.content-80 {width:80%;}
.content-100 {width:100%;}
Remember to remove any width setting on #content. You’ll also need to add the $layout suffix to the
divs that load the faux column images so you’ll be able to rule when the background images load.

An accessibility audit is an essential way for organizations to determine, update and maintain their websites accessibility. Organizations that should plan for accessibility audit are either in the public sector or committed to achieve accessibility through corporate policy. Other reasons to perform an audit are the lack of independent proof that a site is accessible, the need to meet WCAG level standards and you know your site is not compliant and wish to bring it up to date.

The accessibility audit process evaluates a websites level of accessibility based on the specific predetermined checkpoints an organization have set. The audit will result in a report outlining actions required to improve or ways to make sure a site meets accessibility.

There are a some simple quick ways to learn about accessibility to identify if your site contains any of the common accessibility issues. These simple checks require no special knowledge and are aimed to help understand some obstacles that people with disabilities can encounter.

Check 1: Alternative Text
Testing for the presence and relevant text on images is very important. Some users turn images off and without this text, they’ll see nothing and it allows screen readers to read the images text alternative to unsighted people. To test, hover your mouse over each important image and see if any text pops up. If the text is meaningless or not equivalent information to the image, this will cause confusion to someone using a screen reader.

Check 2: Navigate Using the Keyboard
Use the tab key on your keyboard to navigate around your site. If you can’t carry out functions and access content using just the keyboard, then people who can’t use a mouse will not have access to the information on your site

Check 3: Enlarge the Text
Using your browser setting, enlarge the text. If the text doesn’t enlarge or the layout begins to degrade, this prevents people with vision problem from easily reading content on your site.

When should you audit your site? The easiest way to create an accessible website is during the initial design stage. If this is specified from the beginning in the contract, incorporating this should cost nothing as the developer is obligated to carry them out. In this case the audit would happen during the creation phase as the features are implemented.

Existing sites can not so easily be altered with new feature to correct accessibility problems. If you wait until the site is build before considering accessibility, some of the design choices made may not be feasible and costly alternative may be required.

Websites have life cycles and these typical  steps are: Plan  > Specify> Design> Develop > Test > Deploy > Operate > Review. If the accessibility is built in to this plan, the site should make all deadlines

The scope of the audit can include as few as the top key pages to the entire site. Pages generated by a content management system will consist of two parts. The template that holds the content and the content its self.

The final accessibility audit report will provide:

  • Background information that includes site goals, reason for audit, and summary of the audit requirements.
  • Who performed the audit.
  • What methodologies the audit used.
  • What pages were sampled.
  • The WCAG level that was used to measure.
  • Findings
  • Prioritized action list, with suggested fixes and timeline.
  • Appendix of audit detail.

In general if your not an organization in the public sector, it’s good practice to utilized Checks 1-3 once a year or as you ad new features to your site. Doing so will allow more users access to your site and make your entire site more user friendly. If your organization is in the public sector, you will be required to meet the WCAG level standards and plan at least 3 mini audits a year to make sure your site is compliant.

The resource for this article is an excellent reference tool for any organization wishing to make their site accessible and includes important resources to further understand the accessibility auditing process: a multi-part article, Introduction to accessibility auditing.

As a designer, I have 3 web page layout options: fixed, fluid or Elastic. I’ve learned that any one of these will make a successful website layout, as long as I keep usability in mind.

Why is this so important? Now a days there are so many variables to design for: Screen size/resolution, browser choice, if the browser is maximized or not, and the operating system and hardware. Below are pros and cons to think about when considering layouts for web page design.

Fixed Website Layouts

A fixed website layout has a fixed width wrapper and the components inside it have either percentage widths or fixed widths. This  container (wrapper) element is set to not move. No matter what screen resolution the visitor has, he or she will see the same width as other visitors.

Example of a Fixed Layout

Fixed layouts are preferred over fluid ones because they’re easier to make and assurance that what the designer sees, the user sees. When working with a fixed width design, be sure to at least center the wrapper div to maintain a sense of balance (margin: 0 auto; usually does the trick). Otherwise, for users with large screen resolutions, the entire layout will be tucked away in the corner.

Pros

  • Fixed-width layouts are much easier to use and customize.
  • Widths are the same for every browser, so there is less hassle with images, forms, video and other content that are fixed-width.
  • There is no need for min-width or max-width, which isn’t supported by every browser anyway.
  • Even if a website is designed to be compatible with the smallest screen resolution, 800×600, the content will still be wide enough at a larger resolution to be easily legible.

Cons

  • A fixed-width layout may create excessive white space for users with larger screen resolutions.
  • Smaller screen resolutions may require a horizontal scroll bar, depending the fixed layout’s width.
  • Seamless textures, patterns and image continuation are needed to accommodate those with larger resolutions.
  • Fixed-width layouts generally have a lower overall score when it comes to usability.

Fluid Website Layouts

A fluid layout, also referred to as a liquid layout, has a majority of the components based on percentage widths, and thus adjust to the user’s screen resolution.

Example of a Fluid Layout

Pros

  • Because it adjusts to the user’s set-up — a fluid design can be more user-friendly.
  • Extra white space is similar between all browsers and screen resolutions and can be more visually appealing.
  • A fluid layout can eliminate horizontal scroll bars in smaller screen resolutions.

Cons

  • The designer has less control over what the user sees.
  • Images, video and other types of content with set widths may need to be set at multiple widths to accommodate different screen resolutions.
  • With incredibly large screen resolutions, a lack of content may create excess white space.

Elastic Design

There is a third option when working with Web page layouts. An elastic design mixes the two other main layout types. It works by sizing all elements with em‘s. The goal is to have everything grow larger or smaller in proportion with the user’s preference. The quote below explains exactly what an em is and why it can be beneficial.

“A pixel is an unscalable dot on a computer screen, whereas an em is a square of its font size. Because font sizes vary, the em is a relative unit that responds to users’ text-size preferences.”
– Patrick Griffiths, A List Apart

Pros

  • If implemented correctly, this layout style can be very user-friendly.
  • Elastic layouts are perfect for designers who love both fluid and fixed designs, because the pros of each are found in elastic layouts.

Cons

  • Even given the first pro above, this type of layout can create a huge problem with usability. It takes a lot of savvy and testing to get the layout right for all users.
  • This type of layout is much more difficult to create than the other two.
  • Depending on the specifics of the layout, some elastic designs may require supplementary style sheets and cheats for IE6.

Resource: Smashing Magazine: Fixed vs. Fluid vs. Elastic Layout: What’s The Right One for You?