Category: Web Design

5 Easy Website Requirements for Good Accessibility

Making a website look good isn’t the only important part of design. Websites should also be designed to be accessible to people with disabilities. A great-looking website which is completely inaccessible to blind people is useless to an entire group of people.

There’s plenty of ways to make websites more accessible to people with disabilities, but some of the lists on how to do so are a bit overwhelming. I recommend everyone make their sites as accessible as possible, but if you’re not sure where to start, here’s a few simple things you can put into effect immediately.

  1. Links – Make links clear and descriptive. People who use screen readers will often end up tabbing from one link to another, or getting all the links in one list. If you set up all your links as ‘click here to read a great article’, visually impaired users will hear a long list of ‘click here’ with no other reference to where your links go. Much better would be ‘click here to read a great article‘ – though if your links are styled properly, it should be obvious where the links are without something as redundant as ‘click here’, and you could drop it completely: ‘this is a great article‘.
  2. Image descriptions – For best accessibility, every image should have some sort of description in its ‘alt’ tag (e.g. <img src="image.jpg" alt="image description" />). If for some reason or another an alt tag can’t be used, making sure all the important information in the picture is included in the accompanying text is a good substitute.
  3. Audio transcripts – There’s a wide variety of reasons why a person might not be able to understand audio alone. It might not be possible to provide a full transcript of an hour-long seminar video, but it’s easy enough for shorter videos. This goes double if you’re working from a script or prepared statement and thus already have a written copy of everything spoken. If you can’t do a full transcript, try to at least post a useful summary.
  4. Autoplay – For the love of all things holy, do not have audio or video play automatically.
    • It’s bad for visually-impaired people using text-to-speech screen-readers, because it interferes with the screen reader.
    • It’s bad for hearing-impaired people for a whole pile of reasons, but i’ll stick with the one i’m most familiar with: people with certain auditory processing disorders can hear more or less like anyone else if there’s no conflicting sounds. If we’re trying to listen to something else and music suddenly starts up, we have trouble understanding either sound. If you can’t even get song lyrics because the words and instruments interfere with each other too much, having a conversation when a video blog has just gone on autoplay is certainly impossible.
    • It’s bad for people with certain cognitive disorders who are highly sensitive to sudden, unexpected changes; imagine nails screeching on a chalkboard every time you hear something unexpected. Or, for the really loud and dramatic stuff, your speakers spontaneously combusting. Not going to be spending much longer on a website which has such effect, are you?
    • It’s also annoying for able-bodied/neurotypical people who like to actually control what their own computer is doing.
  5. Colours – Changing colours is a quick way to change a web design, but it’s important to be sure the colours don’t ruin the site for colour-blind users. Don’t make colour the sole indicator of anything important – links, by default, are underlined as well as a different colour from the rest of the text, and the underline can be important to colour-blind users. It’s also important to be sure text and its background contrast well enough for a colour-blind user to read it. You don’t need to stick with black on white for everything, but high-contrast colours are much easier to read than colours which barely contrast at all.

Extra Web Accessibility Resources

A simple introduction to web accessibility – lists the four main types of disabilities which affect web browsing and how to help users work around them
Colour Contrast Check – allows you to check the contrast of two colours and be sure any text written with them will be legible
Wave – helps you check general accessibility

Looking for help in choosing a good, accessible colour scheme? You don’t need to stick with black-and-white to have easily-legible text! I can create a five-colour website colour scheme for you which will include colours which contrast perfectly. For $5, you can have a new website colour scheme in under 24 hours.

6 Elements to Change when Customising Your Website

When it comes down to changing colours on a website, there’s only three declarations which affect colour: ‘background’, ‘color’, and ‘border’. ‘Background’ and ‘border’ are fairly self-explanatory; ‘color’ refers to changing the colour of text. These three attributes can be attached to almost any design element.

So which elements do they really need to be attached to in order to best utilise a custom website colour scheme?

Throughout this post, i’ll be using the default Twenty Eleven WordPress theme and the more elaborate Headway theme as examples. The general ideas apply to any site – WordPress or not – but for other designs, you’ll probably need to use something like Firebug to find out exactly which name each element has (unless your designer was very, very good about commenting their code).

1. Overall basic elements

For an immediately obvious change, start under the ‘body’ attribute. Changing ‘background’ here will change the background of the entire website, and ‘color’ will change the text sitewide. Links are a bit different, sorted under the ‘a’ tag, but can be changed with ‘color’ just like regular text. Links can also have borders and backgrounds, though usually they’re just underlined and a different colour than the regular text. Going overboard with decorating them can be a bit too distracting.

Depending on your site design, the overall website background and the ‘background’ your content goes over may be the same, or they may be entirely different. Many designs place all content in a large column, leaving the original background showing along the sides.

