Download ch01

Chapter 1
Understanding the Web
Design Environment
Principles of Web Design, Third Edition
Objectives
• Describe the current state of HTML
• Move from HTML to XHTML
• Understand variables in the Web design
environment
• Describe browser compatibility issues
• Consider connection speed differences
• Code for multiple screen resolutions
• Address operating system issues
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
Principles of Web Design, Third Edition
3
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
• The browser interprets the HTML markup
elements and displays the results, hiding the
actual markup tags from the user
• HTML was intended only to express logical
document structure, not display
characteristics
Principles of Web Design, Third Edition
4
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
Principles of Web Design, Third Edition
6
Principles of Web Design, Third Edition
7
The Need for Style Sheets
• 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
Principles of Web Design, Third Edition
8
Principles of Web Design
Chapter 1
XML: An Open Standard
• XML is the Extensible Markup Language
• XML is a meta-language; not a language
itself, but a language that lets you describe
other languages
• XML describes data, not presentation
• XML allows better access to data
• XML lends itself to customized information
Link to XML examples-> http://www.w3schools.com/xml/xml_examples.asp
Principles of Web Design, Third Edition
9
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
Principles of Web Design, Third Edition
10
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
Principles of Web Design, Third Edition
13
Choosing an HTML Editor
• 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
Principles of Web Design, Third Edition
14
Variables in the Web Design
Environment
•
•
•
•
Browser compatibility
Connection speed
Screen resolution
Operating system
Principles of Web Design, Third Edition
15
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
Principles of Web Design, Third Edition
16
Principles of Web Design, Third Edition
17
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
Principles of Web Design, Third Edition
18
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
Principles of Web Design, Third Edition
19
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
Principles of Web Design, Third Edition
20
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)
Principles of Web Design, Third Edition
21
Principles of Web Design, Third Edition
22
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
Principles of Web Design, Third Edition
23
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
Principles of Web Design, Third Edition
24
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
Principles of Web Design, Third Edition
25
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
Principles of Web Design, Third Edition
26
Fixed Design
• As the screen resolution changes, the content
remains aligned to the left side of the page
Principles of Web Design, Third Edition
27
Principles of Web Design, Third Edition
28
Principles of Web Design, Third Edition
29
Flexible Design
• As the screen resolution changes, the content
expands to accommodate the varying screen
width
Principles of Web Design, Third Edition
30
Principles of Web Design, Third Edition
31
Principles of Web Design, Third Edition
32
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.
Principles of Web Design, Third Edition
33
Principles of Web Design, Third Edition
34
Principles of Web Design, Third Edition
35
Operating System Issues
• Monitors and display software
• Browser versions
• Font choices
Principles of Web Design, Third Edition
36
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.
Principles of Web Design, Third Edition
37
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
Principles of Web Design, Third Edition
38