Posts tagged Basics

The following are the key aspects which would help you practically craft a web design that would deliver results in terms of your audience visibility

Part 1: The Unavoidables

Definition of a good Web site: A site that delivers quality and eshaustive information for its target audience and does so with elegance and style.

The rule of “Keep it Simple, Sober” is tried and tested, but it’s not a be-all end-all of Web design. Gamers, for example, expect a busy page with a lot of sophisticated graphics, flash effects, and the like. The usual understated page with the off-white background and the typical menu of links sedately trundling down the left side of the display leaves this audience cold; obviously the people who designed this Website aren’t on their wavelength — these guys like plenty of whizz-bang in the pages they visit.

On the other hand, when a middle aged lady goes on the Web to hunt down some nice crockery for kitchen, she isn’t going to want jazzy Flash effects, purple-on-black color styles, and a raft of animated graphics doing gymnastics in front of her rheumy old eyes. She’s been known to take a stick to the monitor to make it all stop. Corporate users expect something that might not necessarily be “buttoned-down,” but certainly something solid and professional that reflects positively on their business and compares well with the competition. Personal home pages want an emphasis on the personal — the site should reflect the interests and personality of the owner.

Attract Your Audience – Visually

The key here is to know who is going to be using your page, and to design with their needs and desires in mind. The KISS rule generally holds good in most cases. If you don’t need something — a frame, an animated graphic, a Flash animation, a fancy DHTML effect, don’t use it. After all you don’t want an uninteresting page full of unbroken blocks of text with a dull color scheme and dreary graphics won’t attract anyone’s attention. Use everything moderately. Keep your audience in mind and design your site accordingly.

Every image that moves or blinks draws your visitors’ attention to itself. Be sure that it doesn’t distract them from your message. Whatever your site’s reason for being, you want to portray an image that conveys what your site is all about as well as the feelings you want to implant in your audience. It’s no coincidence that most financial sites use design and graphical tactics to give a feeling of safety and stability. No matter what the stock market does, this site won’t have its feathers ruffled. In contrast, the ultra-hyper site design of the Nickelodeon and Cartoon Network sites appeal to their sugared-up audience of pre-teens and teenagers; you can’t overstimulate that crowd. A site selling luxurious designer ware isn’t going to use the same design scheme as a site selling automobile spares! One will go for a colourful shades in the design, while the other will use a rough-and tough looking design scheme.

A good Web designer will be able to design all four sites, and others as well. Don’t forget, if you’re designing a Website for a corporation or business, that they very likely have trademarks, logos, color themes, and other elements that will need to be included in your design scheme. Colour speaks volumes about your company even before the surfer reads your content of the web site.

Appealing to Multiple Audiences

If you’re trying to design a page that will appeal to both the middle aged ones and their hyperactive, TV& Gamestation addicted grandsons and granddaughters, then you’re going to have to make some compromises that could possibly alienate both audiences. You may want to consider refining your site to appeal to a narrower audience, or you may even choose to mount separate pages with different design approach for different audiences. In this case, you might do well to produce an introductory, or “doorway,” page with links to the “whizz-bang” and the “sedate” pages — the content might essentially be the same, but the design style would be dramatically different.

Connections Options

And don’t forget what your audience uses to access your site. Not everyone has a broadband or T1 connection; most of the world still limps along with slow dial-up connections, or must flounder around the Net through a maze of network connections. These folks appreciate your limiting your usage of big, slow-loading graphics, or at the least, providing thumbnails that automatically load and allow them to click for a bigger (and slower-loading) display. Remember, .JPG graphics are generally bigger than either .GIFs or .PNGs (Flash animations, surprisingly enough, load fairly quickly considering their complexity, but they can slow down a page, particularly one accessed over a dial-up connection). Complex table structures can take a while to load, too, especially if they’re loaded with graphics. Slow servers cause slow downloads; if your provider can’t get your site up to speed, switch to someone who can.

Design for the World Wide Web is the smart balancing act between the graphic “wow” and the real-time “now.”

“Elegance” is a favorite term to describe good, clean Web design, but what it actually means is up to the interpretation of the designer and the site user. It actuallu should mean using a decent design, with well-chosen colors and graphical choices that don’t stress the eye, but instead induce the visitor to relax and enjoy the content. It’s the difference between being wooed over a candlelight dinner and being juggled in the overloaded elevator!

What type of HTML Should You Choose?

Every Web page conforms to a version of HTML (or XHTML, or even XML, though we’re not going into those here), and is determined by the DOCTYPE (document type) code. The line:

at the top of your page (above the initial tag) covers your bases in most cases. It supports many of the elements of the latest version of HTML, 4.01 Strict, supports style sheets for the most part, but also supports most deprecated or no longer current HTML elements, frames, link targets, and other attributes not allowed in by-the book HTML 4.01. This document type also keeps older browsers such as Netscape 4.x in the game. If you’re designing to the latest HTML standards and/or using sophisticated style sheets, then this doctype:

“http://www.w3.org/TR/html4/strict.dtd”>

should be used, but be aware that a lot of older browsers won’t display your page properly. Neither can you use frames unless you use the “frameset” version of this doctype. Note, too, that the “transitional” DOCTYPE I cite doesn’t include the URL of a DTD, or document type declaration. This is because using URLs in a DOCTYPE element sends some browsers, including IE into Strict mode, defeating the purpose of the “transitional” DOCTYPE.

