Transcript COMM 3353: Information, Internet, and the World Wide Web

COMM 3353:
Communication
Web
Technologies I
Chapter 8b:
Web Site Design,
Production, and
Aesthetics,
Continued…
By Dr. Shawn McCombs - http://soc.class.uh.edu/~smccombs
Web Site Design, Production,
and Aesthetics, Continued…
 Graphic Issues
 Organization (Commercial) Site
Analysis
 Tips For Effective Web Site Design
 Evaluating A Web Site
 The Future of Web Site Design
Graphic Issues
 Graphics attract people to a site.
 Must be of good quality and load quickly
 Graphics can get people’s attention long
enough to get out the desired message.
 If good, can cause return visits.
 Primary Types of Graphic Files
 GIF Files
 JPG Files
Graphic Issues, Continued…
 GIF ( .gif) Files




Graphic Interchange Format
Most common type of graphic files to date
Developed and originally owned by CompuServe (AOL).
Companies and organizations which profit from GIF
usage are supposed to obtain licensing from
CompuServe
 Just doesn’t happen, except for the largest of the players
(Microsoft, IBM, etc.)
 Microsoft developed it’s own “gif” and “bmp” formats to combat
CompuServe’s market share.
Graphic Issues, Continued…
 GIF Files, Cont.
 GIF Formats:
 GIF87a (developed in 1987, single layering
capability).
 GIF89a (developed in 1989, multi-layering
capability).
 Most commonly used today.
 Transparent imaging a must in web design and
development.
Graphic Issues, Continued…
 JPeG ( .jpg) Files
 Joint Photographic Experts Group.
 High-quality complex imaging.
 Utilizes compression algorithms to make
files “appear” smaller.
 Compression eliminates redundant information
in order that the file take up less space
 The higher the level of compression, the
greater the sacrifice in quality.
Graphic Issues, Continued…
 JPeG Files, Continued…
 Best used for images or photographs that require
a “natural” look.
 The higher the resolution, the more natural an image
appears.
 JPeG compression can (and usually does) result
in image rastering.
 JPeG Files are usually better for screen viewing,
whereas GIF Files are better for printing because
of their simplicity.
Graphic Issues, Continued…
 File Size
 Three Elements of File Size:
 Physical image size.
 Resolution.
 Amount of colors associated with the image.
 Generally, the best way to cut down on file
size is to limit the number of colors.
 256 to 16 or 8 bit to 4 bit
 Mac uses 16 bit or “millions of colors.”
Graphic Issues, Continued…
 File Size
 You MUST Optimize your images in
PhotoShop or some other photo optimization
utility.
 The goal is to learn and master the ability to
manipulate file size, then learn compression
methods (the easiest is to use the “Save for
Web and Devices” option in the file menu of
PhotoShop.
Graphic Issues, Continued…
 Downloading Graphics
 Many ways to obtain graphics online.
 Click on a download link and the computer will
prompt a “Save As” dialog box.
 “Cold” download or “right-click (long-hold on
Mac).”
 Security issues
 Virus considerations and protection
Graphic Issues, Continued…
 Legal Considerations
 Many legal issues must be considered
when downloading copyrighted graphics
 Academic requirements are somewhat lax
about permission, generally only requiring
sources to be sited.
 This is entirely different for the commercial
world.
 Copyright laws protect all reproducible
data, and the internet is no exception.
Graphic Issues, Continued…
 Legal Considerations, Continued. . .
 You MUST ask permission Before using
someone else’s stuff.
 Not normally required or enforced for academic
or personal use, but it’s a good idea to make it
habitual.
 Once permission is received and construction
of the site occurs, the graphic or data MUST be
cited somewhere on your web page, giving
credit where credit is due. . .
Graphic Issues, Continued…
 Whenever in doubt, always play it safe
and get permission.
 A simple or generic, non-trademarked
graphic is probably exempt, but . . .
 Don’t use Mickey Mouse without Disney’s
permission.
 Rule of thumb: “When in doubt, ask
permission. . .”
Graphic Issues, Continued…
 Graphic Differences Among Browsers
 Until recently, browsers treated graphic
files significantly different.
 Caused severe problems for web developers
and users as well, often forcing them to choose
the “better” browser for their needs.
 No longer the case as intrinsic browser
functions have been standardized by IEEE.
Graphic Issues, Continued…
 Using Graphics Wisely
 Less is more!
 A busy web page = a bad web page
 unless that’s your niche. . .
 Four Rules for Graphic Use:




1) Select appealing, appropriate fonts.
2) Keep graphics simple, use only NEEDED graphics.
3) Keep file size small as possible.
4) Select or manipulate an image that speaks to the three colors
you’ve selected for your overall site design. Keep the site simple.
Busy sites are not revisited because they’re too confusing.
Graphic Issues, Continued…
 Using Graphics Wisely, Continued. . .
 Thumbnail technique
 Drastically limits download time and allows more
