Design Shack — Web Design Gallery, Articles & Community

Cross Browser Testing (PC)

A sure sign of a rock solid, well coded CSS layout is that it displays consistently across browsers and platforms. A look at recent global browser stats shows that, while Internet Explorer continues to be the most popular web browser in general use, its user base is fairly evenly split between versions 6 and 7.

And although other browsers such as Firefox, Opera and Safari have a relatively small share of the browser market, it would be unwise for any web designer or developer to ignore them when testing their work.

Custom 404 Error Page

The standard 404 error page can often be really frustrating for readers. Using a simple .htaccess file can allow you to customise your error page, and ensure that users are displayed a useful alternative.

Cross Browser Testing (Mac)

Many web professionals use Apple’s OSX for design and despite what you may think, it’s not difficult to test your website in the big three browsers – Internet Explorer, Firefox and Safari. This article talks you through how to easily test your site and gain access to these browsers on a Mac.

The Basics of Semantics

Semantics is a word which strikes fear into many a designer’s heart, but it need not be a difficult or complicated topic. It concerns meaningful expression, avoiding presentational markup and using appropriate and meaningful tags where possible.

Essentially, designing and writing HTML code in a semantic way is as simple as keeping your HTML concerned with the content of the page and not the layout. Some of the simple steps below will help you to ensure that you stay semantically pleasing to search engines, spiders and visitors:

Title tag

Ensure that your page title tag is descriptive and meaningful. Ensure that it changes for each page of your site to reflect the content on that page.

Headings

It’s possible to define your page’s headings with div and span tags, but that doesn’t convey any meaning that it is a heading. Using h1 to h6 tags to differentiate and style the headings on your page is much better.

Tables and Forms

By default, tables and forms are not very semantic and can be very general. They also lack accessibility for those using non-standard browsers. For tables, ensure that you use the thead tag to explain the columns of your table. For forms, adhere to using the label tag to describe what each input, checkbox etc is there for.

Images

It seems like it gets said over and over again, but use alt attributes for all your images to ensure that they are described within the page content – both for the benefit of search engines and disabled users.

Seems straight forward… but why?

Using semantic code won’t make your website look any different and it won’t directly benefit your readers in any way. One direct effect you may see is that search engines spider your website in a more correct and effective way.

Also, semantic coding is paving the way for the future. New devices, software and applications will be around in the next 5, 10, 100 years that still use the content on the web to power them. Semantics set the standard which future systems will adhere to and interpret, so future proof yourself!

Ten Tips for Accessible Websites

We all know that building accessible designs is important, but how many of us really take it into account when crafting a site? Here are some simple and effective steps for making your site accessible for everyone.

1. Validate your XHTML and CSS

Validating your code can often lead you to discover problems which you didn’t notice before. Things such as unclosed and mis-typed tags which look fine in your browser, but could cause problems when viewed by others. The main two tools you need to use are a XHTML Validator and a CSS Validator.

2. Add alternative text for images

Not everyone has images turned on in their browser, and many people use text-to-speech programs as they suffer from sight problems. Providing alternative text for images through the alt attribute ensures that images have a description and can be made sense of by visitors. It also helps you site when being indexed by search engines.

3. Make sure your site works without JavaScript

As with images, many people browse with JavaScript turned off (almost 6% at the time of writing). This is a fairly high number, and it’s worth ensuring that your website functions correctly without JavaScript. Relying too heavily on it can alienate certain people in your audience.

4. Use CSS to seperate content and formatting

As a website which showcases and promotes the use of Cascading Style Sheets, it’s not surprising to see them mentioned here. Using CSS keeps your pages clean from formatting, and ensures that browsers are able to add their own rules to make pages higher contrast and more easily viewed.

5. Provide a high contrast style sheet

Why not make a second style sheet for your website which reduces or removes the colour, and makes everything higher contrast. Place the link to activate this style near the top of the page so that hard of sight users can see benefit from the content on your website.

