Chapter 4
- Position important info above and to the left of the potential scroll zone
- Make first page two screens long max
- Insert “top of the page” links for extra long pages
Step 5 (see end of chapter 3)
5. design the look and feel of the site
a. visual consistency
b. contrast
c. color matching software: contains tools you can use to create sample Web site color schemes based on color theory, preview the color schemes in a browser, and then apply the colors in the selected scheme to your Web pages.à Color Scheme Designer ® , Color Wheel Pro ® , ColorShade ® , or Color Cache ®
o CSS: cascading style sheet
o Style sheet: text document that controls the appearance of one or more pages at a site—centralizes formatting (saves time and simplifies the process)
o Creating a style rule: consists of a selector (tag) and a declaration (CSS property)
o Can add a style rule in 3 ways:
§ As an inline style inserted within the related HTML tag on a page
§ As part of an internal style sheet inserted within a page’s HTML heading tags
§ As part of an external style sheet saved in the folder with the site’s pages and linked to them with an HTML tag
o CSS editor softwareà Style Master CSS Editor ® or Rapid CSS Editor 2007
o Page layout
o Standard:
§ Logo and name in upper- left corner of each page
§ Search feature, Contact Us page link, and Help page link at the top of each page
§ Other navigation links at the top and down the left side of each page
§ One- or two- column content area in the middle of the page
§ standard copyright notation, contact phone number, and links to Legal Info and Contact Us pages at the bottom of each page.(usually below scroll zone)
o use layout grid (can use “snap to” setting)
o layout tables: HTML tables used for positioning content
§ float property: sets the left or right position of an element, such as text, positioned outside the table.
§ cell padding property: amount of space between table cells
§ cell spacing property: sets the amount of space inside the cell between its con-tents and its borders
§ fixed width: defined in pixels, is absolute and will not resize if the browser window resizes. The advantage of using a fixed- width table is you have better control over what the visitor sees at the specific resolution for which the page is designed.
§ relative- width table: defined as a percentage of the browser window—used for liquid layouts
§ screen reader is an assistive technology that reads a Web page to a visually impaired userà use CSS better than layout tables
o CSS + page layout: Style sheets can also be used to control page layout by dividing a page into sections
§
Step 6: Navigation (see end of ch 3)
o User-based navigation system: based on the visitors needsà use step 2 (target audience profile information) and step 4 (basic site structure)
o Usability test: usually done in a lab by professionals (expensive). Track user reception and advise on site designà do informal test using family and friends
o user- controlled navigation system: provides a variety of ways visitors can move around a site beyond the major links from the home page.
o image maps: clickable hyperlink image with multiple hotspots
o Client- side image map: hotspot link information resides in the HTML coding of the page and is processed by the visitor’s browser (easier and faster)
o Server-side image map: and y- coordinates of the clicked hotspot are sent back to the server, where a script processes the hotspot link information and returns the link’s the target page.
o navigation menu: is a list of related links that might contain multiple levels of links displayed as vertical pop- out menus.
o navigation bar: graphic buttons to present links. àdrop- down menus. Sometimes at the bottom of each page with text links instead.
o navigation tabs: present links as small tabs; navigation tabs work best when linking to alternate views of the content.
o breadcrumb trail: a hierarchical outline or horizontal list that shows a visitor the path he or she has taken from the home page to the page currently being viewed.
o Ex:) Home> Contact Info> Email Us (at top of each page)
o site map/index
o a hosted Web site search provider: uses spiders or other tools to build a searchable index of your site’s pages and then hosts the index on their servers. You use templates and tools provided by the search provider to add a search box to your pages.
o Frames: a device for dividing the screen into multiple areas, with each area containing a separate Web page—allows for scrolling of individual parts
o Frameset: the master page in which the multiple pages are displayed.
Chapter 5
- Typography: the appearance and arrangement of characters, commonly referred to as type, used to create printed and on- screen material.
o Typeface: A group of alphabetic characters, numbers, and symbols with the same design, such as the slant and thickness
o Style: bold, italic, etc.
o Size:
§ Absolute font sizes:
· might not change when visitors change their browser font size settings
· measured in inches, points, centimeters, millimeters, and picas
· used by designers who want to maintain control over the size of page text.
§ Relative font sizes:
· specified in pixels (relative to the viewing screen)
· as a percentage in relation to the font size of surrounding text
· a percentage of an em unit (1= the font size)
· with a keyword, such as medium or large
· Using relative font sizes allows visitors to control font size by changing their browsers’ font size settings.
§ combo= font
1. Serif
2. Sans-serif
3. Cursive- handwriting
4. Fantasy- decorative
5. Monospace- typewriter
o Web fontà Verdana ( sans serif), Tahoma ( sans serif), or Georgia ( serif)
o Default font for Firefox and Internet Explorer = Times New Roman, 16 pixels
o Scanning
§ Scan illustrations at 256 colors. Scan photos at higher color settings such as thousands or millions of colors.
§ Save scanned images in Tagged Image File Format ( TIFF), a standard file format for scanning and storage, which can be edited and saved multiple times without losing quality
o Software:
§ Screen capture (aka screen shots) software: used to create an image of computer screen contents àSnagIt ®! Quick Screen Capture ®, and FullShot ®
§ Illustration software: used to create images, such as diagrams and drawings that are defined by mathematical statements regarding the drawing and positioning of the shapes, lines, and curvesà Adobe Illustrator ®, Xara Xtreme ® , and Expression Design ®
o Image file formats:
*Bitmap Formats and File Extensions
- Windows Bitmap = .bmp
- Graphics Interchange Format = .gif
- Joint Photographic Experts Group (JPEG) File Interchange Format = .jpg or .jpeg
- Portable Network Graphics = .png
- Macintosh = . pict
- PC Paintbrush Exchange = .pcx
- Tagged Image File Format = .tiff
-Adobe Photoshop = .psd
§ Raster/ bitmaps: created pixel by pixel
· measured by pixels per inch (ppi)
· file extensions = .gif or .jpeg
§ vector images/ graphics: consist of a group of separate drawing objects, such as shapes, curves, and lines, combined to create a single image.
· resolution independent
· file extension = .ai
o GIF
§ original image format used on the Web.
§ Supported by all modern web browsers
§ Contains a compression algorithm that reduces file size
§ 8-bit color images—saved with max of 256 colors
§ Use for cartoons, diagrams and navigation buttons
· Interlaced: displays on the screen in a sequence of passes. Each pass displays the whole image at a higher resolution than the previous pass. Gradually, the image changes from blurry to distinct. Use for large images
· Transparent: can turn on or off a single color, such as the image background color, allowing the Web page background color to show through.
· animated
o JPEG
§ used for digital photographs, photo- like paintings, watercolors, and complex illustrations requiring more than 256 colors.
§ Progressive JPEG: like interlaced GIF but can specify number of passes
o PNG
§ Supports more than 16 million colors
§ Superior transparency capabilities
o Web-ready images
§ use image editing software to refine and enhance the images as necessary, selecting the right format for the type of image
§ optimize the images to find the balance between the smallest possible image size and the highest possible quality.
§ *PHOTOSHOP SAVE FOR WEB AND DEVICES dialogue box: quality setting, file size, estimated download speed, quality value
§ compression artifacting: a.k.a. image degradation-- loss of image data resulting in areas of an image that are blurred or distorted.
Chapter 6
- Multimedia on site requirements
o Give site visitors a choice of high- or low- bandwidth content.
o List any necessary plug- ins and provide links to locations where they can be acquired.
o Provide text equivalents for all multimedia elements.
o Offer low- bandwidth alternatives such as audio instead of video.
o When developing original multimedia, break audio or video fi les into short segments to create smaller files.
- Web page animation
o animated GIFs: single file in which separate images within multiple animation frames are stored. Frames-per-second (fps)
§ softwareà Easy GIF Animator and GIF Construction Set Professional
§ when creating animated GIFs:
1. Identify in sequential order the GIF images you want to animate. Tweening
2. Specify the time interval between frames
3. Specify if animation should loop or repeat.
4. Set background transparency, if desired.
5. Set background transparency, if desired.
o Flash movies
§ have wide browser and operating system support
§ can be used to create an entire Web site
§ can be used to generate quick- loading, scalable vector animations, which adjust to different browser sizes without degrading quality.
§ Rich interactive applications ( RIAs) : Web- based computer applications that contain interactive multimedia elementsà Microsoft Silverlight
o Avatars: alternative personas or virtual identities (virtual models )à create with websites like SitePal or Media Semantics (can create avatar and cut and paste HTML code)
o Gadgets/ widgets: small code objects that provide dynamic Web content
§ Too add to your site, can copy and paste HTML code to your page à Google Gadgets
- Audio and Video
o Downloadable media
§ Advantages
· Once the file has been downloaded, it can be accessed again and again.
· Downloadable media utilizes HTTP protocol to transfer the data, and therefore does not require a specific media server.
§ disadvantages
· Downloading media can take long periods of time, depending on the speed of the Internet connection and the size of the file.
· considerable storage space being consumed on the user’s computer.
o Streaming media
§ Advantages
· Users have random access to the data, meaning they can choose the file portion they want to play using the player’s control buttons.
· consumes RAM only while being played and is purged after viewing.
§ disadvantages
· high bandwidth requirements.
· frequently requires a specific media server to transfer the data.
o Audio elements
§ Requires:
· An appropriate sound card
· A high-quality microphone
· Speakers
· Audio recording softwareà RealNetworks’ RealProducer ® or Audacity ®
· Web page files must be stored on a server that also has streaming software to “serve up” the audio stream when requested by the browser.
· Audio must be in digital format to be used on the Web. Analog audio files can be digitized, or encoded, using sound- editing softwareà Audacity or WaveLab 6
· Select a mono audio channel (rather than stereo)
· Use an 8 kHz sampling rate for voice- only audio and 22 kHz sampling rate for music audio
· Use an 8- bit audio file for voice and 16- bit audio file for music.
§ sampling rate: measured in kilohertz ( kHz), refers to the amount of samples obtained per second during the conversion from analog to digital sound.
§ Bit depth: a measure of audio quality
§
§ Streams in 3 formats:
1. RealAudio ( Real Player plug-in)
2. Windows Media (Player plug-in)
3. QuickTime (Player plug-in)
o Video Elements
§ Editing software à Adobe Premiere Pro CS3 ® , Pinnacle Studio Ultimate version 11 ® or Windows Movie Maker
§ Optimize for web: frame size, frame rate, bit depth, compression scheme, and overall video quality
§ The common frame sizes are 160x120 or 240x180 pixels; the frame rate for Web video ranges from 10 to 15 frames per second ( fps).
o Interactive elements
§ Use scripting languages, applets, and servlets to create rollover buttons, games, etc. for web pages
· Javascript: frequently used to verify form information and to create rollover buttons, advertising banners, and pop- up windows. Scripts are inserted directly into a page’s HTML code.
· Applets: small programs that are designed to execute in a browser and are sent to a browser as a separate file together with the related Web page. Do not require a browser plug-in for viewing
· Servlet: like an applet but execute from the server instead of the visitor’s browser
o Web based forms:
§ Require that visitors complete fields containing essential information before the form can be submitted. Prompt visitors to provide the missing information.
§ Make text boxes large enough to hold the approximate number of characters for a typical response. Restrict responses to characters or numbers or both as appropriate.
§ Use check boxes to allow users to submit more than one response to a query.
§ Provide space for additional comments or requests for further information. • Use color to highlight and segment information.
§ Include a reset button so that the user can clear the form quickly and reenter the information if necessary.
§ Add a button that allows the visitor to confirm the information he or she has entered in the form.
§ Send an e- mail confirmation notice assuring the user that the form data was received.
o Live chat:
§ Software providersà Provide Support, CustomerReach, BoldChat, and LivePerson
Chapter 7
- Web site testing
o Staging server: temporary web server that enables new sites to test in an environment similar to that of a live web server
o Questions to ask testers:
Specific-
1. Which pages appear to appeal to them?
2. Which pages appear to disinterest them?
3. How much time do they spend on various pages?
4. Which links do they visit or ignore?
5. How easily do they navigate the Web site?
6. Do they at any time demonstrate any confusion or impatience?
General
7. Did the site’s content satisfy the testers’ (representing your target audience’s) needs, wants, and expectations for content at the site?
8. Was the site’s content interesting and valuable?
9. Was it easy or difficult to navigate the site?
10. What improvements, if any, would they suggest for the site?
11. Would they return to the Web site and recommend the site to others?
o Web site publishing
§ Get server space from a web hosting companyà register. com and Network Solutions (accredited registrars)
§ Can also get from your ISP as a part of monthly service fee
§ Ask following questions during research:
1. What is the monthly fee to host a personal or commercial Web site?
2. How much server space is allotted for the monthly fee? What does additional space cost?
3. What technical support is offered, and when is it available?
4. Are frequent nonscheduled outages experienced by the server on which the Web site will reside? How long do the outages last?
5. What is the longest downtime on a monthly basis for maintenance and backup procedures?
6. Does the Web hosting service offer support for e- commerce, multimedia, scripting languages, applets, servlets, or other elements related to your site and its pages? Does the Web hosting service support the Secure Sockets Layer ( SSL) protocol for encrypting confidential data? Are additional fees required for these capabilities?
7. How are your Web site files uploaded to the server? What is the procedure for updating and republishing pages to your site? Does the Web hosting service limit the number, size, or type of files that you can upload?
§ Uploading files
· Use FTP (File Transfer Protocol) client software: the standard protocol, or set of rules, for uploading or downloading files over the Internet à CuteFTP, SmartFTP, or FileZilla ( freeware), PuTTY
o (Can gain access through a command-line interface or the Web Folders feature using a Windows OS)
o add the name and URL of the remote computer plus your assigned user name and password to the FTP client interface (get from hosting service provider)
o establish a connection between your computer and the remote computer using the FTP client.
· publishing feature included in your WYSIWYG editor\
o no need for a separate FTP client
o still must arrange for server space and provide access information
· command-line interface: type cmd in search box of Vista
o New site promotion:
Low budget:
§ manual search tool submission- register your site’s URL (sometimes afee required)
§ search engine optimization (SEO) techniques (better key words to find your site)
§ free link exchange: two companies benefit by posting each others links (reciprocal links). Can join link exchange program (sometimes free)
§ Web-industry awardà the Webby Award, Web Marketing Association, Forbes magazine
§ traditional word of mouth
High budget:
§ search engine paid or sponsored placementà Google AdWords, Yahoo! Small Business sponsored search, and Microsoft Digital Advertising Solutions Search Advertising
· pay- per- click basis — each time a visitor clicks on your paid or sponsored listing, you pay a small fee to the search tool.
§ a search tool submission service: a business that registers web sites with multiple search tools for you
· provide them with URL, a brief description of the site, and keywords to associate with the site.
§ an affiliate program:
· an e- commerce online advertising program in which a Web site--the advertiser--pays a fee or commission on sales generated by visitors driven to the site by links on other Web sites-- publishers. à Amazon. com Associates, iTunes Affiliate Program
· affiliate management network: a business that manages affiliate programs by helping to establish the relationship between advertisers and publishers, by monitoring visitors’ click- throughs, and by processing commission or fee paymentsà Google’s DoubleClick Performics
· must meet criteria to be accepted into an affiliate program
§ Web site advertising using an online advertising network: brings together companies that want to purchase online advertising and companies that want to sell ads on their sitesà Advertising. com, HispanoClick, and ValuClick Media
· Ad Types: cost determined by “impressions”- the number of times the ad is viewed, or on the number of click- throughs to the advertiser’s site.
o Banner ad (horizontal rectangle)
o Sidebar ad (vertical rectangle)
o Pop-up
o Pop-under: invisible until user clicks out of browser
o Rich media ads: flash movie and floating ads
§ opt- in e- mail advertising/ permission-based email advertising
o Web server log:
§ Tells you:
· The requesting computer’s IP address
· The browser making the request
· The date and time of the request
· The URL of a referring link ( the link the visitor clicked to jump to the site’s page)
· The path a visitor takes from page to page through a Web site
§ Web server log analysis software: evaluates and analyses excessive data
§ Can get a complete analysis (web analytics) from professional marketers: VisiStat and WebTrends
o Web analytics (aka web metrics): involves combining various types of visitor data — server log analysis, eye- tracking studies, tracking cookies, page tagging, sales data, and so forth — and then analyzing that data to discover how visitors act at a Web site.
§ unique visitor measurement: can help determine the success of your Web site promotional efforts at driving visitors to your site.
§ repeat visitor measurement: shows whether your visitors are finding useful information on your site
§ page views: page popularity
§ click- stream analysis: identifies how a visitor moves through your site by clicking from link to link and might also indicate how long the visitor stayed at each page.
conversion rate : the rate at which a visitor who is shopping at the site becomes a buyer of the site’s products or services.
No comments:
Post a Comment