Colour contrast checking tools to improve the accessibility of your design

If text does not have sufficient contrast compared to its background, people will have problems. People with color blindness or other visual impairments as well as people browsing the Web under less than ideal circumstances (bad monitor, window reflections, sunlight hitting the screen) may not be able to read the text, at least not without difficulty.

With that background out of the way, on to the actual color contrast checking tools. Some tools are Web based, while others are standalone applications or browser extensions that you run locally on your computer.

The list:

Colour Contrast Check: The tool gives you immediate feedback by showing what the chosen colour combination looks like and whether it passes the test.

Colour Contrast Analyser: You will need to enter the values for foreground and background colours into a form and submit it, after which the results are displayed.

Colour Contrast Visualizer: Using a slightly different approach, Tom Hooper’s color Contrast Visualizer helps you find acceptable color combinations by visualizing the colors that provide sufficient contrast on a color palette. color Contrast Visualizer is available in Flash and Adobe AIR versions, so you will need support for either of those to use it.

Colour Contrast Analyzer Firefox Extension: Instead of having you enter each colour combination manually, Gez Lemon’s Firefox extension finds all text elements in a document and examines the difference between foreground and background colours for them. It displays the results in a new tab, complete with previews of the colours. This can look a bit overwhelming, but it’s a good way of finding problematic areas of a design. Obviously this tool does not work with images – you’ll need an HTML document for it to work.

CSS Analyser: The CSS Analyser does a colour contrast test of your CSS. It also validates the CSS and checks that relevant text sizes are specified in a relative unit of measurement.

Luminosity Contrast Ratio Analyzer: This tool tests foreground and background colour combinations according to an algorithm developed by the Trace R&D Center.

Vischeck: The online tool simulates colour blindness on an image that you upload or on a web page that you specify, while the Photoshop plugin changes the colours of the document you are working on.

Contrast Analyser, Version 2.0: A standalone application available for Windows and Mac OS X. You can specify the foreground and background colours numerically or by pulling sliders, it will check and preview the selected colours against various types of colour blindness.

Graybit: It lets you submit a URL to a web page which will be converted to grayscale and displayed in your web browser.

Sim Daltonism: Available for Mac OS X only, this standalone application does not calculate colour contrast, but is still very useful. It simulates various kinds of colour blindness in realtime, which makes it easy to check if a design is likely to cause problems.


Source : 10 colour contrast checking tools to improve the accessibility of your design

8 Web Design Tactics to Help You When You're Stuck

Originally written by Matthew Inman (Oatmeal)

Web design can be incredibly frustrating. You'd think that with the infinite possibilities of what-goes-where it'd be pretty easy to land a design that works, yet somehow we've all been stuck before: working hour after hour on a design that refuses to look right. Throwing away pixels like they're going out of style.


These 8 tactics are what I use to get out of that sticky spot

Design from the inside out

A lot of designers start off a design by focusing on the header. Often times what's inside the page is what makes it look good; the header is supplementary. Try leaving the header alone for a while and working on some elements in the body, you'll be surprised at how much easier it is to design a page once you've got a solid body going.

Sketch something

My whiteboard is my salvation. Pencil and paper works too. I read an article years ago by a designer who would draw dozens of little 2x3" mockups in his spiral notebook before even opening up a graphic design program. The best part of creating mockups this way is the speed at which you can burn through possible layout ideas. Sketch something, scribble it out. Sketch something else, scribble it out. Do this ten times and you've probably got a fairly decent idea of how to the page should come together.

Seek inspiration offline

CSS galleries and design showcase websites are excellent sources of inspiration, but sometimes a bit of offline media can be just what you need to spur some fresh ideas. Open up a newspaper or magazine, go to the grocery store and look at the packaging, watch a television ad. Pay attention to things that are applicable to your design such as typography, color, and element placement. Ask yourself questions like "What is it I like about this magazine ad?" and "What is about this packaging that just works ?" There's a lot you can learn from observing traditional media.

Learn to let it go

Ever make a button that looks ridiculously awesome but just doesn't belong in your design ? You put so much effort into your ridiculously awesome button, you'll go to great lengths to make it work.

Learn to let it go. Save the button and file it away. Although you've lost this battle, you'll soon have an arsenal of ridiculously awesome buttons you can use in designs later on.


Step away from the computer

If you're having a difficult time with something, leave it alone for a while and come back later. It'll probably be easier after you've had a bit of a break and your mind has settled. Regarding web design, I've noticed this always plays out in a certain way: If I'm hating a design I'm working on and I shelve it for a few days, a lot of the time my reaction upon returning will be "Holy crap that's fantastic!" On the flip-side, I'll often toil away long into the night working on what looks like the best design I've ever created. The next morning I'll look at it again and cringe at the horrible abomination I've created. The moral here is to give your design some space.

Be absorbent

Learn to effectively pinpoint what it is you love about other designer's work and incorporate it into your own. Don't steal designs, but don't deprive yourself of external stimuli either. Become better at identifying why you love the way something looks.

Don't be a one-hit-wonder

Try to avoid using the same techniques over and over again, even if you've done really well with them in the past. Gradient rectangles are my crutch - I have a terrible habit of using them whenever I feel like a design isn't working. "This design sucks...I'll add a rectangle with a gradient fill!" The result is usually something that I'm unhappy with because it looks the same as all my previous work. Try imposing yourself with silly rules, such as "No drop shadows today" or "2D elements ONLY." Locking yourself out from certain design habits forces you to learn new ones.

