How-To Develop Websites 101. A Quick and Dirty Process OverviewThis is rather long how-to, and still in process. Speaking of process, that is what this primer is about - the process of building Web sites regardless of what kind of software or technology tools are used. This primer is specifically geared for management types and folks needing to ramp up quickly on basic Web development, but not on coding or technical details. Sources are cited.
I've been developing Web media since 1994 and was a Webmaster in 1995. This Primer was modified from material originally created for a graduate class on web design called EDTEC 541: Multimedia Development while I was teaching at San Diego State University after completing a Masters Degree in Educational Technology in 1999.
The Concept
Building a Web site is like making a movie. You need a team of people (or one person with several skills) a script that everybody has a copy of, creative, technical, and management skill-sets, and lots of communication and cooperation.
And it's a process. While different people have different processes, this is the one I use and find to be common in basic concepts and sequence, if not details:
- Do A Needs Assessment
- Write A Project Proposal
- Make A Site Map
- Sketch a Template
- Build a Rough Draft, or "Beta"
- Usability Test Beta
- Launch Site
If you remember only one, OK two. Fine, three things...
- Plan on paper
- Test as you go with users
- Schedule lots more time then you think for revisions. Here's a rule of thumb for scheduling any software development from the very famous software production book, "The Mythical Man-Month" by Frederick P. Brookes Jr. Notice that only 1/6 of the time is programming.
- 1/3 - Planning
- 1/6 - Programming
- 1/4 - Component test and early systems test (testing a very rough draft, and private, version of your site with users and crew)
- 1/4 - Systems test, all components in hand (testing a "dress rehearsal" version of your site with more users. This can be private or public, but it should be a small amount of people. Often this is called a "Beta" version. Google was in a public beta for many months before launching "version 1.0")
What is the Web According to Its Creator?
First, we need to make sure we understand the medium we are producing for. The Web is not the Internet. The Internet encompasses the Web, email, file transfer, etc. The Internet was born in the late 1950s, had a boost in the late 1960s and morphed into more or less what we use now in the early 1980s. The Web on the other hand was born in 1990 and came to fruition around 1993. The Web uses the Internet as its medium for broadcasting and interactivity.
"The W3 world view is of documents referring to each other by links. For its likeness to a spiders construction, this world is called the Web."- Tim Berners-Lee, Robert Cailliau, the main inventors of the Web. September, 1992
"Goals of the Web:
* Personal empowerment
* Social efficiency, understanding and harmony
* Exploitation of computing power in real life"
- Tim Berners-Lee, WWW6 Dev/History Keynote Speech, 11 April 1997. (Source: Living Internet)
A short history of the Web.
- In the 1960's, Ted Nelson popularized the hypertext concept, and Douglas Engelbart developed the first working systems.
- Tim Berners-Lee, Robert Cailliau; WorldWideWeb: Proposal for a HyperText Project; 1990
- Mosaic - The first widely popular web browser, developed at the National Center for Super Computing Applications in 1993 by a team led by Marc Andreessen.
- Netscape - In 1994, Andreessen and most of the Mosaic team leave NCSA to form Netscape with Jim Clark, where they build and release a commercial grade browser called Navigator for free on the net.
- Online Service Rush - The major online computer services provide access to the web in 1995, quickly making it a household word, and suddenly spreading its use to millions of new users.
- The dot com stock crash happens around 2000, weeding out many irrationally exuberant web sites.
- Broadband recovery. After the crash the Web continues on in a more sane way, with high speed and wireless access providing more and more multimedia content and possibilities. Google is born and improves searching the Web and advertising. (Source: Living Internet)
Basics of the Web and HTML
View Source
The Miracle of HTML and its rapid spread around the world is largely due to a menu item in Web Browsers called "View Source." Lets take a look.
- Open this web page
- While looking at the page find the menu option in your Web browser for "View Source" or "Source" or "Page Source" and select it. You are not looking at what a Web browser translates into a web page for you to see. HTML is way more complex then simple HTML now with things like Cascading Style Sheets and Layers, but the idea is the same.
- Look at the code. Then look at the page. See how <b> makes "Hello World" bold?. <p> is a paragraph break, and <img src= is the source of the image being displayed in the page? You can copy this code into a text file, name it "something.html" and open it in a Web browser on your computer. You could then change things and click "refresh" on your browser to see the changes. This is how many people learned HTML in the beginning of the Web.
The people who discovered "View Source" early became some of the first web developers. During that time I was a web master myself and we all used "view source" to share each others work. When someone came up with something cool, we could all see the code they used, copy it, and change things to build on their work. Remember, when the web arrived, there were no classes or books to read. It's way more complex now, but the beautiful circle of seeing a page and seeing the code is still usually available to us all. It's always amazed me that people can surf the web for years and never try "view source" but I guess it's just geeks who feel it is important to try all the menu options in a piece of software.
As you construct web sites you will constantly be checking work in a Web browser and clicking "refresh" to make sure you're seeing the latest version.
As the Web has developed more advanced coding has evolved, such as XML and Cascading Style Sheets. But the concepts are still consistent.
Step #1: Needs Assessment
Unfortunately Web production is like any media production in that it is essential to start on paper. I say unfortunately because messing around with software is much more fun then writing, but it's something we must do. This means you need to fight your natural tendency to go right into the sexy software and start building pages and geeking out. So we have to write and the first thing we write is called a needs assessment.
- Identify at least three individuals who are potential users of your site. If potential users aren't available, try to find a close approximation.
- Give them a short description of your project, then ask some simple questions to try and find out what kind of information/functionality they would expect. For example:
- If you were to visit this site, what would you be interested in finding?
- What would you expect to be the most prominent links on the front page?
- Where and when do you think you'd use this site?
- What kind of computer or PDA would you most likely be on when you used this site?
- What kind of written information would you want on the site
- Would you find video/Flash useful?
- You'll use this information in your proposal to think about not only what to include and what to leave out of the site, but also how to design navigation aids to help people find what they're looking for. Jot down a few notes as you listen, thank your subjects, and put your notes where you can find them when you begin to draft a project proposal.
Step #2: Write a Project Proposal
Ah! Writing. It's the hardest part of any media creation, but there's a reason. It's hard because it forces you to make hard decisions and do some hard thinking about what you are going to do, how you are going to do it, and what resources you've got.
So now it's time to write a project proposal.
Here's a sample proposal in MS Word.
Step #3: Make a Site Map
A site map is just a conceptual diagram of a Web site. Working on "paper" saves time and allows you to think things through before you get lost in the actual applications and production process. A site map is also an important communication tool to use when talking to any other members of a development team.
Each box represents a future page on your Web site. To reinforce that, and to help you when it comes time to actually build the thing, give each box a descriptive title and a file name. Each line represents a link between pages. Everywhere you see a link, it means there's a button or text link or image map or some other way to get from that page to the next. Notice that this site map is arranged hierarchically. Studies have shown that users, especially ones who are new to your content, are most comfortable navigating in sites that are organized hierarchically and have about three levels. After three levels, they quickly get ?lost in hyperspace. Here's a more complex site map. But remember, you can also do them on paper with a pencil. The point is to use them to make you think about your site.
Now it's time to sketch out a template. As you know from surfing Web sites, each page on a site basically looks the same in terms of navigation, colors and basic images. Making a template is another way to save time and resources by working on paper. A template is a way to think about and communicate what you're site will basically look like.
Some Design Principles
Before we move to designing out template and building out site, here's some principles to remember.
- Eyes scan Web pages from top left to right and are then attracted to contrasting colors or movement.
- Basic magazine layout and art design principles such as contrast, white space, and color matching work on the Web. A rectangle is a rectangle and magazines, TV, Movies, etc. all are rectangles of content.
- For reading text, follow dead tree book rules in terms of making sure there are margins and white space between concepts.
- Users need to know "where" they are in a site at all times.
- No links should take a user to where they already are.
- Make words clickable, do not use "click here"
- Even if your site is for high bandwidth users, provide for modem uses who try and visit.
- Always have a way to turn off any sound on a site.
- Avoid moving and blinking animations with large blocks of text to read nearby. That's like asking someone to focus their mind on the Vegas strip.
- Avoid fancy interfaces that sacrifice coolness for the user's ability to use the site and access information. Keep
linked
words on one line - Don't forget the simple stuff like dates of authorship, copyright footers, author names, phone numbers for businesses, home buttons, etc.
Resource: Webmonkey: http://hotwired.lycos.com/webmonkey/
Given those principles are followed, a template should communicate the following:
- Page layout: this is where you get to exercise those four design principles. What were they, again??
- Content: Where does it go on the page?
- Types of media: will you have pictures, graphic, movies, animations?
Always do storyboards in paper and pencil. The reason for this is that, if you do them on your computer, you tend to spend a bit more time on them, and become attached to them. These should be quick sketches that you don't mind marking up, erasing, even balling up and tossing in the trash can. You can storyboard one page to establish basic design, or you can storyboard each page to make a physical site map and establish what content will be on which page. OK, Now build a "Beta" of the site, or have it built. Betas are rough drafts you will use to usability test your site. Then you will make changes and launch.
Step #5: Build A Rough Draft, or "Beta"
Also known as a "Beta." This can be done in many ways. One way is to build, or have built, a template from your template sketch and then when you like it, duplicating it into a unforgettable site with "placeholder" content like gibberish text and pictures. then ad what content you can.
Either way, you need to get something built.
Step #6: Guerilla Usability Testing
Once you have a working beta, you can test it to see what users think. The user is likely to be alone when using your site. Usability testing is how we get an idea of what they are going to experience and anticipate problems they have using our media. Studies have shown that just asking a few people to surf your site while you observe can catch about 80% of problems.
QuickTime Video Example of Think Aloud method using a guerilla one-camera set-up and mirror.
Plow ahead below. Or read a primer on the Think Aloud method, then plow ahead.
How-to do Guerilla Usability Testing
Before You Start
- Get a computer ready with two chairs in front of it.
- Get a note pad and pen.
- Make sure your site is ready to test by doing a quick surf.
- Open a Web browser on another page, like Yahoo so the user does not see the page they are testing until you start the test.
Think Aloud (5-10 minutes)
- Introduce yourself. Get their name. Write it down. Ask them if they need anything like water.
- Ask them if they know about the Think Aloud Method. If not, give them a demonstration, and then have them practice on a different site.
- Ask the user if they are ready.
- Give them the simple task, and any context they will need, e.g. "You've found this site about water rights and you're about to go to it. Try and find information on Rio Grande legal battles when you get there. Talk out loud while you surf."
- Find your site and give them control of the mouse and computer
- Bite your tongue and take notes, simply saying "keep talking" if you must talk. If the user is totally stuck for several minutes, only then help them a little bit.
- When they are done tell the user they are finished with Think Aloud and you'd like to ask them a few more questions.
Post-Test Interview
- Ask the user their opinions of site, the test, anything they want to talk about.
- Ask them any other questions about the site you wanted to know.
- Thank them for helping you make a better site.
Wrap up
- Look at your notes and make sure you can read and understand your results.
- Write up a report of your findings according to the usability assignment.
Usability Web Resource: Useit: http://www.useit.com/
Step #7: Launch The Site
OK, now you can make changes based on what you learned from testing and launch you site. You can then do another round of usability testing if you want, and begin the wonderful care and feeding cycle of a Web site.
As they say, "you don't build Web sites, you adopt them."
More Info: