LIS 5315 Week 7

Week 7

Creating Web Sites ch. 13& 14:

Chapter 13-“Making money with your site”: Internet commerce is a huge industry. This chapter focuses on some things you will need to consider if you want to sell things online using your website. If you sell actual products, you need a virtual shopping cart so your customers can collect the items they wish to purchase, and you need a way to take payments – PayPal is a front runner in web transactions for small businesses.

The internet also offers other opportunities to make money by selling ad spaces on your website. Two popular affiliate programs are Google Adwords and Amazon Associates. Both these programs allow you to earn a small bit of cash when your site users click on their ads.

Chapter 14-“JavaScript & DHTML”: According to this chapter, JavaScript is a programming language which can be used to create interactive features on your website. JavaScript can be used to dynamically effect HTML, you can have text grow and shrink, have something happen when a user rolls the mouse over a certain area, use JavaScript to transform text into a special font that your user may not have on their computer, and many other things. JavaScript can help with forms and prevent someone from going any further until they complete certain sections. JavaScript can react to actions and do things when a user clicks on a picture etc. Modern browsers all recognize JavaScript, but it is possible for a user to turn off the JavaScript so one should make sure the website still looks okay if the JavaScript is disabled.

Principles of beautiful web design ch. 5:

Chapter 5-“Imagery”: There are many concerns dealing with imagery. One must consider file types, resolution, sources of photography, as well as artistic aspects. Any picture image (as opposed to text image file) on a website immediately draws the viewer in and gets them to consider the content. You want images to be: relevant, interesting, and appealing visually.

One must find legitimate sources for any images one wants to use. The 3 options are: create it yourself, buy stock images, or hire a professional. Doing it yourself can be fun and possibly cheaper, but takes considerable time. Purchasing stock images can be expensive although not always. Free images are available but make sure your use falls within the guidelines.

Review the following websites:

I Love Typography (resource site) http://ilovetypography.com/

