Websites Design 101 Proper Standards, Designs, and Tips for Website Design from the Professionals TJ Swing & Ethan Gardner - January 4th, 2007 - 2:00 pm

Websites Design 101

Proper Standards, Designs, and Tips for Website Design from the Professionals

TJ Swing & Ethan Gardner - January 4th, 2007 - 2:00 pm

Introduction

•Host: TJ Swing Producer: Ethan Gardner

•Coffee Break Schedule

•Introduction Latest Updates

Coffee Break Topic Support Site Open Q&A

•All attendees will be muted until the Q&A session

•Click F5 to view this presentation in full screen mode

•Type in any important questions to Ethan during the presentation, or wait until our open Q&A afterwards

•Viewable recording and presentation download version will be available on the support site within 24 hours

Latest CE Updates

None at this time

Coffee Break Outline

History of the Internet

HTML, CSS, & JavaScript

Design Principles & Standards Fonts Colors Images Navigation


1962 - The Internet was the result of some visionary thinking by people who saw great potential value in allowing computers to share information on research and development in scientific and military fields. J.C.R. Licklider of MIT, was the first to propose a global network of computers.

1965 - Lawrence Roberts of MIT connected a Massachusetts computer with a California computer over dial-up telephone lines. This was the beginning of wide area networking.

1969 - The Internet was brought online and initially connected four major computers at universities (UCLA, Stanford Research Institute, UCSB, and the University of Utah). The early Internet was used only by computer experts, engineers, & scientists.

1972 - E-mail was adapted, giving the @ symbol a whole new meaning.

1973 - The ftp protocol, enabling file transfers between Internet sites, was published.

1986 – The internet, now using the standard TCP/IP protocol, was opened to the public, but was still limited to research, education, and government uses since the Internet was initially funded by the government. Commercial uses were prohibited unless they directly served the goals of research and education.


1991 - a new protocol for information distribution was born, which became what we know now as the World Wide Web, and was based on hypertext - a system of embedding links in text to link to other text. (hyperlinks)

1992 - Delphi was the first national commercial online service to offer Internet access and email connection to its subscribers.

1993 – The development of the graphical browser, Mosaic, gave the web a big boost. Later, Netscape Corp. produced the most successful graphical type of browser and server until Microsoft developed its MicroSoft Internet Explorer.

1995 - All pretenses of limitations by government on commercial use disappeared when the National Science Foundation ended its sponsorship of the Internet backbone, and all traffic relied on commercial networks. AOL, Prodigy, and CompuServe came online.


Internet Fact

Did Al Gore invent the Internet?

According to a CNN transcript of an interview with Wolf Blitzer, Al Gore said, "During my service in the United States Congress, I took the initiative in creating the Internet."

Al Gore was not yet in Congress in 1969 when ARPANET started or in 1974 when the term “Internet” first came into use. Gore was elected to Congress in 1976.

In fairness, Gore has probably done more than any other elected official to support the growth and development of the Internet from the 1970's to the present .

The Code Behind the Site

HTML – (hyper-text markup language) The coded formatting language used for creating hypertext documents on the World Wide Web

CSS – (cascading style sheets) A styling language that provides the ability to separate the layout and styles of a web page from the data or information.

JavaScript - is a script language that can be embedded into the HTML of a web page to add functionality. JavaScript should not be confused with the Java programming language.

There is a lot that goes on in the background of any website you visit. When you visit a website you see text aligned nicely, images properly displayed amongst the text, and hyperlinks linking out to other pages or sites.

What you don’t see are the dozens, hundreds, or sometimes thousands of html tags that hold it all together. Along with the HTML, is usually some CSS (cascading style sheets) and JavaScript.

There can possibly also be some server-side coding involved (Perl, PHP, Visual Basic, Java, ASP. Net, etc) and these programming languages usually use some sort of database

Most websites are constructed using tables, rows, and cells in an HTML code


HTML

<table>

<tr>

<td> content goes here </td>

</td> content goes here <td>

</tr>

</table>

The code below shows a table with one (1) row with two (2) cells inside of it

All content (text) should go inside of

table data tags

Always be sure to use the ending tag

Proper HTML should utilize an indented structure for easy

