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), 20th 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.