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 512×512 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 1024×768 (0.872 megapixels). Scandinavia and Central Europe had the highest resolutions with Switzerland averaging 1280×1024 (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.