Transcript Designing a Web Page - University of Oxford

Creating a Web Page
Chris Holland
GTS 5th Week MT 05
Introduction
Why have a website?
What should it be about?
How does it work?
What tools can you use
Design do’s and don’ts
Uploading, Reviewing and Maintenance
Q&A
Why have a website?
To introduce ideas and convey information to a
global audience.
Everybody else has one and it only takes a morning.
How does it work?

Prepare any graphics or photos you need (1 hour)

Write the web pages in an HTML editor (1-2 hours)

Upload the pages to your personal webspace using
an FTP client (10 mins)

Tell me the web address (1 email)
Total time for a website approximately 1 morning.
What should it be about?
Who is you target audience?
Academics
Media
Students
General Public
Why are they visiting your site?
Contact details, publications, description of research, reading lists,
pictures.
What tools can you use
There are hundreds of programs out there to help you design a website.
They fall into two categories:

Code Based: directly writing the HTML code line by line.
What tools can you use
Graphic based: Where what-you-see-is-what-you-get
Dreamweaver v8 www.macromedia.com
What tools can you use
Examples of programs:
Code Based: Notepad, Firefox, HotDog,
Graphic Based: Word, Dreamweaver, FrontPage (MS office)
If you can write a PowerPoint presentation, you can write
a website in the same time.
Note: always call your homepage index.html
Design do’s and don’ts
“Web users spend most of their time on other
sites, so that is where they form their expectations for
how the Web works”
Jacobs Law 1999 www.alertbox.com
Design do’s and don’ts
The most important thing is to make the information on your website
easy to find and easy to understand.
Constantly think about why your users are visiting this site and what
they want from it.
Do some research, look at other academic websites and see what
they have done (e.g. www.chem.ox.ac.uk)
If you find a site that you like, download it, delete their content and
put in your own, code is not copyrighted and it’s the fastest way to
learn. The images are up to you though.
A lot of the design concepts used in writing a good PowerPoint
presentation transfer directly to web pages, and a lot is common sense.
Design do’s and don’ts: Planning
If you are planning on making a larger site (3+pages) the easiest way I
find to build a website is to draw it out on paper first:
Design do’s and don’ts: Layout
Users expect to find the majority of websites in the following format:
Design do’s and don’ts: Colour Scheme
Use colours to highlight information and divide your space.
Think about how these colours may appear on different displays
(projectors/laptops/printed) or to colourblinds (>8% of academics)
NO
NO
NO
www.vischeck.com
NO
NO
NO
NO
NO
NO
Design do’s and don’ts: Graphics
Complicated
Simple
Ask yourself if the image adds any value to the page, why is it there?
Avoid using clipart, images you create (photos or graphics) are much
more valuable to the user.
Design do’s and don’ts: Content
The content of the website is up to you.
www.Alertbox.com has a lot of information about how to write for the
web.
Users read websites as they would newspapers, scanning for
interesting pieces of information.
Keep paragraphs short, allowing for scanability.
Bolding certain words or phases allow users to quickly obtain the most
relevant information from a page.
Uploading
Once you have written a website you need to upload it to a web
server (so that other computers can view it) via FTP (file transfer
protocol).
You all have space on the OUCS web server, which can be activated
via your herald webmail page.
There are plenty of FTP programs around, for example: CoreFTP and
even Internet Explorer
A step-by-step guide can be found on the ABRG website
Reviewing
Once you have written your website ask somebody to use it and give
you feedback. One of the best ways of doing this is to set them a
task such as ‘find my contact details’ or ‘what journal was my first
paper in’.
The more people you get to ‘play’ with your website the better, whilst
this may seem OTT for a simple 3 page site, there is always room for
improvement and websites evolve over time.
Maintenance
Having a site that is obviously out of date gives a worse impression
that not having a site at all.
Put a ‘Last updated xx/xx/xxxx’ on every page, that way even if it’s
been a while since you updated the user is aware of this.
Maintenance takes no time at all once you have written the page,
you just change the text in most cases. (5 mins max)
Next Steps
A step-by-step guide on how to create a web page, the programs
required, and instructions on how to upload your site to the OUCS web
server can be found on the ABRG homepage:
http://users.ox.ac.uk/~abrg/ABRGweb.html
Q&A
Chris Holland
[email protected]