Make your customers lives easier and potentially increase revenue by placing your contact details in an easily accessible place.

The most obvious thing to do is to create a ‘contact us’ page. This page should contain your main phone number plus any other useful numbers such as customer services, sales, accounts etc. You can also include a fax number if applicable.

Your contact us page should also include your email address or a contact form. There are many advantages of using a contact form including helping to protect your email address from being scraped and added to spam lists. Contact forms also make it easier for users to send a quick enquiry rather than feeling they have to write a lengthy email or pick up the phone and run the gauntlet of a sales team.

It is useful to include your full postal address on your contact form along with directions or an interactive map to help visitors find your premises. You may also wish to include the opening hours of your office or shop.

Many websites now have a ‘request a call back’ option or ‘live chat’. Live chat can be very useful if you offer support to your site users or customers. For instance a customer on an ecommerce site who is having difficulty with the check out procedure could be helped through it by an operator using a ‘live chat’ system. Result = A happy customer and another sale for the company.

Having created your perfect contact page you now need to make it as easy to find as possible for your website users. Think about where you would look if you were a viewer. The answer is likely to be top right in a horizontal navigation bar, bottom of a vertical navigation bar or in the footer of each page. I would recommend one instance in the main navigation plus again in the footer.

Call your navigation link something simple like ‘Contact’ or ‘Contact Us’.

Bellow are common pitfalls and solutions to these problems.

No Imagery
Take a magazine cover for instance, if a magazine cover does not include any images how would it attract its audience? Images play a vital role within the design and usability stages of any website development. Images can sometimes be used to explain a given problem easily without using paragraphs of text. Imagery can also be used to gain the viewers attention, so images can manipulate the end users experience.
Too Much text
Usability has changed over time, broadband usage is a lot higher since the introduction of wireless devices. With this in mind, bandwidth is much greater so creating a more fulfilled website using multimedia won’t hurt your viewer’s experience. End users can get bored of the same formatted text and may leave as a result. Colour, imagery can help to eliminate this problem.
Colours
Colours play a large role in any website design. Using the wrong colour scheme or choice of colours can affect the website dramatically. For example using a white background with yellow text is not considered good practise. Try to adopt a dark on light approach or visa versa when using colour. Using different coloured links and headings can help to break text based content apart, this will also help usability because end users can quickly find what they are looking for, certain blog posts, external links and so forth.
Interfacing
Interfaces should be clear and incorporate some sort of interactivity; by getting the balance right the end user can find what they wish quickly and enjoy the experience in the process. Roll over images for main menus and JavaScript frameworks can help to add dynamic and modern touches to your design. But compatibility is a massive problem when adopting such approaches.

S.Whiston,  Web Design

Ok, so what’s the point?

The other side. They can’t develop, but not design. Many, many developers have this problem. When asked to design a new website, they, just can’t get it right.

That’s why I’ve written today’s post. Here are some tips for inspiration.

• Move away from the computer screen and look around you
  By reflecting on items around even a little, you will start to gather more and more ideas without knowing it.
• Look at nature!
  From trees, to rivers, to mountains, landscape, forests, planets, rock, boats, et.
• Look at newspapers and magazines
  There is much to be seen here.
• Look out in the night
  This will give you inspiration with dark colours

These are just a few points which will give you immense inspiration. Trust me, I’ve been there. I do a lot of designing and when designing from a blank canvas, things can get difficult.

Not only this, but by looking for original inspiration, you will come up with original designs! What more needs to be said? Go an inspire yourself!

Ahmed Bhula
SEO Web Developer

But the problem with this approach is that these ‘master’ CSS files are often huge behemoths that systematically go through every possible element and make them all exactly the same.. It works but can be seen as using a sledge hammer to hang a picture. Perhaps a more appropriate approach is to use a cut down version that only goes through the elements used on the page. Every time you add a new type of HTML element, you add in the relevant CSS into your master CSS file that resets the padding, margin, colours, font weight etc of that element.

So, in general, master CSS files are a great idea, but can mean there is a lot of redundant and unused code. Just make sure you go through the file after you’re done to remove any unneeded CSS elements.

Multimedia Files: Music files, flash animation and video clips can slow down your website dramatically. If you have a piece of music or a movie that you really want your viewers to access try providing a link to an online player instead of embedding the file on your webpage.

Javascript: Scripts such as those that create drop down menus can contribute to slow loading pages. Try using CSS to achieve the same functionality in a more efficient format.

Templates: Website templates are cached by the web browser on first load so any subsequent pages using the same template load much faster.

Images: Excessive use of images can slow down a website hugely. If you do need to use several images on your site, for instance in photo galleries, ensure that their individual file sizes are as small as possible. Software such as Adobe Fireworks can compress images for web use.

HTML: Well written HTML, CSS and the use of minimal images results in fast loading pages. Optimise your code by removing repeated or redundant HTML tags.

Background Images: When creating headers and footers use background instead of full images. The visual effect will be the same for the viewer but the page will load much quicker.

Once you have finished your website build or redesign check your pages to see how long they take to load. There are various browser plugins available to help make your job easier.

@font-face {
font-family: 'The New Font';
src: url('http://www.example.net/newfont/');
}


The following line of code will tell your browser where it can get the font, so it will follow the link, download and use it to pull in the correct font. You will also have the ability to add shadow, emboss, add effects, stretch and smooth fonts. Sound a bit too good to be true? Well unfortunately it will be ages before we can successfully use this technique to import fonts, with browser’s typically slow uptake of CSS3.. You can imagine how long we are going to be stuck with IE7 and its already aging CSS engine.

Building accessible websites is a legal requirement and also a sound business investment as people with disabilities have a combined income of over £50 billion at their disposal.

Non-disabled users can also benefit from accessible websites. Not all users have the latest browser versions. With more and more people using PDA’s and mobile phones to browse the internet consideration should be given to page download times and the use of Flash and Java Script in images and navigation.

Points to consider when designing an accessible website include the following:

Build One Website – It may be tempting to create a text only version of a website for disabled users. Research shows however that this can make users feel slighted as text only versions can present pared down information. It is far better to make your main website accessible and therefore inclusive of both the disabled and non disabled.

Give Users a Choice – Ensure that your website reacts to browser controls to increase font size. You can embed your own font controls or provide instructions as to how font can be increased. Many users who could benefit from increased font size do not know that such controls exist.

Some sites give users the option to change the colour scheme. This can be of use to people with certain visual impairments.

Stylesheets – Always use cascading stylesheets to separate document content (HTML & XHTML) from document presentation (CSS). This enables users with extremely poor vision to program in their own stylesheets. For instance a user may find it easier to read white text on a black background. If formatting is built into the html then styles can’t be overridden.

Page Layout – Make sure that your websites design is consistent from page to page. As users become familiar with a sites layout they expect elements to be located in the same place every time. Consistency is a benefit for both sighted and non sighted users.

Alt Tags - Screen readers have no way of understanding images therefore it is important that Alt tags are correctly used. Alt tags also provide information to users who view websites with graphics turned off and people who surf using text only browsers. Alt tags should include a short description of the image and should not be stuffed with keywords. Not only is this spamming the search engines it is also confusing for site users.

Site Navigation – Try to avoid using text embedded in images as navigational links. This can be difficult to read for users with visual impairments as the images can’t be resized using browser controls. If this is unavoidable then using size 16 point font would be advantageous.

A well designed website built to current standards and with accessibility in mind not only improves the user experience, it can also have the added benefit of improving your search engine rankings.

A win win situation for all.

I learned the other day that the developers of IE8 were planning on implementing a system where a web designer will have to put a new tag in their HTML in order make use of the latest CSS3 and XHTML tags. As if the current problems with Doctypes, quirks mode and browser rendering problems weren’t enough of an issue without IE8 implementing more proprietary code into HTML. So from now on, If you want your site to render in a new standards compliant mode in IE8 you will now need to add the following meta data:

<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />

Site owners are understandably wanting to keep their web sites viewable to all browser types, but how long should designer keep using the same tired old CSS hacks, ignoring the new CSS2 and CSS3 specifications and implementing PNG hacks simply to satisfy the IE market?

As designers we all still feel that IE6 is used by enough users (still around 20-30%) to warrant the extra work needed to make it accessible for these users. But IE6’s days are hopefully numbered.

• Try to code in <div>’s only
  This will reduce the size of your page greatly
• For usability purposes, always keep the main navigation in sight
• Design for all resolutions
  With technology moving fast, screen resolutions are on the increase, rapidly!
• The BIG HEADACHE
  …make sure it’s compatible with IE6
• When building the template, keep everything to web standards
  i.e. Make sure it validates
• Look for inspiration
  Look at all the top sites in the world and you will realise that most have a very simple and clean layout. Very minimum use of images.
• If it’s going to be a static site, use simple PHP to code a master template.
• Keep SEO in mind right from the first day.
  Trust me, otherwise, it will prove to be a major problem later on.

By following these simple steps, you can be sure to have a well built design, that will surely get noticed (As long as the actual design is good looking) by both users and search engines.