This truly is a website for those who love typography and fonts. There are pictures of fonts, photos of fonts in use (karmann ghia written on the side of the car uses a unique font), and lots and lots of links to articles about fonts. There are also many links to font shops (i.e. www.fontfont.com) where one can purchase fonts. There is an interesting article on “What the font” which is a website where you can upload an image of a font and it will try to identify it for you. You must save the font in question as an image and then upload it (see http://www.myfonts.com/WhatTheFont/). This could be quite useful to someone in design who has seen the perfect font to use for a project but doesn’t know the name and thus can’t find where to purchase this font. Another interesting article is “So you want to create a font” by Alec Julien (10/22/2007) http://ilovetypography.com/2007/10/22/so-you-want-to-create-a-font-part-1/. This gives a quick review of several font editing programs available (one of which you must have), plus things to think about if you really want to get into designing your own fonts. Actually, it is quite interesting, and although I understand what serifs and kerning mean, I admit I forget what tildes and eths are.

I Love Typography: 15 Examples of Excellent Web Typography http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/

This is part one of a two part article on examples of typography on websites. The author, Johno (this is a screen name from the comments and seems to be the author) has collected 15 websites which make “excellent use of type”. Part two will take a closer look at some of these sites. A List Apart (www.alistapart.com) is a site for people who make websites and is on the short list. Many of these sites are for font companies (Font Shop www.fontshop.com), professional designers or illustrators (Bear Skin Rug Shop- Kevin Cornell http://www.bearskinrug.co.uk/_store/). These are all really great sites and are just so much fun to look at because the images and fonts work so well together to create a wonderful overall style.

Typographica (Typography Journal and News) http://typographica.org/

Typographica is a journal of the typography world. It features news, reviews, commentary and such about fonts and typographic design. There is a book review of “Dangerous Curves” by Doyald Young, an interview with Cyrus Highsmith who is a designer at Font Bureau in Boston, and an article on favorite Typefaces of 2007. This is an annual review which invites 25 of the best graphic and type designers to pick their favorite font releases. Thirty typefaces are displayed in a thumbnail type image and one can click on that to get more details about that entry. I liked the Blaktur typeface by Ken Barber. It is reminiscent of the old blackletter typefaces but is modernized and slightly easier to read. Another favorite is Olicana by Nick Cooke. This is an attempt at mimicking someone writing with a quill pen and it comes with optional ink splotches one can apply to the text. It is fun and legible too. It really does simulate the flow of ink and would potentially be wonderful as added flair on a website—maybe for headings.

Microsoft Typography (resource site) http://www.microsoft.com/typography/default.mspx

This is a good source of typographic information produced by Microsoft. Their Typography group develops fonts and font technology and they have many resources for those interested in typography. Their site is very nicely laid out with main categories: About fonts, Resources, Developing Fonts, links/ news, and tools. They offer a free font property extension and a web embedding font tool. The Disagreeably Facetious Type Glossary (http://www.microsoft.com/typography/glossary/content.htm) is quite funny and enlightening too.

ABC Typography (virtual museum) http://abc.planet-typography.com/

This is a virtual museum of typography. There are 4 sections: classical typefaces (1480-1890), 20^th century typefaces, contemporary or modern typefaces, and unclassified or miscellaneous. This is a fascinating look at fonts over the centuries. It is quite easy to scroll through and pick fonts to view. The typeface is displayed and then it is used in a quote so you can see the same sentence in all the fonts. There is some brief background information about each font and then quick details such as when it was created, in which country, who the creator was, etc.

A List Apart: Typography (tutorials) http://www.alistapart.com/topics/design/typography/

This website is written for people who make websites. One of their topics is typography and they provide information such as how to size text using CSS, dynamic text replacement, or elastic design. As always, this is an excellent source for tutorials, articles, and answers to website design related issues.

TypoGraphic (history of type) http://www.rsub.com/typographic/

This website outlines the history of letters and typography as well as providing an anatomy of letterforms and a gallery. The studies section discusses legibility, spacing, type as image, and meaning. The aim is to illustrate the importance of typography and explore how it is used in the digital era. This provides important insight into the online use and value of type and typography.

Digital Magazine: CSS Typography (resource) http://www.digital-web.com/articles/css_typography/

This article from Digital Web Magazine by Garrett Dimon discusses typography and how CSS can be used to select type faces. Dimon also points out that there are other options including: font embedding, JavaScript, and image replacement technique. With CSS you can control not just the font types, but also the line-height and letter-spacing. One site mentioned it Typetester (http://typetester.maratz.com/). Typetester lines up 3 columns and allows you to choose different fonts to view in each. This allows you to test legibility and play with the size, alignment, word spacing, leading space, background color, and text color. This is an excellent way to help decide which fonts would work best for your site.

Noupe.com: CSS Tutorials http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html

This is a CSS tutorial from Noupe which addresses more than 20 common CSS bugs (usually related to IE) and ways to fix the problems. This is a handy site when trying to work out CSS issues.

DesignSnips (Examples of Good Web Design) http://designsnips.com/

This site collects examples of good web design and separates them into categories that can be browsed. Some categories are: depth effects, illustration, textures, hover effects, logos, navigation, typography, colors, breadcrumbs, banners, buttons, etc. This can be quite handy when developing a website as it provides inspiration and ideas that work.

LIS 5315 Week 6

Week 6

Creating Web Sites ch. 11& 12:

Chapter 11-“Attracting Visitors”. This chapter focuses on how to promote your website and ensure it is regularly indexed by search engines. Before you start promoting your site, make sure it is complete and is a good design. Try to have features that will keep people coming back. A discussion forum is a way to do this. Build a community by sharing links with similar minded folks. Update meta tags with a site description and key words. Submit your website to internet directories and search engines. To successfully climb the ranks you need statistics such as how many people visit your site and how long they stay.

Using reciprocal links is a good way to connect and get your website noticed. You agree to link to a site and they agree to link back to yours. In order to keep visitors coming back you need to have excellent content that changes regularly and in a noticeable manner. Updating once a month is not enough, it needs to be updated 2-3 times a week for a really popular site.

Web server logs provide the most detailed information about site visitors. It includes information such as: time visitor came, IP address, their browser, what site referred them, if they got any error messages, pages ignored, pages they liked, etc. These logs are much more detailed than the web traffic analysis that is offered by a web host. In order to use the web server log you must feed the data into a log analysis program. If you can’t do all this you can try a free hit counter service. Some are visible on the page and others are invisible. www.statcounter.com offers a free hit counter without an image.

Chapter 12-“letting visitors talk to you & each other”. For a site to really fit in and be popular you need to participate with your visitors. It is important to have a form of dialog. Discussion forums or chat boards help visitors keep coming back and this helps to establish a community. Get feedback from visitors about what they like and don’t like and fix your site accordingly. Make it so you can be contacted by having email links, or forms. Google groups offers a way of freely setting up a group for discussion which is easy to moderate.

Principles of beautiful web design ch. 4:

Chapter 4-“Typography”. Web design is all about communication and one of the main ways we communicate is by written word which is why typography is so important. We may not put much thought into it now, but creating a font or designing a single letter actually takes a great deal of thought. The angle of the curve, the thickness of a line, the amount of white or negative space –these are all important in letter design.

There are tons of fonts out there, but for a website all that matters is what your users have installed on their computer at the time (which of course you can’t know for sure). This can be quite limited so the font-family property of CSS is very handy. It allows you to choose your ideal font and then specify backups. For example, you might prefer Futura, but list Veranda, Arial and finally any sans-serif font. However, it is important to realize that if your ideal font is a drastic change from the backups (takes up significantly more or less space) it might drastically change how your website looks (tables and columns could be messed up, etc.). For this reason, it is best to preview how your website would look with the generic font also to make sure it still works. If it is vital to use a particular font, this can be done with an image file. This technique is often used for fancy lettered banners or headers.

Review the following websites:

Urban Dirty http://urbandirty.com/

This website offers free texture stock photos which are licensed under the creative commons license. There is an option to make a donation, but other than that the images are free, just mention that you got them from Urban Dirty. There is a search option where you can search for how a photo was tagged. Most of the options are cement, paint, wood, etc. The search is fairly rudimentary, but it does work.

Best Textures Flickr Group http://www.flickr.com/groups/564994@N20/

This is similar to Urban Dirty, but there is a greater variety of textures not just urban type textures. This is actually a
Flikr group which pools together themed photos and has discussions etc. You must join the group to add items, but not to view. The images all appear free, but some artists have their own statement (i.e. free but please credit me, etc.). There are also other Flickr Groups with texture images.

Torley Textures http://www.flickr.com/photos/torley/collections/72157594588432564/

This is another flikr site that offers textures. These are offered as free and are seamless so one can tile them easily without it showing. All of the textures offered in the Torley collection are 512x512 and are in lossless PNG format. One nice thing about this collection is that the textures are grouped in smaller collections by color. One is a collection of greens, another of pinks and reds, and another is black and white. This is helpful if you have an idea of what color scheme you want to use and are looking for some matching texture. The rest of the mini collections are not by color, but the smaller collections make it easier to browse through since they aren’t really searchable.

Deviant Art Textures http://browse.deviantart.com/resources/textures/

The direct link to browse textures did not work, I had to go to http://deviantart.com and then click browse or search myself. Under the collections option is a collection called Best Textures. These texture stock photos are quite wonderful and run a wide gamut of what is offered. Each artist has their own stipulations, but most artists allow you to use them for free if you credit them, or provide a link back to the image. Just doing a browse search for keyword texture will turn up many wonderful textures (especially the ones labeled “in Miscellaneous”), but some aren’t really textures by themselves. This is really a wonderful source for any art, and very good for inspiration for any artist.

Texture King http://www.textureking.com/

This is another good source for texture photo stock. It is a project by someone known as REH3design and seems to be somewhat up to date. The last update for the news and posted photos was 2 months ago. Some of the other texture sites were more frequently updated. Texture king has a nice broad category list to choose from: grunge, liquids, metals, miscellaneous, paint, plaster, plastic/ rubber, rust, stone/ rock, & wood/ plant. These are all wonderful selections but they are zip files so they take a few more clicks to download.

Grunge Textures http://www.grungetextures.com/

Grunge Textures is a site devoted to textures in the grunge category. All of their pictures are high resolution (2400 px x 1800 px minimum) in jpg format. They use creative commons licensing so the image are free for non-profit personal use as long as there is a link back to www.grungetextures.com. The categories for browsing and searching are reasonable and include: aircraft aluminum, concrete textures, graffiti & vandalism, metal textures, paper & cardboard, etc.

Grunge Style http://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/

This is a wonderful article on trends in web design and a special focus on grunge. The author does not see grunge becoming the major trend that web 2.0 design was. There are some examples of grunge type design. Some are more subtle than others, but all have a “worn” feel to them. This website also provides links to some free fonts that work in the grunge style. There are also links to texture sites and tutorials as well.

Photoshop Tutorials on Creating Textures http://vandelaydesign.com/blog/design/photoshop-tutorials-textures/

This website offers a great collection of tutorials and guides on designing your own texture background in Photoshop. If you do not have Photoshop, you are not completely left out. The free graphic program Gimp, offers a version (gimpshop) that closely mimics Photoshop so you can use the tutorials ( www.gimpshop.com). Unfortunately that URL has been suspended. Another site which looks like it may offer downloads of gimpshop is http://thegimpshop.net/.

2007 Web Design Trends http://www.modernlifeisrubbish.co.uk/article/2007-more-web-design-trends-and-cliches

This entry (dated 10 December, 2007), highlights 6 current trends in web design and provides links to examples. The trends include:

• Cute cartoons and mascots
• Swirls, drips & flourishes
• Broken borders
• Oversize RSS icons
• High-Texture designs
• Rich colours with dark grey background

Some of these trends I like, and others not so much. If they are used in a subtle way, even my “not favorite” trends aren’t bad, but when overdone, they could be disasters.

Web 2.0 Tutorials http://www.smashingmagazine.com/2007/03/10/web-20-tutorials-round-up/

This is another issue of smashing magazine which gathers several tutorials together. Most are basically Photoshop or Photoshop-based tutorials for making web graphics. This is great if you have Photoshop, but if not they are only mildly helpful. The Gimpshop is a possible alternative if you can find it.

Screen Resolutions Worldwide http://www.modernlifeisrubbish.co.uk/article/screen-resolutions-and-aspect-ratios-worldwide

This site provides a world view of screen resolution and aspect ratio (widescreen or not) tendencies. India had the lowest resolution with an average approximately 1024x768 (0.872 megapixels). Scandinavia and Central Europe had the highest resolutions with Switzerland averaging 1280x1024 (1.306 megapixels). The US, Denmark, Belgium and Italy are more likely to have widescreen monitors, whereas Russia does not and has vertical resolution available.

LIS 5315 Week 5

Week 5

Creating Web Sites ch. 9& 10:

Chapter 9- “Page layout tools: Tables & Styles”. In the early days of HTML and web pages, invisible tables enabled the alignment of text and pictures in a nice grid structure. Since the advent of style sheets, tables are giving way because they are too awkward to manage.
If you use tables, most browsers only show a solid black line for table borders. If you want something else, you should create a borderless table and then apply borders to the table and td, th attributes in a style sheet. If you do have tables with borders, be aware that any empty cells will collapse and disappear. To prevent this collapse, fill in the cell with a non-breaking space ( ).
When writing HTML that is going to be positioned using style sheets, it is important to divide up your different sections using div tags (division) and class tags. To really see how style sheets can effect a page, go to CSS Zen Garden (http://www.csszengarden.com/). Each page in the gallery has the same HTML, the only difference is the style sheet applied.


Chapter 10- “Frames”. Frames help large websites keep a common element (often a navigation bar) in the same place on every page. If you use tables or div tags to do this, you must copy and paste a lot of data onto every page. Using frames avoids this by allowing you to show more than one web page in the same browser window. HTML allows you to split the browser screen into different regions called frames.
There are some negatives about frames however:

• Confuse search engines –robots don’t know how to navigate and report the right information back.
• Frame abuse –not seen much anymore, but some folks used frames to keep part of their website visable when a user clicked on an external link.
• Future compatibility and accessibility –latest versions of XHTML do not support frames, and frames are not easily used by users with screen reading devices.
  Less effective URLs –users cannot get a URL to a specific page only the first page and then they have to click through everything to find what they were looking for.
  
  
  Principles of beautiful web design ch. 3:
  
  Chapter 3- “Texture”. Texture in a website refers to an image, usually used as a background, which imitates the appearance and “feel” of an object (like a brick wall, wood, soap bubbles, etc.). Even a simple line can be used to create feelings. A diagonal line (or series of diagonal lines) gives a sense of movement and draws the attention more than horizontal lines.
  
  One can use oval or circular background image behind text to create the illusion of a circular block of text. There are many websites devoted to trying to round the corners of text block boarders by CSS, JavaScript, or the use of background images.
  Using light and shadow, one can give depth and dimension to objects such as menu buttons, bullets, etc. One can utilize different textures and images to give a certain “feel” to a website. One example is an “antique” or “worn” look, created using “folded” or “torn” corners of boarders to simulate old or torn paper; the use of “watermarks” or “coffee stains” on the background of the website; and many other creative ideas to promote a “feel”.
  
  
  Review the following websites:
  
  Colors on the Web http://colorsontheweb.com/
  
  “Colors on the web” focuses on the use of colors in design and especially as it is applied to web page design. Many topics are covered including: color theory, color wheel, color combinations, color physics, and colors on the web. The page itself seems to have a nice red and white feel, but does have a lot of ads both on the left and right sides. While these do make the web page more jumbled, they are very appropriate since all have to do with the theme of color or color theory and offer a wide variety of “color” resources available on the internet. Colors on the web (COTW) offers a color wizard which will help generate matching color schemes; a color wheel to generate random color combinations to stimulate creativity; and a contrast analyzer to determine if there is enough contrast in colors (especially good for determining if text will be legible on a color background).

LIS 5315 Week 4

Week 4

Creating Web Sites ch. 7& 8:

Chapter 7-“Adding Graphics”. Often there are many more images at work on a web page than one would think. Often text used in headings, banners and sometimes navigation is actually an image file.

In HTML, the alt attribute should be used to describe the picture in case it isn’t visible. Some browsers use this text for a pop-up description. To avoid this (or make sure you can select the text that will show in the pop-up), use the title attribute to specify what you DO want to pop up as a title.

Picture size is important, both its dimensions (how much space it takes up in the browser) and its file size (the number of bytes required to store the image). Don’t use the height and width attributes to resize an image, it will turn out badly. Rather match the height and width attributes to the actual height and width of the image—it will improve the way the web page loads.

There are 3 file formats for web graphics:

• .gif – for images with small number of colors (logos, bullets, clip art).
• .jpeg –for photos with lots of colors, not good for text or line art.
• .png –works for all sorts of images but doesn’t compress as well as .jpeg and old browsers can’t read it.

Chapter 8- “Linking Pages”. Links are an important aspect of web pages (links make the internet a net). There are internal links which lead to other pages or sources within a website, and external links which lead to other websites. To make an external link open in a new page, use the target attribute (target=”_blank”) this formula will open a new window instead of leaving your website.

Programs such as Dreamweaver have link checkers which can go through and scan all your web pages to test links and make sure they work. If you change the name of your site, or page, or folders it can mess up anyone linking to the page previously. Using a redirect will help anyone trying to find the website.

Principles of beautiful web design ch. 2:

Chapter 2- “color”, describes the psychology of color. Different colors produce different behavioral and emotional effects.

• RED- excitement, a dramatic and rich color. Darker reds (burgundy, maroon)—rich, indulgent; earthly-brown reds –harvest and fall.

• ORANGE- active and energetic. It can symbolize happiness, sun, creativity, etc. It also stimulates appetite and metabolism.

• YELLOW- active and visible. It symbolizes happiness and energy.

• GREEN- the color of nature. It represents growth, freshness, and hope and is soothing.

• BLUE- openness, intelligence, faith. It can be calming and appetite reducing. It can also be a symbol of bad luck or trouble but is also representative of sky and sea. It can also give a sense of stability.

• PURPLE- often represented royalty or power. It can symbolize wealth or extravagance and is associated with flowers, and gemstones.

• WHITE- represents perfection, light, and purity. It often symbolized cleanliness.

• BLACK- can represent death and darkness, but also power, elegance, and strength.

These are just some of the things to consider when selecting a palette of colors for a website. One can design in monochromatic, analogous, or complementary color schemes. All of these have merit. There is a color scheme generator from Well Styled (http://www.wellstyled.com/tools/colorscheme2/index-en.html).

Review the following websites:

Web Style Guide, 2nd Ed. - http://webstyleguide.com/index.html

Web Style Guide is an online book which covers many aspects of style and design for websites. There is information on the process and planning aspect that should go into a website design before the coding happens. Also covered are: interface, site design, page design, typography, editorial style, graphics, and multimedia. At the very top is a link to new information on universal usability (http://universalusability.com/). Universal usability is different from universal accessibility—accessibility means that the content functions, or is within reach of all users. Usability means that the content and functionality is not only accessible, but useable by everyone. Web Style Guide is a thorough look at all the details that go into a good website design, whether one is doing a personal page or a large, institutional / corporate website.

Universal Usability http://universalusability.com/access_by_design/index.html

The Universal Usability site is linked to by the Web Style Guide site. It covers a variety of topics with the goal being to make a website that is usable by everyone, not just accessible. Topics include: text, images, data tables, layout tables, frames, lists, forms, links, color, audio and video, interactivity, editorial style, and page layout.

As an example, it is recommended that plain text be used for text, with styling done through CSS. The users should be able to adjust the text size as needed so text elements should be sized using relative measurements like percentages or ems (headings could be 125% larger than normal paragraph text).

Frames and layout tables should be avoided (especially frames) because they make printing, bookmarking and returning to pages more difficult. Some non-visual users also have problems with tables and frames if the content is not clearly labeled.

JJ.net (User-Experience Designer Jesse James Garrett) http://www.jjg.net/ia/

This is the site of Jesse James Garrett and his collection of resources related to information architecture and experience design. The layout of this site is simple but very functional. There are no large photo-type graphics but rather small gif-type images to lend color and act as links. User experience is important and Garrett provides a model of things to consider in order to create a successful user experience on a website.

Garrett has a link to the website for Adaptive Path (which he founded) in which he describes the “Nine pillars of successful web teams”. The nine areas which need to be represented and thought about are:

• User research
• Site strategy
• Technology strategy
• Content strategy
• Abstract design
• Technology implementation
• Content production
• Concrete design
• Project management

All of Garrett’s work is centered on the user and how to make the system work for them. If the user is happy and benefits, then the company or organization will have been successful.

Smashing Magazine: Top 50 Blog Designs - http://www.smashingmagazine.com/2008/05/08/now-more-than-ever-50-more-excellent-blog-designs/

This article on blog designs is really amazing. It is a great view at some of the really creative blogs from a design perspective. Some actually look more like full blown websites than “blogs” but I suppose really a blog is a website; it is just that most of its material is frequently and regularly updated (i.e. daily and weekly as opposed to bi-monthly, yearly or never).

There seemed to be a lot more creative, artsy license taken in these blog designs with creative images used freely. As long as the text content was visible and readable, then the blog worked. Sketchblog (http://www.rob-sheridan.com/sketchblog/) was rather amazing as it is done by an artist and offered a glimpse of how he completes a “sketch” through step-by-step instructions.

LIS 5315 Week 3

Week 3

Creating Web Sites ch. 5& 6:

Chapter 5- “HTML Text Tags”. HTML gives you less control than a word processor (MS Word etc.). You, the creator, do not get to determine every nuance of how your web page looks because part of that is dependent on the viewer’s browser. HTML does allow one to categorize items to facilitate the meaning as part of the mark up. One can label something a heading, subheading, paragraph, list, etc. and one can give a word, or paragraph emphasis. There are two different ways to tag or mark up a web page’s content:

• Structuring- arrange sections like headings, paragraphs, and lists.
• Formatting- make the sections look different (color, font, etc.)

In order to do this, HTML has two types of tags:

• Logical or idiomatic tags—describe the content (heading, list, etc.)
• Physical or typographic tags—formatting such as italics, bold, underline, etc.
• Many of HTML’s physical tags are being replaced by CSS style rules.

Chapter 6-“Style Sheets”. This is where much of the creative design fun comes into play. Style sheets are separate rules that tell the browsers how to format all the marked up text. There are three types of style sheets:

• External—this is stored in a separate file and is linked to the HTML page. It is very powerful and allows many pages to be changed simultaneously just by changing the external style sheet.
• Internal—this is imbedded in the HTML page. It only affects the styles of the page it is imbedded in so one must update the style on each page individually.
• Inline—this inserts a style or formatting rule inside an HTML tag. It is not very convenient because in order to change the style one must hunt down the rule hidden amongst all the HTML tags and content.
  

Principles of beautiful web design ch. 1:

Chapter 1- “Layout & Composition”. This chapter discuses the overall design process and gives some guidelines for good design. The design should not hinder the access to content.

• Users are pleased by the design but drawn to the content
• Intuitive navigation will help users access the content easily
• Each page should be recognized as part of the same website—keep continuous themes, colors, fonts, logos, etc.

The rule of thirds design principle aids in creating aesthetically pleasing designs. This is a simplistic breakdown of the golden ratio rule of art. The golden ratio will divide a space so one part is twice the size of the other. For some reason this seems to be a pleasing ratio. By designing a website on a grid, one can try to use this “rule of thirds”.

Review the following websites:

ICANN - http://www.icann.org/

The ICANN (Internet Corporation for Assigned Names and Numbers) site coordinates the database of unique internet addresses (names or numbers) worldwide. ICANN began in 1998 and is why we can have a global internet. This non-profit group consists of numerous individuals spread across the globe who maintain a secure, stable and interoperable internet. Its job is to coordinate the internet’s naming system. Among the many offerings on their site are: a glossary of internet terminology, and domain name dispute resolution policies.

Web Stats –

Internet Traffic Report: - http://www.internettrafficreport.com/main.htm

Internet Traffic Report is one of several websites that offer statistics on internet usage. This particular site analyzes the world data flow and displays it as a value between zero and 100: the higher the number the faster and more reliable the connections. Each continent is given a value and a trend arrow (most being up or static). Only 5 regions are listed: Asia, Australia, Europe, North America, and South America – with Africa being noticeably absent. North America is rated highest with 88 but is static; Asia, Europe, and South America are in the 60s and 70s but growing. Australia is rated 82 and is static. Clicking on a region will provide more detailed information about specific routers and their traffic.

Internet World Stats: - http://www.internetworldstats.com/stats.htm

Internet World Stats provides usage and population statistics for internet users. The main page features world stats, but there are links to statistics for: Africa, America, Asia, Europe, EU, Middle East, and Oceania. As of today (5/28/08) the most recent world statistics are from March 2008. For each region 6 items are tracked: population (2008 est.), population % of world, internet usage, % population who use internet (penetration), usage % of world, and usage growth 2000-2008. North America has the highest % of population who use internet (73.1%), but Asia with its large population has the highest usage % of world (37.6%). Africa and the Middle East have usage growth from 2000-2008 over 1000%. Interestingly, when one looks at individual countries with highest internet penetration rate, the United States ranks 4th behind Sweden, Hong Kong, and Denmark.

CAIDA Internet Infrastructure: - http://www.caida.org/home/

The CAIDA site (Cooperative Association for Internet Data Analysis) promotes the engineering and maintenance of a strong international internet structure by providing tools and analyses. There is a fascinating visualization of IPv4 AS level topology. Honestly, I am not sure entirely what this means, but it seems to be a visualization of a two week snapshot of the internet by graphing IP addresses and links in traceroute paths. It reminds me of a spirograph drawing toy I played with as a child. There is also a chart of Geographic region of ASes as determined by NetAcuity plotted against number of ASes (Average peering degree), skitter August 2007. Again I am not sure what average peering degrees are but this is definitely a place to go for internet technical data.
CAIDA also offers quite a number of tools that fall under the categories of: measurement, taxonomy, utilities, and visualization. These all help folks plot, plan, view, and understand the various intricacies of the internet.

Pew (non-profit research center): - http://pewresearch.org/

Pew Research Center is a very up to date (last updated today 5/29/2008) site that gives access to trends, facts and statistics that shape the world. They do political polls, statistics on religion, research and analysis of news media, social trends, international opinion polls, etc. For those working with the internet and web design, Pew’s information on internet and information technology trends are probably the most appropriate.

Nielson Net Ratings: (private research center) - http://www.nielsen-netratings.com/

Nielsen is known as a leading market researcher and this is their internet ratings and research site. They offer many solutions to common business internet issues:

• Examine the audience and traffic to your website
• Reach the audience you are trying to target
• Optimize your advertising strategy
• Benchmark your site
• Customized research for your business needs
  
  
  USF –
  
  USF Web Style Guidelines http://usfweb2.usf.edu/ur/webadmin/webguide.html
  
  This web page efficiently outlines the rules and regulations of official USF web pages. There are many policies which must be adhered to if one is setting up an official USF page, but personal pages are given more leeway than department or publicly viewed pages officially representing the school. This guideline site lists the definitions of an official page and the legal requirements. In particular, the university logo is discussed. It is required to be on all official pages and must be located on the top- preferably upper left corner of banner. One must download an official logo which adheres to the official colors and sizes. Each logo must link to the USF home page and it is forbidden to use the USF official seal on any web page. Like any company, the university is trying to make all official pages somewhat uniform. It is important for viewers to be able to tell that any official page they are linked to is clearly connected through similar themes and colors.