Website design basics

QUME 185

2

Learning objectives

Understand the basic elements of a Web page and how it is produced

Be aware of different approaches to creating a simple website

Understand some principles of good Web design

After this class you will:

3

Anatomy of a Web page

Written in Hypertext Markup Language, HTML; newer standard is Extensible Hypertext Markup Language, XHTML

An (X)HTML file contains text and special instructions called tags

Tags control the structure and appearance of the document

4

A World of Links

An HTML file contains references to other files that will be included in the page when it is rendered in the browser, e.g. images, audio/video clips, etc.

A Web page can link to other Web pages, other websites or contain internal links (useful in long documents)

5

The power of (X)HTML

HTML and XHTML: designed for the World Wide Web

Files can be viewed in any Web browser on any platform

The power of HTML: interoperability

6

A little history

HTML and the first browser invented by Tim Berners-Lee and launched in 1991

Basic tags are very simple to learn

Text only at first 1993: tag for display of images New tags gradually added

7

Recent developments

HTML has been extended in a number of ways - more powerful tags: XHTML, DHTML

The Web depends on Web page authors and browser vendors sharing the same conventions for HTML

8

Web page creation

Four approaches:1. Hand code –type it in from scratch

in plain text: Notepad2. Specialized HTML Editors (non-

graphical): HomeSite (Windows) BBEdit (Macintosh)

3. Software with a graphical interface:Dreamweaver / FrontPage

4. Translating to Web format from: Word, Excel, PowerPoint and many others

9

Using a simple text editor

Type in the tags and the text Use any plain text software such

as Notepad (Windows) or SimpleText (Older Macintosh OS)

View the file in a Web browser Repeat the edit/view cycle until

page complete

10

HTML View (Notepad)

Web Browser View

Two views, one page

11

HTML editors (non-graphical)

Many HTML editors are available. Built-in features help the coder insert tags and page elements.

Examples: Coffee Cup, HomeSite, HTML Assistant, Web Media Publisher

12

Graphical Interface Editors

What You See Is (almost) What You Get

Graphical user interface

FrontPage and Dreamweaver are leading examples

Macromedia Dreamweaver

13

Save as Web Page

This feature is built into many programs, such as Office applications.

New Office programs translate with a .mht extension: not Firefox/Safari compatible.

14

Do I really need to learn HTML? WYSIWYG editors originally designed for the

non-professional user Familiar word-processing or page-layout

interface, especially FrontPage Allows anyone to publish to the WWW Hand-coding: more precise and not just for

geeks Most Web generally use a combination of

tools

15

The Web is not like paper

Much more difficult to control design elements

Display will differ from machine to machine Colours will differ from monitor to monitor

(and between Macintosh and Windows) No two browsers display in the same way People use different screen resolutions and

window sizes

16

Good Practices

Test on different browsers: (Internet Explorer, Firefox, Safari, etc)

…and different platforms(Mac, PC, Linux)

Test on different monitor types Know your audience

What browser and browser version is most commonly used?

What kind of bandwidth do they have? What plugins do they have installed?

17

Website Development Cycle

Identify the site’s Identify the site’s missionmission

Identify the site’s Identify the site’s missionmission

Locate existing Locate existing resourcesresources

Locate existing Locate existing resourcesresources

Create a site designCreate a site designCreate a site designCreate a site design

Create the site’s Web Create the site’s Web pagespages

Create the site’s Web Create the site’s Web pagespages

Test and Deploy the siteTest and Deploy the siteTest and Deploy the siteTest and Deploy the site

Update the siteUpdate the siteUpdate the siteUpdate the site

Graphic: Element K Courseware

18

end

19

Important Point

There is not always an exact match between what you see in an editor and what you view in a browser

20

Future

WWW is likely to be the platform for more and more applications

More development is like in this direction in the near future

21

Broadband or dial-up access?

Canada has a very high percentage of broadband users (second only to South Korea)

Around 50% of home users, and the majority of business users access the Internet using a high-speed connection (Statistics Canada 2003)

This is important for web developers There is a trend toward larger and larger file

sizes and more use of multimedia files

22

Designing for a general audience Do not assume that everyone has all the

plugins they need to use your content Do not assume that they will download

and install an uncommon plugin Do not assume they will upgrade their

browser or change screen resolution Do not put your ego as a designer or

programmer before the needs of the site users

23

Plugins

Plugin – an add-on to a browser so that proprietory content can be accessed through the browser. Modern browsers come with the most common plugins Adobe Portable Document Format

(PDF files) Flash – animation, video, audio and other

content Media players

RealNetworks Quicktime Windows Media

24

Designing for a general audience – Do Build the site to accepted standards Match the technology you use to your

audience and the purpose of the site Match site design and navigation to

site purpose Look at successful sites that serve the

same target audience

25

Principles of good interface design

No gratuitous graphics or sounds Make it easy to navigate – no barriers or

mysteries Anticipate user’s needs – make important

content visible Let users know where they are in the site Be consistent Make it fast to display Make the text easy to read Make it credible - first impressions count