Click to skip over navigation

Web Design

   

resources page



main menus


help pages


Valid XHTML 1.0!

 

This page acts as an index for a wide range of resources, relevant both to the Web Design course specifically, and web design more generally. These resources have been grouped into the following categories:

You are welcome to suggest other sites that might be useful by e-mailing me on andrew [dot] whitworth [at] manchester [dot] ac [dot] uk but do note I will not add links without having first checked them out myself.

reference pages

back to the top

weekly links

Note that this site is still under review. Links have only been provided to completed lectures. The rest will appear here when they are ready.

Week 1: what is a web site?

virtual lecture

self-test

Week 2: styles and text formatting

virtual lecture

self-test

Week 3: links

virtual lecture

self-test

Week 4: tables and page layout

virtual lecture

self-test

Week 5: images

virtual lecture

self-test

Week 6: accessibilty, usability and search engines

virtual lecture

self-test

Week 7: image maps and multiparts

virtual lecture

no self-test

Week 8: image rollovers and other JavaScript events

virtual lecture

no self-test

Week 9: forms

virtual lecture

no self-test

Week 10: advanced navigation techniques

virtual lecture

no self-test

back to the top

Sample web sites

These have been divided into two categories: those which I've included because of their content and those which are here because of their technical quality. Do note that in both cases there are those which are of poor quality as well as good quality!

Quite a few of these sites have been brought to my attention over the years by students; I haven't credited individuals, but thanks to all who've contributed.

Content:

History and Development

  • As We May Think: full text of Vannevar Bush's seminal paper.
  • Computer Lib/Dream Machines: Ted Nelson's important work isn't on line (because Microsoft now own the copyright) but this is a fairly useful resource page.
  • WWW Proposal: the original WWW proposal by Tim Berners-Lee and Robert Cailliau.

Different types of web site

  • Galleries: http://www.spillway.com/ is a pure gallery (of "found" photographs, and people's comments on them), as there's no impulse or encouragement to do anything except wander fairly randomly through this site. Friends Reunited is a gallery of names - though there's clearer categorisation here. Luciano Floridi's "Philosophy and Computing" page is a gallery of hyperlinks, but while it's certainly comprehensive, it's an example of how you can go a bit too far, until the sheer size of it becomes overwhelming (like going to the Prado without a guidebook).
  • Catalogues: Remember that there's now less of a sense of browsing, and more of targetting the reader onto a specific object, place, product etc. Amazon is probably the best known commercial web catalogue. But also note that any "database" site is essentially a catalogue, such as http://stats.football365.com or the Internet Movie Database.
  • Brochure/Reference: These sites explore a single product, company, issue etc. rather than trying to offer a range. There are literally millions of this site type, with the following being fairly representative: http://www.clockmakers.co.uk is a small business, http://www.thehempire.org a political campaign site, http://www.bruce-campbell.com/ a (minor!) "celebrity" site.
  • Narratives: as stated in the course booklet, pure narratives are rather a waste of the Web's potential, although a desirable browsing sequence is implied on many sites (including reference sites, which introduce a subject; this site is an obvious example). I will only link to one such site therefore; an online version of the complete text of Jane Eyre (one of many classic - and out-of-copyright - texts on that web site). The "contents page" gives you some idea of what I mean! Somehow I can't help thinking that all those people who confidently predict the "death of the book" haven't actually tried to read a book in this manner. But that's just my personal opinion, so have a look and decide for yourself.
  • Integrals: some sites are now being developed which really use hypertext to do things you couldn't do offline. An example is http://www.cmax.com via which you can design your own sports shoe. (Opening this site disables the Back button so it will open in the second browser window.) http://www.zhongwen.com is an extraordinary Chinese-language resource where every character in the "online readings" is a hypertext link to its own definition. World of Awe is an "online artwork" which uses hypertext, e-mail and various other things to give you a "multimedia life experience" if you like that kind of thing... I find it rather inaccessible myself, but it's a representative example of how this new media form is getting used experimentally.

Language

  • Many sites have alternative versions in different languages, but http://www.sk.com.br/sk-vygot.html is one of the very few I've seen which has two on screen simultaneously (in this case English and Portuguese) making it a useful learning tool in its own right.

Legalities

  • Copyright: a good, straightforward summary of Web copyright issues.

General Web issues

Technical quality:

Clarity

  • It might not excite the eye or quicken the pulse, but there are few clearer, no-bullsh*t business sites around than http://www.hamrick.com. The fact this site is so easy to use gives one confidence that the product being advertised is similarly straightforward. Surely that's the definition of good advertising, whether web based or not - giving you confidence in a product. (Note also the use of the author's photo, to give the impression of a personal service, rather than some faceless corporation or machine.)

Layout

  • Though I don't necessarily advocate this, http://www.showstudio.com is one of the very few sites designed in a "frieze" format - e.g. with horizontal but not vertical scrolling.

Flash

^*?%@$!!

  • From the use of icons without accompanying text, through the arbitrary use of frames, unnecessarily large images (and text-as-images), "mystery meat", gimmicks and heading on to just about everything else, http://www.plant-biotech.net is a textbook example of how not to do it. If you can work out for yourself why this is such an awful site, you're a long way to becoming a better designer.

Back to the top

Design Tools

Browsers

  • Opera 7: in my opinion the best web browser of all, and it's free, as long as you don't mind putting up with banner advertising.
  • Lynx: the standard text-only browser.
  • If anyone is interested in testing their pages on JAWS, which is a screenreader (e.g., it renders whatever is on the screen through a speech synthesiser, thus reading your pages aloud) I have details of the PCs at Leeds Uni on which this software is installed: contact me directly.

Other tools

  • Alentum Software's HTML Search and Replace; a gobsmackingly useful little tool to enact changes on several web pages simultaneously - essential for anyone designing sites of more than about 10 pages in size.
  • Browsermaster, a site which mimics a wide range of screen resolutions, browser types and versions, and so on. Do bear in mind though that useful though this is, it's inferior to actually testing your page on the real platforms.

Buttons and icons

Standards

Accessibility

Back to the top

Publication tools

The following links are examples of web hosts and domain name providers. They are given for information only - no endorsement of their services is implied. (With the exception of Poptel.) Do not hand over money to any organisation offering such services unless you are very sure what it is you are getting for that money.

Web hosts

  • The granddad (or grandma) of them all is GeoCities - it's easy to use, and free. The big disadvantage is horrible pop-up adverts which can utterly deface your page.
  • Poptel: a co-operative, so you know your money's not going to line the pockets of some faceless fat cat. Offers ISP services, web hosting, and many other services. I have been a satisfied customer of theirs for some years now.

Domain names

FTP programs

  • Seagull FTP; not quoted because the company has a cool name (and no Brighton & Hove Albion fan will tell you otherwise), but because it's one of the few truly good and truly free FTP programs out there.
  • WsFTP, which is also quite good, and available from ISS. It's on the university desktop anyway, but this link could help you acquire it for your home PC.

Back to the top



Material on this site is © Drew Whitworth, 2005 Permission will usually be given to reproduce material from this site for non-commercial purposes, if credit is given. For enquiries, e-mail Drew at andrew [dot] whitworth [at] manchester [dot] ac [dot] uk.