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.