Seek input from others

This is a tricky one. There are so many ways to ruin a web design, especially when the wrong kinds of people are involved. Be careful who you ask and find people who can provide constructive criticism. Find someone who can tell you specifically what's wrong and how it could be improved. Grow some thick skin, too. Don't assume every criticism is an attack on your work of art. Roll with the punches.

Source : Web Design Tactics

Gorgeous Website Footers

Originally written by Matthew Inman (Oatmeal)

Footers usually repeat the primary navigation and contain anything that is considered "the fine print," such as copyright information and a privacy policy. With the rising popularity of standards based design, they also have become the home for xhtml and css compliance badges.

Below is a list of 19 sites I gathered from around the web who have footers that caught my eye.

























Source: Put Your Best Foot Forward: 19 Gorgeous Website Footers

Essential steps to planning your website

Thinking about investing in a new website, or a re-design for your current one? Not sure where to start? Use the following points as your roadmap to make sure you stay on track.


Goals

It may sound obvious, but the first step before selecting a designer is to lay out your website’s goals. You can use your list in your discussions with possible designers, and then refer back to it throughout the design process to keep you focused. After the website is complete, you can look back at your goals to gauge the success of the project.

Some questions to ask yourself when developing your goals:
➢ What do you want your website to accomplish?
➢ Who is your audience?
➢ What is the purpose of your website? Will it provide information, advertise, sell your products, or entertain?

A clear vision of your site is essential when you bring your idea to your website developer.


Structure

Consider what you want your website to look like and how it will be organized. A well planned and structured site that is easily navigable will help your visitors find what they need right away. Think about websites that you’ve visited in the past: when you can find what you need quickly and easily, you can be sure that serious time and effort went into planning it.


Design

The style and tone of your site conveys information about your company to your visitors. It is vital to work with a designer who can work with your goals and produce a design vision that matches your company’s needs.

Do some research on your competitors. Choose 3 – 5 websites within your field and do a quick analysis of the design: what do you like or dislike about the overall look or specific features? This information will help your web designer define your tastes, which will translate into a website that looks good and feels right.

It’s important to be clear about what you want, but also to be open to suggestions and possible changes from your designer, as well. They’re combining your goals and design tastes into an effective visual tool. Flexible creative control allows your designer to produce a refined website that fits within your vision as well as industry standards. A recent study by Consumer Reports Webwatch discovered that the design of a website is the number one factor used by consumers to decide whether or not to trust a site: professional designers are skilled at determining what that trustworthy look is.

If you already have a logo, business cards and/or marketing materials then these should be supplied to your website designer, preferably in digital format. Consider how these existing materials will tie in with your website: consistency is key.


Content

Good website design will provide a great first impression with visitors, but that will fade quickly if the content doesn’t back it up. Fresh and interesting content will keep your visitors coming back, your product selling, and your message out there.

Remember that content doesn’t just refer to the text on each page; it can also include promotional animations, interactive product demonstrations, images, music, or video, just to name a few. The web offers almost limitless options for tailoring specific portions of your site to better meet your and your vistors’ needs.

Content is undeniably important. It’s beneficial to hire a good content writer, or at least an editor if you plan on preparing the content yourself. Your web designer should be able to recommend writers or editors they’ve worked with in the past. Matching your visual tone with the proper voice further establishes confidence with your visitors.


Production

Take the opportunity to use and experience your website after it launches. Additions and modifications can be made at any time. If you have analysis and tracking statistics available, use these to see where improvements can be made, and how successful any changes are. Remember not to lose sight of your original goal, and allow it to guide what types of changes you request. A website isn’t a static tool like a business card or magazine ad - one of the benefits is that it can be constantly changing.


Marketing

Now that your well-designed website with its great content is live, you just have to make sure people see it.

➢ Make sure your designer optimizes your website for search engines with descriptive titles, metatags, and a site map. These small details can determine whether your website turns up on page 12 or page 1 of Google search results.
➢ Consider pay-per-click ads in popular search engines.
➢ Your designer can prepare a few banner ads that match the look and feel of your website for you to strategically place on portal sites for your industry.
➢ Your URL should be added to everything your company sends out: business cards, letterhead, e-mail signatures, telephone on-hold messages, even your holiday cards.


Maintenance

Keep customers coming back by updating your website – no one will come back a second time to see the same stale content. You’ll likely want to update homepage features, calendars and events, news, new links, photos and other items as well.

While maintenance may be one of the last steps in creating your website because it won’t start until after the site is live, it is one of the most important steps and should be considered at the same time you lay out your goals. There are two main options to consider: your designer can do updates for you, or you can build your site on a content management system (CMS).

The option I don’t recommend is the former. If your designer makes updates for you, you are at the mercy of their work and holiday schedule. Your news may not be so new anymore if you happen to send it over during their summer holiday and it gets posted in the fall. The better your designer is, the more likely they are to be busy, and unless you want to pay for the full-time services of a webmaster, a CMS is likely a better option for you.

A content management system allows you to maintain your website yourself without any knowledge of HTML or design. If you can use a word processor and browse folders on your computer, you can use a CMS. These programs integrate your website design into them, and allow you to edit only specific sections, such as your blog, podcasts, photo galleries, online catalogs, forums, FAQs, events, and any text-based sections.

In some cases, you may need the skills of your designer to keep certain aspects of your site in check even with a CMS in place. Make sure to ask your designer about this possibility, and consider establishing a maintenance contract so that you’re both upfront about timelines and costs.