The Demo Site

Now let's assume that this web page belongs to a site that sells stuff online. The very fact that half the users cannot even see the page, translates into losses worth half the amount straightaway (perhaps, even more!) I guess that makes a good case for the raison d'être of this article! Web Designing is, in my opinion, a cocktail of creative skills & technical prowess – and one is no less important than the other.

In the following lines, I have jotted down a few points that I noticed during my online journeys, important from the point of view of web designers. Some of them may be taken with a pinch of salt; for it is not possible to please everyone everytime. But most of them are simple enough to be used as a rule of thumb.

1. A picture, they say, is worth a thousand words. A picture file, alas, is also almost as big. Images, no doubt, enhance the look of a page, but it is not advisable to go overboard in stuffing your page with a truckload of images. Most net-surfers use a dial-up connection, and the average time to load a page should be no longer than 5 seconds. If it's longer, the surfer will most probably click away elsewhere. So, within this time, all the images on a page must be loaded as well. So, as a rough yardstick, keep the aggregate page size less than 30k.

   Another important point to note is that each file on the page requires a separate HTTP request to the server. So a lot of small images - even if they do not add up to a lot in terms of bytes - will slow down the loading a lot.

   Even when you must use images for navigation, please give a second thought to the users who will not be seeing those jazzy, fantastic & truly amazing buttons that you spent hours to design. Yes, I'm talking of the ALT text attribute of the IMG tag. Do not forget to provide an Alternate Text for each image that you use for navigation. (It may be left blank for certain images that are purely for aesthetic reasons, but let that be an exception, rather than the rule.) Though not obviously apparent, ALT text can help such users immensely.

   Modern browsers offer users a choice to turn off images. This gives an idea of how troublesome the unwanted images could be.

   A couple of more attributes that make your pages load faster are the HEIGHT and WIDTH attributes. Without these, the browser must wait for the image to download since it cannot know how much space to leave for them!

2. Navigability & functionality come before artistic excellence. It is no use making your site a masterpiece of art if users cannot navigate around it - even after they reach the main page, they have no clue as to how to go where they want to go.

3. Especially common, is a kind of navigation that some people call Mystery Meat Navigation. That means, that unless your mouse moves over an image, you have no idea where that link might take you. Only when the mouse hovers do you see the actual link. This is cumbersome because users need to move their mouse all over the place to find out which part is a link and which is not.

4. Follow the K.I.S.S. principle: Keep it simple, stupid!

5. Next is a very important practical suggestion: whenever your whole page is within a TABLE, the page cannot render (i.e., the page does not show on the screen) unless the entire table is downloaded. You might have noticed this on several websites, when there is no activity for a long time, and suddenly the entire page is visible. Hence, to avoid such a situation, what you should do is this: Split the table up into two tables one below the other, and let the top one be a short table that displays just the page header and a few navigation links. So now, immediately upon downloading this part of the page, users can see the page header – and this prepares them for the long wait ahead, as well as keeps them from leaving your site to go to other sites, in case of a slow connection.

6. The ongoing browser wars have left only one casualty – the user. As a word of caution, stay away from all browser-specific functions. Because if a certain feature is supported by one browser, it will most definitely not be supported by another. Where you must use such features, it should not hamper the display of the page in the other browser which does not support such functionality. In other words, your page should degrade gracefully.

7. Creating a new browser window should be the authority of the user only. Do not try to popup new windows to clutter the user's screen. All links must open in the same window by default. An exception, however, may be made for pages containing a links list. It is convenient in such cases to open links in another window, so that the user can come back to the links page easily. Even in such cases, it is advisable to give the user a prior note that links would open in a new window.

8. Keep in mind the fonts-challenged users too. The ultra-jazzy "Cloister Black MT Light" font that looks so amazing on your machine may well be degraded into plain old Times New Roman on your user's machine. The reason? He/she does not have the font installed on his/her machine - and one thing's obvious - there's nothing you can do about the situation, sitting halfway across the globe from them.

