WebMastersLoom

Web accessibility has so many benefits that I really do wonder why such a large number of websites have such diabolically bad accessibility. One of the main benefits is increased usability, which according to usability guru, Jakob Nielson, can increase the sales/conversion rate of a website by 100% and traffic by 150%.

At which point you must surely be asking, “So if I make my website accessible its usability will increase and I’ll make more money out of it?”. Well, not quite. An accessible website is not automatically more usable but there are many areas of overlap:

1. Descriptive link text

Visually impaired web users can scan web pages by tabbing from link to link and listening to the content of the link text. As such, the link text in an accessible website must always be descriptive of its destination.

Equally, regularly sighted web users don’t read web pages word-for-word, but scan them looking for the information they’re after.

Link text such as ‘Click here’ has poor accessibility and usability as both regularly sighted and visually impaired web users scanning

the paragraph will take no meaning from this link text by itself. Link text that effectively describes its destination is far easier to scan and you can understand the destination of the link without having to read its surrounding words.

2. Prompt text assigned to form input

In order to make forms accessible we need to assign the prompt text to its form item. THis is especially useful when done with checkboxes and radioboxes, as the text becomes clickable too. Checkboxes and radioboxes are small and pernickety for even the steadiest of hands so by increasing the clickable region everyone benefits.

3. Large chunks of information divided up

There are a number of techniques that can be taken to increase the usability for visually impaired users, who have to listen to the information on each page and try to remember it. By structuring information into small, manageable groups, enhanced usability for these users can be achieved.

Methods to accomplish this can include using sub-headings to break up body content, grouping form items with the fieldset command and using lists. Breaking down groups of information is obviously highly useful for sighted web users too, as it greatly enhances our ability to scan the screen quickly.

4. Site map provided

Site maps can be a useful accessibility tool for visually impaired users as they provide a straightforward list of links to the main pages on the site, without any of the fluff in between. Site maps are of course useful for everyone as they provide us with a way of finding pages quickly and help us visualise the structure of the website.

5. Simple and easy language

>From an accessibility point of view, this one’s important for people with reading and/or cognitive disabilities and site visitors who’s first language isn’t the one you’re writing in. From a usability point of view, well, it helps everyone. Reading from computer screens is tiring for the eyes and about 25% slower than reading from paper. As such, the easier the style of writing the easier it is for site visitors to absorb your words of wisdom. Wherever possible shorten your sentences. Use, ‘apply’ instead of ‘make an application’ or ‘use’ instead of ‘make use of’.

6. Consistent navigation

Having consistent navigation across pages is also important for maximising accessibility to people with reading and/or cognitive disabilities, but again everyone benefits. Each time you visit a new website it takes you a few seconds to adjust to the unique layout and user interface of that page. Well imagine if you had to do that every time you follow a link to a new page!

By having a consistent interface across a website we can instantly locate the navigation and page content without having to look around for it. In reality, most sites do have consistent navigation across most pages. The main culprit for falling foul of this guideline is the homepage, which some websites structure quite differently to the rest of the site. By having a consistent interface across the entire website we can instantly locate the page content without having to look around for it.

7. No unannounced pop-ups

For web users utilising screen readers pop-ups can be a real accessibility nuisance. Screen readers read out the content of whichever window is on top of the others. Pop-ups display over the top of the main website so will always be read out first. For visually impaired users this can be frustrating as they may not realise that what they’re hearing isn’t the ‘real’ website.

So, pop-ups are bad for accessibility. As for usability, well I’m sure you hate pop-ups as much as I do. Many toolbars, such as the Google toolbar, now come packaged with a pop-up blocker so allow you to surf the web without the irritation of new windows popping up.

8. CSS used for layout

