Webpage Creation Bootcamp: Day 2 - Design

From Academic Computing

Jump to: navigation, search

Contents

[edit] Purpose

Students will be introduced to basic design and layout concepts and to CSS (Cascading Style Sheets) to format their pages

[edit] Prerequisites

Webpage Creation Bootcamp Day 1, XHTML.

[edit] First Steps

The first step of making a webpage is the exact same one you would do for a print document. You plan and organize what you want to say, and how you want to say it.

[edit] Planning

  • What is the point of the document?
  • What do you want to say?
  • Why do you want to say that?
  • What is the relevance of what you want to say?
  • To whom do you wish to say it? (Who is your audience?)

Questions like these help you focus your document.

Next, consider the organization of your document, and consider how it might be broken into multiple documents. You might want to list all of your ideas (brainstorm) and determine where you want the ideas to go.

[edit] Example 1

Say I want to start a personal web page about gardening.

  • The point is to share my interest in gardening and some of my experiences.
  • I want to discuss growing from seeds, the plants I have grown, watering troubles, and hydroponics.
  • I’d like to make contact with others out there that share my interest.
  • The relevance to the gardening community may be "eh" because there are other pages that explain things better, but the relevance to myself is high, and the relevance to others with the same interest should be high.

So, the ideas I have for sections in my webpage (which will eventually become separate pages in my website) are: starting from seeds, plants I have grown, watering troubles, and hydroponics.

Other sections could include links to sites I have found useful and an “about me” section.

I have 6 sections now. I'll add to that a seventh, an index/home page.

That's a lot of sections, and I don't have much to say about each. Therefore, I'll condense a few sections. I'll put "starting from seeds" and "plants I have grown" into one section/page. They are tightly related, and easily flow into each other. I might decide to put "watering troubles" there, or make it into a section called "Trouble," since I had more trouble than just water. I think I'll keep the hydroponics section by itself. The "about" section I'll put on the home/index page because it's a personal site, and I'm not going to go into my life's history or anything like that. Links I may decide to keep separate.

That's 5 sections now, one main page (home/index) and four sub-pages/sections. That's pretty good.

