understanding the web design environment

Understanding the Web

Design Environment

Principles of Web Design, Third Edition

Principles of Web Design, Third Edition 2

HTML: Then and Now

• HTML is an application of the Standard

Generalized Markup Language

• Intended to represent simple document

structure

• Uses hypertext to link related topics

• Designed for use over the Internet

• The Web has outgrown the capabilities of

HTML


The Limitations of HTML

• A markup language is a structured language

that lets you identify common sections of a

document such as headings, paragraphs, and

lists

• An HTML file includes text and HTML markup

elements

• The browser interprets the HTML markup

elements and displays the results, hiding the

actual markup tags from the user


The Limitations of HTML

• HTML is an open, non-proprietary, cross-

platform compatible language

• HTML is not a What You See Is What You

Get (WYSIWYG) layout tool

• HTML was intended only to express logical

document structure, not display

characteristics


The Need for Style Sheets

• Style sheets let you separate display

information from content

• Separating display information lets you

repurpose your content for multiple

destinations


• Cascading Style Sheets (CSS) is a powerful

display language for HTML

• CSS lets you state style rules in an external

style sheet that is linked to every page on a

Web site

• CSS lets you easily control the display

characteristics of your Web site

• Newer browsers offer more complete CSS

support

The Need for Style Sheets


Benefits of Moving to XHTML

• XHTML is a reformulation of HTML 4.01 in

XML

• Brings data-handling benefits of XML to

HTML

• Style sheets are required

• Stricter syntax rules

• 3 “flavors”: Strict, Transitional, Frameset


XHTML Syntax Rules

• Documents must be well-formed

• Elements must nest correctly

• XML is case-sensitive

• End tags are required

• Empty elements are signified by a closing

slash

• Attribute values must be quoted


Migrating from HTML to XHTML

• Evaluate existing code

• Evaluate existing display information

• Create coding conventions

• Start using CSS

• Test for backward compatibility


Choosing an HTML Editor

• As with the browsers, authoring packages

interpret tags based on their own built-in

logic. Therefore, a page that you create in an

editing package may look quite different in

the editing interface than it does in a browser.

• You’ll probably end up working with a

combination of tools to create your finished

pages


• You can create or generate HTML code to

build Web pages in many ways

• Many sites on the Web are coded using

simple text editing tools such as Notepad

• Many different HTML editing programs are

available

Choosing an HTML Editor


Variables in the Web Design

Environment

• Browser compatibility

• Connection speed

• Screen resolution

• Operating system


Browser Compatibility Issues

• One of the greatest challenges facing HTML

authors is designing pages that display

properly in multiple browsers

• Every browser contains a program called a

parser that interprets the markup tags in an

HTML file and displays the results in the

canvas area of the browser interface


Browser Compatibility Issues

• The logic for interpreting the HTML tags is

different in every browser, resulting in varying

interpretations of the way the HTML file is

displayed

• Although it’s a good idea to test with the latest

browsers, it’s also prudent to test your work in

older browsers as well


Creating Cross-Browser

Compatible Pages

• Lowest common denominator coding - use an

older version of HTML to ensure portability

• Cutting-edge coding - push the medium

forward by coding to the latest standard and

using the latest enhancements

• Browser-specific coding - specify a particular

brand and version of browser to access the site


Solving the Browser Dilemma

• You must test your work in as many browsers

as possible during and at the end of the

development process to make sure that your

pages will render properly


Considering Connection Speed

Differences

• It will still be awhile before most computer

users have fast access to the Web

• Less than 20% of American households have

access to cable modems

• Only 5-10% of all households have access to

Digital Subscriber Line (DSL)


Bandwidth Concerns

• If your pages download slowly, your users will

probably click to go to another site before

they see your content

• Most users will simply not wait longer than 20

seconds for a page to load

• The size and number of graphics on your

Web pages influence the speed at which your

pages display


Testing for Download Times

• Test your site at different connection speeds

• Test your site as if you were a user visiting for

the first time. This is when users experience

the greatest download times.

• Clear your cache of the files and images that

the browser has stored


Working with the Cache to

Improve Download Time

• The cache is the temporary storage area for

Web pages and images

• The browser always tries to load images and

files from the cache

• Make use of the cache by reusing images as

much as possible


Coding for Multiple Screen

Resolutions

• A computer monitor’s screen resolution is

the horizontal and vertical width and height of

the computer screen in pixels

• The two most common screen resolutions

(traditionally expressed as width x height) are

800 x 600 and 1024 x 768

• User screen resolution is a factor over which

you have no control


Fixed Design

• As the screen resolution changes, the content

remains aligned to the left side of the page


Flexible Design

• As the screen resolution changes, the content

expands to accommodate the varying screen

width


Centered Design

• As the screen resolution changes, the Web

page stays centered in the browser window,

splitting the remaining space into equal

amounts on the left and right side of the

browser window.


Operating System Issues

• Monitors and display software

• Browser versions

• Font choices


Summary

• Use Cascading Style Sheets

• Decide whether to code to the XHTML standard.

• Choose the type of editing tool you will use to create your code

• Choose the suite of browsers you will use to test your site

• Decide how browser-specific your site will be. Your goal is to create a site that is widely accessible to multiple browsers.


Summary

• Resolve to continually test your work as you

build your site

• Test with multiple browsers, at different

screen resolutions, and at different

connection speeds

• If you can, try to view your site on multiple

platforms such as PC and Macintosh as well