Production Area
New Media
Creating a Website
In this section we look at:
- the fundamental principles of web design and its underlying technology
- how navigation works within web sites
- the importance of integrating text, image and multimedia elements for successful design
- how to consider the demands of your audience when creating a site
- some of the ways in which ‘web 2.0’ technologies are changing the way web design works.
You can click on the images throughout this document to view larger versions.
Before you begin
The starting point for any web page is HTML, the Hypertext Markup Language that describes the structure of a page, which parts are links, which images or paragraphs. HTML is often used as a generic term for different markup languages such as XHTML (Extensible Hypertext Markup Language), and although it is not necessary to build pages from scratch these days, a basic working knowledge can be useful when things go wrong.
HTML uses elements, such as <head> </head> or <title> </title>, to define different parts of the page, and the majority of these are marked out with an opening and closing tab, the latter indicated with a forward slash. There are a very few elements such as <br> (for break) which have no closing element.
HTML elements are also modified by attributes, indicated by an = sign and placed in speech marks, for example <img align="center">. Complex attributes can be build up by separating a series of attributes, such as <span id="mytitle" style="color:red" class="myclass">.
XML, or eXtensible Markup Language, allows users to define their own tags. For example, if a designer wishes to identify part of a page as a location, he or she can use the element <location>London</location>. The importance of this is that information can then be passed between web pages or web applications (programs that perform a function, such as finding a location on a map) when it conforms to the rules, or syntax, for forming XML elements.
XHTML uses the syntax of XML. Unlike HTML, pages designed in XHTML must be correctly formatted or they may not display correctly, but this does mean that it works with a compatible browser. A common problem was that older forms of HTML would often appear very differently depending on what browser a visitor to a site was using.
In the vast majority of cases, and certainly for the project that you will be creating for MED2 practical production, web pages are created using WYSIWYG editors such as NetObjects Fusion or Adobe (formerly Macromedia) Dreamweaver. This means that the complexities of HTML and XHTML elements are handled by the program.
Design principles
When talking about web design, most people will (fairly naturally) concentrate on the look and feel of a page or site, its visual elements. However, an equally — if not more — important aspect of web design is what is called usability. How easily can visitors find what they want?
Some pages will offer extremely hard to use navigation, while others provide clashing colours that make text hard to read. And while the majority of computer users around the world use Internet Explorer as the default browser, this does not mean that everyone does. http://www.webpagesthatsuck.com provides an amusing roundup of some of the worst pages on the web each year.
Navigation is immensely important, and depends on techniques for accessing the site — interface design — as well as how a site looks. For example, users with seeing difficulties will require text links to navigate rather than graphics, because such links can be read out by screen-reading software.
Links are added via HTML with the anchor <a> </a> element and attribute href="url", for example <a href="index.html">home page</a>. Usually, however, you will add links via a button in your web editor. There are two types of link — relative and absolute. The former defines a page in relation to the current one within a site, while the latter, beginning http://, gives a URL for pages outside the site.
Similarly, if navigation links jump around from page to page, visitors will become confused very quickly. What is more, the default style in browsers changes the colours of links usually from blue to purple — but this may make those links difficult to see depending on the colour scheme of your page.
See an example of adding links. You will need a Flash player installed to view this 7mb file.
Also, when thinking of design, you will need to plan a structure for your site. Projects for MED2 tend to be fairly small — a few pages at most — but it is important to consider how they will link together. Typically you will have a home page, the entrance to the site, and from this will be linked pages for such things as a discussion forum, or multimedia theatre if you want to embed video clips.
Activity:
Consider some of the factors you need to take into account before beginning your web design. You need to think about:
- What program you will use to create the site
- The needs of your audience
- How navigation will work across the site
- The structure of your site and how pages will link together
- Content for individual pages
- How your site compares to others on the web
- Research
- Distribution and access
Text and image
While multimedia is increasingly important online, the core of most web sites that you will encounter (and produce) remains its text and image. The composition of each elements on the page is the most important element in producing well-designed pages in terms of their visual appearance.
Typography, the appearance and use of fonts and typefaces, can be very rich and varied in print, but is generally much less so online. Because most web pages rely on fonts installed on the computer of a visitor, there is a danger that using a particularly unusual typeface will result in a page being displayed with the default version — such as Times New Roman — if the ornate one is not present. As this can be disastrous in terms of design (each typeface has different vertical and horizontal dimensions), it is best to restrict your use of typefaces to a few common ones such as Helvetica or Garamond.
Fonts will also be affected by their size, obviously — with larger text being easier to read for those with visual difficulties. In addition, another factor to take into account is whether the font is serif or sans serif, that is whether it has the small flicks associated with a font such as Times, or is smooth at the edges, as with Arial.
It is usually recommended to employ a serif font if you have large portions of text as the small start or finish stroke makes it slightly easier to read. In practice, however, because most pages tend to be composed of blocks of text arranged more in the style of magazine pages to convey shorter chunks of information, many designers will employ a sans serif font throughout.
When using images, although there are a number of formats available most of the images you insert into your pages will be JPEGs (Joint Photographic Experts Group) and a few GIFs (Graphic Interchange Format). The important thing to remember about JPEGs is that they can compress potentially millions of colours very effectively to create small files — very useful for displaying photographs. However, the process by which this compression takes place is referred to as ‘lossy’, that is information is discarded.
In a complex photograph with lots of colours, you are unlikely to notice this — unless you compress the file to make it too small. However, with large areas of a single shade the effect can be blurred and ugly. This is where GIFs come in: GIFs can only display 256 colours, but their compression is ‘lossless’, so broad areas of colour remain consistent, which is particularly useful for graphics.
There is another format, the Portable Networks Graphic (PNG) which combines some of the best features of both GIFs and JPEGs, but this tends not to be used so much to ensure backwards compatibility with web sites.
The XHTML element for an image is <img> </img> (the older HTML element did not have a closing tag), and it can be modified in a variety of ways. As with links, however, in practice you will add graphics to a page via the insert image button. In addition, this will offer you options to align text against the image to the left or right, as well as insert vertical and/or horizontal space around the image so that text does not press right up against it.
See an example of adding a picture. You will need a Flash player installed to view this 6mb file.
Finally, when working with images, it is necessary to prepare them for your web site. When using a digital camera, for example, modern multi-megabyte images are far too large for display on the screen and will need to be reduced in size using a graphics program such as Photoshop. Likewise, if you used scanned images, these are likely to be a much larger dpi (dots per inch) than is necessary, usually 150–300. Images for the screen only need to be 72 dpi.
Colour and styles
While images are important to a well-designed page, often the most important visual effect comes from choosing appropriate colours. The old palette of 216 ‘web-safe’ colours (which could be safely displayed on old graphics cards for both PCs and Macs capable of only showing 256 colours) is far too restrictive and can be safely ignored these days.
That does not mean it is appropriate to dash any shade from your palette simply because you can. On screen (as opposed to print), the primary colours are red, blue and green, and all other hues are created from combinations of these. The secondary colours are created by mixing two of the primary shades, that is blue and red to create violet, red and yellow to create orange, and yellow and blue to create green. When these are arranged on a colour wheel, those shades on the opposite side of the wheel are said to be complementary and work well together, for example blue and orange.
Likewise, if you draw an isosceles triangle in a colour wheel, with two points just one colour zone apart (for example, red and orange), with the long point at the opposite side of the wheel (such as blue-green), this produces what are known as harmonising colours. If these shades were mixed together, they would produce grey, but separated like this they form a pleasant combination. A good introduction to colour theory can be found at http://worqx.com/color/.
See an example of changing colour. You will need a Flash player installed to view this 7mb file.
Modern web design works by separating out the content of a page — such as the text and images — from its visual presentation, including typography, position and colour. Information about the latter is stored in what is known as a Cascading Style Sheet (CSS). When HTML was first used, all information (the colour of a heading, for example) was stored in one file: however, this meant that if you wanted to change the appearance of an entire site you would have to re-edit it page by page.
Using CSS, by contrast, data about appearance can be stored in a separate file which is then linked to each page as you create them. If you want to completely transform how your site looks, simply modifying one file will roll that change across every page linked to it.
Activity:
Before laying out your pages, plan some of the design factors you will need to take into consideration.
- Font size and typeface, whether serif or sans serif.
- Avoid ornate fonts that are unlikely to be installed on an assessor's computer.
- What images do you plan to use, and which format.
- How you will make images web-ready.
- A colour scheme, ideally one using complementary or harmonising colours.
- Whether you are going to use Cascading Style Sheets in your design to control such things as the colour of headings or placing of paragraphs.
Layout and multimedia
When it comes to arranging the various elements on your page, CSS can handle some of the common features (such as indenting paragraphs) but there will be times when you want to use tables or layers to lay out your page in a format similar to a magazine.
While tables used to be commonly employed to break up such things as columns of text, this is now bad form and you should use CSS to define such elements. However, when information has to be tabulated, trying to do this in any other way than using the insert table button in your web editor is needlessly complicated. Here you will be able to define the number of columns and rows in any table, as well as cell spacing (the distance between cells) and cell padding (the space between the walls of a cell and its content).
See an example of adding a table. You will need a Flash player installed to view this 10mb file.
Layers can be tricky to display and so used sparingly. However, they can also be very helpful when you want to place a single graphic or multimedia component in an unusual position. All web editors will provide an insert layer button that allows you to draw a layer for holding content anywhere on screen.
If you want to add multimedia to your page, there are a couple of factors to bear in mind. Fortunately, submission on CD means that you do not have to worry too much about bandwidth when transferring your file, but it is still good practice to optimise such things as audio and video using an appropriate file format.
In practice, this means MP3 for audio podcasts, and QuickTime, MPEG, Windows Media Video (not AVI) or Flash for video. While there are audio alternatives, you are safest with MP3 on the widest variety of computers. For video, each format has its advantages — but to be on the safe side in terms of compatibility, MPEG is probably the most useful.
As with images, there will be an embed video/audio button in your web editor, which will usually offer some additional options, such as the ability to start playing the file as soon as it loads.
Interactivity and Web 2.0
Because the MED2 project is submitted via CD, many of the interactive features that are taken for granted online are not possible. Such things as forums, blogs and search engines require a web server to process information posted to a site.
In recent years, a range of technologies have started to appear designed to simplify the process of adding content to web sites. Branded together under the rather wide label of Web 2.0, this included applications such as blogs, wikis and social networking sites.
An important point about these new technologies is that as well as making it easier to upload content, such as video to YouTube, or images to Flickr, they are also capable of communicating with each other much more easily than in the past. Making use of what are known as APIs (Application Programming Interfaces), something added to one type of site can be shared relatively effortlessly with another as a plug-in.
More than just a series of applications, however, Web 2.0 is also an attitude to information technologies and web design. Web 2.0 sites are in ‘perpetual beta’, that is they never arrive at a final, finished state. Instead, they rely on trusting users to submit and interact online in a way that breaks down the traditional barriers between elite producers and a passive audience.
Although the MED2 project on CD will not be able to run complex interactive elements, it is still possible to create these features online and then add links to them from your own web site. For example, if you wish to run a blog on your work or another aspect of the course, sign up to www.blogger.com and then create a link to your site. Similarly, an easy way to create a discussion forum is to create a message board at www.quicktopic.com, the URL of which can be copied and added to your final pages.
