|
8:30-8:50 |
1:00-1:20 |
More HTML: headers, hr, lists, definition lists |
|
8:50-10:00 |
1:20-2:30 |
Document Markup Exercises |
|
10:00-10:30 |
2:30-3:00 |
Break |
|
10:35-10:50 |
3:05-3:20 |
What does what on the internet? |
|
10:55-11:30 |
3:25-4:00 |
Create indexes, log for the day and answer journal questions. |
|
11:40-12 |
4:10-4:30 |
Free Time |
More HTML / Lecture Notes
<html>
<head>
<title>More HTML!</title>
</head>
<body>
<h1>Heading One!</h1>
<h2>Heading two!</h2>
<h3>Heading three!</h3>
<p>Nice. :x </p>
<p>Nice. :x </p>
<hr />
<p>Nice. :x </p>
<ul>
<li>Open HTML tag</li>
<li>Open head section</li>
<li>Open title</li>
<li>Name the document</li>
<li>Close title</li>
<li>Close head</li>
<li>Open body
<ul>
<li>Put your cool content here</li>
</ul>
</li>
<li>Close body</li>
<li>Close HTML</li>
</ul>
<hr />
<dl>
<dt>HTML</dt>
<dd>Root element of an HTML document</dd>
<dd>First opening tag</dd>
<dt>body tag</dt>
<dd>Contains all the content of your HTML document</dd>
</dl>
</body>
</html>
<html>
<head>
<title>CSS Basics</title>
<style type="text/css">
h1, p, h3 { color: red; }
h2 {
color: purple;
background-color: silver;
}
li {
font-family: "Arial";
font-size: 20px;
list-style-type: square;
}
li li {
list-style-type: disc;
}
</style>
</head>
<body>
<h1>Heading One!</h1>
<h2>Heading two!</h2>
<h3>Heading three!</h3>
<p>Nice. :x </p>
<p>Nice. :x </p>
<hr />
<p>Nice. :x </p>
<ul>
<li>Open HTML tag</li>
<li>Open head section</li>
<li>Open title</li>
<li>Name the document</li>
<li>Close title</li>
<li>Close head</li>
<li>Open body
<ul>
<li>Put your cool content here</li>
</ul>
</li>
<li>Close body</li>
<li>Close HTML</li>
</ul>
<hr />
<dl>
<dt>HTML</dt>
<dd>Root element of an HTML document</dd>
<dd>First opening tag</dd>
<dt>body tag</dt>
<dd>Contains all the content of your HTML document</dd>
</dl>
</body>
</html>
Document Markup Exercises
-
Apply appropriate markup to the class syllabus
-
Apply appropriate markup to this short essay.
Quote:Home Page Goals
by Derek PowazekWhen I set out to design a website, I do it backwards. I start with the design of the smallest, deepest element: the story page or search results. Then I work backwards to design their containers: section pages, indexes. Then, lastly, I work on the home page.
I do this because each container needs to adequately set expectations for what it contains. If the home page says one thing, but the internal pages say another, that’s going to lead to a user-experience failure.
This also means that, by the time work begins on the home page, there’s a lot of momentum going already. And any lingering anxiety is going to come to a head—on the home page.
Home pages are anxiety-inducing for companies. The home page is your first impression. And like the old saying goes, you only get one chance. So home pages themselves have a unique set of design goals.
Before I get into those goals, here’s a grain of salt. Every site I’ve ever worked on has had strikingly similar traffic trends, and one stands out. Remember that smallest, deepest element I described earlier? This is the atomic element—for a news site, it’s the story page; for a search engine, it’s the search result; for a store, it’s a product page. This page accounts for 60 to 75 percent of all page views on the site. The rest belong to the home page.
This is not to say that the home page is unimportant—it’s hugely important as a first impression. But looking at the numbers, you’ll get far more bang out of tweaks to the atomic element pages than the home page.
That said, let’s look at the unique challenges that home pages present. Remember, when I say home page, I mean the page that lives at whatever.com. The first page a user sees when they show up at your front door.
Any home page has four main goals, in this order:
Goal 1: Answer the question, “What is this place?”
This is, and always will be, the number-one job of any home page. If you ignore this goal, you’ll leave new visitors in the dark.
The first thing a new visitor does when they get to an unfamiliar site is ask that question. If the site does not do a good job of answering it within a few seconds, the user will feel dumb, leave, and never come back. After all, what would you do if you met someone and they made you feel like an idiot? Would you want to hang out with them again?
This is all about making a good first impression.
Don’t be afraid to use good old fashioned text to say: “This is who we are, and this is what we’re about.” Then link to a more verbose about page or tour. That way, the people who need that help have a place to go to find it. And make sure the text you use is excited and positive—and makes the reader feel important.
Don’t be too wordy, of course. Make sure all the words you use are doing heavy lifting. But the explanation has to begin at the top of page one—it’s the most important thing you can do to turn newbies into repeat visitors.
This is especially important for companies trying to do new things. Google can get away with a user-hostile front page because everybody already knows how to use it. But that’s the exception to the rule. If you’re doing something new, sometimes you just have to explain it in plain language, like: Flock is a free, open source web browser.
If a first time visitor to your site’s home page does not understand what it is within three seconds, you’ve failed goal number one, so feel free to skip the rest. The only people who will use the site are the people who already know what it does. Or, ya know, masochists.
Goal 2: Don’t get in the repeat visitor’s way
All that said, the second goal is to get out of the way of the users who already know what they’re doing. These are the users like you, the ones who have been here before and already get it.
One great technique that accomplishes the first two goals in one fell swoop is to make one area of the page dynamic. That area can show an explanation to newbies. But once the user is logged in, replace the explanation with some information specific to that user (which also meets goal three).
Flickr takes this method to an extreme, providing entirely different home pages if the user is logged in or logged out. For them, this is a perfect method. The site is so customized for logged in members, and the service is just different enough from other sites, it makes perfect sense to provide an entirely different experience to each group, and it perfectly meets goals one and two.
Goal 3: Show what’s new
By the time you get to goal three, you’ve already addressed the needs of newbies and repeat visitors. Congrats, now everybody’s on the same page! Now it’s time to impress them all with what’s new.
Too many sites stop after addressing goals one and two. But once a user’s gone through the trouble of figuring out what you do, and then actually coming back, you owe them something: what’s new. You know your site better than they do, so be their tour guide. Suggest places to visit, starting with whatever’s new. Blogs are especially good for this, with their newest-comes-first formatting.
Goal 4: Provide consistent, reliable global navigation
This is a site-wide goal, but it’s important to list here because the expectations you set on the home page will carry forward to every page on your site. It’s the little things that count here. If a link is in the global navigation on the home page, it should be in about the same place everywhere. If there are six links in the footer, those six links should appear in every footer.
Bottom line
Designing for good user experience is about communicating clearly, setting expectations early, and then delivering what you’ve promised. Think of your home page as the opening verse of a song. All you have to do is make sure you stay in tune throughout the user’s entire listening experience.
(original text can be found at A List Apart)
Journal Questions
How are you doing with making webpages so far (i.e. too easy, about medium, difficult?) What seems to be the most difficult thing you have trouble remembering to do when you're starting a new page? Is there anything in Kass' lecture that you want more information about?
Homework
-
Finish Indexes
-
Read pp. 3-11 on Standards