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: Notepad 2. 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 mission Locate existing resources Create a site design Create the site’s Web pages Test and Deploy the site Update 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