A Brief history of the website On August 6th 1991 the very first ‘Web Site’ was produced by Tim Berners-Lee. He further developed a number of earlier ideas.

A Brief history of the website

On August 6th 1991 the very first ‘Web Site’ was produced by Tim Berners-Lee.

He further developed a number of earlier ideas such as Hypertext and HTML (hypertext markup language) and used it to link documents across a network and you could access these pages using a browser.The World’s first Website

1Web Design v2

A Brief history of the website

The idea caught on and other people created their own sites, linking them to each other. This quickly became known as the World Wide Web.

Since it was first created, the World Wide Web has grown in popularity and as of May 2014 there are estimated to be around 2.26 billion webpages.

2Web Design v2

A Brief history of the website

Although initial web pages were simply text and some images, they soon developed to incorporate animated graphics and then sound and video.

Websites today have become much more interactive and multimedia-rich.

3Web Design v2

A Brief history of the website

In the early years many websites used as many complicated features as possible to try to impress visitors, whereas today modern website design is much more restrained.

More emphasis is being placed on usability and accessibility – ensuring sites are easy to use and accessible by as many different people as possible.

4Web Design v2

Media Types

5Web Design v2

A modern website will typically contain several different types of media. This is called Multimedia.

These would include:

•Text•Graphics•Sound•Video

Media Types - Text

6Web Design v2

Virtually all websites contain text in the form of paragraphs, sentences, words and characters.

Record £12m penalty for energy firmEnergy giant E.On is to pay out £12m to its customers following an investigation into mis-selling by the industry regulator.

Local closures 'hurting towns'Nearly 100 Scottish towns and cities are facing or have been hit with the closure of a local service, a report claims.•RBS to close 44 branches across UK•Bank branches to close in overhaul•Fall in shop closures over 2013•Police confirm front desk closures

Media Types - Graphics

7Web Design v2

Graphics including photographs, drawings, logos are often used for information and/or to help with understanding.

This saying shows how graphics can be used to help with readability as well as to improve visual layout and accessibility.

“A picture tells a thousand words”

Media Types - Sound

8Web Design v2

Sound can be used to improve a user’s experience of the website.

Sound can also help accessibility by allowing people with sight difficulties to be able to access the information on the website.

It may even be related to the purpose of the website. e.g. A website selling music tracks.

Media Types - Video

9Web Design v2

Video can also be used to improve a user’s experience of the website.

Video can also help accessibility by allowing people with e.g. reading difficulties to be able to access the information on the website.

They can be used for tutorial purposes giving users a more realistic visual experience and demonstrating techniques which would be difficult to describe with just text or sound.

Website Structure

10Web Design v2

Websites are organised as pages of information. A website is a group of pages usually produced by the same people about the same topic.

Most websites have a home page that provides links to allow the user to easily move around the pages on the website.

Each page on the website has its own unique address to identify it on the world wide web. This is know as its URL.

URL – Uniform Resource locator

11Web Design v2

The http tells your web browser how to connect to the site.

The apple.com shows which website your are trying to access. This is converted into a number. 17.149.160.49Each website has its own unique address.

The /uk shows that this a subpage of the main home page, one level below the main page.

http://.apple.com/uk

URL is short for Uniform Resource locator. This is the web address you see at the top of the page, e.g.

Link – What is a url?

Website Structure

12Web Design v2

A typical PowerPoint presentation would move from slide 1 to slide 2 and so on.

The user can typically also move backwards through the slides.

Some Information Systems organise their pages in a linear structure.

Website Structure

13Web Design v2

Most websites however, have a hierarchical structure where pages are organised in folders with subpages accessible from menus.

Website Structure

14Web Design v2

Notice that large websites are likely to have sub-pages of sub-pages and continue down several levels.

Hyperlinks

15Web Design v2

A hyperlink is a point on a page that when clicked on will take the user to another location.

A hyperlink has hidden code embedded in it which tells the browser where to move to.

The hyperlink can be text, an icon or a picture.

Text hyperlinks are often a different colour to the main text.

The pointer generally changes shape to a hand when it is over a hyperlink.

HTML-

16Web Design v2

• the position of objects on the webpage (left, right, centre, full justified, paragraph, table row/column)

• how they look (bold, underline, italics, border, background colour, border colour)

