| I wrote this to try and answer some frequent questions I receive on the subject. It is not a definitive guide to web design but is aimed more at giving general outlines for those who are about to start a web site, and don't want to learn the hard way. Because of the speed of changes in this area I am very well aware that it is out of date before the digital ink dries. I am very open to any comments on errors, omissions, and suggestions for making this advice better. HTML is written frequently here, so you may as well know now what it stands for- HyperText Markup Language. HyperText means that the document can contain "links" to other documents. These links can be local or global and that is why the Internet is often called the "Web" working method
Develop a working method that suits the medium. Oddly enough this means starting on paper. Decide what the contents of your site will be. Do not rush this, all too many sites look pretty but have little or no content. This ultimately ends up being very boring and rather useless. Words can be just as important as images (words were what the Internet was originally designed to transmit) and sometimes all a viewer can see, see below texts and writing.
Work out, hierarchy and navigation of major elements on paper. Let this become your 'map', so that when you are in the midst of the technical detail, the big picture does not get lost.
Hierarchy
Decide which are the most important parts of your site and text and order them accordingly.
Navigation
Be consistent with navigation right from the start. If you have links to other parts of your site at the beginning- have them lower down too (unless you have a reason not to).
Theme
Many sites have a theme that runs through them. The idea to help the visitor understand the sites structure by analogy and to entertain. But don't over do it, help first, entertain next. | | imagination
To be genuinely creative in a totally new medium and to give a site a "feel" in a dramatic sense, you need some imagination. There is a great scope to find creative solutions for making themost of the limitations the Internet lays down. For hundreds of years sculptors have urged their pupils to work with their materials and not against them. The same can be said about web design, by all means push the boundaries, but remember download times and technology lag.
before you start, ask the right questions - What are the main aims of the site?
- Do want to sell something, inform, entertain, be a resource?
- Who is the main target audience?
- If you can answer the above, then you can design to their taste. - What is the level of technology of the target audience?
This is important because if you get it wrong they may not even bother to wait to see how great your site is. What speed of modem will our audience be using? The standard speed for modems is 56.k, this reduces download times (given a very good line etc.). Not long ago 56k was considered fast, ADSL (broadband) outstrips this by huge chunks but not everyone has ADSL,plus even ADSL can slow down as more people go online at peek times. A 120k page will take about 30 seconds to download on 56k modem with a good line! On broadband just a couple. As you can see the same page could be delivered at wildly different speeds. So keep your data levels low- below120k if you can.
- What size monitors will our audience have?
- Will the majority be using 832 x 624 screen monitors (old 16/17 inch monitors)? Or will they be using the currently popular 1024 x768 pixel multi resolution screens or LCD screens? The ability of web pages to scroll is an important one, the norm is to scroll down (many mice have a roll button specifically to do this), so if you design a site that scrolls sideways -make sure you have a good reason for doing it (I know, I have really pushed this on this site). If you design a site with a large to medium screen in mind, it can be a frustrating and alienating experience on a small screen. Multi sync monitors add to the confusion because of their ability to display at different resolutions and therefore sizes. If there is a great deal of information that an end user will print out, it is a thoughtful touch to keep your site A4 wide, i.e. only about 600 pixels wide. | | - Which browsers will our audience use?
The more technologically advanced might be using new versions of browsers (Safari, Firefox etc) with all of their attendant advantages. But it is worth remembering what is new changes very rapidly. For instance in the mid '90s Netscape (then Netscape Navigator) was used by 90% of people and was technically far superior to Explora. Currently (mid 2006) it is only a minor player and not on the OSX Mac at all. Also remember a great many budget PCs are sold with the technically inferior browsers pre installed, and their uses may not know how to upgrade. It is vital to check what your web site is looks like on new and some older versions of browsers on both the Mac and PC.
- Which type of computer will our audience use?
The majority, almost certainly, will be using PCs. In general type appears 30% larger on PCs compared to the Mac (see type notes across). Unless they are using 92 dpi screens in which case it evens out. So make your site design is flexible and leave room for the text to "reflow".
be organised and name it right
Devote one folder (or directory if you are using a PC) to your web site. Avoid dotting elements of your site, around your computer. You will need to have all of these bits collected in one place before you upload and the relative URLs adjusted if you have moved them from one location to another.
- Each page and picture will have a specific “address” (or “directory” in PC speak) leading to it, so that a browser can 'find' it. Try to make sure the 'address' is simple and logical for you to use. It is perfectly okay to have nested folders, but don't overdo it otherwise your “addresses” will become very long. You may find it useful to have one folder dedicated to graphics which are reused, thus avoiding duplication.
- Check with your server where the first page of your site needs to be stored as moving it later is a real pain. Generally, it must be loose in your site folder (or top of the directory if you are using a PC). For a beginner it might be wise to have either have all your HTML pages loose in one folder and all the images in a folder called resources or have one folder for each page, plus its images (with the exception of the first page see above).
- How you name the individual elements of your site is critical. Check with your server what the first page of your site should be named. They normally recommend welcome.HTML or index.HTML, so that their computer can find the top most page of your site. When naming HTML files or pictures it is a good policy to ALWAYS use lowercase letters and NEVER include word spaces. | | This is because of the idiosyncrasies of web servers and the net itself. You can safely substitute an underline_for a space, which oddly enough is one of the very few uppercase characters you can use safety. - Use the right suffix
HTML files must have .HTML at the end of them. GIFs must have .gif and JPEGs must have .jpg. This is so that browsers can correctly identify and display files. Keep your file names short and logical. 8 characters or less not including the file name suffix is a good idea (but not essential on most modern servers).
text/writing Text is the back bone of web design.
The type of manner writing matters too. What kind of "voice" does text on the site have? Consistent writing is important. If a site is written in the first person, it should continue that way unless you have a good reason to change. If the phrase "main menu" is used in a link do not then subsequently call it the "welcome page".
- Be aware of "nettyquet". For instance constantly labelling "click here to..." can be very boring and totally unnecessary to anyone who has spent a little time on the web.
- Title all graphics/images for those who cannot see them (these labels show up during download on some browsers) and can help the user decide what they want to do next.
- Keep paragraphs short. This helps understanding, encourages what is written to be read, and can also help avoid "text over flow". Watch line lengths, I have pushed them as far they can reasonably go here. Different browsers and platforms can really change the space your type takes. This effect can drastically change the layout of your design. Give your text room to “reflow”.
- The use of square brackets on links is a thoughtful touch for those users with sound readers as it helps them navigate. navigation/hierarchy
A site designer cannot assume that a user will start looking at their site from the first page. All search engines use electronic "spiders" to map and list the contents of sites. Consequently viewers may well “drop in” to the middle of a site. Make sure they can find their way around | | with ease. Be consistent with links. We all know how frustrating it can be to be following inconsistent road signs. Poor navigation design in web sites can make you feel that way too. Visual or metaphorical analogy is often used to help guide through a site. Avoid overly chain like site designs (where there is only one route to each page). This is boring for the viewer and defeats the point of hyper links. Conversely don't overdo links. Having every other word ahyper link can be very distracting and confusing and in navigation stick to 9 or less options. Above all never confuse, so often I have heard students say, “the visitor will be confused and that will make them curious”- no they will just go to another site with their next click.
interaction
A huge area that there simply is not enough space here, other than to skim. Try to engage the viewer from the outset. Many game like actions are possible with hyper links, rollovers and Flash. Get to know the different ways you can make links and interactions. There are many simple Java scripts that help a visitor feel at home and welcome. Allow a visitor to react naturally. For instance, do not put repetitive eye catching movement on a page that has a great deal of text that is meant to be read. In a similar vein, change the pace during the site so that it does not become too predictable. try to make you visitor “feel” that they are in control (even though you have guided them. When using forms, make sure they are not visually oppressive and complicated. Break the form down so that the person using it feels like they are making progress. It can also be a very nice touch to congratulate your visitor on finishing their form after they have sent it.
type
This is one of the webs thorny issues. Because of the way type is displayed or more precisely because of the lack of control the designer has over how type is displayed, 300 years of accumulated typographic knowledge almost go straight out of the window. The advent of series 4 browsers being able to use CSS (cascading style sheets) means some control of size leading and letter spacing is possible. even so type can appear 30% larger on PCs compared to the Mac if you are not careful. Flash nearly offers a solution, but only on large display scale type, because at text sizes type is always anti aliased and looks mushy. | | Once again there is not enough room here to go into detail but here are some general points. Broadly speaking, there are two types of type on the net. HTML text (which is used for large amounts of text like this article) and type that has been made into a graphic (like the banner at the far left of this page). The former takes next to no data space and is editable, the latter can takes up much more data and is to all intents and purposes is a non editable picture (either a GIF or an SWF). HTML text
For HTML text to be reproduced, it must already be installed on the computer rather than downloaded. There are a set of typefaces that are loaded when most browsers are installed and cosequently are availabel for use on most computors. For this reason they are thought of as “safe” fonts to use in HTML based designs. IE if you specify Times it will be viewed as Times. There are two main groups serif and sans serif, (plus a few odd faces like dingbats). Lets start with serif. Times or Times New Roman, are very common. But do have a look at Georgia (looks much better on screen), Palatino and lastlyCourier (a fixed width font that mimics a typewriter). Sans serif: Verdana (sets well particularly in small sizes and this text is set in it),Trebuchet MS (good on screen) Arial and Helvetica (which has erratic screen spacing).
CSS is used to specify type size and leading in points (or preferably in pixels, as in the superb web design program Freeway). But if you are not using CSS HTML text size is relative. Without really getting into the nitty gritty, there is a “base font size” numbered from 1 to 7, the default usually is “3”, and “1” being small and “7” large. Remember all these sizes will appear very differently on different makes of computer. When specifying fonts it is a very good idea to specify font sets. This is so that if a type face is not available the next one in the list might be. for instance the font set used here is Verdana, Arial, Helvetica, sans-serif this means that if Verdana is not available then use Arial and so on. Another sanserif font set worth looking at is Trebuchet MS, Arial, Helvetica, sans-serif. A n interesting serif set is Georgia, Palatino, Times, serif. Georgia like Trebuchet and Verdana was cut specifically to look good on screen. | | One more point about fonts. Italic can look very ropey on screen (especailly if the browser has “italisised” a Roman font because it does not have the italic font you have specified. This is because the browser has created italic out of Roman. It is generally considered safer to make emphasis with bold or a colour instead. If you do use a colour this can be confused witha link-so be careful. image
Compressing images and file formats. To keep download times short you must keep the size of your images small both in terms of storage size (bytes, and megabytes) and to a certain extent dimensions (with GIFs and JPEGs they are proportionally related). To do this effectively new file formats were invented that can "compress" images into very small spaces.
There are two main static types, GIFs and JPEGs (more about SWFs and Flash later) plus at the time of writing more PNGs are being used too. GIFs
GIFs are very good for compressing “flat” (no continuous changing tone) coloured images (like type for titles). The level of compression (and image quality) can also be adjusted by altering the limited amount of colours that make up a GIF from 1 to 256. Plus you can specify that they have a transparent background. You can create very low tech but effective GIF annimations. These have the advantage that they can be viewed in any browser with no plug-in needed. JPEGs
JPEGs are best used for compressing continuous tone images, like photographs. In fact the "softer" the image the more it will compress. A useful trick here is to blur the background of an image to make it compress more without compromising the quality of your image in the foreground. As with GIFs, the level of compression can be adjusted, but with JPEGs mainly in terms of quality the poorer the quality the more artefacts appear. Don't use JPEGS for flat images as they will look a bit blotchy and their file size will be larger athat a GIF. Never save and then resave JPEGs, because of their compression system they will degrade every time. PNGs
PNGs act much the same as JPEGS, but you can add transparency. a current problem is that many older browsers cannot “see” them. | | Asses quality of the image with these formats by experimenting with the level of compression- save a copy and look at it (this can be done on the fly with a slider bar in Freeway). When the image is unacceptable in terms of quality, stop. If it is still too large in terms of data, think about reducing its dimensions and or the amount of colours. One last important golden rule, before you embark on compressing your images. ALWAYS keep an uncompressed copy of your image and work from that.
colours
If you are using an an Apple Mac the chances are your monitor will be able to produce at least thousands of colours (because there are a great many old ones out there), more likely though is millions. But on the ’net, the statistical majority use PCs whose ability to reproduce colours is generally smaller. The gamut (range) of colours that a PC can reproduce is smaller than on a Mac. if you get a chance look at a dark blue on a Mac and you will see it as black on a PC. As a result only 256 colours are demmed to be "websafe" meaning they shopuld look the same on all platforms, but to add a little extra twist, 40 of these are reserved for the system on older Windows systems. This leaves only 216 useable "safe" colours. These are known as “web safe colours” or “net safe pallet”.
| |
| | |