reading


Tags can have elements & attributes inside them to further the formatting or structure. An ELEMENT is a property name

An ATTRIBUTE is that element’s value.

 Wow HTML is cool! 

 I am red 

<table width=“100%” align=“left” cellpadding=“0”> </table>

<img src=“http://www.yahoo.com/pic.jpg” width=“200” height=“50” border=“0” />

<a href=“http://www.yahoo.com”>Click Here for Yahoo</a>

HTML


HTML uses tags to properly format and structure the webpage.

Most tags must have a beginning and ending tag: <tag>text</tag>

 = bold Click Me! Click Me! = italicize a quote a quote = underline The Title The Title

Put them all together Click Me! Click Me!

HTML

Always keep your tags nested properly.

When you first look at the HTML code on any mini-page of your site, it can be very intimidating. Below is what you would normally see…

 Welcome ##MEMNAME##, The Yale Club of New York City is your home away from home. <img style="WIDTH: 100%; HEIGHT: 1px" height=1 src="http://www. clubmac.org/Images/divlineBlue.gif" width=10000> What's New... Members' "Kick off the New Year" Party Thursday, January 11, 6:30 pm - 8:30 pm Welcome the New Year with fellow members at the lub, wehre you will have the opportuniyt to reconnect with old friends and meet new ones at this dazzling gathering. An overwhelming selection of hot and cold hors d'oeuvres, an open bar, and live piano music will be offered in the Main Lounge. The Activities Committee will introduce you to other members and update you on exciting events coming in 2007. Please note that this event is open to Club members and thier immediate family only. The business casual dress code will be in effect as well. Our Club Online Store Whether you are around the corner or across the country, you can order Club items and have them shipped directly to your home. The new online store offers active wear, outerwear, kids' wear, memboribilia, and travel gear. Show your Club spirit and visit <a href="http://www.port.com/yale">www.port.com/ </a>to shop 24/7. 


HTML

If you were to click the “Indent HTML” option in the lower left side of the editor, it will separate and indent it so it is easier to read.

······ ········· ············ ···············Welcome to Our Site!, ··············· ············ ········· ······ ······ ········· ············ ···············Our Fantastic Country Club is your home away from home. ············ ········· ········· ········· ·········<img width="10000" height="1" src="http://www.website.org/Images/divlineBlue.gif"

style="WIDTH: 100%; HEIGHT: 1px"/>


HTML

Notice the image tag, <img>, does not require an

ending tag, but instead places the slash at the end

of it’s opening tag

<table width="50%" border="1" cellspacing="0" cellpadding="10"> <tr> <td colspan="2" align="center" style=“color: #FF0000; font-weight: bold; font-size: 18px;">Here is the Title of my Table</td> </tr> <tr> <td valign="top">This is my top left cell <a href="http://support.clubessential.com">Here is a hyperlink</a> </td> <td> This is my top right cell <img src="http://support.clubessential.com/image.jpg" width="150" height="100"> </td> </tr> <tr> <td> This is my bottom left cell </td> <td> This is my bottom right cell </td> </tr></table>


HTML

As stated before, one can add many, many properties to format a website through HTML

But, the more and more formatting done in HTML can make it difficult to read or edit the code.

Cascading Style Sheets can centralize and globalize a good chunk of the formatting and clean up the HTML to make editing the content easier by not having to read through hundreds of HTML attributes.

