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
Week 5
September 22, 2010
Everything that rises must converge
“A rare experience of a moment at daybreak, when something in nature seems to reveal all consciousness, cannot be explained at noon. Yet it is part of the day’s unity.”
- Charles Ives
Introduction
This week’s readings focused on the subjects of pulling all of the disparate pages and elements of a site together into one. I found my thoughts drawn to the subject of unity. Certainly web technology brings with it many promises of unity. The unity of man and machine, the unity of all of the world’s peoples drawn together by a common communication medium. Unity is also a very important principle of design. As I lace together the pages of my site one by one, I seek that unity of ideas that can draw together designer and user
Notes on Readings
MacDonald, Chapter 9
In Chapter 9, “Page Layout Tools,” MacDonald instructs the reader in dividing a web page into parts. He names the two methods by which this can be achieved, using an invisible table and using CSS rules for a style-based layout. He explains the difficulty inherent in designing pages for multiple screen sizes as well as the two options for doing so:
- Proportional Sizing: The layout will shrink or expand depending on the size screen it is being viewed on; reduces white space but can cause text to appear very large or very small
- Fixed Size: The layout will always look the same but must be reasonable for a variety of different browser settings
Next, MacDonald discusses the element of tables on web pages. The entire table must be contained in a <table> element, every row within a <tr> element, headings (optional) within a <th> element, and the information in each column within a <td> element. Borders can be added with border attributes (e.g. <table border=”1″>) and default borders can be changed with CSS style rules. The table’s dimensions can be specified either as a percentage of the window (relative) or as a specific number of pixels (absolute).
MacDonald then explains how the <table> element can be used to position virtually every element of a table on the page. However, this is not recommended for large sites as even minor changes will need to be copied onto every page. The preferred method is to use the <div> element in conjunction with CSS style rules, thus changes to a linked .css file will be applied to every page in the site. A contextual selector can be used to affect only certain elements next to one another in the type selector (e.g. ul b { color : red } will make only bold text in unorganized lists appear red). An id selector can be used to specify a rule appearing only once. This is done by using a pound sign rather than a period to specify the rule name (e.g. div#Menu means that the Menu divider can only be used once in a page) and by using id= rather than class= in the attribute field.
MacDonald moves on to discuss different ways <div> commands can be used to divide a page. The float : right or float : left style rules can be used to create floating boxes of text. A z-index style rule can be used to layer various elements. The browser will always display the element with the greatest z-index on top. MacDonald concludes with tips for combining relative and absolute values.
While I have been using <div> elements and CSS style rules to organize my site, it is good to know more options available with the method. One disadvantage of using Dreamweaver is that it is so user-friendly that sometimes I will adopt a given method without understanding the principles underlying it, thus I will often be unaware of the alternatives. MacDonald definitely made the invisible table method sound like more trouble than it is worth, so I will definitely it on my site. Still, it is helpful to know how to display information in tables. I doubt there will be any on my site but it is a useful future reference kind of item.
MacDonald, Chapter 10
In Chapter 10, “Multipart Pages,” MacDonald discusses the ins and outs of building sites with many web pages that share a similar appearance. The 3 methods for synchronizing page layout are:
- Server-Side Includes: Will copy contents of one page into others but is not supported on all types of web servers
- Frames: Will display more than one web page in the same browser window, frowned upon and complicated method
- Templates: Dreamweaver and Microsoft Expression Web features that allows one to create content in one page that is repeated to every page on the site, method is application-specific
Server-Side Includes (SSIs) are instructions for a Web server to include common content (not style) on every page of a site. One will save a file with part of an XHTML document (e.g. menu.htm) and then use a command to insert these lines into the web pages (e.g. <!–#include file=”menu.htm–>. However, this will not work in files labeled .htm or .html. One must append files for Apache servers as .shtm or .shtml and files for Microsoft IIS Web servers as .asp or .aspx. Files saved on a client hard drive cannot be previewed with the inserted content.
Frames must be contained within the <frameset> element. Frame column or row distance must be set by percentage of window or as pixel values (an * can be used to denote “all remaining” when absolute values are used). All frames must be given in a named attribute (e.g. Menu) and a source attribute (e.g. menu.htm). All links must specify in which frame the new page is opened in a target attribute (e.g. <a href=”welcome.htm” target=”Main”>Welcome</a>). A target=”_blank” specification will open a new window for the link. Frames will have a resizable border by default, this can be eliminated with frameborder=”0″ and noresize=”noresize” attributes. Scroll bars will appear for each frame with content too large to be viewed in one window (this can be eliminated with a scrolling=”no” attribute). It is a good idea to include <noframes> elements in case a viewers browser does not support frames
Page templates are a simpler tool for batch editing. They can be time consuming as the editor will need to apply changes to every file, and fragile as it depends on a few comments it is easy to accidentally delete. First, one simply selects File → New → Blank Page → XHTML Template → Create. Then the designer will create an XHTML file as normal but insert comments (e.g. <!–TemplateBeginEditable name=”body”–> and <!–TemplateEndEditable–>) in between the regions one wants to appear different on each page (typically the title and main content areas). MocDonald concludes the chapter by warning the reader of the many subtleties involved in using this method.
This chapter certainly gave me an appreciation of the many complexities involved with technology in general and web design in particular. I feel very fortunate to be starting small, as managing larger sites is definitely a daunting task. In particular the frames method struck me as being horrendously complicated, I doubt I will use it if I should find myself attempting to create a larger site. MacDonald did a wonderful job of pointing out the quirks of each of the methods described, and there is certainly a valuable lesson to be learned about paying attention to detail.
Beaird, Chapter 3
In Chapter 3, “Texture,” Beaird discusses the elements of digital imaging for the web. He begins with the basics to include:
- Points: The most basic unit of form
- Lines: Several points joined together
- Shapes: Lines that are joined together
Shape can be used to make web sites look more inviting in a variety of ways. Rounding the corners of squares and rectangles give sites a more organic feel. One test of shape is the economy of line, which involves tracing over a picture to see if the outline still looks complete. Three dimensional concerns include:
- Perspective: Smaller objects appear farther away
- Proportion: Size can represent distance as well
- Light and Shadow: Can be used to make objects appear fuller and more noticeable
Patterns can be used to add texture to sites with very little storage through tiled backgrounds. Background images can be patterned in a similar manner, either across the whole page or only the x- or y-axis. Several elements are combined to form a distinctive style. The appearance of age can convey a sense of nostalgia. Light animations can create a child-friendly page. Large type and generous use of white space can give a site an advanced “web 2.0″ look. Beaird concludes with a recommendation to read up on art history to get a feel for exploring new artistic territory and giving examples from his Florida Country Tile project.
As always, Beaird gave me a lot to think about. I found it particularly helpful to think of web images as a collection of dots, lines and shapes. His suggestion to look to art history for further information regarding the development of style I also found helpful and I certainly plan to do so as soon as I get time. I feel like at this point I have a relatively firm grasp on the science of web design, but I have always been somewhat of a stranger to art in all of its forms. I am very grateful for a book like this one that can use something I know to connect me to the principles of art.
Website Review
Colors on the web was a very beautiful site with an organic design that reminded me of the rainbow of light coming out of the prism. I found the part on the physics of colors very interesting, it made me wonder why a color wheel based on the electromagnetic spectrum is not used. The color wizard and “spin the color wheel” tools I found very useful and will most likely take advantage of in future endeavors. I was somewhat annoyed that the color basics and color scheme library was not available, but I am sure that once the author completes the reworking of the site referenced on the blog it will be an even more useful reference.
Final Thoughts
In many ways it is at a beginning rather than at an end that the underlying unity of all things is apparent. As my site begins to take shape, the possibilities begin to crystallize in my mind and I see how it can fit into the larger universe of art and science, technology and communication. Soon it’s time will come, others will share in it and the joy of my creation shall be complete. Then it’s time too shall pass, and I shall move on to other things, but always there will be new creations. New territories to explore. New vistas of the mind to expand the consciousness and take away the breath. The server space will be recycled, and another student will know the joy of creation that I have found. Birth, death, and rebirth; such is the cycle of time that we all are a part of.
Until next time, take care of yourselves, and one another.
Farley
Week 4
September 14, 2010
A work of beauty
“In every man’s heart there is a secret nerve that answers to the vibrations of beauty.”
- Christopher Morley
Introduction
This weeks readings were mostly focused on designing websites that are aesthetically pleasing. Certainly this is a topic of the utmost importance to web design. When done properly, the appearance of a website can draw in users and direct their attention to helpful information. Research has shown that users will learn more from websites they find aesthetically pleasing. But to me aesthetics is a topic that goes beyond the surface. Beauty can suffuse life with meaning that is more powerful than that which can be described with mere words. The creation of beauty is a noble undertaking, and I remind myself to strive always to bring a little bit of beauty into a cold and barren world as I seek to carve out my own niche on the web.
Notes on Readings
MacDonald, Chapter 7
In Chapter 7, “Adding Graphics,” MacDonald discusses the ins and outs of adding images to websites. He begins with a description of the <img> command, to include adding alternate text, titles and sizes. He then moves on to the image file formats used on the web, which include:
- GIF: Used for text displays with few colors (such as logos)
- JPEG: Used for photos and other images that require compression
- PNG: Suitable for all kinds of images but does not compress well
MacDonald then explains that these are raster graphics which display images as grids of dots as opposed to vector graphics which display images as mathematically rendered shapes. He moves on to a discussion of compression; reducing the amount of disk space required to store an image. He explains that GIF and PNG files are lossless, preserving image quality but inhibiting compression, while JPEG files are lossy, allowing greater compression but often at the cost of image quality.
Next MacDonald discusses including images in the page. He gives instructions on using CSS style properties to include inline images with wrapping text. He explains how to use the <span> element to add pictures with captions. He also instructs the reader in using thumbnails to create tiled backgrounds and larger images to create “watermark” backgrounds. He explains how the <div> command can be used to create backgrounds for for other elements on the page and CSS properties can be used to create graphical bullets in lists. MacDonald concludes the chapter with tips for finding free art on the web.
This chapter was rather enlightening for me, especially the description of image file formats. I had always thought that an image is an image and had no idea how much difference in display the file format made. The discussion of compression and creating thumbnails will be especially helpful as I create my website. The inclusion of images helps users to remember information by giving them another reference beyond text, and this chapter will help me do so in a manner that will draw the users attention.
MacDonald, Chapter 8
In Chapter 8, “Linking Pages,” MacDonald instructs the reader in the use of hyperlinks to pull many pages together into a single website. He begins by explaining the use of the anchor (<a>) element. He explains the difference between internal links (to other pages on the same site) and external links (to other websites). He also notes the difference between relative URLs (using file paths, only used for internal links) and absolute URLs (using the full http:// address).
MacDonald then moves on to a discussion of the relationship between file directories and relative URLs. He explains how to move down into a subfolder (using a subfolder/filename.htm specification) and up into a rootfolder (using a /rootfolder/filename.htm description). He also discusses linking to other types of content. Next, he instructs the reader in building links into images or parts of an image using an image map. He moves on to a discussion of adding bookmarks to parts of pages (such as in an FAQs section) by adding the # sign to anchor hyper-references (using the <a href=”pagename.htm#bookmarkname”>bookmarkname</a> format). MacDonald concludes with instructions for checking links for ongoing site management.
This was a very useful chapter. Hyperlinks are what really differentiate websites from other information sources as they allow users to gather many different types of information rapidly. I know I stop paying attention to websites when I find a whole bunch of broken links. I hope to include many helpful links in my site, but I will need to be very vigilant in checking them. The descriptions of automated tools to check links I found especially helpful.
Beaird, Chapter 2
In Chapter 2, “Color,” Beaird explains the centrality of color to web design. He begins by discussing psychological associations with certain colors to include:
- Red: Historically associated with passion, it can stimulate adrenaline and blood pressure
- Orange: Historically associated with food, it can stimulate metabolism and appetite
- Yellow: Historically associated with activity, it is very noticeable
- Green: Historically associated with nature, it is generally experienced as soothing and hopeful
- Blue: Historically associated with depression, it tends to be experienced as very calmning
- Purple: Historically associated with royalty, it is the least commonly used color and tends to stand out
- White: Historically associated with purity, it is useful for creating contrast
- Black: Historically associated with evil, it is can be used for forceful displays
Beaird then discusses other concerns, to include:
- Color Temperature: Red to yellow colors denote warmth and green to blue colors denote coolness
- Color Value: Lightness and darkness in color can be used to create dichotomy
- Color Saturation: Bright colors stand out and dull colors can be calmning
Beaird moves on to discuss the difference between primary, secondary and tertiary colors. He explains how color wheels can be used to choose color schemes. These can include:
- Monochromatic: Schemes that use variations on a single color
- Analogous: Using colors adjacent to one another on the color wheel
- Complementary: Using colors located opposite one another on the color wheel
- Split-Complementary: Using 2 analogous colors and another that is complementary to the pair
- Triadic: Using colors located equidistant from one another on the color wheel
- Tetradic: Using a scheme of 4 colors, 2 of which are analogous to the other 2 and the pairs being complementary to one another
Beaird explains how hexidecimal notation is used to display color on the web. He concludes with a description of how his own color selection informed the design of the Florida Country Tile site.
As I have not taken an art class since elementary school, this chapter contained a lot of information that was completely new to me. The psychological associations with color I found especially helpful, as even the color scheme itself can be used to convey information to users. The use of the color wheel was also rather helpful. Having no background in art whatsoever, I will need all the help I can get in making color selections.
Website Reviews
http://webstyleguide.com/index.html
The Web Style guide is a very attractively designed site with a very inviting, muted color scheme. I was blown away by all of the informative content as well. The navigation bars makes the book very easy to both browse and read through. While much of what I looked at was a little too advanced for me at this stage, I am sure it will be very helpful for me to have this page as a resource once these issues become pressing concerns for me.
http://universalusability.com/access_by_design/index.html
Universal Usability is a very simply and elegantly designed site with a calming blue border and muted yellow frames that draws the users attention very well. The content was similar to the previous site, but will also make a handy reference as work on my site progresses. Horton certainly raises many valid concerns I will need to keep in mind as I seek to create sites that all can benefit from.
Garret’s site site is very bare-bones, with just enough enough color splashed in to subtly grab the users attention in a few key areas. While there was not as much free content available here as the previous two sites, there was enough to give one a solid introduction to the principles of information architecture. I found the visual vocabulary for interaction design to be particularly helpful.
http://www.smashingmagazine.com/2008/05/08/now-more-than-ever-50-more-excellent-blog-designs/
Smashing Magazine is a mostly achromatic site with just enough orange and blue thrown in to make for a nice contrast. The blogs they reviewed were another story entirely. Most were so busy and crammed full of stuff that the actual content just seemed to be an afterthought. Some were truly breathtaking however, particularly Antiphrasis.
Final Thoughts
Form follows function in so very many aspects of American life. Architecture and city planning seems so boxy and unoriginal. Most of the writing one encounters on a daily basis seems to take so little pleasure in the written words. Television and cinema mostly follow uninspired cookie-cutter convention. However, it is this very lack of creativity that makes true works of art such a sublime and moving experience when encountered. The new technology gives us all a wonderful flexibility in sharing our own creations with the world. If we are touched by such grace, those creations will be beautiful.
Until next time, take care of yourselves, and one another.
Farley
Week 3
September 9, 2010
One small step
“A journey of a thousand miles begins with a single step.”
-Ancient Chinese Proverb
Introduction
This week marks the end of the preliminaries and the beginning of designing my very first website. As I am sure it is with every website at this very early stage of development, it looks amateurish, clunky, and just plain ugly. But it is a beginning, and therein lies the promise of this humble jumble of words and images. After all, Neil Armstrong’s first space mission was a total disaster. Not only did Gemini 8 fail in its mission, the crew barely got home alive. But the lessons learned in that early disaster took Armstrong and company all the way to the moon.
Notes on Readings
MacDonald, Chapter 5
In Chapter 5, “XHTML Text Elements,” MacDonald discusses the ins and outs of formatting text for the web. He begins by explaining the difference between:
and
MacDonald explains that the use of Cascading Style Sheets (CSS) to apply typographical elements to an entire site is often far more efficient than manually formatting every single element. He then goes into the different types of XHTML elements. These include container elements (such as the <b> command that apply to a group of content items) vs. standalone commands (such as the <img> command that applies to a single item) and block elements (such as paragraphs that go inside the main body) vs. inline elements (such as images that go inside the block elements).
MacDonald then gives more detail on some of the basic items discussed in Chapter 2. He explains how paragraphs can be refined using non-breaking spaces and line breaks. He explains how more organization beyond basic headings can be added to a page using horizontal lines, pre-formatted text and block quotes. He also discusses how divisions and spans can be used to add even more organization in conjunction with CSS definitions.
MacDonald then moves on to discuss XHTML listing elements. These include:
- Ordered lists: Those that organize list items by sequential numbering.
- Unordered lists: Those that organize list items by bullet points.
- Definition lists: Those that display list items as dictionary definitions.
He also discusses start and type attributes and using nesting lists to create outlines.
MacDonald then explains the elements of inline formatting. He reviews italic, bold and underline script and explains how emphasis and strong commands can provide even more differentiation to text when paired with CSS definitions. He walks the reader through using super- and sub-scripting, teletype and special characters. MacDonald concludes the chapter with some tips for displaying non-English languages.
This chapter was very helpful to be reading when beginning my website. I decided to make an LIS resource site, and as such text will be paramount. With all of the information contained in this chapter I find I have even more control over the appearance of text in my site than I do with a Microsoft Word document. I expect that I will be referring back to this chapter often as I continue work on my website
MacDonald, Chapter 6
In Chapter 6, “Style Sheets,” MacDonald explains how to use CSS documents to tweak virtually every physical element of one’s site. He begins by explaining the 3 types of style sheets. These are:
- External: Those stored on a separate file and applied to several or all pages in a site.
- Internal: Those inserted in the <head> of a page and specific to a given page.
- Inline: Those inserted into the start tag of an XHTML element and specific to that element.
MacDonald then explains the elements of CSS rules and how each part of it works. Those parts are:
- Selector: Specifies the type of content the rule affects such as h1.
- Property: Specifies the type of formatting applied such as color.
- Value: Specifies the value of the property set in the rule such as blue.
MacDonald then discusses the various properties that affect the applications of CSS rules. These include:
- Cascade: If rules conflict, they will be applied according to the following order of precedence:
- Standard browser settings
- External style sheet
- Internal style sheet
- Inline style rule
- Inheritance: Commands that are applied to elements such as <body> will be applied to all sub-elements contained therein.
MacDonald then discusses the process of specifying colors with CSS. He explains the difference between background color and text color. He walks the reader through selecting colors by using color name, color code or Red-Green-Blue (RGB) values.
MacDonald moves on to the ins and outs of using fonts on the web. He explains the various elements of font to include family, size, weight, style, variant, text decoration and text transform. He describes the different types of fonts and explains how browser settings can affect the size of font visitors will see on their screen. He moves on to a discussion of alignment and spacing issues, borders and white space. MacDonald concludes with a discussion of how class selectors and class rules can be used to differentiate parts of a page, especially when used in conjunction with the <div> command.
This was the first chapter in this book that I experienced as lengthy and difficult to read. I expect that at this very early stage of development it is simply a case of too much information at this point. I am sure once I am ready to start fine-tuning my site I will go back to it and things will begin to make more sense. Despite that; it was still very interesting to get a look “behind the scenes” of what makes a web site unique.
Beaird, Chapter 1
In Chapter 1, “Layout and Design,” Beaird discusses the basics of web page appearance. He encourages the reader to look for the “happy medium” between usability and aesthetics. He names the parts of a web page users expect to see, which include the containing block, navigation bar, content block, footer and white space.
Beaird then moves on to discuss design theory. He explains the “rule of three” that governs what most people will find aesthetically pleasing in a site. He explains how concepts of balance and symmetry affect visitor perception. He discusses how unity can help pull together disparate elements of a page through the proximity of objects and repetition of similar features. He discusses how emphasis can be placed on parts of a page through the placement of objects towards the center, the continuation of elements in a given direction, the isolation of objects, contrast between varying elements and clever use of proportion.
Next, Beaird discusses page layout. He begins by walking the reader through the pros and cons of three traditional layout styles: left-column navigation, right-column navigation and three-column navigation. He then examines some emerging trends, to include the expanded use of footers and placing content on the left followed by two navigation bars. He continues the discussion with issues relating to fixed vs. liquid width navigation and screen resolution. He concludes the chapter with a “real-world” example of how he used the above-listed design principles to meet a clients needs.
Of all the chapters I have read for this class so far, this one has been the most enlightening for me. I have always been much more of a scientist than an artist, and this very helpful discussion of basic art principles is all quite new to me. Beaird uses a very beautiful “zen” style of both layout and writing in the book that helped me to absorb the information. These will certainly be very useful principles as I seek to design a site that is both pleasing to the eye as well as informative for my visitors.
Website Reviews
While the style of this site came across as very corporate, it was very informative. It was interesting to see how they used three-column navigation for the home page and left-column navigation for the others. It was also an interesting look at how websites get their names.
http://www.internettrafficreport.com/main.htm
All of the white space on this site was a bit distracting, but the main pieces of information were very easy to locate. I was very surprised to find out that Australia and South America have the most reliable internet connections in the world. I will definitely want to make sure my site is more “filled-in” than this one
http://www.internetworldstats.com/stats.htm
This was a very bare bones site and the designers were obviously concerned only with displaying the data. I will have to take steps to make my site more inviting to users. The statistics were good to know. The pop-up solicitation to sign up for the newsletter was rather annoying.
The home page of this site demonstrated Beaird’s “rule of three,” but in a rather soulless manner. There was an abundance of data, but the sheer volume of it made locating what might be helpful rather difficult. The other sites alternated between three columns and one, which I found rather disoriented as I navigated through. I will definitely want my website to display more unity.
This site seems to have found that happy medium between usability and aesthetics. There was a lot of data on virtually any topic that one cared to know about, but it was very well arranged and easy to find information on a given topic. It was designed very well, the differentiation of color on the home page especially caught my eye. This is definitely a good site to learn from.
http://www.nielsen-netratings.com/
The Nielsen site was very well designed, but not quite as informative as the others. It was obviously a corporate site with attracting new customers the main focus on the designers. Definitely a lot to learn here in terms of layout, but I will strive to inform in a far less solicitous manner.
http://usfweb2.usf.edu/ur/webadmin/webguide.html
This page was full of school spirit and regulations, but very lacking in design principles. I found out some interesting things and may even use the “official” USF colors in my page, but I must say that I am very glad these rules don’t apply to the myUSF intranet. The page scrolled down endlessly and certainly did not encourage visitors to read all the way through to the end.
Final Thoughts
I remember reading how Armstrong described the moment he first realized that he wanted to be a pilot in his autobiography. His father took him to a local pilot who gave rides for a fee just so his passengers could find out what it was like to fly. Most of the passengers were scared out of their wits, but young Neil knew that he had found his calling. All of the great journeys in this life begin exactly so, with a dream. As look at the tangled mess I hope to tame on my website, I dream a dream of what it can be. I remind myself that quite a few people have gone very far on a dream. Some even went all the way to the moon.
Until next time, take care of yourselves, and one another.
Farley