Web Development and Design

One of the toughest challenges facing any designer is the web page. There are perhaps millions of pages in the World Wide Web all jostling for attention. The question that is foremost is how you as a designer can make a difference.

Study the subject being featured. Visit as many sites as possible that cover the same as well as related topics. Make a list of what works and what doesn’t. Avoid using a design that is going to be uniform with others. Unless your pages are distinctive they are not going to work.

1.    Try and avoid run of the mill things like page counters, java text scrolling, flashing images, GIF images, signs which say “we are not ready.” Or, too many illustrations or animations, black grounds or fade ins.
2.    Create a design which coveys in a stylish way what it has to. Instead of using downloaded illustrations use original ones.

3.    Avoid things like heavy files or graphics. These will slow down your pages. GIF is better than JPEG files. 

4.    Think of the target audience and subject being addressed when designing. The overall effect should be that of exclusivity.

5.    Avoid incorporating download plugins. While Flash is innovative and fun you will loose viewers if you don’t provide an HTML alternative.

6.    Design the pages so that they are not more than 50K.

7.    Remember the rule of thumb; a web page should not have more than three screens. And, ensure that the viewer does not have to scroll horizontally.

8.      Test your website pages with several browsers. Make sure they open quickly and completely. Do a reality check by asking a cross section of users to check the site. Usability checking will bring to the fore any mistakes made.

9.    Don’t use backgrounds with tiles or patterns it makes the design fussy and decreases readability. Avoid frames they make the pages difficult to book mark.

10.    Determine accurately the rules of creative design and ensure that you apply them. If you have links make sure they work. Limit page content. Pay attention to search engine optimization. Ensure that the design follows the content and is not a separate element. Maintain archives. Use innovative fonts and titles. The content should follow basic elements of style or a style sheet.

When designing the web page think about the site as a whole not each page separately.  There should continuity in design. Include a site map for easy navigation. Pay attention to imparting knowledge, include information on the subject of the site, give tips, make available how to articles as well as publications on the topic. The site and pages should be interactive without being a nuisance, so links must be well thought of and of practical use.

Keep in mind at all times the 5 golden principles of design: balance, rhythm, proportion, dominance, and unity.

According to the so-called experts, a decent conversion ratio is right around one percent. In other words, one out of every one hundred visitors to your website converts to a sale.

Personally, I think you should ignore what the experts say, and strive to achieve as high a conversion ratio as possible. You should never be satisfied. You should always be looking for ways to improve your conversion ratio. My website consistently converts anywhere from 3 to 5 percent, and often converts as high as ten percent!

Unless you’re selling a big-ticket item and making £200 or more per sale, it’s extremely difficult to make any real money with only a one percent conversion ratio.

Of course, there are exceptions to every rule, and if your website is attracting hundreds or even thousands of visitors a day, then obviously you can do quite well with a one percent or lower conversion ratio.

But what if you don’t have that kind of traffic - and most websites don’t. Then what? What if you’re selling a £20 e-book and you’re only attracting a hundred visitors a day to your website? With a one percent conversion ratio, that means your website is making a measly £20 a day. And believe me, that am much more common than you realize.

However, what if you could improve your conversion ratio to 3 percent, 5 percent, All of a sudden; you’re making £60 to £100 a day with the same amount of traffic. Improve your conversion ratio to ten percent and viola, that £100 a day turns into £200 a day!

So, how do you go about improving your website’s conversion ratio? Here are some tips that should help:

1. Make sure your visitors know what you do, the instant they land on your website. Don’t make them have to guess. Tell them right up front with a benefits-laden headline.

2. Make sure the design of your website is up to par, Make it easy to navigate. Get rid of distracting flash or stupid, meaningless graphics that are a waste of everybody’s time and take forever to load, Simplify your website. Get rid of the flash, graphics and pop-ups!

3. Use psychologically effective colours. The colour blue suggests quality, trustworthiness, success, seriousness, calmness - the perfect choice for sales pages. Avoid purple, which connotes uncertainty and ambiguity, and only use yellow to highlight key words and phrases. In addition, try to have as much white space as possible. This makes for a much cleaner looking, easier to read website.

4. Get your own domain name. URL’s that contain names like, "Geocities", "Angelfire" or "Tripod" have amateur written all over them.

5. Prove what you say. Back up your claims with cold, hard, indisputable and verifiable facts

6. Put your name, telephone number and street address on your website

7. Use authentic customer testimonials, complete with first and last names. Just make sure you get your customers permission first.

8. Offer a fair and reasonable money-back guarantee. Thirty days is good. Sixty or ninety days are better!