Of course, you could just slide bare-cheeked on the ice and use no doctype in your pages at all (just use the tag), but that’s not a good solution. That leaves the individual’s browser to choose how to display the page, and while most browsers will cope just fine with the situation, some will gag. Besides, you need to get into the habit of using a DOCTYPE element. If you don’t know a DOCTYPE from a typewriter, use the “transitional” doctype at the beginning of this section. If you know about the various doctypes, or if you’re coding in XHTML, then make your own choice. The decision to use the “transitional” doctype is safe and conservative, but it’s certainly not an up-to-date choice. If you want to ensure that your Web page is ready for modern browsing and will be compliant with current and upcoming Web standards, you’ll need to learn about CSS (Cascading Style Sheets), HTML 4.01, and XHTML.

Note: You can visit the W3C Validator to check your document for compliance with W3C standards, or use Dave Raggett’s acclaimed HTML Tidy program, now an open-source project.

Browser Compatibility

During the initial days when the web was still a tabu among the users the novice Web developers designed the pages with Netscape for Windows in mind; as that was by far the most popular browser in use, designing the site for Netscape/PC users was “good enough” to satisfy the majority of users, and never mind the rest. Nowadays the same lot of designers make their pages for Windows and Internet Explorer, for the same reasons. This is where they lack in approach.

Millions of Windows users still employ Netscape (or the open-source Mozilla). Many others use Opera. Some AOL users are still trundling along with their out-of-date AOL browsers, and some hard-core folks still swear by Lynx, the text-only browser (there’s also the surprisingly large contingent of users who keep graphics switched off and read only text). Then, there’s WebTV to be reckoned with. And there are differences between the Mac browsers and the Windows browsers of the same name, not to mention the Mac browsers Cyberdog, OmniWeb, Chimera, iCab, and others. There are the browsers for Linux such as Konqueror, Opera for Linux, Mozilla for Linux, and others. According to the Browser Archive at Evolt, there are well over 100 browsers out there being used by someone and many of them are obsolete now. Why should the Web designer care? Because your page won’t display the same from one browser to the next. The more plugged-in designer uses one method or another, either client-side or server-side, to detect what browser his/her visitor is using, and “tailors” the code they send to that particular browser. But if you don’t want or can’t do something so slick, what can you do to meet the needs of your various visitors with their options of browsers?

Basically, the best thing to do is to be aware of the HTML tags and other features and protocols that one browser will support and others won’t, and avoid them whenever possible: the infamous “marquee” and “blink” tags come to mind, as do iFrames, layers, JavaScript, style sheets, plug-ins, DHTML, and others. Some of these, such as “blink” tags and layers, are long out-of-date; others such as DHTML and JavaScript are quite current. If you do use something that is browser-specific, choose a function that isn’t critical to your visitors’ ability to view your site: an example is the neat color schemes for the horizontal and vertical scrollbars that IE provides for. Netscape users will just get the plain-Jane grey bars, but it doesn’t hurt them to not have the colored scrollbars — it doesn’t affect the way your site presents its message and handles its content.

Page Features compatibility Across Browsers?

There are plenty of page features that will cause problems for one browser or another. Forms come quickly to mind, as do text size and display size. The way you code a link can be a problem: for example, the following link will work in most versions of IE, because the browser will process the code, but most versions of Netscape will report it as a broken link:

Go Here

Why? Because of the white space between “go” and “here.” IE will deal with it, but Netscape won’t. If you want it to work in Netscape or anything else, you have to write it as such:

Go Here

If it’s your file, go one better by renaming the file GOHERE.HTML and avoiding the whole issue.

Another example is the site that looks good in IE, Netscape/Mozilla, and even Konqueror, except that the fonts render badly in the latter. Konqueror users should be able to fix the problem on their end easily enough by clicking “Zoom In” on their browser. Your response can be to rework your page to look as good in Konqueror as in the Windows/Mac browsers, or you can let the Konqueror users handle it themselves. If you’re working on a broad-based audience of mostly Mac and Windows users, your best bet might be to let well enough alone and let the Konqueror users handle it for themselves. If you have a large component of Linux users, you might want to fix the problem so that Konqueror users don’t have to deal with the issue. It’s your call, and your audience.

As Compatible as Possible

Browser incompatibility is a huge issue, and one that’s being grappled with at all levels of the Internet. Meanwhile, you can cope by becoming aware of the plethora of HTML tags that work in one browser but don’t work in another. You can decide whether or not to use extensions, plug-ins such as ActiveX, JavaScript, and even style sheets, which don’t work well in older browsers (and can be iffy in some current browsers) but are essential in modern HTML coding. You can decide whether or not to use more up-to-date graphics such as .PNGs, which will one day become a Web standard but for now don’t work in older browsers.

Quick and dirty fix: make sure your page looks good in Internet Explorer, Netscape 4.x, Netscape 6/Mozilla, and Opera — that means downloading these browsers to your machine and testing your site in them (find the older Netscape browsers available for download at the Netscape Archive). Use features such as style sheets, JavaScript, and DHTML sparingly; if you use these features for critical elements of your page such as a navigational scheme, provide your less up-to-date visitors with a more technologically conservative alternative. Don’t use browser-specific code and expect your visitors without that particular browser to just “get over it,” and don’t skirt the issue with a craven “Works best in XXX browser” label. Try to address the needs of every member of your audience, and be aware that you can’t create a site that works wonders for everyone everywhere!