Tuesday, August 23, 2011

Improving your website's user experience for the color blind


One in twelve kids have food allergies. One in twelve people worldwide live with either chronic hepatitis B or C. One in twelve fans drive drunk from the ballpark.
Though those statistics are worrisome, there is nothing you can do to improve the user experience of your website for these groups of people. However, for the one in twelve people in the U.S.—mostly men—who suffer from a form of color blindness, there is something you can do when developing your website. In addition to better serving your users, your efforts to make your website more user friendly will pay off in other ways. For example, accessible websites are more likely than inaccessible websites to be ranked well in search engines.
Designers do not need to limit their palette to take into consideration the needs of colorblind users. Follow these simple tips to improve accessibility and create a website can be usable by those who are color blind.
  1. Watch how you combine colors.
    Avoid combining red and green. This is especially important in navigational text (such as menus, heads, and subheads). High contrast pairings, like black and white, are ideal for these kinds of important, essential pieces of copy.
  2. Avoid using color coding exclusively.
    Relying only on colors for indicators in your design can mean big trouble. Incorporate other cues (underlining, symbols, bold, and more) to help make designations of change.
  3. Test your page.
    To quickly simulate readability and informally test to see if your website uses high contrasting colors, take a screen grab and convert it to grayscale to desaturate your image. The free, online utility called Colorblind Web Page Filter is another useful tool for analyzing the usability of your website. (Note: the Colorblind Web Page Filter destroys web fonts and some uses CSS in its simulations. Be prepared to view a jumbled-layout version of your website. This tool is good for color simulation, but it doesn't handle designs particularly well.)
  4. Think about your copy.
    If you have directional copy on your website, it's best not to use cues like, "Click on the green button" which may not appear to be green to all users.
  5. Encourage feedback from your users.
    Make sure you have a contact form on your website to collect ideas from your users. You can't fix accessibility problems if you aren't aware they exist.

Monday, August 15, 2011

Why grid-based web designs are better

The backbone of most visually appealing websites is a well-thought out grid system. A grid is best thought of as a plan for your website. It holds the designs together, outlines what its structure is, and provides a blueprint for where page elements can go.

Like well-planned neighborhoods with blocks that follow a logical layout, websites built around grid-based designs provide structures that keep content orderly and help users find what they're looking for when visiting. Grid-based designs incorporate the best aspects of predictability and clear navigation.

More and more developers favor grid-based designs because, after the initial preparatory math and planning, using them speeds up and simplifies production by enabling them to leverage the defined configurations.

A combination of common measurements and CSS makes designing websites using a grid-based design useful for rapid prototyping during the development workflow. Grid-based designs even facilitate easy adjustments once the website is live by providing flexibility that is useful for easily accommodating changing advertising and promotion needs.

Web designers can work wonders with even the most rigid grid-based design systems. Used creatively, grid-based designs provide a basis for uniformity and consistency. Web designers use grid-based designs to present website content in unique and exciting ways that leverage carefully considered padding and white space, among other elements, without creating cluttered, structureless websites.

Suspect a website was built using a grid-based design? Add the free Firefox plugin GridFox to your browser to take a sneak peek the structure behind its layout. It's like having Superman powers for web development nerds. It's our kind of x-ray vision.


Friday, August 12, 2011

Web Design Case Study: Lindner Center for Research and Education at The Christ Hospital

TBH Creative was hired via Ten Adams to work on the first website featuring clinical trials for The Christ Hospital's Lindner Center of Research. TBH Creative lead the website project from start to finish including a custom and high end design to attract other physicians and encourage participation in trials. We did the basic coding, applied our Content Management for easy maintenance, and developed a custom application to manage the clinical trials. In addition to the website work, TBH Creative created a custom blog and worked on the design and coding for their first email newsletter. The project has been well received by the hospital and physicians.


The Lindner Center's new homepage! Check it out.
An interior page from the Lindner Research website.

Client Remarks on the Project and TBH

"The overall experience with TBH Creative has been outstanding with complementary services such as crisp design, easy to navigate CMS and an amazingly talented and experienced team. The process was unique because there were solutions and opportunities regardless of any challenge. The development of the microsite was truly a team effort and the outcomes – superb."
- Holly Smith, Ten Adams Account Executive

"TBH Creative was wonderful to work with on the build of our microsite! They quickly organized our requests and needs into an easy-to-use reference tool for our clinical research. The project was completed in record time, and the design clearly represents our brand. I would definitely recommend them!"
- Emily Owens, Senior Marketing Consultant, The Christ Hospital

About The Lindner Research Center

The Lindner Research Center has participated in more than 1,200 clinical research trials (130 currently active trials) and has tested most of the new treatments in cardiovascular medicine over the past 25 years. These studies have included first-in-man as well as first-in-the-U.S. experiences with leading-edge technologies. All Lindner Research Center trials are approved through The Christ Hospital Institutional Review Board or an accredited national Institutional Review Board.


Web Design Case Study: Northpoint Pediatrics

We launched a new website for Northpoint Pediatrics today and it can be viewed at http://www.northpointpeds.com/.

TBH Creative was responsible for interface and home page redesign around a pre-developed Content Management System, Expression Engine. TBH Creative worked with the application to upgrade the website performance and continues to assist with further additions and custom needs.

Northpoint Pediatrics' homepage. The home page features a rotation of events and news across the top, and a slider bar to highlight their physician videos as well as three areas of important topics above the fold.

One of Northpoint Pediatrics' interior pages. The upgraded interface is clean and simple. There were significant usability improvements in the navigation structure, active states, and use of white space as well as special attention on specific landing pages. We incorporated a 'big footer' that offers location information and quick links on every page.

It has been a pleasure working with TBH Creative. They have worked closely with us to give our website a fresh new look with increased functionality. TBH is detailed oriented, conscientious and an excellent listener and communicator. I highly recommend TBH as a trusted web strategist.
~ Linda Kortanek, Executive Director


About Northpoint Pediatrics

Northpoint Pediatrics' mission is to make a difference every day in the lives of children and their parents by giving quality healthcare and helpful advice. Celebrating 23 years of caring for kids, Northpoint Pediatrics has three convenient offices, all located in the northeast quadrant of Indianapolis, Indiana. The Northpoint team consists of nine pediatricians and a skilled team of nurse practitioners, nurses, front office assistants and patient account professionals.


 

Subscribe to this blog