9. Make it easy for your customers to pay. And offer a variety of payment options. I can assure you, if you’re using PayPal only, you’re losing sales. There are a lot of people out there, I included, and that just won’t do business with PayPal. It’s too much of a hassle!

10. And last but not least, make sure you have a powerful sales letter. A strong and effective sales letter can blast your earnings into the upper stratosphere!

If you aren’t capable of writing that type of sales letter yourself, hire a copywriting expert to write it for you.

Anyone who knows anything about web accessibility knows that images need alternative, or ALT, text assigned to them. This is because screen readers can’t understand images, but rather read aloud the alternative text assigned to them. In Internet Explorer we can see this ALT text, simply by mousing over the image and looking at the yellow tooltip that appears. Other browsers (correctly) don’t do this. The HTML for inserting ALT text is:

But surely there can’t be a skill to writing ALT text for images? You just pop a description in there and you’re good to go, right? Well, kind of. Sure, it’s not rocket science, but there are a few guidelines you need to follow…

Spacer images and missing ALT text

Spacer images should always be assigned null ALT text, or alt="" . This way most screen readers will completely ignore the image and won’t even announce its presence. Spacer images are invisible images that pretty most websites use. The purpose of them is, as the name suggests, to create space on the page. Sometimes it’s not possible to create the visual display you need, so you can stick an image in (specifying its height and width) and volià, you have the extra space you need.

Not everyone uses this null ALT text for spacer images. Some websites stick in alt="spacer image". Imagine how annoying this can be for a screen reader user, especially when you have ten of them in a row. A screen reader would say, "Image, spacer image" ten times in a row (screen readers usually say the word, "Image", before reading out its ALT text) - now that isn’t helpful!

Other web developers simply leave out the ALT attribute for spacer images (and perhaps other images). In this case, most screen readers will read out the filename, which could be ‘newsite/images/onepixelspacer.gif’. A screen reader would announce this image as "Image, newsite slash images slash one pixel spacer dot gif". Imagine what this would sound like if there were ten of these in a row!

Bullets and icons

Bullets and icons should be treated in much the same way as spacer images, so should be assigned null alternative text, or alt="". Think about a list of items with a fancy bullet proceeding each item. If the ALT text, ‘Bullet’ is assigned to each image then, "Image, bullet" will be read aloud by screen readers before each list item, making it take that bit longer to work through the list.

Icons, usually used to complement links, should also be assigned alt="". Many websites, which place the icon next to the link text, use the link text as the ALT text of the icon. Screen readers would first announce this ALT text, and then the link text, so would then say the link twice, which obviously isn’t necessary.

(Ideally, bullets and icons should be called up as background images through the CSS document - this would remove them from the HTML document completely and therefore remove the need for any ALT description.)

Decorative images

Decorative images too should be assigned null alternative text, or alt="". If an image is pure eye candy then there’s no need for a screen reader user to even know it’s there and being informed of its presence simply adds to the noise pollution.

Conversely, you could argue that the images on your site create a brand identity and by hiding them from screen reader users you’re denying this group of users the same experience. Accessibility experts tend to favour the former argument, but there certainly is a valid case for the latter too.

Navigation & text embedded within images

Navigation menus that require fancy text have no choice but to embed the text within an image. In this situation, the ALT text shouldn’t be used to expand on the image. Under no circumstances should the ALT text say, ‘Read all about our fantastic services, designed to help you in everything you do’. If the menu item says, ‘Services’ then the ALT text should also say ‘Services’. ALT text should always describe the content of the image and should repeat the text word-for-word. If you want to expand on the navigation, such as in this example, you can use the title attribute.

The same applies for any other text embedded within an image. The ALT text should simply repeat, word-for-word, the text contained within that image.

(Unless the font being used is especially unique it’s often unnecessary to embed text within images - advanced navigation and background effects can now be achieved with CSS.)

Company logo

Websites tend to vary in how they apply ALT text to logos. Some say, ‘Company name’, others ‘Company name logo’, and other describe the function of the image (usually a link back to the homepage), ‘Back to home’. Remember, ALT text should always describe the content of the image so the first example, alt="Company name", is probably the best. If the logo is a link back to the homepage then this can be effectively communicated through the title tag.

Conclusion

Writing effective ALT text isn’t too difficult. If it’s a decorative image then null alternative text, or alt="" should usually be used - never, ever omit the ALT attribute. If the image contains text then the ALT text should simply repeat this text, word-for-word. Remember, ALT text should describe the content of the image and nothing more.

Do also be sure also to keep ALT text as short and succinct as possible. Listening to a web page with a screen reader takes a lot longer than traditional methods, so don’t make the surfing experience painful for screen reader users with bloated and unnecessary ALT text.