Week 6
September 28, 2010
Hands holding hands
“What should young people do with their lives today? Many things, obviously. But the most daring thing is to create stable communities in which the terrible disease of loneliness can be cured.”
- Kurt Vonnegut
Introduction
This week’s readings focused on attracting visitors to one’s site and knitting them together into a community. This got me thinking on the subject of community. The internet has taken a lot of flack for giving people the illusion of community, as remote interaction through email or facebook status updates is a far more remote and less meaningful form of interaction than talking face to face. But to focus on the downside would be to ignore the benefit. The ability to reach out and touch someone, instantly, anywhere in the world is certainly a tremendous asset. One can find a community of people on the web who share just about any interest, from collecting comic books to third world development. It is important to remember that technology is but a tool, it is how we use it that carries a moral connotation
Notes on Readings
MacDonald, Chapter 11
In Chapter 11, “Attracting Visitors,” MacDonald discusses methods for encouraging users to visit a site as well as tracking visitation data to optimize a site. One promotional method is reciprocal links, in which webmasters each agree to post links to the others site within their own. An alternative is to join a Web ring. This will add a tool for mutual browsing to a group of sites dealing with a similar topic. Also, one can add links to their site on discussion board postings. Webmasters are also advised to update their sites continually in order to attract repeat visitors.
Meta elements can add descriptive information to web pages that are not visible to visitors but may boost search rankings. They are placed within the <head> element (next to <title>). They can be used to add descriptions or keywords to the page’s metadata. Descriptions will be a part of search engine result displays. Keywords should include subjects, synonyms and alternative terms (e.g. <mata name="keywords" content="library and information science, library, information, library science, information science, library science resources, information science resources, library and information science resources, history, library history, student resources, graduate student resources, library school resources" />).
Directories are lists of sites grouped by topic and edited by humans. Getting a site listed in a directory can attract new visitors and boost search rankings. The largest is the open directory project at http://dmoz.org. Search engines are the most commonly used tool for finding information on the web, and Google is the most commonly used search engine. Most sites are indexed within a month, but one can submit a url to Google to have it added to the index. Rankings are based on a system called PageRank. This ranks sites based on several factors, to include:
- How many sites link to it
- How high the PageRank of linking sites are
- How many links the linking sites have
In order to gauge the effectiveness of site marketing strategies one must keep track of visitation statistics. Many premium web hosts will include tools for doing so. If not then one can use Google Analytics for free. A webmaster will register a site and receive a few lines of JavaScript code to add to the XHTML (at the end of the <body> element, just before the </body> command). Google’s servers will then track site usage and make those statistics available online. It will monitor the number of visitors, how visitors got to the site,time and duration of visit as well as (estimated) geographic location.
This was a very useful chapter that I will certainly refer to should I ever find myself working on a larger web project. It will be interesting to add meta elements to my site and see what that does to it’s Google ranking. Google Analytics looks like a very useful tool. I look forward to learning it’s use now and will definitely put it to good use in future projects. The only drawback seems to be that one can quite easily end up obsessively following their site statistics at all hours of the day and night.
MacDonald, Chapter 12
In Chapter 12, “Letting Visitors Talk to You (and Each Other),” MacDonald advises the reader on building tools for personal interactions into sites. The first step is allowing visitors to email the author. This can be done with a mailto link; a standard <a> element with hyper-references proceeded by mailto: and then and email address. One can add subject lines and body text, but no punctuation is allowed and %20 must be used instead of spaces (e.g. <a href="mailto:fjenkins@mail.usf.edu?subject=Site%20Feedback&body=I%20love%20your%20site">Email Me</a>).
XHTML forms allow for standardized replies. All parts of a form must be contained in the <form> element (placed in the <body> section). Most elements are added with the <input> command, with different attributes displaying different tools (e.g. <input type="checkbox" />). If the text spans more than one line the <textarea> command must be used instead. One can have a form emailed by adding a submit button (e.g. <input type="submit" value="OK" />) and putting a mailto link in the <form> command (e.g. <form action="mailto:fjenkins@mail.usf.edu" method="post" enctype="text/plain">). Option buttons can be added with a “radio” type input, one must add a “name” attribute with the same name for a group of buttons of which only one can be selected. Drop-down menus can be created with the <select> element. A separate <option> value must be placed in the container for every selectable option desired. For example:
<select name="ReferredBy">
<option value="Friend">A Friend</option>
<option value="Google">Google Search</option>
</select>
If a visitor were to select “Google Search” from the drop-down menu, then the email would contain the line ReferredBy=Google.
Discussion forums can allow visitors to exchange tips, interact with one another and provide feedback to site creators. Usually only very large organizations will host their own forums. One can use a third-party provided forum, but usually this will result in ad displays on discussion pages. Google Groups provides free discussion forums with a minimum of advertising.
I found this chapter to be very relevant and full of helpful information. After all, the purpose of the internet is to be a tool for communication. If visitors to my site have no way of interacting with me then really I have failed in my goal to communicate. The site I am working on now will definitely not be big enough to merit a discussion forum, and I seriously doubt anyone would be interested in a Google Group on a small student project, but I will at least give my visitors a link to email me. The rest will serve as a useful reference should I ever find myself working on a much larger project.
Beaird, Chapter 4
In Chapter 4, “Typography,” Beaird discusses how typesetting issues can affect the look and feel of a site. The safe list is the 9 fonts that will display on every operating system, they are:
- Arial
- Arial Black
- Comic Sans MS
- Courier new
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Displaying text in images assures that every viewer will see the original typeface, but this can be a laborious process. sIFR is a program that uses Flash and JavaScript to insure uniform display of text
Some commonly used typographical terms are:
- Baseline: The imaginary line on which most characters sit
- Cap Height: The height of all capital letters
- Crossbar: Stroke that connects two lines in “A” and “H”
- Serif: Finishing stroke at the bottom and top of certain letters
- Meanline: Top edge of most lowercase letters
- Bowl: Rounded curve enclosing negative (empty) space
- Descender: Lower portion of some lowercase letters that extends below the baseline
- Counter: Negative space within certain letters
- Stem: Main vertical or diagonal strokes of certain letters such as “L” or “W”
- Tittle: Dot above lowercase “i” and “j”
- Terminal: End of a stem or stroke with no serif
- Ascender: Extension on some lowercase letters rising above the meanline
- Leg: Lower angled strokes in “K,” “R” and “Q”
- Ligature: Combination of characters
- X-Height: Distance between baseline and meanline
Letter-spacing is a CSS property that can adjust spacing between letters, word-spacing can adjust spacing between words, and line-height can adjust spacing between lines of text. Distinct types of fonts include:
- Serif: Mostly used for headings
- Sans-Serif: Mostly used for body
- Handwritten: Used to give sites a more personalized feel
- Fixed-Width Fonts: Mainly used to assure that numbers and lines of code line up
- Novelty: Mainly used for decorative purposes
- Dingbat: Can be used as supportive graphics and icons
The right font for a given site depends on the kind of feeling one wishes to evoke. Font size can be set using pixels (although this can cause text to be non-resizable for some viewers), em spaces or a percentage of default size. Most non-ASCII characters and some used for XHTML coding must be displayed using an entity code (such as < for the less than [<] sign).
This has been my favorite chapter of Beaird’s book so far. While I have never had much faculty with the visual arts, typography has always been a subject that held much fascination for me. While not exactly a “typophile,” I found it enjoyable as well as useful to compare the different types of font to see what kind of feelings they evoked. I have always used a very standard 12-point Times New Roman font for just about everything I have produced in the past, but I believe with this site I will experiment a little. I will most likely try a larger serif for headings, perhaps even a handwritten font for the topmost titles of pages, with a more readable sans-serif font for the body.
Website Reviews
Urban Dirty is a fascinating, if somewhat risqué, site with a dark counterculture feel to it. The use of the novelty font for their logo gave it a distinct branding while the text was in a very readable sans-serif font. The layout left a little to be desired, as the left-centering left nearly half a screen of white space on my widescreen monitor.
http://www.flickr.com/groups/564994@N20/
The Best Textures Flickr group contained many fascinating images that would certainly be very useful in web design. The site has a very bare-bones look to it, and is obviously not a professional site. I was slightly puzzled that the images would be so small in a Flickr group site as that is the raison d’être of Flickr.
http://www.flickr.com/photos/torley/collections/72157594588432564/
The Torley Textures site was another fascinating collection of images. Most look like they would be too busy and distracting to be of much use for a web page, but I definitely saw a few diamonds in the rough. With so many images, however, sorting through them and testing them to find which would work is likely to be time-consuming for any who try
http://browse.deviantart.com/resources/textures/
deviantART was another fascinating site with a wide variety of images available. The layout was much more suited for widescreen monitors, making it easier for me to browse the images. Most were rather large, but a few could make useful backgrounds with some compression and tiling.
Texture King had some original ideas for textured backgrounds. The site was mostly understated with some clever splashes of orange that drew the viewers attention nicely. Most of the images looked to big to be used without some additional work, but the inability to preview prior to downloading made it difficult to judge.
http://www.grungetextures.com/
Texture King has a very beautifully designed website with an analogous brown color scheme that worked very well. They definitely seemed to focus more on artificial than natural backgrounds, which I found somewhat disappointing. Some of the free images could be put to good use by a creative designer, but the site seemed focused on selling their pay-per-download images.
http://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/
The Smashing Magazine piece on the “grunge” style was very well done and contained many eye-catching examples. I found it fascinating that their site maintains a very “web 2.0″ look even as they declare it a passing trend. Most of the examples they showed seemed rather busy, personally I prefer sites with more simplicity. I did find the W-Enter Textures to be great example of how the style could be done without giving the viewer a headache.
http://vandelaydesign.com/blog/design/photoshop-tutorials-textures/
The Vandelay Design site was beautifully designed with a wonderful use of the achromatic color color scheme. Their ideas for design looked very interesting, if terribly overstated in a few cases. I do not have photoshop and I am not likely to be able to afford it any time soon, however, so for now I will have to make do.
http://www.modernlifeisrubbish.co.uk/article/2007-more-web-design-trends-and-cliches
The 2007 Web Trends page design mostly kept it simple, although the orange and brown colors seemed to clash rather badly. I completely agreed with the author’s take on overdone site design, I find it more annoying than inviting. His point about dark grey backgrounds was well-made, I have decided on a similar design scheme for my site.
http://www.smashingmagazine.com/2007/03/10/web-20-tutorials-round-up/
The Web 2.0 Tutorials Round-Up was another fascinating look at recent design trends. The sheer volume of the collection was rather impressive, although the amount of scrolling time it takes to reach the bottom doesn’t exactly invite the viewer to take a look at everything. Most of the tutorials seemed to be focused on Photoshop, so I don’t know if they will be of much use to me.
http://www.modernlifeisrubbish.co.uk/article/screen-resolutions-and-aspect-ratios-worldwide
The Modern Life article on average screen ratios resolutions and aspect ratios was fascinating and very informative. The author’s point is well made, most of the sites I visit seem a poor fit to my high resolution widescreen monitor. Still, I would hate to put off any visitors, so I will seek a design that will work well with all size monitors.
Final Thoughts
When it comes to building community, the internet giveth and the internet taketh away. Is it better to interact remotely with many people from many cultures, or would we be better served by going outside and talking to others in our own communities? It is up to us to find the right balance. The ability for exposure to people from different parts of the globe and walks of life certainly promotes understanding and peace in the world, and that is a good thing. But it would not be good to neglect our own communities, and perhaps we the people of the World Wide Web should be directing our resources to raising awareness of community issues. After all, this power of instant, worldwide communication gives us the power to change the world, and it’s in our hands.
Until next time, take care of yourselves, and one another.
Farley
Leave a Reply
You must be logged in to post a comment.