Next I create the documents. Just type what you want to say in a word processor or a text editor. I recommend something with a spell-checker and/or a grammar-checker. (I realize that the grammar-checkers really aren't that great, but they might prevent some grievous grammar errors.) You can mark-up your document as you type it, but I prefer to write it first before I apply the markup.

So, if you follow my process, then you markup your document and apply heading elements, paragraph elements, etc. I prefer to use a plain text editor like Notepad to do this. It doesn't confuse you with formatting options that won't show up when you save your file with an .html extension.

And, lastly, get people to proofread your work.

[edit] Navigation and Layout

You’ve got your documents; you’ve marked them up; now what? Well, we need to make them connect to each other.

Normally, in a print document, all sections would be strung together in a linear, coherent stream, possibly with an index or table of contents to aid in navigation. In web publishing, one needn’t be so linear. You can connect sections to each other in a web of “hyperlink” interconnections.

The simplest way to begin is to simply provide links from your index/home page to each subordinate page in your document collection. Think of your index as the center of the spider’s web, with the subdocuments around the periphery, connected by hyperlink “spokes” radiating from the center. Don’t forget to include links back to your home page from each subordinate page.

This alone, while sufficient, still doesn’t quite take advantage of hypertext. There are a couple more things you can do, both of which will provide your readers greater control over navigation and generally improve their experience.

Consider this case. On my “troubles” page, I plan to describe solutions I found to my problems. In one instance, the solution was to make use of a hydroponics system. That would be an excellent opportunity to provide a hyperlink directly to my document on hydroponics. This sort of “internal” link makes navigation within my web site easier, and makes my site more useful to my visitors.

Another way to improve my site is to include external links. For example, a reader unfamiliar with hydroponics might be interested in learning more. A direct link, perhaps entitled “additional hydroponics resources” or “more information on hydroponics” could take the reader away from my document to one providing greater detail on the topic. 

<p>Important factors include <a href=”air.html”>aeration of the water</a> and proper <a href=”thermo.html”>temperature control</a>.  For details, check out the <a href=”links.html#hydro”>additional hydroponics resources</a> on my <a href=”links.html”>links page</a> and <a href=”http://dir.yahoo.com/Science/Hydroponics/”>Yahoo!’s hydroponics directory</a>.</p>

Now that we have internal navigation, we should think about top-level navigation, or navigation to sections/section headers. Westerners read left-to-right, top-to-bottom. Hence, we should put navigation aides at the top or the left of the page, if you’re writing for Westerners. I’d suggest using navigation aides at the top in general, because many people won’t scroll down past the first screen.

A really good idea is to look at other websites in the same genre as yours. You can get an idea of how they’re laid out and how you might want to do yours. You can also see how not to do yours if there are any that you don’t like.

[edit] Common layout elements:

  • A logo in the upper left or top of the screen with a link to the index/home page
    (On the index/home page, you should not put a link in the logo)
  • Navigation either at the top or the left
  • An “About” page or section with an e-mail link

[edit] Writing for the Internet

Web-surfers have the attention span of a gold fish, typically nine seconds. They don’t read; they scan. So, when you write for the web, you need to do it a little differently than conventional writing.

  • Highlight keywords
  • Have meaningful sub-headings
  • Bullet lists
  • Have only one idea per paragraph
  • Start with the conclusion
  • Halve the word count
  • Link to external sources to back up your points
  • Write objectively and concisely
  • Make you document scannable
  • Don’t use “marketese,” promotional/boastful writing

[edit] The Good, the Bad, the Ugly

Let’s talk about some things that make pages good, bad, and horrid.

[edit] The Good

  • Have a brief summary or tag-line on each page. This is not so important for personal sites, but it’s still a good idea because a web surfer doesn’t read—he/she scans the page and if you include a tag-line, the surfer will know whether or not to read the rest of your page.
  • Have a descriptive <title>. Bookmarks generally store the page by the title, so a good title will ensure that your readers will remember your site. For subordinate documents, consider having the title of your site followed by a concise description of that page. For example, say I’m at the hydroponics section, my title would look something like, “Su-Lyn’s little Porch Garden, Dealing with Hydroponics.”
  • Emphasize your top-level navigation elements. Mine would be “Growing,” “Trouble,” “Hydroponics,” and “Links.” Don’t get too creative with what you call the navigation links. Remember that people have to click on these links and if they don’t know where they’re going, they probably won’t go there.
  • Create descriptive links. Whatever you do, don’t say “Click HERE!”
  • Use meaningful graphics. An image is worth a thousand words, but don’t overuse images. Images may be worth a thousand words, but they can be the size of ten-thousand words. (More on Filesizes on Day 3!) Use only those pictures that will give extra meaning to your site/page.
  • Minimize clicks. Don’t make your viewer go through seven clicks to get someplace. They will leave and never come back before the third click.
  • Follow other people’s designs. I know that the Web is supposed to be all about creativity and sharing ideas, but if you significantly differ from all the other websites, people are going to wonder how to do anything before clicking out of your page.
  • Make sure that every page is linked to another page. Link all your pages to your homepage. If someone has linked to one of your sub-pages, and you don’t have a link to your homepage or another section of your site, the viewer may not know what to do and may never see the rest of your site.
  • Use standard link colors. Links are blue unless otherwise visited (which are purple or red). If you mess with them, viewers may have trouble navigating.
  • Keep your information updated. Stale information is boring, and people will stop coming if they aren’t entertained.
  • Keep clutter to a minimum. Viewers won’t know where to click if your page is cluttered.

[edit] The Bad

  • Don’t have horizontal scrolling. The current web-standard is 800X600 screen resolution. If you make your site larger than 800 pixels it will annoy your viewers to no end.
  • Don’t make font sizes fixed. f you do, you’ll be throwing out a good chunk of readers because some people, especially those that have been staring at screens all day and those whose eyesight is less than ideal, want to be able to resize their fonts.
  • Don’t have large blocks of text. Go back to the “Writing for the Internet” section for more on this subject.
  • Don’t use scripts. Scripts can get quite annoying and increase the time it takes for your page to download. (i.e. applets, javascript)
  • Don’t have long URLs. Or, at least, try not to.
  • Don’t have unexpected e-mail links.Clearly mark all e-mail links, like “E-mail me” or “srosenbe@ritchie.acomp.usf.edu”
  • Don’t move around pages. If you move or rename some pages, all links going to the renamed page will end up with a 404 or 403 error.
  • Don’t have long scrolling pages. Viewers may decide that you just have too much information to handle at one time and go somewhere else.
  • Don’t use lots of graphics. These hurt download times.
  • Don’t use sound or video. If you want to use sound or video, link to the file. Forcing your sound or video on people is not nice, and severely impacts download time.

[edit] The Ugly

Examples of bad design

[edit] Playing with Colors

Now, let’s take a look at colors. If you remember from yesterday’s handout, the “More Complex Page” had some weird looking stuff in it.

    1. 000000???? #FFFFFF?????
      This is what is known as hexadecimal (base 16 numbering). Hex is used in the Web for colors. Television, the Web, monitors and all devices that use light to produce color use “subtractive color.” This webpage has a very good explanation about colors and the web http://www.htmlgoodies.com/tutors/colorexp.html
      Basically, subtractive color uses red, green, and blue light to make colors. You subtract hue from the RGB scale to get the various colors used on the web. Using hexadecimal, (0123456789ABCDEF), 0 being the least light/hue and F being the most light/hue, you can do all sorts of stuff. You can go to this website (http://fox.org/~lori/color/) to play around with colors.
  • More color stuff
    XHTML color codes are a combination of six hexadecimal digits preceded by the hash (#) symbol. The first two digits are assigned to red, the second two to green, and the last two to blue.
    Colors are displayed differently for almost every person depending on their monitor set-up, their video card, their browser, etc. However, there is a certain set of colors that should look practically the same for everyone. For web-safe colors, use doubled digits (e.g. 66, 33, or CC). Also, web-safe colors are increments of three starting at zero (0, 3, 6, 9, C, F).
    You can also use certain words, like black, white, and blue, to set your colors.

[edit] A Touch of Style (Cascading Style Sheets)

You use CSS for style (formatting). This is where you decide what kind of font to use, what kind of colors to use, how to align text, etc. CSS has three types of style sheets, embedded, inline, and external.

  • Embedded—controls a single page. Put embedded style sheets in the heading. 
<head>
  <style type=”text/css”>
  <!--
	body  {color:purple;	
	       background-color:#FFFFFF}
  -->
  </style>
</head>
  • Inline—controls single elements in a page. 
<p style=”background-color:#FFFF00; text-align:center”>
  • External—controls multiple pages. You have to link to the external style sheet, but you can control every page that links to the external style sheet. This is an excellent way to manage your document collection—you can give all your pages a “new look” by changing only one style sheet.

[edit] An Example of External Style Sheets:

<!-- External style sheets are separate files. (sample.css) -->
body {margin-left:10%;
      margin-right:10%;
      background-color: #FFCC33;
      font-family: Garamond, "Times New Roman", serif;
      color: #FFFFFF}

h1,h2,h3 {margin-left:3em; 
	       background-color:#000000; 
	 	    color:#FFCC33;
		    font-family:verdana, sans-serif}

strong {text-transform: uppercase;
        font-family: Verdana, sans-serif;
        background-color:transparent}

p.changed {padding-left: 0.2em;
	   border-left: solid;
	   border-right: none;
	   border-top: none;
	   border-bottom: none;
	   border-left-width: thin;
	   border-color: red;
	   font-family:georgia, serif}

.color {color: #FFCCFF; background-color:transparent}

A:active {text-decoration: none;
	  font-family: helvetica, arial, verdana, sans-serif;
	  color: #CCFF00;
	  background-color: transparent}

A:visited {text-decoration: none;
	   font-family: helvetica, arial, verdana, sans-serif;
	   color: #FFFF99;
	   background-color: transparent}

A:hover {text-decoration: none;
	 font-family: hevetica, arial, verdana, sans-serif;
 	 color: #0033FF;
	 background-color: #FFFFFF}

A:link {text-decoration: none;
	font-family: verdana, sans-serif;
	color: #0000FF;
	background-color: transparent}

<!-- Linking to the .css file -->

<html>
  <head>
    <title>An example of external style sheets</title>
	 <link type=”text/css” rel=”stylesheet” href=”sample.css” />
  </head>

  <body>
	 <h1>Here are some more things to do with CSS</h1>
	  
	 <p class=”color”>You can do all sorts of things with CSS</p>
	 <p>You can specify margins, fonts, colors, links, etc.</p>

 <hr />

 <h2>Another Heading</h2>

 <p class=”changed”>Another thing with CSS</p>

 <hr />

 <h3>Examples with links</h3>

 <p> Go to <a href=”http://www.acomp.usf.edu/” title=”Academic Computing’s Home Page”>AComp</a>.  It’s a <strong>cool</strong> school.</p>

 <p>This should be a site that you’ve never visited:  <a href=”http://www.megatokyo.com/” title=”A webcomic”> Megatokyo.com</a></p>

 </body> </html>
Retrieved from "http://wiki.acomp.usf.edu/index.php/Webpage_Creation_Bootcamp:_Day_2_-_Design"
Personal tools