• details regarding a placed object (resolution of graphic, location of sound file.

• hyperlinks (URL to go to when an object is clicked)

The information on a webpage is structured (organised on the page) using a programming language called HyperText Markup Language.

This is a markup language that uses tags to describe:

Hypertext Markup Language

Scripting Languages

17Web Design v2

HTML tags offer very limited options for user interaction so a type of programming language called a scripting language is used to allow programs to be embedded into the HTML web pages.

JavaScript is a popular scripting language used to add interactivity to a web page.

JavaScript

18Web Design v2

Examples of interactivity include:• loading new page content

without reloading the web page. e.g. looking at a slideshow on a web page

• animating page elements, fading them in/out, resizing them, moving them etc.

• providing interactive content: games, audio and video.

JavaScript

19Web Design v2

• allowing users to enter data into input boxes in forms and validates the input to ensure it is acceptable

• transmitting information regarding a user’s reading habits or browsing activities to other websites. (this may be used to collect and analyse data to optimise web usage)

More about Hyperlinks

20Web Design v2

Two types of hyperlink can be written in HTML code; internal and external.

An internal hyperlink takes the user to a new location within the current page or website. This is often used with menu systems at the top of a page.An internal link has a hyperlink and an anchor point on the same page or a reference to another page on the website.

Internal Hyperlink

Link – Internal link

More about Hyperlinks

21Web Design v2

An external hyperlink will take the user to a completely new web page on a different website.The external hyperlink shows the URL (Uniform Resource Locator or address) of the web page the user will be taken to.

External Hyperlink

More about Hyperlinks

22Web Design v2

These refer to how the address of the webpage or website is given in the hyperlink.

An absolute address shows the complete URL of the destination. e.g.

Relative and Absolute Addresses

http://www.easywebtutorials.com   or 

http://www.dentalcarebuddy.com/reviews/best-electric-toothbrush.html

Absolute Address

More about Hyperlinks

23Web Design v2

Absolute paths are always used for external links,

i.e. hyperlinks from your own website to documents (webpages) of other websites. 

Absolute Address

This is because other websites will be stored on different Web servers.

More about Hyperlinks

24Web Design v2

A relative address shows the path to a different document relative to the location of the linking document. Here is an example:

Relative Address

1. Let´s say you want to link from your homepage (index.html) to your contact page (contact.html), which is stored in the same folder. The URLs you could use to create the hyperlink would be:

relative URL: <a href="contact.html">absolute

URL: <a href="http://www.yourdomain.com/contact.html">

More about Hyperlinks

25Web Design v2

Relative Address

The relative URL tells your browser to look for the filecontact.html in the same folder in which the linking document (index.html) is located.

relative URL: <a href="contact.html">absolute URL: <a href="http://www.yourdomain.com/contact.html">

The absolute URL tells your browser the full URL to find the file.

More about Hyperlinks

26Web Design v2

Relative Address

Advantages

2. When you use relative paths for your internal links, then you´ll be able to browse through your website if it is stored locally on your desktop.

e.g. You may want this when you are creating and testing the website at first.

1. Relative paths are much shorter than absolute paths

Good Design – Usability & Accessibility

27Web Design v2

A successful website has to be easy to use. Users will give up if they cannot find what they are looking for quickly. This is known as the usability of a website.There can also be reasons why some people find it difficult to use a website due to physical difficulties.

Using ways to help people with these difficulties improves the accessibility of a website.

Good Design – Accessibility

28Web Design v2

Vision Impairment

• Ensure text is not too small.

• Make sure that foreground and background colours contrast.

• Take care when using certain colours.

• Allow mobile versions interfaces to be viewed on large screen.

• Allow keyboard shortcuts to reduce mouse use.

• Have a spoken version of text available.

Good Design – Accessibility

29Web Design v2

Hearing Impairment

• Subtitles can be added to video and audio clips.

Physical Impairment

• There are many devices that allow physically impaired users to communicate with a computer and they are generally replacements for keyboards.

This includes limited or lack of motor control in the hands and arms which can prevent or hinder a potential user from selecting items or inputting data.

Link - Accessibility

Types of User

30Web Design v2

Expert, Novice, Age Range

Websites have a variety of purposes and users, from the highly qualified expert working in a company to a young child playing on a website.

The method used to communicate with the website (its user interface) must be designed to take the expertise of the user into account.

Types of User

31Web Design v2

Expert User

An expert level interface will generally:

•not have to rely on bright colours and graphics to hold the users’ attention.

•allow the user to access data quickly and efficiently.

•allow the user to create their own ways of searching and editing the data in the information system.

Types of User

32Web Design v2

Novice User

A novice user interface would have:

•colourful graphics.

•limited, well explained options.

•help functions built in.

A novice is a beginner with little or no experience.

Types of User

33Web Design v2

Age Range: Example 1 - Very Young Children

• An information system designed for really young children will have little or no text.

• Bright colours may also be used to hold the attention of a really young audience.

Types of User

34Web Design v2

Age Range: Example 2 - Young Adults

• Information systems may introduce increasingly large amounts of text.

• The website for the Xbox One only has a single colour.

• The graphics have a slick cool look to attract their audience of computer literate, console users.

Types of User

35Web Design v2

Age Range: Example 3 - Older Adults

• Older audiences may be less likely to be concerned with the look and feel of an information system preferring quick, clear access to the information they are searching for.

• This may result in a more traditional, plainer look.

User Interface: Visual Layout

36Web Design v2

A good layout can help a user locate objects on the screen, identify different areas easily and aid navigation.

This refers to how the screen looks.

Lings Cars good or bad?

User Interface: Visual Layout

37Web Design v2

• Laying objects out in a grid pattern improves the visual layout of an interface.

• This helps the user locate

similar items such as menus, dialogue boxes or control panels.

• It is important to group similar objects together.

• Objects with the same colour are from the same group.

User Interface: Navigation

38Web Design v2

• Navigation should be easy to find.

• It should be consistent. i.e. in the same place on each page, same style, type and colour.

• Remind the user where they are. e.g the current page title is often shown in a different colour on the menu.

This refers to how you work your way around the website.

User Interface: Selection

39Web Design v2

These can include:

• Drop down and Pop up menus.

• Hyperlinks on words or images

• Radio buttons, check boxes and or/text entry.

This refers to how you select objects, links and make choices when entering data.

User Interface: Consistency

40Web Design v2

This should include:• Internal consistency

The appearance and layout of menus should be the same throughout the website.

• External consistencyShould match what other websites do, e.g. Main menus are generally at the top or left hand side of the screen.

This refers to keeping webpages having a similar format to make it easier for the user to navigate.

User Interface: Interactivity

41Web Design v2

This could include:

• Clicking hyperlinks.

• Choosing from menus.

• Filling in forms on screen.

• Responding to events e.g. When playing a game.

This refers to how the user communicates with the website.

User Interface: Readability

42Web Design v2

Factors which affect this include:• The age and reading ability of the user.

• The average number of words in each sentence.

• The average number of syllables in each word of text.

• The frequency of technical language used.

• The size of text and font used.

This refers to how easy it is for the user to read and understand the information on the website.