2006 Color and Logo Guide
| Libertarian Party of the USA Graphics and Logo Archive | LP Graphics | State Affiliates |
|---|---|---|
| The Libertarian Party of the United States of America has used various colors and logos over its years of existence. This is a repository for current and past national presidential campaign graphics, national party headquarters mastheads and other audiovisual media, with website design advice which may aid future campaigns in selecting colors and logos which may resonate with the voting public.
It may also be of historic value. |
2005-08 | 2005-08 |
Web Standards and Style Guidelines
INDEX
1. Introduction.This instruction book may guide you through the creation of a website or content for a website.
2. Libertarian Party Logos. Logo size, color and placement recommendations should be followed to enhance familiarity with the LP.
3. Accessibility standards. There are a multitude of ways for a the average person to make sure that their site is accessible to either the vision or hearing impaired.
4. Colors. Most people have their OS set to 65 thousand or millions of colors, thus web safe 8-bit color pallets are no longer needed. "Approved" Libertarian Party of the USA colors are in this section.
5. Typography. Writing content for the internet is much the same as writing for or doing layout on a newspaper or magazine.
6. Images. The first image format used on the internet was GIF (Graphics Interchange Format), created by CompuServe in 1987. Image formats have changes little since then, giving just two more options for internet use; JPG and PNG. JPG (or JPEG) is the most popular format becaause it offers immense compression abilities while maintaining image clarity.
7. Multimedia. Computers can present text, graphics, sounds, and animations. Multimedia uses massive bandwidth, so special software is used to manage the user experience. Flash is one solution being used in a majority of websites created today.
8. Browser compliance. Browser standards compliance has improved. Scripts now can be run to choose the appropriate CSS file depending on the version of either IE or Mozilla being used.
9. Resources. A list of resources that will help you with the creation of your websites and content for them.
Introduction
When surfing the web we often see large corporations and universities using a multitude of templates and appearing as though each page has nothing in common with the main company or university. Not to say there is anything wrong with individuality, because there is not. This guide is here to help you be individual while keeping similar motifs and themes to those used by other Libertarian Party webmasters, past and present.
This guide should help create a more cohesive web experience for people who will be browsing the Libertarian Party web presence.
Libertarian Party Logo Use
Figure 1
MINIMUM SIZE: The minimum height for the LIBERTARIAN PARTY bluestatuegoldcoin wordmark (figure 1.) is 39? pixels. translating into a 198? pixel wide image. The border is not part of the wordmark.
MAXIMUM SIZE: The maximum height for the LIBERTARIAN PARTY bluestatuegoldcoin wordmark (figure 1.) is 86? pixels. translating into a 435? pixel wide image. The border is not part of the wordmark.
COLORS:
The logo should only appear in the following web colors:
White #FFFFFF
Black #000000
Blue #0065A4
Gold #
Yellow #
Word Mark Use
Figure 2
MINIMUM SIZE: The minimum height for the Libertarian Party bluestatuegoldcoin (figure 2.) is 15? pixels. translating into a 233? pixel wide image. The border is not part of the wordmark.
MAXIMUM SIZE: The maximum height for the Libertarian Party bluestatuegoldcoin (figure 2.) is 28? pixels. translating into a 435? pixel wide image. The border is not part of the wordmark.
COLORS:
The word mark should only appear in the following web colors:
White #FFFFFF
Black #000000
Blue #0065A4
Gold #
Yellow #
Logo Use The logo should only be used in conjunction with the word mark as in figure 1.
Accessibility Standards
The Internet is having a very positive impact on the lives of adults with disabilities by allowing them to be better informed, more connected to the world and to people with similar interests and experiences.
- Provide aids to navigation for screen reader users such as:
- an invisible link tag at the top of your code (beside the <body> tag) which allows the users to skip navigation links in order to get quickly to the main content of the page
- proper markup for identifying the page title (i.e. an hl element)
- Provide text equivalents for images and image map hot spots (using useMap=â€mapID†tags) within the HTML code.
- Provide null text equivalents on decorative images (using alt=â€â€ tags) within the HTML code.
- Identifying row and column headers for data tables
- Use Programming to associate labels with form fields
- Supporting browser settings for enlarging text and user style sheets (ie using percentage widths and percentage/em sizing for fonts.
- Using consistent navigation mechanisms and style of presentation throughout the site. As an example, do not move the menu once you get into the content pages of your site. This will make it confusing for a visually or audibly impaired person to follow the navigation of your site and they will eventually get annoyed and leave you site.
- Provide the ability to navigate your website using the keyboard.
- Identifying the primary natural language of each page with your meta tags.
- Although JavaScript is used on some websites, essential functions on pages can not require it. If you use JavaScript essential functions, you MUST test for compatibility with assistive technologies. Such as the two listed below.
- Provide accessible HTML alternative versions of Flash content or if you are using Flash 8, use the accessibility features built into the application.
Accessibility Tools IBM Homepage Reader version 3.04 - http://www-306.ibm.com/able/dwnlds/hpr4trial.html Jaws Screen Reader - http://www.freedomscientific.com/fs_products/software_jaws.asp
Colors
Most people have their OS set to 65 thousand or millions of colors, thus web safe 8-bit color pallets are no longer needed. "Approved" Libertarian Party of the USA colors will be in this section someday.
| Costa Rica Movimiento Libertario 2007,[1] | Americans for Limited Government GetLiberty.org 2007,[2] |
Libertarian Party of Canada 2007,[3] | Libertarian Party of USA (LNC) 2007,[4] approximate colors | Blend 4 | Adam Smith Institute 2007[5] | Adam Smith Institute 2007[6] | Acton Institute for the Study of Religion and Liberty 2007[7] | Alliance for the Separation of School and State 2007,[8] | |
|---|---|---|---|---|---|---|---|---|---|
| http://www.movimientolibertario.co.cr/images/mov_logo.gif | Torchlight #e9b038 | Green | #eeb534 | #92A3AE | #75838B | BorderB #BCBCBC | #DDD | Font #e5CB7e | |
| Atlas Economic Research Foundation 2007,[9] | Torch #3E6B61 | Table Background #F0FFF0 | Text and Boxes #A12830 | #B6BDD2 | #1c4a40 | BorderL #DDD | #DDD | Border #E9CB51 | |
| http://www.atlasusa.org/V2/images/mock_01.gif | Torch shadows #225046 | Table Background #F0FFF0 | #151b7e | #B6BDD2 | #2A343A | Background #FAD163 | Background #A12830 | Background #618747 | |
| #363636 | Table Background #F0FFF0 | #151b7e | #3C4A53 | ASmithBckgd #f2f2f2 | #0064A1 | #FFF | TextHeading #FFFAFA | ||
| #363636 | Table Background #F0FFF0 | #0A246A | #B6BDD2 | ASmith #747474 | BorderRandB #E6E6B7 | #999 | TextBody #FFFFE0 | ||
| #363636 | Table Background #F0FFF0 | Background2 #D6DADA | #B6BDD2 | ASmith #F5F5C1 | Background2 #EFEFD2 | Background2 #39ae41 | Background2 #79A659 |
Using more than five colors in a map, chart or graph may indicate you are providing too much information or have not organized information in a relevant manner.
| U.S. Political Faction | Blend 1 | Blend 2 | Blend 3 | Blend 4 | Blend 5 | Blend 6 | Blend 7 |
|---|---|---|---|---|---|---|---|
| Democratic | Blue #1414F5 | Red #F51414 | Blue #1414F5 | Red #F51414 | Blue #1414F5 | Red #F51414 | Blue #EEEEFF |
| Green | #53F500 | #53F500 | #53F500 | #53F500 | #53F500 | #53F500 | #EEFFEE |
| Libertarian | Yellow #F5F500 | Orange #F58414 | Yellow #F5F500 | Gold #FFDD00 | Orange #F58414 | Gold #FFDD00 | #FFEECC |
| Republican | Red #F51414 | Blue #1414F5 | Red #F51414 | Blue #1414F5 | Red #F51414 | Blue #1414F5 | Red #FFEEEE |
| Independent/Other | Gray #CCCCCC | Gray #DDDDDD | Gray #CCCCCC | Gray #DDDDDD | Gray #CCCCCC | Gray #E1E1E1 | Gray #DDDDDD |
| Electors Not Voting | White #F5F5F5 | White #F5F5F5 | White #F5F5F5 | White #F5F5F5 | White #F5F5F5 | White #F5F5F5 | White #FEFEFE |
| Illegal Voters | #F514F5 | #F514F5 | #F514F5 | #F514F5 | #F514F5 | #F514F5 | #FFEEFF |
| Ineligible Nonvoters HTML #0A0A0A |
#0A0A0A | #0A0A0A | #0A0A0A | #0A0A0A | #0A0A0A | Gray #B3B3B3 | Gray #999999 |
| Usage | Pie Charts where Dem, Rep & Nonvoters predominate |
Yellow #FFFFEE |
Libertarian Party Colors:
Through extensive testing (experimentation, research and general feedback) and our branding initiatives (critique, arguments, dialogues, and grasping for straws), the Libertarian Party has selected a recommended palate of colors to be used in Libertarian Party affiliated websites. Of course, each webmaster may experiment with other color palates.
See the color chart below for a full spectrum of Libertarian Party selected colors and their conversions.
LP Blue (Pantone ____) : HTML #______
LP Gold (Pantone ____) : HTML #______
LP Orange (Pantone ____) : HTML #______
LP Red (Pantone ____) : HTML #______
LP Yellow (Pantone ____) : HTML #______
Examples:
Black : #000000
Varsity Blue (Pantone 541) : #004882
U of T Blue (Pantone 301) : #0065A4
Varsity Red (Pantone 1807) : #B31B34
White : #FFFFFF
COLOR TOOLS
An excellent resource for matching and blending colors online is ColorBlender, where you can enter your RGB color and get 5 complimentary colors to match with your palate.[10]
Color psychology is a factor in your palette choices.[11]
Use a color wheel to find your colors.[12]
Yellow #FFFF00 to #FFF200
Yellow Gold #FFDD00 to #FFBF00
Color Contrast: Color on the internet is not only used to make the site more visually appealing, we also use color for accessibility and usability of text. The most color contrast you can get is black on white. The Color Contrast Analyser (CCA) is useful to help determine, in particular, the legibility of text on a web page and the legibility of image based representations of text. http://www.visionaustralia.org.au/info.aspx?page=628#cc
Typography
OFFICIAL FONTS The Libertarian Party's official fonts are Gill Sans (?) and Adobe Garamond (?). However since most of the people viewing the site will not have these fonts installed on their computer, we have opted for a more general choice of Arial (?) (PC Standard) and Helvetica (?) (Mac Standard).
FONT CHOICE Any font you use MUST be installed on the users computer in order for them to see it as you do. Keep that in mind when including fonts on your website. A good idea is to include a few fonts that you feel are acceptable alternatives to your choice. An example of this is used within the css file:
Body {font-family: ‘Trebuchet MS’, Arial, Helvetica, Sans Serif;}
In this example, Trebuchet is chosen as the first font of choice if the user has it installed on their system, other wise the font will default to arial, Helvetica or ANY Sans Serif installed on the users machine.
FONT SIZING When making your websites please DO NOT use pixel sizes for fonts as they cannot be resized by accessibility tools in any browser, instead use percentage or em sizes.
FONT STYLING When adding colors and styles to fonts please use CSS (Cascading Style Sheets) and not the html font tags. An example of proper font styling is:
Test
HEADING TAGS You may also want to code your H1 – H5 tags in this mannor.
SIZE Try to avoid making a font smaller than .75em or larger than 1.5em.
COLOR AND CONTRAST When choosing a color for a font, please refer to the Contrast guidelines outlined in the color section.
CSS AND FONTS For more information on creating a style sheet please refer to Friendly Bit’s Beginners guide to CSS and standards (http://friendlybit.com/css/beginners-guide-to-css-and-standards/)
Images
ALT TAGGING Make sure all your images have ALT tags because a screen reader, such as JAWS, cannot see an image to describe it to the visually impaired. A sample of proper ALT tagging is:
<img src=â€imgsrc.jpg†width=â€345†height=â€224†alt=â€Young man sitting in front of Simcoe Hall enjoying the sun.â€>
The reason for using both ALT and TITLE is for browser differences such as Safari for Mac and IE for PC.
IMAGE SIZING If you want to know what size to make an image for the internet, remember that a screen resolution is between 72 and 90 DPI (Dots per inch) therefore in an image editor such as photoshop when finding appropriate scale of an image, try using 72DPI as your guideline to the ACTUAL size of the image.
IMAGE FORMAT – PRO & CON
Choosing between JPG, GIF, and PNG formats is really a matter of preference, bandwidth, server connection speed, browser compatibility, and user connection speed. Within the universities network, use whichever compression method that gives you a smaller file size.
JPG or JPEG When compressed with JPEG, vector style images such as interface graphics show pixilation around the edges of shapes and text. JPEG algorithm is best at compressing smooth tonal transitions and does not properly reproduce the harsh transitions at the edges of vector style graphics. Choose JPG when using photographs on your website. Don’t use any compression under 60% as it will be too pixilated and blurry for proper use.
- Tip - Save your original uncompressed images! Once an image is compressed using JPEG compression, data is lost and you cannot recover it from that image file. Always save an uncompressed original file of your graphics or photographs as backup. You should also remember to keep their file names the same so you don’t get confused when working with hundreds of images.
GIF GIF files incorporate a compression scheme to keep file sizes at a minimum, and they are limited to 8-bit (256 or fewer colors) color palettes. Several variants of the basic GIF format add support for transparent backgrounds and interlaced GIF graphics popularized by Netscape. The GIF file format uses a relatively basic form of file compression that squeezes out inefficiencies in the data storage without losing data or distorting the image. The LZW compression scheme is best at compressing images with large fields of homogeneous (single hues shaded and highlighted) color. It is less efficient at compressing complicated pictures with many colors and complex textures. Choose GIF when using technical drawings or maps.
PNG Portable Network Graphic (PNG) is an image format developed by a group of software developers as a alternative to the GIF image format. PNG graphics were designed specifically for use on Web pages, so offer a range of attractive features that should eventually make PNG the most common internet graphic format. These features include a full range of color depths, support for sophisticated image transparency, alpha transparencies, better interlacing, and automatic corrections for display monitor gamma. PNG images can also hold a short text description of the image's content, which allows Internet search engines to search for images based on these embedded text descriptions. Unfortunately, the PNG graphic format is not yet widely supported, and the current implementation of PNG graphics in the major Web browsers does not fully support all of PNG's features. Do not make a full commitment to PNG graphics until you are sure that most of your audience is using a browser that supports PNG.
Multimedia
APPLICATIONS FOR MULTIMEDIA Web designers must always be considerate of the end user. Because multimedia files generally take longer to load they should be used sparingly and judiciously. When thinking about adding media to your Web pages, consider first and foremost the nature of your materials. Use images, animations, video, or sound only when relevant to your message.
VIDEO Video is the most challenging multimedia content to deliver via the Web. One second of uncompressed NTSC video uses about 27 megabytes of disk storage space. The amount of compression required to turn this quantity of data into something that can be used on a network is significant, sometimes so much so as to render the material useless.
PROCESSING
- Process the audio. Perform the audio normalizing and equalizing mentioned above.
- Trim clips. Make sure that your movie begins and ends with frames that make sense as still images. The first frame will appear on the user's screen while the movie is loading, and the last frame will remain on screen when the movie has finished. Take care that these images do not seem awkward out of the context of the movie.
- Crop. Use video editing software to crop out unwanted noise or borders from the movie image.
- Scale. Most Web video is sized to quarter-screen (320 x 240 pixels) or smaller.
- Image quality. Reducing the image-quality setting of a movie reduces the data that is stored for each frame.
- Frame rate. Standard NTSC video has a frame rate of 30 fps. Most Web video is set to about 10 fps.
- Codec. Some codecs (compressors – decompressors) compress more efficiently than others do, though usually at the expense of image quality.
- Custom filters. Compression software provides filters that reduce the differences between frames, permitting more efficient compression.
- Audio. The audio track of video can be downsampled and/or compressed to reduce the overall movie data rate.
Applications for Multimedia The use of multimedia on websites, portals and intranets for advertising, promotion, visual effects, animation, training, web casting, course materials are becoming the norm and continues to grow in use. The downside is it is very resource intense to host multimedia and requires substantial bandwidth for the user to view and organizations to deliver. Bandwidth issues are a major contrain with the use of wireless technology and this is especially in the case of wireless use at U of T. It is imperative that the goal, audience, quality, distribution methods, types of Internet connectivity, and production format be considered during the planning stages when using multimedia. The key to successful web multimedia is to tailor the content for web delivery to the intended audience. Video is the most common type of multimedia used and there are two phases to Multimedia, production and the presentation on the website to the user. The following is an outline some of the delivery types, multimedia formats, compression considerations and display formats that are commonly used.
Delivery Types The most challenging multimedia content is video plus audio whereas pure audio content is less resource intense and easier to deal with. The three major types of audio and video delivery on the Web are streaming, progressive and download.
- Streaming media is live and/or archived audio or video content, delivered in almost real-time to an end user's computer via the Internet. It's also referred to as video-on-demand. Streamed presentations are viewed as they are downloaded, and generally not stored on the clients system. Streaming allows users to jump forward or backward to different sections with little delay. This is the most common form of delivery.
- Progressive media downloads a copy of the file to the users computer. Viewing can begin before the download is complete but is delayed with while the file is progressively downloaded. This method requires the media file to be played from the beginning to the end. Progressive download is usually not desirable with low speed bandwidth connections. Progressive downloading files are generally of higher quality than streaming.
- Download a copy of the file is downloaded to the users computer to be viewed later and has been used for distributing promotional or course materials. This is not commonly used.
The following table summarizes the differences between video delivered by streaming and progressive download.
Delivery Types
Benefit Streaming Progressive Download
Live broadcasts X
Fast start X
Long clips X
Immediate random access to different parts of a movie X
No specialized server X
Consistent high-quality playback at any connection speed X
Content downloads to client machine X X
Content remains on server
(cannot be saved by viewers) X
Media Formats In order for a user to view multimedia content a specific player is required for the media format type presented on the web. There are many multimedia file formats to choose from and common examples are: RealMedia, QuickTime, Windows Media and Flash. Each of these technologies provides streaming and downloadable video options. Free media players for viewers are available from the software vendors however most browsers automatically install these players during installation.
Format Option Player Info. Online Windows Media Windows Media Player 10 http://www.microsoft.com/windows/windowsmedia/default.mspx RealMedia RealPlayer Plus http://www.real.com/ QuickTime QuickTime 7 with iTunes 6 http://www.apple.com/quicktime/ Flash Flash Player 8 http://www.macromedia.com/shockwave/download/
Compression Considerations
The recording and digitizing of uncompressed motion video requires large storage requirements. As an example one second of uncompressed NTSC video uses about 27 megabytes of disk storage space. In order to make the file and bandwidth requirements more reasonable a software filter or Codec is used in conjunction with setting frame size and frame rates. A Codec, is used to compression video during production and is used to decompress when the user views the video via a player. There are numerous Codecs that are available and the types will depend on your final delivery format (ie avi, wmv). Software is required to compress, render video frame size and frame rates for use on the web. (See Rendering/Encoding software below)
The video frame size is the dimensions of the frame image to encode or the size of the display window in which your movie plays. These setting controls the pixel dimensions of the images to be encoded which is a major consideration on the type and speed of the users connectivity. The resize operation reduces image information it has a considerable effect on the encoded file size. The best size is highly dependent on data rate, frame rate, codec, source material and personal preference. These factors are all interrelated so experimentation is the best way to find the optimal setting for your project.
Frame Size Guidelines
Connection Speed Frame Size
56k Modem (Low Bandwidth) 176x144
256k/ISDN (High/Mid Bandwidth) 320x240
T1/Cable Modem ( Very High Bandwidth ) 640x480
The video frame rate is how many frames are displayed each second. Higher frame rates produce smoother motion in your movie. Higher frame rates also create larger files. Again, experimentation is the best way to determine the optimal frame rate for your project.
NTSC Frame Rates
- 10 fps - every third frame is shown and can be used if there is small incremental change in the video otherwise the video appears choppy.
- 15 fps - every other frame is shown and can be used in most case without looking choppy. Frame rate can be increased to compensate to produce smoother video and for most practical purposes using 15/20 fps produces good results
- 30 fps - all frames are shown and is considered to be full motion video and not normally used over limited bandwidth connections
Audio component of Video
To further reduce the video file size, the audio track of the video can be compressed by taking a sample of the original file and reducing the bit rate. However reducing the bit rate reduces the sound quality. A 16-bit sample rate is good for music but 8-bit sample rate is sufficient for voice. Another way to reduce an audio file is to lower the frequency rate. This method, measured in kilohertz, indicates how often a sample is created throughout the original file. CD audio has a frequency rate of 44.1 KHz but when reduced to 22.05 KHz still has very good quality. Encoding your audio from stereo to mono is a typical tool used to reduce file sizes. The type of audio will ultimately determine how low you can take your sampling rates.
Audio Sampling
CD quality Reasonable fidelity
Music 96-320 kbps, 44 -48 KHz, stereo 12-32 kbps, 22- 32 KHz
Mono or stereo
Voice 22.05 KHz, stereo 11.025 KHz, mono
Rendering/Encoding Software There are many sources of professional editing software that take raw video and render into a format for web applications. Other software only does specific steps so multiple applications are required. The compression process can occur in different ways; it can be applied within the editing program on the final export or used with a separate application like Media Cleaner 5, Real Producer or Sorenson Squeeze. Compression from an editing program may have limits in formats and codecs but all can be transferred to the applications listed below as uncompressed files too create the different file formats.
Producer Codec Software URL RealNetworks RealProducer Free http://www.realnetworks.com/products/producer/basic.html Apple QuickTimeBroadcaster Free http://www.macmusic.org/softs/view.php/lang/EN/id/667/?vRmtQjpAznOhMaS=1 Microsoft Windows Media Encoder 9 Series. Free http://www.microsoft.com/windows/windowsmedia/9series/encoder/default.aspx Digital Digest DivX Codec - DivX Digest Commercial Product http://www.divx-digest.com/software/divxcodec.html Intel Intel's Integrated Performance Primitive Commercial Product http://www.intel.com/cd/software/products/asmo-na/eng/perflib/ipp/index.htm?ppc_cid=ggl%7Cspd_us_library_ipp%7Ck4824%7Cc
Animation Flash etc
Best Practices
1. Use standard formats and codecs – if not users will have to download before using
2. Geographical user considerations for public websites – websites should be targeted for international users as well as local
3. Design multimedia for low speed bandwidth connections but have options for higher speed connections.
4. Minimize the use of multimedia on main sections of websites
5. Do not use auto load multimedia for entry into a site (ie Flash introductions)
6. For intranets or portals the users many be local and have access to higher speed connections and different design consideration may apply.
- Use streaming
- Make media available in other than web format. (ie promotional DVD)
Appendix A
The following are general guidelines that can be applied to when creating typical media files in Window Media, Real and Quicktime formats
Target Format Template Option Description File Extension Windows Media
Audio
5 Kbps voice Use this setting for streaming voice, or streaming mono FM radio and music, or streaming stereo radio and music or streaming stereo radio and music over 56 Kbps modems. WMA 20 Kbps mono for 32 Kbps stereo for 56 Kbps modems 48 Kbps stereo for 56 Kbps modems 64 Kbps stereo music Use this setting to encode stereo music at near-CD or CD quality. 96 Kbps stereo music 128 Kbps CD – transparency audio Use this setting to encode CD-transparency audio for delivery over high-speed Internet and LAN connections. 160 Kbps stereo music Use this setting to encode stereo music at CD transparency. 128 Kbps CD quality audio, 24 bit stereo Use this setting to encode CD-transparency audio for delivery over high-speed Internet and LAN connections. Windows Media
Video
28.8 Kbps video Use this setting for streaming video and audio over 28.8 or 56 Kbps modems. WMV 56 Kbps video 100 Kbps video Use this setting for video and audio delivered over corporate LAN or dual-channel ISDN. 256 Kbps video Use this setting for video and audio delivered over DSL, LAN, or cable modem. 512 Kbps video Use this setting for high-quality video and near-CD-quality audio delivered over LAN or cable modem. 1 Mbps video Use this setting for very high-quality video and near-CD quality audio delivered over high-speed Internet and LAN connections. 3 Mbps video Use this setting for high-quality video playback from a CD-ROM. Real 28.8 Kbps audio .Use this setting for streaming music over 28.8 or 56 Kbps modems. RM 56 Kbps audio 64 Kbps audio Use this setting for stereo music delivered over Intranet, DSL or dual channel ISDN. 100 Kbps audio 28.8 Kbps video Use this setting for streaming video and voice over 28.8 or 56 Kbps modems. 56 Kbps video 100 Kbps video Use this setting for video and voice delivered over corporate LANs and dual-channel ISDN connections. 256 Kbps video Use this setting for video and voice delivered over DSL or cable modem. 512 Kbps video Use this setting for video and voice delivered over cable modems, DSL, and LAN connections. 1 Mbps video Use this setting for video and voice delivered over high-speed Internet and LAN connections. 3 Mbps video Use this setting for high quality video playback from a CD-ROM. QuickTime 28.8 Kbps audio Use this setting for streaming audio-only or streaming over 28.8 or 56 Kbps modems. MOV 56 Kbps video 100 Kbps video Use this setting for 100 Kbps network connections (LAN, Dual ISDN). 256 Kbps video Use this setting for 250 Kbps network connections (Cable Modem, DSL). 512 Kbps video Use this setting for 512 Kbps network connections (Cable Modem, LAN). 1 Mbps video Use this setting for 1 Mbps networks (near-CD quality). 3 Mbps video Use this setting for high quality video playback from a CD-ROM.
Appendix B
Here are some examples of compressed digital video clips in Windows Media, Real and QuickTime formats from an original video file size of 1.8 GB (4.16 minutes 320x240 Display Size and 30 fps) . The intent is to provide best practices and techniques used for compressing digital video for Web distribution.
Low Bandwidth Speed Connection
Player Capacity Video Quality Audio Quality File size Frame rate Display size Target Connection RealPlayer 9.0 MPEG-4 /Fractal small; RealVideo 9 8 Kbps; Music mono 3 MB 15 176X144 Use this setting for streaming music over 56 Kbps modems. Windows Media Player 9 Windows Media Video 9, MPEG-4/Fractal small Windows Media Audio 9.1; 22kHz; 16 kbps; mono 1 Mb 15 176X144 Use this setting for streaming video and audio over 56 Kbps modems. QuickTime 7 Sorenson Video 3 11.025 kHz; mono 2 Mb 15 160X120 Use this setting for streaming over 56 Kbps modems.
Medium/High Bandwidth Connection
Player Capacity Video Quality Audio Quality File size Frame rate Display size Target Connection RealPlayer 9 336/224 kbps RealVideo 9 44 kbps; Stereo music 7 Mb 30 320X240 Use this setting for video and voice delivered over DSL or cable modem. Windows Media Player 9 227 kbps, Windows Media Video 9; Compression Windows Media Video 9 ;22 kHz; 32 kbps; stereo A/V CBR 8 Mb 30 320X240 Use this setting for video and audio delivered over DSL, LAN, or cable modem. QuickTime 7 Sorenson Video 3 MPEG-4 Audio; 32 kHz; mono 7.8 Mb 15 320X240 Use this setting for 250 Kbps network connections (Cable Modem, DSL).
High Bandwidth Connection
Player Capacity Video Quality Audio Quality File size Frame rate Display size Target Connection G2RealPlayer Smoothest motion video; RealVideo G2 96 kbps; Stereo music 30 MB 30 640X480 Use this setting for video and voice delivered over high-speed Internet and LAN connections. Windows Media Player 9 Windows Media Video 9 96 kbps Windows Media Audio 9.1, Stereo (A/V CBR) 32 Mb 30 640X480 Use this setting for very high-quality video and near-CD quality audio delivered over high-speed Internet and LAN connections. QuickTime 7 320x240, 29.97 fps, Sorenson 3 compression (best). 48,000 Hz, 16 Bit, Stereo, QDesign compression. 30 Mb 29.97 640X480 Use this setting for 1 Mbps networks (near-CD quality).
BROWSER COMPLIANCE
Website Features and Information
Construct your website as a "liquid, tableless layout." Your website will be faster, more easily navigated, and one that ports to different browsers and other modern internet devices with ease. Whether your user is on a desktop, laptop, tablet PC, handheld device, or even a cell phone, your site should function flawlessly. Include the following:
- Brighter, cleaner look and layout. Faster browsing. Compatible with all Internet devices.
- Layout automatically switches to a printer-friendly format when you print a page.
- Toggle a preview of the printer-friendly format with the printer icon in the upper right-hand corner of every page.
- Brighter color schemes. Click the red-green-blue icon in the upper right-hand corner to cycle through all available color schemes.
- Contact Us form. No more "spam-resistant" e-mail links.
- Tool to search the domain.
- Standards compliant pages. Click the W3C logo, which appears on the bottom of each page, to test our compliance. Please contact us if we fail.
Separate the style elements, which describe the layout of the pages (e.g., colors and fonts), almost completely from the content of the pages. If an Internet device cannot reach or understand your style elements, it will simply ignore them and degrade gracefully to an extremely simply layout. A side-benefit is that your pages will be 25-50 percent smaller than before.
http://www.w3schools.com/browsers/browsers_stats.asp
VALIDATING YOUR CODE – (W3C Validation) For some, the process of validation gets in the way as they create web content. That's a fairly dangerous attitude. Integrate validation into your creative process. Validate early and often. There are three reasons to validate your work. Each of them support the principle of adherence to specifications.
1. It Helps Resolve Cross-Browser, Cross-Platform And Future Compatibility Issues
By creating files that are syntactically correct, you stand the highest probability that your page will work properly in the greatest number of devices, software and operating systems available today or emerging tomorrow. Using the most widely supported industry standards is a method of safeguarding your designs against future shock.
Validating XHTML/HTML files does not ensure browser compatibility but it is a step in the right direction. This is not as big an issue as it is with CSS for many reasons. Review your files in multiple browsers but, since we are dealing only with structure here, the browser compatibility issue will not rear its ugly head as it will with CSS.
2. Search Engine Visibility
Search engine spiders crawl through web sites and index your pages so others may find you. By using the elements and attributes as they are supposed to be used, your pages are more easily understood by search engines and, therefore, reached by more users.
3. It's A Learning Tool
Validating your files is an invaluable learning experience. Validation itself will teach you what are the best ways to create your XHTML/HTML and CSS files. The more you use validation, the faster you will create well-formed documents. You will not repeat mistakes.
Resources
Content Style guides
- Oxford Dictionary of American English
- The Chicago Manual of Style
Accessibility Resources
- Inaccessible Website Demonstration - http://www.drc-gb.org/open4all/newsroom/website3.asp
- SNOW– Special Needs Opportunity Windows http://snow.utoronto.ca/
- What Is Web Accessibility? http://www.alistapart.com/articles/wiwa/
- Horton & Lynch Web Style Guide: http://www.webstyleguide.com/index.html?/contents.html