9. Stay clear of out-of-the-way hard-to-find fonts. Use plain vanilla fonts like Arial, Verdana, Tahoma, and Courier. If need be, make your jazzy fonts into an image and put that on the page. (and while you're there, do not forget Tip #1.)

10. A new design trick that is increasingly being used on the web has caught my fancy: It is a very functional navigation bar that guides you across all possible paths within the site. It looks something like this:

    Home > Section > Subsection > Page

    What better than to give your users a handy way of visiting just about any other page on your own site, and informing them where they are!

11. Another new trend on the web is not all that inviting - various vendors come up with "revolutionary plug-ins" and undoubtedly, most amateur web designers jump up to spruce up their pages using them. The reality is that most people won't have them installed, and wouldn't care about it anyway. Come to think of it, have you seen plug-ins on any of the most popular sites, including Yahoo.com, Amazon.com or Google.com? It's simply not the best thing to do. Mention must be made here of Macromedia's Shockwave Flash plug-in, which has now made its way onto most computers today, and thus presents no harm in using vector animation on your site.

12. Java is yet another often-misused technology on webpages. Use Java as a utilitarian programming language, not as a graphics front-end for your photos/images. There are various things you can do with Java; that does not mean you should do all of them. Java applets are known to run slower, so users experience a certain sluggishness in performance. And worse still, Java has been known to crash certain browsers. This is not something everyone likes, especially if it is done for the sole purpose of showing a set of images in a slideshow!

    The moral: Use it, but with discretion.

13. Never underestimate the importance of those META tags. They can make all the difference between your users coming to your site and going to your competitor's – just because they couldn't find yours. Search Engines heavily rely upon the Keywords & Description Meta tags to populate their search database. And once again, use discretion in writing these. Including a huge number of keywords for the same page can spell trouble. The description should be a small, meaningful summary of the whole page that makes sense even when seen out-of-context of the webpage itself, say, in a listing of search engine results.

14. And the final point that summarizes all the points so forth: Write for all browsers, all resolutions, and all color-depths. If you show people pages that look best with their own browser and their own resolution, that makes them feel "at home", and you get a better response. Compare this with a website that proclaims "Viewed best with Browser X at a resolution of 1024x768." I'll give you a choice between two options when you see such a page: download the suggested browser (which might well be over 50 Megs), then go get a new monitor that supports the high-resolution, and then adjust your screen setting so you get the perfect picture. Or simply click away to another site. Which do you prefer?

The web waits for no one. And furthermore, the user is king. Try your best to keep the user happy. And to keep all users happy. For, a good website is like a good storefront - it can mean all the difference between a casual surfer and a serious customer.

1. Format your text using CSS.

2. Make the font size big enough to read.

3. Make the text contrast with its background.

4. Give the lines room to breathe.

5. Break text up into chunks.

And finally (not one of the 5 Easy Ways to Improve Legibility but still quite important) check your spelling. Nothing irritates me more on a web page than spelling errors - it simply makes you look like you don't care enough to get it right. Use that ubiquitous spellcheck tool.

Making your website's content more legible is easy. It doesn't take a lot of time, mainly common sense. The payoff will be text that's more readable, customers that stick around long enough to get your message, and improved credibility with your visitors.

Web designers, like any creative person, can suffer from writers block. But because of our work, there are many ways you can learn to deal with the blocks and get unstuck. These six suggestions have worked for me to get new design ideas in the past and will work again.

1. Be prepared for procrastination to try to block you. When I'm working on a new design or article idea, I find that that's when ideas for other projects will come up. For example, I might start thinking of ways to paint my office, about the wool I need to wash, or a possible location for a new kitchen garden. I realize that these are just ways of procrastinating, but they are also things I'd like to do. So, if I'm writing or working on a Web design, I write them down and continue brainstorming my current project. I've found that if I write down the things I want to procrastinate, they don't press as much as they would if I try to simply ignore them.
2. Start in the middle. For some reason, many Web designers feel an intense need to start at the top of their Web page and design down. Yes, ultimately, you'll have to think that way about the HTML or CSS, but when you're working on a design, you should focus on the most important part first - and that's not usually the navigation, branding, or advertising found at the top. When writing content, the same is true, I've found that if I start writing with a title, my articles are usually completely different than what the title says. So I have to write a new title when I'm done anyway.
3. Step away from the computer. I've found that it can get very easy to get hung up on technical issues like HTML or JavaScript when I try to do an initial design on the computer. While I do most of my rough writing drafts on the computer, I do most of my designs on paper first. For one thing, they're easier to erase and scratch out. Plus, since I use scratch paper for most rough drafts, so if I decide I hate an idea, I don't feel bad about throwing it out.
4. Take the time you need. Planning is one step in most projects that is both the most important and the least used. Most people, including Web designers, prefer to jump right in and start building things. If you prefer designing a page, you probably get out Dreamweaver or Photoshop immediately after starting a project. If you prefer developing pages, you probably jump right into the PHP or JavaScript to generate behaviors. But most Web design and development projects end up over budget, over time, or not meeting the requirements - and this is usually because the planning phase of the project was glossed over in favor of action. Take time with your planning and when you think you're done, take a little more time. Planning won't hurt your designs, but lack of planning will.
5. Ask for help. Don't be afraid to ask for help, but be sure to find people who can provide you with constructive criticism. It doesn't help if they are too effusive about how wonderful it is, but someone who can't find anything good is also not a lot of help.
6. If you're really stuck, do something else. The idea is to get your mind off of the problem you're working on. This can allow your subconscious to think about it unobstructed. I can't tell you how many times I've gone to sleep and woken up in the morning with the ideal solution completely formed in my head.