h1 {font-size: 16pt;font-weight: 400;font-family: tahoma, helvetica, sans-serif;text-transform: lowercase;color: #095495;display: inline;}

Here is an example of a style tag in a CSS file for <h1> tags. What this does is allow you to change the style in one place, and then any <h1> tags in the site will use the same style.


CSS


CSS

Styles can be placed in three different places

•In an external file

•In the head of a web page

•Directly in an HTML tag


CSS

All major browsers support Cascading Style Sheets.

The average Clubessential client’s Cascading Style Sheet is about 1,300 lines long

Design Principles & Standards

Use Appropriate Fonts

Choose Colors Wisely

Optimize your Images

Website Navigation

Fonts


In the larger scheme of web design - graphics, video sound, animations, interactive forms and so on – font-type seems like such a small insignificant thing. However, few things can derail a site's accessibility and usability more than its typography.

Regardless of the whiz-bang and prize-worthy design that may be on your site, none of it matters if the font-type doesn't display properly, is difficult to read, or isn't widely used.


There are 3 categories of font types:

Serif,. have little “feet" at the ends of each character. This font type is reserved for headlines and titles which have shorter line lengths. Common serif typefaces include Times Roman, Garamond, and Palatino.

Sans serif, don't have these ‘feet’ and as a result, screen reading is easier for long passages of text. Common sans serif typefaces include Helvetica, Arial, and Avant Garde.

Decorative typeface is everything that doesn't fit neatly into the other two categories. This would include script typefaces and many others. The fancier the font, the more it should be limited to logos or banners or for use as part of an image.


A few standards regarding type size are :

For text paragraphs, you shouldn't use anything smaller than 8pt type and no larger than 12.

For headings, use 14 – 24 pt type; NO LARGER.

Try to avoid using anything below 8 pt type (except for copyright notices, etc.) or higher than 24.

Use only a few different font sizes on your page. Too many will confuse the reader and disrupt the “flow”


There are five different font size formats Point Index Pixels Em %


Point Sizes(Same as Word)

Index Sizes


Most typefaces have at least 3 variations: normal, italic (slanted), and bold.

Type sizes are not standard. Meaning, one size in a particular typeface is not necessarily the same size as the same point size in another face.

Stick with common, everyday fonts. If your members do not have the font you have chosen loaded onto their computer, your web pages will look completely different because their pc will substitute a font for the one missing.


DO NOTs for Fonts Do Not use more than three font types on your site. More than that will break up the consistency of the design and confuse users

Do not use fonts that aren’t options in the Axis Editor. The fonts listed in the Editor are chosen because they are web-safe fonts that are used by every browser.

Do not use extra large font sizes, PLEASE! Users that have a hard time seeing most probably already have their browser set to enlarge the font size. The rest of us who can see fine do not appreciate the extra large text.

Do Not underline any text that isn't a hyperlink. This will confuse the user to thinking he/she can click on it.

Do Not bold and capitalize every letter or word on your page. The user will think you are yelling at him/her, and this makes it harder to read.


Web Colors

POSITIVES NEGATIVES

Red Passion, strength, energy, fire, love, sex, excitement, speed, heat, leadership, masculinity, power

Danger, fire, blood, war, anger, revolution, radicalism, aggression, stop

Blue Seas, skies, stability, peace, unity, harmony, tranquility, calmness, coolness, confidence, water, ice, loyalty, conservatism, dependability, cleanliness, technology, winter

Depression, coldness, obscenity, conservatism, technology, ice, winter

Green Nature, spring, fertility, youth, environment, wealth, money (US), good luck, vigor, generosity, go, grass

Inexperience, envy, misfortune, jealousy, money, illness, greed

Yellow Sunlight, joy, happiness, optimism, idealism, wealth (gold), summer, hope, air

Cowardice, illness (quarantine), hazards, dishonesty, avarice

Purple Elegance, sensuality, spirituality, creativity, wealth, royalty, nobility, ceremony, mystery, wisdom, enlightenment

Cruelty, arrogance, mourning, profanity, exaggeration, confusion

Orange Energy, balance, heat, fire, enthusiasm, flamboyance, playfulness

Warning, danger, fire

White Reverence, purity, snow, peace, innocence, cleanliness, simplicity, security, humility, marriage, sterility, winter

Coldness, sterility, clinical, surrender, cowardice, fearfulness, winter

Black Power, sophistication, formality, elegance, wealth, mystery, style

Evil, death, fear, anonymity, anger, sadness, remorse, mourning, unhappiness, mystery

Psychology of Color


§ People will actually gamble more and make riskier bets when seated under a red light as opposed to a blue light. That's why Las Vegas is the city of red neon.

§ Bright red cars receive more speeding tickets than any other color of car.


Green has great healing power. Studies have shown that people who work in green environments have fewer stomach aches.


A specific shade of pink is used to calm violent prisoners in jails and has also been used in the University of Utah’s visitor football locker room to make the opposite team more “passive”.


An executive for a major paint company received complaints from workers in a blue office that the office was too cold.

When the offices were painted a warm peach, the sweaters came off even though the temperature had not changed.


Find 2 main colors to use for the site and stick with them. You can utilize white and gray along with these colors, along with different shades of your two colors.

E.g. Let’s say your club has chosen to use Burgundy and Tan as your two primary colors. Below is a chart of the different color shades you can use with these colors.

There are exceptions, however. When one of your two primary colors are a neutral shade (black, gray, or white) then it is acceptable to introduce a third color. It is preferable that this new color introduced is close to the original primary color on the color wheel. See example below.


DO-NOTs for Web Colors

Do Not use wild, bright or bold colors that are not part of your site color scheme. Stick with your site’s color scheme; introducing wild or non-site colors will confuse the user and break the color scheme of the site

Do Not overuse colors. Colors are only used in the body of a webpage to accent or compliment text or an area. Every area of the page does NOT need to have color; white space is your friend.

Do Not try to use a different color scheme for each page on the site. Admin try to make each page unique by applying a different color to it, this is highly improper web color standards.

Do Not apply a highlight color to text. If you need to, use a table or cell and apply a background color to that.


Web Images


GIF - Graphics Interchange Format. Best for images with only a few distinct colors, such as line drawings,

black and white images and small text that is only a few pixels high

•supported by practically all web browsers

•can include transparent backgrounds

•faster loading (smaller size)

JPEG - Joint Photographers Experts Group best suited for photographs and complex graphics

Advantages

•only support 8-bit color (256 colors)

•handle dithering poorly

•lose their detail

Disadvantages

•superior in rendering color and detail (16 million colors )

•greater compression options

Advantages

•no transparent backgrounds

•larger file size than GIFs

Disadvantages


Image sizes follow the same rules as font sizes. DON’T USE AN EXTRA LARGE ONE.

Use thumbnails if you want the member to be able to view a larger pic

Don’t upload an 800x600 pic if you only plan on using it at a 160x120 size. It will maintain the higher file size and take longer to load

Keep your image ratio locked when resizing them in the editor

320 x 240

160 x 120 60 x 80


Original After Touch-ups






www.photoshop.com $600

www.paintshoppro.com $129

www.ultimatepaint.com FREE


DO NOTs for Web ImagesDo Not exceed your allowed space with an image. Always resize images to fit your site. Make sure you image isn’t so big that it causes your website to “blow up”.

Do Not make a gallery of large photos on a page. Use thumbnails to display a series of images. Users can always click on it to see full size and it wont take up to much web real estate.

Do Not place an ugly or extra large image on the site. Whenever possible edit, resize and touch-up image before uploading to the site.

Do Not distort image dimensions. Make sure to adjust the height if you change the width so not to stretch or squash your image


• A clean-cut and uniform navigation system is a must.

• If you have too many links then you should use drop-down menus or fly-outs for your main topics. Keep the Top-Level navigation items to a minimum, utilize your sub and third tier navigation to keep from overwhelming the user.

• There is no harm is showcasing important links (even repeated links) that you think might interest the user. Create text or image links to most popular pages on home page or landing pages.

• Use your navigation space efficiently. Use short, clear and precise words in your links so that your users know what the corresponding page will contain. Don’t confuse the user with fancy or vague titles.

• Remove empty or unused pages from your sites navigation. These only clutter the nav and confuse users


Website Navigation

Internet Facts

Internet Stats

Browser Types 70% - IE 6 12% - IE 7 11% - Firefox 2% - Safari 2% - IE 5 1% - Mozilla 1% - Opera 0% - Netscape

Screen Resolutions 52.55% 1024×768 12.76% 800×600 12.10% 1280×1024 6.69% 1280×800 15.9% Other

Operating Systems Windows XP - 85% Windows 2000 - 5% Mac OS X - 3% Windows 98 - 2% Linux - 2%

The End

Thank you for attending.

Contact your account manager for any further help on this subject.

Visit the support site to learn more about this subject or any other product or service.

support.clubessential.com

Documents

Websites Design 101 Proper Standards, Designs, and Tips for Website Design from the Professionals TJ Swing & Ethan Gardner - January 4th, 2007 - 2:00 pm