body{background:#ffffff; color:#000000;}
a{color:#0000ff;}
Twenty Eleven content background: #page{background:#ffffff;}
Headway content background: div.wrapper{background:#ffffff;}

2. Headers

In website design, ‘header’ can mean two different things: overall site header and the header tags which alter text headers in content. The overall site header is a more important design element, but sometimes changing the header tags will help change it. Many website designs use ‘h1’, ‘h2’, or similar header tags for the site name and tagline. These tags are often used in places besides the header design, for example the title of a blog post or an attention-grabbing announcement on the front page. It’s still a good idea to check the exact tags used in your header, though, as some websites will use a special paragraph class instead of h1, or use a separate h1 class for the header than the rest of the content.

Another obvious header change is not in the h1 tags, but in the header background. You can easily add an image to the header with background:url('image.png');, but if you don’t have a header image – or if the image has a transparent background or isn’t large enough to stretch across the entire top of your site – using a colour will work just as well. You can also edit the header element to add a border all around the header – or just use ‘border-bottom’ to add a border to the bottom edge, neatly separating your header from your main content.

You may also want to change the ‘a’ attribute in your header element. It’s common for the site name in the header to be a link, leading back to the site’s home page, and changing the ‘a’ attribute allows you to control what colour the header link is.

Twenty Eleven
Overall header: #branding{background:#ffffff; border-top:2px solid #cccccc;}
Header text: #site-title a{color:#0000ff;}
Tagline text: #site-description{color:#333333;}
Headway
Overall header and tagline text: .block-type-header{background:#ffffff; color:#333333; border-bottom:2px solid #cccccc;}
Header text: .block-type-header span.banner a{color:#333333;}

3. Footers, sidebars, and other extra content

Footers and sidebars tend to be a little less dramatic in appearance than headers. Content is the main point of a site, and headers grab a bit of attention; footers and sidebars are what comes after everything else. Some designs leave the background of the footer and sidebar the same colour as the content, leaving only natural column breaks to separate them. Text in these areas may also be slightly lighter or otherwise blend in more than in the main content area.

In many designs, sidebar areas are ‘fluid’, meaning their height changes to fit the amount of content they contain. This can cause problems for changing backgrounds, as the main site content is also fluid, and usually taller than the sidebar. Just changing ‘background’ in a sidebar thus results in an odd block of colour which runs out before it hits the bottom of the page. It varies by design, though – Thesis, for example, has full-height sidebars – so experiment a bit to see what looks best.

Twenty Eleven
Footer: #supplementary, #site-generator{background:#ffffff; color:#3333333; border-top:2px solid #cccccc;}
Sidebar: #secondary{color:#333333;}
Headway
Footer: .block-type-footer{background:#ffffff; color:#333333; border-top:2px solid #cccccc;}
Sidebar: .block-type-widget-area{color:#333333;}
Headway’s incredibly flexible when it comes to what kind of content goes where, so you might have something besides a widget area for your sidebar. If you’re having trouble getting the sidebar (and only the sidebar) to change, try adding a custom class to the block you’re using for your sidebar in the visual editor.

4. Menu

Menus consist primarily of links over a background, but they can be much more stylish with a little effort. Hover effects can change the background as well as the link, which tends to look overdone on other links but is an interesting effect on menus. The currently-active link can also be emphasised, which makes it easier to show users exactly where they are – useful if your page title isn’t clearly visible elsewhere on the page.

Twenty Eleven
#access {background:#ffffff; border-bottom:2px solid #cccccc;}
#access a {color:#000000;}
#access a:hover {background:#cccccc; color:#333333;}
#access .current_page_item a {background:#cccccc; color:#333333;}
Headway
.block-type-navigation {background:#ffffff; border-bottom:2px solid #cccccc;}
.block-type-navigation a {color:#000000;}
.block-type-navigation a:hover {background:#cccccc; color:#333333;}
.block-type-navigation .current_page_item a {background:#cccccc; color:#333333;}

5. Quotes

Not every site makes heavy use of quotes, but for the ones which do, they’re an important design element. Quotes can be quite lengthy, so making sure the background and text contrast as well as the main background and text is important.

A popular addition to quote backgrounds is an image of a quotation mark, added in using background:url(image.png) no-repeat top left;. Quotes often have decorative borders as well, which further separates them from other text. ‘border-left’ is especially common as a design element.

blockquote, q {background:#cccccc; border-left:2px solid #999999; color:#000033;}

6. Custom features

Once you can handle changing the colours in pre-existing CSS, you’ll almost certainly want to make your site stand out even more with some little extras.

This paragraph, for example, uses a custom p.tip class. It’s styled similarly to a blockquote – i could easily just style ‘blockquote’ like this and use it instead, but having a custom paragraph style is good for keeping them separate in case i ever need to separate them.

Custom classes and IDs can be used for almost anything you want to stand out. Sites which frequently feature guest writers will use custom paragraphs to separate the writer’s bio from their article. ‘h1.shop’ can be styled differently from ‘h1.home’. Particularly important links can be made brighter and bolder than links which are just added for a bit of extra information. Instruction-type sites have special div sections for contents and lists of materials as well as customised paragraphs to better bring users’ attention to warnings or tips.

You’re on your own on this one! Check out ‘CSS Basics’ for some inspiration and tips on how to develop custom features to maximise the individuality of your design.

Eight Free WordPress Themes with Customisable Colour Schemes

So you know how to customise a website colour scheme, but maybe there’s still the issue of what design to start off with. Or maybe you’d like something you can change a little faster: tinkering with website CSS is all well and good, but you want your site up today, and it’s faster to switch up some built-in options than it is to figure out the custom CSS.

There’s WordPress themes with no options whatsoever, which need to be customised entirely through CSS, but fortunately there’s also a good many with built-in options. Some only give the options of a few pre-built themes, others are fully customisable. Some (like Suffusion) have both: pre-built themes which can then be further customised. A few even have a built-in CSS section, which gives you a place to customise CSS beyond the standard WordPress theme editor.

Here’s some samples of some easily-customisable WordPress themes, both as they look by default and how they look with their most basic customisations:

  1. Basic Simplicity – Most, though not quite all, colours are customisable, and there’s a custom CSS section in the settings page. The header doesn’t have a built-in upload feature like most themes with customisable headers do, but it’s still pretty easy to change.
  2. Blaskan – As far as colours go, only the background and header can be easily customised, but it’s still a good-looking theme.
  3. Blogolife – Six different colour themes to change the ribbon-like elements, and the header image and background are fully customisable.
  4. Graphene – Tons of options on this one, and not just in appearance. Pretty much every individual element can be customised. There’s also a built-in section for custom CSS.
  5. Mantra – Not every element is customisable, but a good many are, and there’s a custom CSS section to cover the rest.
  6. Suffusion – Includes over twenty prebuilt colour themes which are fully customisable, so you can ditch the default look right off and still have the ability to do a bit of tinkering.
  7. Twenty Eleven – This is currently the default WordPress theme, and while it’s not as highly customisable as some others, it’s the theme you’re guaranteed to have installed if you don’t want to bother uploading anything new. You can choose between a light (black text on white background) or dark (white on black) basic scheme and further customise links, page background, header image, and header text colour.
  8. WP Creativix – Doesn’t include much colour customisation beyond background and header/link text, but it does include a slider and some other nice design features.

Have you tried any of these themes? Know of another customisable WordPress theme which is even better? Leave a comment letting us know all about it!

6 Web Design Tips for Newbies

What makes a great website?

The best way to create a rewarding experience for your site visitors is with a visually striking, useful, and easily navigable website. A variety of programs make it possible for anyone to create a site with limited experience and no programming knowledge, but to make the site truly great, there’s a few things you should keep in mind…

1. Know your objective in having an online presence. Do you want to sell a product, or just inform? Either way, your homepage must focus on what you are providing your audience. Design the site around your focus. Spice up the page with a picture or two and include a short introduction to explain what your site is about. Include helpful and relevant links, but avoid cluttering your site with useless links and banner ads, which can distract your audience from what you want them to do on your site and make you look less professional in the eyes of your visitors.

2. Be consistent. Some elements can and should change from page to page – for example, a sidebar showing new products would be useful on most pages but redundant on your sales page. Most elements, however, should stay as similar as possible. This is especially true of navigation – you want your visitors to know exactly where they are and how to get where they’re going, rather than getting frustrated with a menu which jumps all over the page. Have a unifying thematic design or motif for your website which carries across each page and keep your site elements consistent within this design.

3. Use, but don’t overuse, colour. Colour is important as it can elicit strong emotions from your visitors. Associating the colour with what you are selling or offering can also enhance the appeal of your site. Overusing colour and drowning your site in fifteen different hues, however, will make your site look disjointed and chaotic. Use as few colours as possible and let the focus of your site, like products or information, stand out from your colour scheme.

4. Keep your fonts legible. Common and persistent type fonts and sizes are also important in creating a unified design. Few things are as confusing to read as a page with several font types. Prudent design rules limit your fonts to one or two, one for the title and one for the body text. Stick to websafe fonts, which are more likely to appear the same across all your user’s computers. Font size is more flexible and can be varied amongst sub-headings and sidebars.

5. Make sure your site pages have reasonable file sizes for fast loading. Another part of creating a good experience for your site visitor comes in not making them wait for your site – whether it be the main page or subpages – to load. While broadband internet connection helps with speed, it’s still useful to make sure your site will load quickly for those using dial-up. It’s good for page rank, too: even Google monitors how fast your site loads against average loading times.

6. Find the time to refine the elements in your website before posting it. If you’re designing on your computer, confirm the appearance of your site before you even upload it to the webhost. If you’re designing in your site’s content manager (e.g., in WordPress), preview the design before you make it live.

Software can automate the design process, but a perfect website isn’t developed in a single day. Creating a quality site takes time, but with focus and effort, you can achieve exactly the design you want.

Want to take your website design to the next level? Check out ‘CSS Basics‘ for tips on using CSS to customise a website.