images per page. Use applet, scripts, or even image
linking (<a href…>) to the “bigger” version if the user
desires to see it in better detail.
 The typical method for this class (especially during
assignment two) is to generate two version of the
same graphic file – one larger, one smaller (the
smaller serving as thumbnail).
Tips for Effective Web Site
Design
 The Basic Principles of Good Web Site
Design:
 1) Start small, letting the site take on a life
of it’s own. “Test the Water” before
making significant changes to the site.
 2) Begin with an attractive, easy to
understand “home” or “index” page.
 3) Have a contact or email address for
feedback
Tips for Effective Web Site
Design, Continued…
 The Basic Principles of Good Web Site
Design, Continued. . .
 4) Keep the opening page simple.
 5) Post clickable icons and buttons in
obvious locations; avoid complexity.
 6) Link pages back to the Homepage
(wagon wheel navigation)
 7) Include a Search Engine on complex
sites.
Tips for Effective Web Site
Design, Continued…
 The Basic Principles of Good Web Site
Design, Continued. . .




8) Stay Consistent throughout.
9) Use Visually stimulating graphics/audio.
10) Stress interactivity.
11) Keep sales-pitches and advertising at a
minimum (unless this is your focus).
 12) Keep a balance between text,
graphics, and audio.
Tips for Effective Web Site
Design, Continued…
 The Basic Principles of Good Web Site
Design, Continued. . .
 13) Make policy clear and available
(privacy, etc. . .).
 14) Always include email and contact
information.
 15) Link to other sites with caution.
 16) Give visitors a reason to return.
 Update frequently, value-added content, etc. . .
Evaluating a Website
 Evaluating a web site is measuring that web
site’s success.
 Site evaluation = measurement of achieved goals and
objectives.
 Site evaluation in great detail checks the integrity of
each page and its functionality.
 Primarily to prevent major problems and technical glitches.
 Site evaluation requires clear, thorough, and
systematic method.
 Rating system and statistical analysis.
The Future of Web
Site Design
 A Successful web site requires a strong
online presence.
 In order to achieve a strong presence, the
web requires imagination and creativity.
 A thorough “plan” should be in place before
the first tag is written.
 Future Web Design will look more like
Systems Analysis, using a SDLC.
Assignment 3 Grading
 A couple of relevant changes, based on the text and
the lecture:
 Use “Planning” to better help you in revamping your web site. The goal of
this component of the assignment is to help you redesign and develop a
brand new website based on what you learn in chap 8, etc. Create a Site
Plan and turn it in by 5:00pm the date the assignment is due. Your Site
Plan should be reflective of your work and not others; if it is determined that
your site plan followed a template or format belonging to someone else, you
will not receive credit for the assignment. In other words, do your own work.
 If you borrow a graphic from the web, email the owner of the image or site
administrator (or whomever owns the site) for permission. Copy and paste
both your email requesting permission – and the reply/response you
receive in return – into your site plan; do so by including them as
addendum components
 with your site planning pages.
 A3 will be graded using the scales on pages 309 and 311.
The Internet and the
World Wide Web
• End Chapter 8,
Part II.