CSS-based sites are generally have a greater ratio of content to HTML code so are more accessible to screen readers and search engines. Websites using CSS for layout can also be made accessible to in-car browsers, WebTV and PDAs. Don’t underestimate the importance of this - in 2008 alone there’ll be an estimated 58 million PDAs sold worldwide (source: http://www.etforecasts.com/pr/pr0603.htm).

As well as improved accessibility, CSS-based websites have one large usability benefit: increased download speed. Broadband isn’t as widespread as you may think. In the UK for example, just one in four web users are hooked up to broadband (source: http://www.statistics.gov.uk/pdfdir/intc0504.pdf) so improving the download speed of your web pages could provide a great usability advantage over your competitors.

9. Transcripts available for audio

One group of web users with special accessibility needs that doesn’t get much press is hearing impaired users, who need written equivalents for audio content. Providing transcripts is in fact highly beneficial to all users. Many of your site visitors probably can’t be bothered to wait for your 3Mb audio file to download and start playing. They may prefer just a quick outline of what’s contained in the audio content.

By providing a transcript, broken up by sub-headings and with the key terms highlighted, non-disabled site visitors can skim through it and get a general idea of the content. They can then make a more informed decision about if they want to wait for the 3Mb audio file to download.

10. Screen flickering and movement avoided

Some epileptic web users must be careful to avoid screen flicker of between 2 and 55 Hz. Web users with reading and/or cognitive disabilities and those using screen magnifiers will struggle to keep up with scrolling text (if you do have scrolling text be sure to provide a mechanism to stop it).

In addition to being a bad idea for accessibility, neither flickering nor scrolling text are good for usability either. The former can be distracting when you’re trying to read something and you see flashing out the corner of your eye; the latter isn’t good either as you have to wait for the content to slowly appear. When you see scrolling text do you usually bother to stop what you’re doing so you can read it as it gradually materialises? Or do you ignore it?

The other disadvantage of scrolling or changing text is that you might see something you want to click on, but before you know it it’s gone. And now you have to wait 30 seconds for it to re-appear again!

Conclusion

With all this overlap between web usability and web accessibility there’s no excuses for not implementing basic accessibility on to your website. Outside of the ethical argument there are many reasons to make your website accessible, one of the main one being that its usability will be improved. No one can argue with that.

There are some very basic design principles that are important to know whether you’re a graphic designer, web designer, or even a photographer. Certain very basic design principles apply to all artistic fields and are necessary for the artist and valuable information for the consumer.

Line (s)

The world we live in is three dimensional but when we try to represent that world in art we use lines, a very simplistic way of trying to represent the three dimensional world around us. But by knowing how to use lines in art we can make a very good sometimes great representations of the world around us.

Lines of Direction

Horizontal, a horizontal line usually represents a feeling of rest or relaxation, think of a puppy asleep on the floor. That is a horizontal line. Stability is also conveyed through a horizontal line, think of a table or a large building.

Vertical, a vertical line usually brings to mind strength and sometimes action. Think of a tall tree, its strong vertical line shows strength. A vertical line can show action especially when it’s compared to a horizontal line.

Diagonal, a diagonal line always suggests movement. Imagine a football player running if you draw a line from the top of his head to his heel you will see a diagonal line. Diagonal lines always get our attention for the action they imply.

Curved, a curved line can suggest many things. The curved line of a sagging roof can indicate weakness and a curved line of a dancers arm can indicate gracefulness.

Remember lines convey thoughts and feelings and every line you use in your design helps to convey your message.

Shape (s)

Lines form shapes and from those shapes we get positive and negative shapes, or spaces.

Positive shapes are always the objects in an image or design. It’s important to pay attention to your positive shapes their size, placement, and their balance in reference to:

Negative shapes, these are always the shape formed from the space around your object.

By paying attention to the balance of your positive and negative shapes you can make sure that your designs or images have good balance.

If you have some specific questions please visit my Photography and Design Forum at: http://kellypaalphotography.com/v-web/bulletin/bb/index.php and post your question there.

Tone and Texture

This specifically applies to drawings more than photography, but tone and texture are very important. Tone refers to shading of light and dark on an object and texture is the visual and tactile surface characteristics of an object.

Here’s a list of things that affect the tone and texture of an objects appearance.

1. The direction from which the light is coming. (Left, right, above, behind, or below.)
2. The intensity of the light. (Candlelight or sunlight.)
3. The type of light (Light from the setting sun or flash.)
4. Objects standing between the light source and your subject or object. (Light passing through a thin fabric.)
5. The color and texture of the object. (A fuzzy blanket looks a lot different than a piece of granite.)

Light and Shade

Light always travels in a straight line and depending on the location of the light the object or subject can look dramatically different. To understand this principle get a roll of film a light source, a lamp, an object or a family member. Take a series of photos of your subject start with the light source at twelve o’clock take each successive photo moving the light source to each position on the clock. When you look at your photos you will be amazed at how different your subject looks in each image. This exercise is great for anyone wanting to understand how light changes the look of a subject.

Shade

Shade or shadow and more commonly known as contrast is the degree of difference between the light and dark areas. An image with very black blacks and very light whites has high contrast. An image that is mostly shades of gray has low contrast. Contrast is determined by the intensity of the light source. Adjusting the contrast can help you create a very realistic image or a fantastic one.

If you have some specific questions please visit my Photography and Design Forum at: http://kellypaalphotography.com/v-web/bulletin/bb/index.php and post your question there.

What better way to start the new year than with more traffic to your web site. Web traffic is a critical part of your internet business and it is imperative that you design it to bring you the most amount of traffic possible.

Designing your site for traffic includes offering good content, easy navigation and a logical flow. Additionally you must also build your site to draw traffic from the search engines because if you can obtain high search engine ranking, you can enjoy free traffic.

It’s important to note, however that good ranking won’t do you much good without a well designed site and a well designed site can’t bring you visitors if no one knows it’s there. Both high ranking and good design need to work together.

How do we pull all this together? Let’s take a look.

A word about Design

A huge mistake I see many website owners make is that they get caught up in making their site cute. They love the little animations, buttons and dramatic backgrounds. What they fail to consider is that these things are worthless if you don’t offer good content, easy navigation and a logical flow.

First of all don’t try to be everything to everyone. Design your site around a theme, preferably a niche theme. Don’t confuse your readers with links all over the page. Design a logical flow. Lead your viewers to where you would like them to go. Leave plenty of white space and keep your pages organized. Clearly state at the top of your pages what you are about and what you would like your viewers to do.

Secondly, I don’t recommend pop-ups. I find that the majority of internet users find them annoying. The demand for pop-up blockers is a good indication that viewers don’t want to see them.

Thirdly, offer good content. Provide information on your site that will help viewers solve a problem. Offer information that they might not get elsewhere. Write reviews regarding your products. Write newsletters and articles and most importantly offer something of value for free. Give your viewers a reason to come back. It will also build trust in you.

Traffic builders

Good search engine ranking can bring lots of visitors to your site. It often takes a few months to rank well but the payoff is lots of qualified traffic. While it’s not practical to depend solely on search engines for traffic it can complement your other advertising campaigns nicely. Aiming for high search engine placement is always a plus.

Keep these in mind when developing your site for the search engines:

Domain names

Choose a domain name that has your site keywords in it. For example, if you’re a site about pet care, try to include the words “pet care” or words related to pet care in your domain name if you can.

Keywords

Keywords require research and there are several tools to help you out in this area. Here are my favorites:

http://inventory.overture.com/d/searchinventory/suggestion/

http://www.digitalpoint.com/tools/suggestion/

I suggest focusing on only one keyword or keyword phrase per page of your website. This may not seem like a lot but if your site has 20 pages you can focus on 20 keywords. Each page should be considered a landing page for your site. If you have proper navigation on your pages it will easily allow viewers to see everything you have to offer.

Include your keyword or keyword phrase at the top of your page as well as in at least one header phrase. Also work the keywords into the body of your text as often as you can without sounding redundant.

Your keywords should be in the Title tag as well as in your page description tag. Many search engines no longer look at the keyword tags but I recommend using them and including the plural forms as well.

• Alt Tags Search engines don’t index images, therefore any text on your site that is presented in image format won’t get indexed. To solve this problem, you can enter the image description in the ALT tag. To be sure that the search engines recognize all the content on your site, fill in your ALT tags with your keywords. This will boost your keyword frequency and help your site achieve better ranking.
• Linking Search engines will rate your site by who is linking to your site, so it’s important to establish quality, related links. This can be accomplished in a few ways. One way is to establish reciprocal links with other like sites. When exchanging links be sure to include your keywords in your site title.

Review the page you are exchanging links with. Be sure it is a site that you find easy to navigate and informative. I also recommend that the site’s index page have a Google PR rating of at least one. This ensures that the site is not being penalized by Google. If it is a penalized site then you could be penalized as well for linking to it.

• Include a ‘tell a friend’ and ‘bookmark’ script on your site. This gives viewers an easy way to bookmark you and most of all return to your site.
• Include a Site Map Site Maps let visitors know what information you have, how it’s organized, where it is located with respect to other information, and how to get to that information with the least amount of clicks possible.

Site maps also provide spider food for search engine robots. This can increase your chances of becoming indexed because a site map allows the search engines to easily visit every page of your site.

A site map works best if you include a link to your site map in the navigation of every page on your site.

Finally, don’t let your site become stale. I have found that my search engine rankings improve when I periodically add new pages to my site and keep the content new and fresh. Follow these tips and 2005 may be your year for traffic.

The time it takes to load your site can make or break a visitor’s first impression of your site. If your site takes too long to load, the visitor will click “Stop” or “Back” and leave your web site. If you are a business and offering people important information, it is critical to have a nice design, with a quick load time.

You may want to check out the load time of your page, to indeed see if your site loads quick enough for the average user. A great site tool can be found at http://www.websiteoptimization.com/services/analyze/ where you are able to enter your site and it displays a report on the time it takes to load your site on different connections, in addition to tips to decrease load time.

Upon doing a speed test, if your first page takes a great time to load in the visitor’s browser, it is in the best interest to do some redesigning to decrease load time and increase the number of visitors that will not click back on the browser. We must remember that not everyone is running on DSL or Cable modem. Many users still dial up using a 56K connection. As web designers and site maintainers, we want to ensure our site’s load quickly, as to not lose potential visitors to your site.

Images, Sounds & Animations are the major menaces to download time. While these add nicely to a site, they may take up a lot of time to load. If you may avoid large sized files, please do. Many images may be optimized to look the same, however taking up less space, and download more quickly. Many image editors such as Adobe Photoshop or Paint Shop Pro can perform these tasks.

Sounds & Videos should be avoided on your main page, as they take up most time to load. Keep these for inner pages if possible. Videos and sound files can be from 100 KB to 1 MB in size or larger. If the user needs to load a 500 KB video file on a 56 K modem, it will take upwards to 89 seconds to complete. This definitely could turn the user away from your site. So keep these files to a fairly small size, or avoid if possible.

Text can also play a significant role in the load time. If you have a large amount of HTML code and large amount of content on your main page, it will also increase the load time. Text however is not as significant, as the entire text you have on the site may not be even the same size as a couple of pictures combined.

So limit the large sized graphics on your web sites. Your visitors will appreciate the fast loading site with the information being presented that they are looking for!

The way you design your web site affects your visitors’ online experience. As each visitor to your site is a potential customer, the easier they find your web site to use and the more they enjoy being on it, the higher the chance that they will make a purchase.

Therefore, a well designed web site really CAN boost your sales!

In this article I’ll share my five favorite web design tips to help you increase your online sales.

Tip 1: Choose Your Colors Carefully

The colors that you use will determine how your web site comes across to your visitors. Dull colors will make your site seem plain and boring whilst overly bright colors can make it seem chaotic and unprofessional.

Red and Yellow draws the eye in. Therefore it can be a good idea to use these colors for banners and adverts that you want your visitors to focus on. However, use these colors sparingly because they cause eye strain which means that visitors won’t want to look at your web site for long periods of time.

Tip 2: Avoid Slow Loading Web Pages

The amount of time that your site takes to download is critical. If it takes too long to download, you’ll lose potential customers who can‘t be bothered to wait.

There are things you can do to speed up how long your site takes to download. Images and media are the worst culprits when it comes to slowing down your loading time. I advise you to avoid using any kind of multimedia on your web site and if you want to use images, try and keep them small and to a minimum.

You should also define height and width in all tables and graphics as this aids download time.

Tip 3: Make It Easy For People To Find Their Way Around Your Site

Your site’s navigation should be as simple and as straight-forward as possible so that people can find what they’re looking for easily. Don’t lose sales because people can’t find what they want.

Put a link to your homepage on each page on your web site. This will help visitors who didn’t enter your web site via your homepage to find their way around.

You can simplify your navigation by making every page accessible via two links from your homepage and no more than three links from any other page.

Tip 4: Make It Easy For Visitors To Contact You

Place your email address, or at least a “Contact us” link, clearly on every page. If people have to hunt around to find your contact details, chances are they’ll get fed up and leave your site without buying anything.

Tip 5: Make Your Sales Copy Easy To Read

Chunks of text are off putting and are therefore unlikely to get read. This means that if your well-worded sales pitch is written in long unbroken paragraphs, it will go un-noticed.

Use space and bullet points to break up text in order to encourage people to read it.

Oh Yes ..Colors! There are hot ones, cool ones, earthy colors, spiritual colors and every other shade in the rainbow! What colors should you use for your website?

Though color combinations that would work for many decorating ideas are pleasing to the eye, it doesn’t mean they will work on the web.

The reason is that the combinations you use have to serve a twofold purpose: They should impart a general theme to your website and, more importantly, make it easy for your visitors to see and read.

The very high contrast between white and black, having opposite locations on the chromatic scale, is good for standard paper books but not for the Web! A good choice of colors as a tool in the distribution of information, is something that should be given serious consideration.

The printed media’s classical scheme of black lettering over a white background doesn’t work well for Web content. Certain colors produced by the glowing phosphor of PC monitors are very intense and tend to assault the eyes with their potency, such as when you look at snow in bright sunshine.

The above reason is why many folks will print an eBook to study it: They can’t take the “white assault” from most monitors.

Application programmers and savvy web designers are discovering this harmful quality of monitors and are compensating by making the backgrounds of their websites an off white/gray.

You can try this for yourself: read a page with an absolute white background and then the same page with a very light gray or pastel background. See the difference?

The general look and color combination of your website should be pleasing and related to the interests of your visitors however, the areas devoted to text should not strain their eyes. As an example, I was at a hardware forum and somebody had written a couple of bright fluorescent orange lines on a medium gray background; it was about all I could take! Just looking at the 2 lines of text to read them was painful.

Another example of a bad choice for body copy is a dark font over a dark background because it overtaxes the eyes to make out the text. The same reason absolute white is harmful applies to white lettering over a black background.

White without a small amount of compensating color is very stressful on the eyes. If you ever spend any time at a website that causes such irritation, you’ll lose focus and get tired on account of the strain of reading.

All the elements of your website decoration should conspire to make the visit a pleasant one for your customers. Designing and building a successful website should take into consideration all the design elements to keep from physically irritating your visitors.

by Francisco Aloy

(C)Francisco Aloy

It is true! In graphics optimization, seen as a part of website optimization, the smallest is the best. Of course, the element in question should still serve its purpose of being the expression of an idea. Furthermore, it should be understandable, clear, suggestive and good-looking. Let’s see together which could be the right choices (in terms of web graphics optimization) when we decide what type of graphics we’ll use on a website.

What kinds of web graphics are present on the Internet?

When it comes to their origin, there are two types of graphic digital files: vector graphics (created with software tools like Corel DrawTM , FreehandTM etc.) and raster graphics (photographs, 3D renders and any other type of bitmap files). Most of the web sites on the World Wide Web hold as graphic elements bitmap-type graphics in three different formats: GIF (standing for Graphics Interchange Format), JPEG (Joint Photographic Experts Group) and PNG (Portable Network Graphics). All these 3 types use different compression algoritms to considerably reduce the size of the graphic file. Because PNG is not so popular, I hope that you will forgive me if I stick to GIF and JEG in my article. Probably you already know a lot about these (or you can browse the web and find plenty of information) so I’ll get directly to the choices we must make when it comes to design our web site.

• How many colors should we use for our web graphics?
• What type of bitmap files will hold our web graphics?

Some specialists say that we should always go with JPEG, because it supports 16 milion colors and produces quite small files. Well, this is not entirely true, I think. I can only tell you for sure that we don’t have to go with the same type all over our website. How’s that? Let’s see!

When should we go with GIF?

• for graphics with fewer colors: web logos, cartoon-like drawings and line-art (pure black and white) drawings; whenever it is OK to use for our graphics the 256 colors pallette (or even the 216 “safe” colors pallette)
• for grayscale pictures with less halftones (with big contrast)
• for graphics with smaller screen size (even if with many colors) which rely on details; GIF format compression is lossless and keeps sharp contours and clear definition between areas filled with different colors;
• when we need the “Transparency” option of GIF Format, e.g. when a graphic should have a non-rectangular shape and/or we want to discard its background
• whenever an image saved in GIF format is smaller than one saved as JPEG, both images being at a comparable level of quality when displayed
• generally, for vector-generated graphics (unless they have blending and/or gradient fills)

When to use JPEG format?

• for color images with 16 milion colors and many halftones (photographs, 3D render output files, any other images with continuous-tones)
• for grayscale images which rely on subtle halftones
• for graphics/images with big screen size where colors and shades are more important than contours, outlines and boundaries
• whenever an image saved in JPEG format is smaller than one saved as GIF, both images being at a comparable level of quality when displayed
• generally, for photographs and similar images

Which are the inconveniences of each format?

From my point of view, these are the main limitations for GIF and for JPEG formats:

• For GIF: limited number of colors (it can show 16 milion colors, but only in dithered mode, which I do not recommend)
• For JPEG: compression is done by reducing quality of the graphics (loss of sharpness, “hair filaments”, “pixelate” areas etc.)

Whatever format you choose, when it comes to graphics optimization as a part of website optimization, the SMALLEST is the BEST! Beside the format choice, keep in mind some tips when you create and optimize your web graphics:

1. Minimize the screen size of your graphics to the point where it is still clear and suggestive.
2. Try and try again saving a graphic in one of the two formats, at different quality levels (for JPEG) and different number of colors (for GIF). Do this until you find the best size / quality ratio that fits your needs.
3. Use vector graphics software and limit the number of colors when you create the non-photographic graphics for your website.
4. Put emphasis on shape, contour, silhouette and contrast when creating / processing your graphics.
5. Choose carefully the resizing method in your image processor when you change the size / resolution of your graphics - “anti-alias” is not always the best choice.

I hope that this article will help you in your work and always keep in mind that, when it comes to graphics optimization and website optimization, the smallest is the best - as long as it serves its purpose.

Decebal (Dudi) Scraba
http://ewolwe.com/

USABILITY

Usability is what makes your WS pleasant to deal with. While everyone defines personally for her(him)self how to make design nice to look at, memorable (in respect to branding) and serve customer/business needs in the best way possible, the technical side of usability can and should be corrected using the standard requirements.

SOURCE CODE OPTIMIZATION

Firstly about the four problems that come to my mind with “dirty” HTML source code:

1. Potential cross-browser conflicts as some particular useless Tags (a piece of HTML source code) may be neglected by one browser but create some visual errors, when viewed in other browser.

2. The more useless HTML Tags web-page has, the more drive space it occupies.

3. As the derivative of the previous problem, the more size of that web-page, the longer it takes to visitor to load and view it.

4. Search engines like plain and clear textual information for easy search and scan. By having a lot of useless pieces of HTML code, you prevent SE spiders to proper index your web-pages. The result is the obvious decreasing of your Search Engine rankings. That is why Meta Tags correcting is not the only thing you should pay attention to.

Statistic shows that more then 85% of all WSs online demands graphics or HTML code optimization. That is actually a common problem, the core of which lies in the use of highly popular “home” web editors like FrontPage or other.

The “winner” among the worst is well-known Netscape Composer, due to the extremely “dirty” HTML code it generates while editing old or creating new web-pages. If you have ever used Composer and no one have “cleaned” those web-pages afterwards, they definitely contain a lot of HTML “garbage”.

Based on my own experience every 50Kb Netscape Composer’s web-page can be easily optimized to the 40Kb file size or less, as a simple result of the deleting junk HTML tags. If you implement Cascade Style Sheet and HTML compressor you will get the same, but “clean & shiny” web-page totaling 25-30Kb (40-50% space savings) with the enhanced visual effects.

The example above shows saving on a single web-page, but if we speak in terms of 50-60 pages WS, that occupy (without graphics) 3-5Mb of hard drive space, the potential savings as a result of HTML optimization may reach 1-3Mb. So if you are experiencing the lack of hard drive space with your hosting provider, the solution to that problem lies in simple WS optimization. It doesn’t only save a lot of space, but, as we know, eliminates potential cross-browser mistakes, helps SE spiders to properly index your web-pages and make your visitors’ surfing more quick and smooth and therefore pleasant.

GRAPHICS OPTIMIZATION

When we speak about poorly optimized graphics we get two problems: more occupied space and worse load time. Given that the first obstacle may be overcome by acquiring personal server with several Gigabytes of hard drive space, the letter problem will continue to exist as the majority of web visitors have low speed dial-up connection.

To make your graphics optimized on the basic level, you should save it in the proper graphic format. Many popular pictures of eBook covers can be easily optimized simply by re-saving .JPG format into .GIF or vice versa depending on particular file. That tactic alone can bring 15Kb file to occupy 7-10Kb in the matter of 2 min.

The basic math shows that 10 optimized pictures (without HTML optimization) on a web-page are capable to decrease the overall size of it from 120Kb to 70Kb with no visual loss in the quality of picture. Are you aware of statistics how many visitors leave your site just because they are tired to wait until all pictures load? It doesn’t mean that you have to simply delete these pictures completely as some people suggest, what it does mean is that they are better to be optimized because in case with eBook covers, they proved to triple selling potential and their absence will be hardly compensated by new visitors.

To choose the right format, follow one simple rule: “If the target picture is more likely to be a photo, with many colors, unshaped objects and different lights, this file should be saved in .JPG format. If, on the contrary, a picture is more likely to consists of a number of vector objects like circles, triangles, squares, doesn’t have too many colors or similar to some drown comics, then .GIF format is the best to use.”

If it is hard to determine, then save it in both formats and compare quality/size ratio. Not much work, big effect.

Having semi- or fully professional graphic editors will allow you to get even better results by selecting compression rate, smoothness, sharpness of edges – if we speak about .JPG format; or palette, colors, rate of transparency, animation features etc. – if we deal with .GIF format.

Today’s technological opportunities are vast, so it is you to decide how deeply you want to “dive in”.

CROSS-BROWSER & SCREEN RESOLUTION OPTIMIZATION

The numbers are the following:

• 2% have outdated 14” with 640*480 pixels in width and height respectively.
• 49% of web-surfers use 15″ monitors with preferable “standard” screen resolution of 800*600 pixels;
• 45% surf the web with 17″ monitors with reasonable 1024*768 resolution;
• 4% of users enjoy 18-19″ monitors with 1152*864-1280*1024 screen settings.

What should these numbers tell you? The very simple thing – if you created the WS on your 15″ monitor, don’t assume that it will look as good on other monitors as on yours.

Let me draw several notes here about the tendency that monitor market will follow in the nearest future. First is that all 14″ monitors are gradually going to their deserved eternal rest. Even the share of notebooks with 15″ TFT screens growing exponentially. There are even several new versions with 16″ active matrixes. Don’t also forget that notebooks’ 14″ TFT screen have almost the same diagonal inches as usual 15″ CRT (Cathode-ray tube) monitors. Secondly, the number of 15″ monitors is also decreasing, due to growing number of 17″ monitor owners that is the third point.

One sentence conclusion of the above statistics is that your WS should look fine, at least, under 800*600 and 1024*768 resolutions. This is a market demand to your WS and, as we know, you better not joke with The Market.

Without going deep into theory, there are two ways:

• more simple;
• more complex.

Both correct, both satisfy the demand above but the letter way, given it is more complex, usually perfectly fits any screen resolution, whether it is 14″ or 21″ and more favorable to WS space usage.

The easier way would be to make the borders of your web-page (tables of your web-page) to be fixed with certain number of pixels.

The most popular settings are something between 650 to 750 pixels just to fit that 800 pixels width screen under the most popular 15″ monitor 800*600 resolution. If you go that way your web-page will have the same look under different sets of resolutions.

If we try to see it at 14″ monitor with 640 pixels in width, the unpleasant horizontal scroller would appear because our fixed setting in 700 pixels is wider then 640 and it just won’t fit in it. If, on the other hand, we look at our imaginable site under 1152*864 or 1280*1024, it will look too narrow, as it will occupy only 60% of the screen width (our 700 in comparison to 1200 screen pixels width). Why does this designing way simpler? You just won’t have any problems building it: no need for resolution or cross-browser optimization, as fixed pixels are read correctly under almost every browser.

The more complex way is to have width of one or several HTML tables columns on your site to be set in percents like 75% or 100% and, therefore, poses the ability to automatically broaden or narrow according to the specified percents, depending on what screen resolution the site is being viewed under.

If you have 600*800 screen settings (the screen width is 600 pixels) and one of the table width of your site is set to 100%, then this particular table along with all included text and graphic will narrow to 600 pixels, if we set the monitor to 1200*1024 resolution, i.e. having 1200 pixels wide, our site’s table will stretch to the specified 100%, in that case, 1200 pixels.

That’s why it looks more attractive under different resolutions but demands additional optimization, including cross-browser optimization, as Netscape Navigator browser has some problems with proper interpreting of percent settings in multi column tables. Which way to choose depends on the tasks and your preference.

I wish you endless creativity and no more then 70Kb per page

copyright (c) Pavel Lenshin

Take the “Easy Test” to see if your website is as visitor friendly as it should be! Websites often fail to produce the desired results. This can be because visitors find them too hard to understand or navigate. Here are some potential usability problems to avoid.

1. Hard to find

Is your website easy to locate? Do you promote it everywhere, (i.e. business cards, invoices, envelopes, etc.) and is your site search engine friendly? Do you promote the benefits of visiting? Is your site address easy to remember and easy to type? Does your url contain easily misspelled words? Is it complicated by repeated letters, i.e. “theentity?” Are there numbers, which can cause confusion, i.e., “1shopping” or “oneshopping?”

2. Hard to engage

Do you make it easy for visitors to understand why they should read on?

You have only a few seconds to persuade visitors to begin reading your message. Unless your home page immediately provides an obvious “why buy from us?” benefit, visitors are likely to leave—wasting the time and money you spent attracting them to your site.

Home pages should begin with headline that immediately communicates you are familiar with your visitor’s problems and can help them achieve their goals.

Time-consuming animations, vapid “welcoming” statements, and “brag and boast” claims, usually turn visitors away.

3. Hard to decide

Do you make it easy for visitors to decide what to read next? The best web sites have a clear and immediately identifiable focus and sequence. Many home pages, however, offer so many navigation options that visitors are paralyzed and choose to leave.

Studies have shown that, if you offer grocery store visitors an opportunity to sample 6 jams, 30% of customers will eventually buy one. But, if you offer 16 samples, response drops to 3%!

4. Hard to return

Do you make it easy for visitors to register for your e-mail newsletter, so you can invite them to return? Unless you obtain your visitor’s e-mail address and permission to contact them in the future, you’ll probably never see them again! Many web sites offer visitors an opportunity to sign-up for their e-mail newsletter, however, only a few offer a meaningful incentive to sign-up. Without an incentive, without showing or describing the benefits of registering, why should visitors sign up? Most e-mail in-boxes are already filled with unread newsletters!

5. Hard to read

Is your message easy to read? Easy reading is more critical onscreen than in print. Problems that might be overlooked on paper are critical online.

• Long lines of text are difficult to read and make it easy for visitors to lose their place at the end of each line. Limit line length to 2/3’ds the width of the screen.

• Keep sentences and paragraphs short, and add extra space between paragraphs.

• Frequent subheads break body copy into short, bite-sized chunks. Each subhead “advertises” the following text and provides an additional point for visitors to begin reading your message.

6. Hard to print

Do you make it easy for visitors to print important articles and descriptions?

Links to “printer friendly pages,” correct line-and page breaks—add perceived value to your message and make it easier to share and read your message offline.

You don’t need to offer a printer-friendly link of every page, just key articles or important products or upcoming events.

7. Hard to share

Do you make it easy for visitors to pass-along important articles to others?

An “E-mail this to a friend or co-worker” link can expose your message to others who may join your opt-in e-mail list.

8. Hard to contact you

Do you make it easy for visitors to contact you? Do you include full contact information on every page, i.e. phone, fax, e-mail, and postal address? Avoid a single “contact us” link that only loads the visitor’s e-mail program. Give visitors multiple chances to call, fax, or mail a letter!