Download The Web Design Environment

The Web Design Environment
GBA 578
Objectives
• Describe the current state of HTML
• Understand XML, an open standard for
structuring data
• Understand XHTML, the future of HTML
• Describe how Web browsers display your
work
• Code for multiple screen resolutions
• Understand bandwidth concerns
Objectives continued
• Understand important web design
considerations and practices to prevent
bad design
• Understand the different parts of the
web planning process and web
development team
• Understand different web page
elements and how to create them
HTML
• Hypertext Markup Language
– First proposed by CERN in 1989
– It is non-linear so it allows you to jump from place
to place
– Markup refers to the structure of the language so
you can identify what is going on
• Source code example
• W3C – new governing body that regulates
HTML coding
– W3 consortium
Special Tags for Special Browsers
• The Internet Explorer (IE) fight versus
Netscape Navigator (Communicator)
– <FONT>, <CENTER>
– <MARQUEE> versus <BLINK>
• Cascading Style Sheets
– A mechanism used to eliminate coding and
establishing consistency
HTML as a Markup Language
• 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
HTML as a Markup Language
• HTML is an open, non-proprietary, crossplatform 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
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
XML 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
XHTML: The Future of HTML
• 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
Parts of the “WEB”
• Web Browsers
• Coding and plug-ins
• HTML Editors—range from pure text
interface to a WYSIWYG
– Frontpage
– Dreamweaver
– Notepad
– PICO
Web Design Considerations Part I
• Screen Resolution
• Download times
• Visual Structures
–
–
–
–
Use of white space
Guiding the user’s eye
Hyperlinks
Hierarchy
• Transitions
• Page length
How people read websites.
• People rarely read Web pages word by word; instead,
they scan the page, picking out individual words
and sentences.
• As a result, Web pages have to employ scannable
text, using
– highlighted keywords (hypertext links serve as one form of
highlighting; typeface variations and color are others)
– meaningful sub-headings (not "clever" ones)
– bulleted lists
– one idea per paragraph (users will skip over any additional
ideas if they are not caught by the first few words in the
paragraph)
– the inverted pyramid style, starting with the conclusion.
– half the word count (or less) than conventional writing
Continued
• Word on web pages need to be credible (ie. good
writing, graphics)
• Viewers detest “marketese” that is promotion
language that they cannot verify if it is true or not.
• Three main types of web language
– Scanable- where information can be easily found and
determined, ie. bulleted lists
– Objective- language written in paragraph form (least
effective)
– Combination- a mix between the two (most effective)
Web Design Considerations Part II
•
•
•
•
•
•
•
Knowing HTML Limitations
Design Considerations
Understanding Download Times
Using very little glitz.
Check Out Your Own Web Site
Understanding Your Service Provider
Final Web Design Considerations
HTML Limitations
• HTML (HyperText Markup Language) is a very general
language designed to place information on web pages.
It is not a word processing or desktop publishing tool.
The sooner you come to grips with this fact, the faster
you will become an effective webdesigner. Here's why:
– No two browsers show a page quite the same way.
– Even if everyone were to use the same browser, not
everyone would have the same resolution as you.
– It really never was intended to be as specific as a word
processor, and its fundamental structure reflects this.
– Nobody owns the web. Therefore, standards are rather
difficult to enforce.
Design Considerations
•
Assume everyone has their screen set to 640x480 and 256
colors..
This minor detail is very often overlooked by web authors.
– If you want to go "wide", then make sure that what you consider
the material of primary importance to your reader is located on
the left side of the screen.
– Forces the user to use the right-left scroll bar to read the text.
– Banner and navigation art can be unrecognizable. Even worse
scenarios are possible with background images.
– Do use TABLES (now supported by almost all browsers) to create
some white-space in your pages.
– Use very basic color schemes and avoid noisy background images.
– Always use ALT (image descriptions) with your images so that
people with text browsers can use and understand your pages.
Not doing this prevents a lot of students from enjoying your site.
Understanding Download Times
• Nobody has their own personal T-1 connection to the
web.
Okay, so maybe you have one, but most people are using
either 28.8K or 56(haha)K modems. As a rule of thumb, do
not create pages that take more than 30 to 60 seconds to
load at 28.8K. You can accomplish this by:
– Using graphics sparingly, and using color reduction when
possible.
– Use Interlaced GIF images (89a standard) when possible.
These provide a nice fade-in effect that allows people a
sneak preview of your image as it comes into view.
– If you do have a lot of images to present on one page, use
thumbnails (small versions) and link the larger images to
them. If the reader wants, they can then view the picture
in its full glory!
– Always indicate the HEIGHT and WIDTH of your images.
Many browsers cannot display any part of the page until it
knows all of the dimensions of the objects that the page
consists of.
Avoid Using Glitz in Your Web Page
• Avoid Glitz and the Cutting Edge of Web
Technology.
– Use animation sparingly. An animation is a nice
touch and a great way to draw somebody's attention
to something you want to feature. There is however,
nothing as annoying and distracting than a collection
of flashing images all over the screen.
– Keeping in mind that no two browsers handle things
quite the same, avoid what are called browser
specific tags. If the viewer's browser does not
support the tag, the item will either be ignored, or
displayed as plain text.
Check Out Your Own Web Site
• View your website in;
– Internet Explorer
– Netscape Navigator
– AOL (if possible)
– A 28.8 modem if possible
Understanding Your Service Provider
• Make sure you put your site where it
belongs.
If you are placing your site on your personal webspace
that came with your Internet service, make sure you
are aware of any restrictions. These include:
– Maximum number of page accesses per month.
– Maximum number of bytes downloaded per month.
– Restrictions on commercial messages. Some providers
even consider naming your employer a violation that could
cause you to be charged commercial rates!
– Can you have CGI-BIN and Server Side Includes. If not,
you cannot have a nice interactive website.
Final Web Design Considerations
• SPELLING & GRAMMAR: I cannot stress the
importance of proper spelling and grammar
strongly enough.
• Never include an image in any page that you are calling
from somebody else's site! It is very rude in that it
steals bandwidth from the owner of the image. This can
cause them to incur charges as well as have their site
slow down. Actually, the odds are it will be your page
that suffers! If you must, just take a copy and put it on
your server. Do give credit where credit is due.
• But you can get free stuff from
http://www.reallybig.com/default.shtml
Creating a web site Step One
• Planning the web site—what type
– Billboard
– Publishing
– Special/public interest/nonprofit
– Virtual gallery
– Ecommerce, catalog, online shopping
– Product support
– Intranet/extranet
Step Two Analyze your audience
• What is it that users want when they
come to your site?
• How can you attract and entice them to
return for repeat visits?
• What type of computer and connection
speed does your typical visitor have?
More considerations…
•
•
•
•
Gender
Education Level
Technical Aptitude
What motivation?
– Informational
– Economic
– Social
• Do you have a captive audience?
Step 3 Building a Web Development
Team
•
•
•
•
•
•
•
Server Administrator
Designers
HTML coders
Writers
Software programmers
Database administrators
Marketing
Step 4 File Names and URLs
• Names
– Front door URL
– Page names
• Case Sensitivity
• Character Exceptions that you CANNOT USE
– /,/,&,*, <,>, and blank spaces
• File Extensions
–
–
–
–
–
–
.htm
.html
.asp
.xls
.gif
.jpg
Complete URLs and Directory
Structure
• http://isec.sandiego.edu/carl/gba576.asp
• Versus gba576.asp
• Relative versus absolute paths
Diagram the Site
•
•
Plan your site by creating a flowchart that shows the
structure and logic behind the content presentation
and navigation choices
This preliminary step is one of the most important
that you take in planning your site
• Structures
–
–
–
–
–
–
Linear information
Tutorial
Web
Hierarchical
Catalog
cluster
Linear Structure
• The linear information structure lets you
guide the user along a path. This structure
lends itself to book-type presentations or
content that requires the user to follow a
predefined path.
Tutorial Structure
• The tutorial structure is perfect for computerbased training content such as lessons,
tutorials, or task-oriented procedures
Web Structure
• Many smaller Web sites follow the Web
structure which offers links to and from every
page in the site. This allows the user to jump
freely to any page from any other page.
Hierarchical Structure
• The hierarchical structure is probably the
most common information design. It lends
itself to larger content collections because
the section pages break up and organize the
content at different levels throughout the site.
Cluster Structure
• The cluster structure is similar to the
hierarchical structure, except that every topic
area is an island of information unto itself,
with all pages in each cluster linked to each
other
Catalog Structure
• The catalog structure accommodates
electronic shopping. The user can browse or
search for items and view specific
information about each product on the item
pages.
Structure Summary
• Start with pencil and paper. Your ideas will
be less restricted and you can easily revise
and recast without recoding.
• Write a site specification document. You’ll
find it invaluable as a reference while
building your site.
Creating Usable Navigation
Provide enough location information to let the
user answer the following navigation questions:
•
•
•
•
Where am I?
Where can I go?
How do I get there?
How do I get back to where I started?
Creating Usable Navigation
To answer these questions, provide the
following information:
• Let users know what page they are on, and
what type of content they are viewing
• Let users know where they are in relation to
the rest of the site
Creating Usable Navigation
• Provide consistent, easy-to-understand links
• Provide alternatives to the browser’s Back
button that lets users return to their starting
point
Limit Information Overload
• Create manageable information segments
• Control page length
• Use hypertext to connect facts, relationships,
and concepts
Using Text-Based Navigation
• Text-based linking is often the most effective
way to provide navigation on your site
• It can work in both text-only and graphical
browsers
• Always provide a text-based set of links as an
alternate means of navigation
Sample Text Navigation
The following screens demonstrate a variety
of text-based navigation options:
• To main pages (home, table of contents,
index)
• To the top of each chapter
• Within the table of contents page to chapter
descriptions
• From table of contents page to specific topics
within each chapter
Sample Text Navigation
The following screens demonstrate a variety
of text-based navigation options:
• Between the previous and next chapter
• Within chapter pages to each topic
• To related information by using contextual
links
Graphics for Navigation
• Standardize your navigation graphics
• Provide predictable navigation cues for the
user
• Repeat graphics to minimize download time
• Use consistent placement and design of
navigation graphics to reassure the user
• Use easily understandable graphics
Navigation Summary
• Work from the user's point of view. Think
about where users want to go within your
site, and make it easy for them to get there.
• Add plenty of links so it's easy to get around
your site. Link to fragments as well as whole
pages. Make it easy to get back to your
navigation options.
• In addition to providing links, make sure you
provide plenty of location cues to let the user
know where they are
Navigation Summary continued
• Do you have to use graphics for linking?
Rethink the objectives of your site and
determine whether text will do as well. Every
additional graphic adds to download time.
• Don't forget to provide ALT values to your
<img> tags to provide alternate navigation
options for the user
Step Six Actual Building the Page
•
•
•
•
Tables
Forms
Graphics
Typography
Using Table Elements
• To build effective page templates, you must
be familiar with the HTML table elements
and attributes
• The <table> element contains the table
information, which consists of table row
elements <tr>, and individual table data cells
<td>. These are the three elements you will
use most frequently when you are building
tables.
Basic Table Code
<TABLE BORDER>
<TR><TD>Stock
Number</TD><TD>Description</TD><TD>List
Price</TD></TR>
<TR><TD>3476-AB</TD><TD>76mm
Socket</TD><TD>45.00</TD></TR>
<TR><TD>3478-AB</TD><TD>78mm
Socket</TD><TD>47.50</TD></TR>
<TR><TD>3480-AB</TD><TD>80mm
Socket</TD><TD>50.00</TD></TR>
</TABLE>
Captions and Table Header
• <caption> lets you add a caption to the top or
bottom of the table. By default, captions
display at the top of the table. You can use the
align=“bottom” attribute to align the caption at
the bottom of the table.
• The <th> tag lets you create a table header
cell that presents the cell content as bold and
centered
Defining Table Attributes
• Table attributes let you further define a
number of table characteristics. You can
apply attributes at three levels of table
structure: global, row-level, or cell-level.
Spanning Columns
• The COLSPAN attribute lets you create cells
that span multiple columns of a table.
Column cells always span to the right.
Spanning Rows
• The ROWSPAN attribute lets you create
cells that span multiple rows of a table. Rows
always span down.
Relative or Absolute Widths
• Set relative table widths as percentages in
the table width attribute. If you choose
relative table widths, your tables will resize
based on the size of the browser window.
• Set absolute table widths as pixel values in
the table width attribute. Fixed tables remain
constant regardless of the browser window
size.
Calculating Table Widths
• The most common width for page template
tables is approximately 750 pixels. This width
supports the 800 x 600 screen resolution.
Default Table Spacing
• Default spacing values are included in the
table even when you don’t specify values for
the table’s border, cellpadding, or cellspacing
attributes
• Depending on the browser, approximately
two pixels are reserved for each of these
values
• You can remove the default spacing by
explicitly stating a zero value for each
attribute
Table Pointers
• Write easy-to-read code - You can simplify
your table creation and maintenance tasks
by writing clean, commented code
• Remove extra spaces - Always remove any
leading or trailing spaces in your table cell
content
• Center tables - Centering a fixed table
makes the table independent of resolution
changes, because the table is always
centered in the browser window
Table Pointers
• Stack tables - Because of the way browsers
display tables, it’s best to build several
smaller tables rather than one large one
• Nest tables - You can nest tables by placing
an entire table within a table cell
Creating a Page Template
• In this example you’ll see how to take a
design sketch for a Web page and build a
template for the page layout
• Figure 5-19 shows a sketch of the desired
layout. This layout is designed for a base
screen resolution of 800 x 600, so the table
will be fixed at a width of 750 pixels.
Creating a Page Template
• Notice that the basic structure of the table is
3 rows by 4 columns. Each column uses
25% of the total width of the template. Row
spans and column spans break across the
layout to provide visual interest.
Build the Basic Structure
• Start by building the basic table structure,
including all the cells and rows of the table
• As you customize the table you can remove
extraneous cells as necessary
• The basic structure is a 3-row by 4-column
table
Setting a Fixed Width
• One of the design characteristics of the
template is a fixed width that is not
dependent on the user’s browser size or
screen resolution
• To accomplish this, use a pixel value in the
global WIDTH attribute
Creating the Page Banner
• The page banner cell is R1C1. This cell
spans the four columns of the table using the
colspan attribute.
Creating the Feature Cell
• The Feature cell in the layout is R2C2, and
spans two columns. This column span
requires the removal of one cell in row two to
make room for the span.
Creating the Link Columns
• The New Link and Linked Ads columns in the
layout reside in cells R2C1 and R2C3
respectively. These cells span rows 2 and 3
of the table. The row spans require the
removal of cells R3C1 and R3C4.
Creating the Page Banner
• Column widths must be set in only one cell
per column
• It’s also best to set the column widths in only
one row of the table
• Setting the column width ensures that the
text will wrap properly
Testing the Template
• To verify that your template works properly,
populate it with test content
• Test the template in multiple browsers
Template Examples
• The following templates cover a variety of
page layout needs
• You may choose to stack different templates
on top of each other for more complex
layouts
Tables Summary
• Plan your tables by sketching them out first
• Use fixed table widths if you want to
determine the size of your page rather than
letting the browser determine the width
• Use relative widths if you want to build tables
that resize with the browser window,
wrapping your content to fit
Tables Summary continued
• Work on your pages with the table borders
turned on, which displays the cell
boundaries. When you are finished with your
layout you can turn the borders off.
• Size your tables based on the page size you
want to create. Use 800 x 600 as your base
screen resolution. In most cases you’ll set
the width but not the height of your tables,
allowing the content to flow down the page.
Type Design Principles
•
•
•
•
Choose fewer fonts and sizes
Choose available fonts
Design for legibility
Avoid using text as graphics
Using the <font> Element
• Use <font> to set font size and color and to
specify font substitution
• With HTML 4.0, the <font> tag has been
deprecated in favor of CSS. To ensure
forward compatibility, you should consider
moving to CSS, and limit or replace the
<font> element in your code.
Type Summary
• Use type to communicate information
structure. Be sparing with your type choices,
and use fonts consistently.
• Remember that HTML text downloads faster
than graphics-based text. Use HTML text
whenever possible.
• Use browser-safe fonts that will display as
consistently as possible across operating
systems
File Format Basics
• You can currently use only three image file
formats on the Web: GIF, JPG, and PNG. A
new format, SVG, is not yet in common use.
• These formats all compress images to create
smaller files. Knowing which file format to use
for which type of image is important.
• If you choose the wrong file type, your image
won’t compress or display properly
GIF Format
• GIF uses a lossless compression technique,
meaning that no color information is
discarded when the image is compressed
• The color depth of GIF is 8-bit, allowing a
palette of no more than 256 colors
• GIF excels at compressing and displaying flat
color areas, making it the logical choice for
line art and color graphics
GIF Transparency
• With GIF files, you can choose any one color
in an image to appear as transparent in the
browser
• The background color or pattern will show
through the areas that you have designated
as transparent
• Using transparent areas allows you to create
graphics that appear to have an irregular
outside shape, rather than being bounded by
a rectangle
GIF Animation
• The GIF format lets you store multiple images
and timing information about the images in a
single file
• This means that you can build animations
consisting of multiple static images that play
continuously, creating the illusion of motion
JPG Format
• JPG is best for photographs or continuous
tone images
• JPGs are 24-bit RGB images that allow
millions of colors
• JPGs use a “lossy” compression routine
especially designed for photographic images.
When the image is compressed, some color
information is discarded, resulting in a loss of
quality from the original image.
JPG Format
• When you create the JPG file, you can also
manually balance the amount of compression
versus the resulting image quality
• The higher the compression, the lower the
image quality. You can play with this setting to
create files that are as small as possible but
still look good.
• Many photos can sustain quite a bit of
compression while still maintaining image
integrity
PNG Format
• A royalty-free file format that is intended to
replace GIF
• This lossless format compresses 8-bit images
to smaller file sizes than GIF
• PNG supports transparency and interlacing
but not animation
SVG Format
• A new standard from the W3C
• A language for describing two-dimensional
graphics using XML
• SVG graphics are scalable to different display
resolutions and are printable
• Not yet supported by most browsers
Interlacing & Progressive Display
• Most Web-capable graphics editors let you
save images in an interlaced or progressive
format
• You can choose this display option when
creating GIF, PNG, and JPG files
• GIF and PNG files use interlacing, while
JPGs use progression
Interlacing & Progressive Display
• Interlacing and progressive display are
generally the same thing—the gradual display
of a graphic in a series of passes as the data
arrives in the browser
Where You Can Find Images
•
•
•
•
•
•
•
Stock photo collections
Digital cameras
Scanner
Public-domain Web sites
Clip art
Create your own
Remember to respect copyright laws!
Which format?
• GIF: The everyday file format for all types of
simple colored graphics and line art. Use GIF
sparingly for its animation capabilities to add
visual interest to your pages. GIF’s
transparency feature lets you seamlessly
integrate graphics into your Web site.
• JPG: Use JPG for all 24-bit full color
photographic images, as well as more
complicated graphics that contain color
gradients, shadows, and feathering
Which format?
• PNG: If the browsers are supporting it, use
PNG as a substitute for GIF. Because PNG
doesn’t compress your 24-bit images as well
as JPG, don’t use it for photos.
Color Depth
• The amount of data used to create color on a
display is called the color depth
• If your users have a 24-bit color display, they
can appreciate the full-color depth of your
images. But many monitors cannot display
24-bit images.
• If your monitor doesn’t support the full color
depth of an image, the browser must resort to
mixing colors that attempt to match the
original colors in the image
Using the <img> element
• By definition, <img> is a replaced element,
meaning that the browser replaces the <img>
element with the image file referenced in the
SRC attribute
• <img> is an empty element, so never use a
closing tag with it
Using the <img> element
• The browser treats the image as it treats a
character: normal image alignment is to the
baseline of the text. Images that are within a
line of text must have spaces on both sides,
or the text will touch the image.
Specifying alt and title Text
• The alt text is displayed if the image does not
appear, providing a description of the image
• The title text appears as a pop-up when the
user places the cursor over the image
Specifying width and height
• Every <img> element on your site should
contain width and height attributes
• These attributes provide important
information to the browser by specifying the
amount of space to reserve for the image
• This information dramatically affects the way
your pages download to the user, especially
at slower connection speeds
Sizing Graphics for the Page
• One of the easiest ways to make your
graphics download quickly is to keep their
dimensions small and appropriate to the size
of the page
Removing the Hypertext Border
• When you create a hypertext image, the
browser’s default behavior is to display the
hypertext border around the image
• This border is often unnecessary as users
often use their mouse to point to each image
to see if the hypertext cursor displays
• To remove the hypertext border, add the
border=“0” attribute to your <img> tag
Aligning Text and Images
• You can align text along an image border
using the align attribute
• Text and image alignment defaults to bottom
alignment, which means the bottom of the
text aligns with the bottom edge of the image
• Valid values are: top, middle, bottom, left,
right
Adding White Space
• Add white space around your images to
reduce clutter and improve readability
• To increase the white space around an
image, you can add the vspace and hspace
attributes to the <img> element, and set the
values to a pixel amount
Using Single-Pixel Rules
• Single-pixel lines or rules work exactly like
transparent pixel GIFs, except they are a
single color rather than transparent
• You can change a single-pixel rule to any size
by using the width and height attributes
• This creates reusable graphics of horizontal
or vertical lines of varying thickness that you
can use in many ways in your Web pages to
enhance your layout
Using Background Images
• You can use the background attribute to the
<body> element to tile images across the
background of a Web page
• You can use any image as a background
graphic, though many are not appropriate for
the task. In too many Web sites, complicated
background graphics distract the user.
• If your site includes a lot of text, avoid dark or
overly complex backgrounds
CSS Background Properties
• Cascading Style Sheets allow you more
control over background image tiling than
standard HTML
• To apply a background image, use the
<body> element as the selector with the
background property
• The CSS background-repeat property allows
you to create a single column or row of the
image, rather than tiling completely across
the page
Hexadecimal Colors
• HTML uses hexadecimal numbers to express
RGB color values
• Hexadecimal numbers are a base-16
numbering system, so the numbers run from
0 through 9 and then A through F
• Hexadecimal color values are six-digit
numbers; the first two define the red value,
the second two define the green, and the
third two define the blue
Hexadecimal Colors
• Browser safe hexadecimal colors are always
made up of the following 2-digit color values:
00, 33, 66, 99, CC, and FF
Using Background Colors
• One of the simplest ways to work with
hexadecimal color is to specify a background
color for your pages
• Use the bgcolor attribute in the <body>
element, or with Cascading Style Sheets, use
the background-color property with body as
the selector
Using Background Colors
• You can use background color in tables for
different purposes, and all by using the
bgcolor attribute
• The table <table>, table row <tr>, table
header <th>, and table data <td> elements all
accept the bgcolor attribute
Graphics Summary
• Remember that the final destination is the
monitor, not the printed page, so design
accordingly
• Most monitors have a resolution of 72 dpi. If
you are creating or scanning images, or
when you import images from a CD-ROM,
always change the final resolution to 72 dpi.
Graphics Summary Continued
• Reduce image size to the appropriate
dimensions for a Web page. If you must use
a larger image, let the user view a thumbnail
first, and provide the file size information.
• Use the cache by reusing graphics as much
as possible
Graphics Summary continued
• Work with a limited Web-safe palette when
creating graphics
• Test your work! Browsers and computing
platforms render colors differently. Test at
different color depths also.