6. Ensure link text is descriptive

Rather than simply writing “click here” or “read more”, make your links more descriptive. We all fall into this trap from time to time, but a meaningful link can be understood much more easily and improves accessibility.

7. Add “Skip to content” links on pages

Rather than making people scroll down past the repetitive header on every page of your website, include a link which allows them to skip to the main content lower down the page. This saves time, especially on text-to-speech browsers which read out all the information on the page.

8. Ensure every form has label tags

Correctly labeling the inputs on your forms will allow them to be interpreted and filled in much easier by accessible browsers.

9. Don’t open links in a new window

Whilst it’s tempting to link to other websites in a new window, it really is bad practice. Everyone knows how to use a “Back” button, but when the need arises to close windows and keep track of several at once many web users can be confused and annoyed.

10. Make an accessibility statement

Having a statement on one page of your website will show people what accessibility features you offer, and explain how they can navigate around your site easily. Explain how to turn on your high contrast style sheet, and where your “Skip to content” links are. People will be grateful for you explaining it to them clearly.

What Is Web Accessibility?

Everyone needs to have an idea of what web accessibility is, and how they can make their site available to everyone. It’s not just about catering for disabled users, but to anyone with a web connection. Ignoring web accessibility is shooting yourself in the foot, alienating large numbers of potential readers.

The basics

The idea behind web accessibility is ensuring that everyone, regardless of their platform, browser or personal situation can easily browse your website. This often (but not always) involves the need for the following things:

• High contrast versions of your pages being available
• Alternate text being placed on links and images
• Links being appropriately named, for those with text-to-speech browsers
• Testing your site without Javascript and CSS turned on
• Providing appropriate META data

It’s not just about disability…

Obviously, designing our websites with disabled users in mind is an important task, and something we shouldn’t take lightly. But the fact is that web accessibility applies to so many other areas as well. If you’re browsing websites on your iPhone, 3G Phone or even WAP mobile, you’d better hope that the designer considered accessibility when putting the site together. Nowadays, people can browse the internet on a TV or game console, kiosk machine, handheld computer, or even a fridge! Ensuring your designs are accessible mean that you don’t prevent these people from visiting your site.

…but that’s also important!

Disabled users struggle when accessing websites for many reasons. Those who have sight problems won’t be able to pick out your intricate colour scheme, so providing an alternate – high contrast – CSS document will allow them to see your site clearly. Distinguishing links may also be a problem, so providing clear roll-over effects makes it obvious what can be clicked.

For the same reason, text-to-speech browsers are available which read out the contents of a web page to the visitor. Using ALT text for images and clearly labeling links is vital here, so that someone can navigate your website without actually having the visual elements.

People commonly also struggle to use a mouse and keyboard easily, and so use voice controlled browsers and software.

Accessibility statistics

According to W3Schools, around 6% of web users have Javascript turned off in their browser, or use a browser which doesn’t support it. This alone is enough of a reason to consider what your website looks like without Javascript, or other technologies such as CSS, Multimedia, Flash etc.

In May-June of 2001, about 38% of adults with disabilities used the Internet at home, compared to about 56% of adults without disabilities, a gap of 18 percentage points. In December 1998, about 7% of adults with disabilities used the Internet at home, compared to about 26% of adults without disabilities, a gap of 19 percentage points. In that 2.5 year period, the rate of home Internet use increased by more than 400% among persons with disabilities ( from 7% to 38%), compared to about 200% among persons without disabilities (from 26% to 56%). If the Internet use by persons with disabilities continues at the same growth rate, it should match the Internet use of the non-disabled in a few years.

(*Source: National Organization on Disability, 2001)

This excerpt from CSUN shows that a large percentage of disabled people do use the internet, and that it is continuing to grow yearly. In the USA, around 7 percent of internet users are registered as having some form of disability. It’s vital not to forget about this section of your audience, and consider accessibility in design.