Under Settings, faculty can specify delivery dates for their assessments, including whether or not to accept late submissions. In addition they can add a time limit, and add feedback (for specific responses, or for the assessment as a whole). They can even allow students to respond anonymously, or choose to hide students’ names from the person grading a test (such as a course assistant). Two settings in particular can be exploited for pedagogical purposes: Assessment Organization and Mark for Review.

With Assessment Organization, test or survey questions can be delivered either linearly or non-linearly. In the linear format, the order of questions is set by the test creator, and students are forced to answer one question (or part of the test) at a time, without being able to return to previous sections. This is a good choice if, for example, the answer to question 2 shows up in question 4.  The non-linear (or “random access”) format provides much more flexibility: students can click on a Table of Contents link to skip ahead or return to unanswered questions. I like using this format if I can, since sometimes test takers panic and can’t remember the answer to something when put on the spot.

With Mark for Review, assessment creators can let students bookmark questions that they want to look at again before they submit the test. Students will see a check-box that says “Mark for Review;” if they click it, then that question is marked in the table of contents. To take full advantage of this tool, students should look over the table of contents before submitting their answers. They can use it to click on the questions that they wanted to review from that page. Naturally, this option only works with non-linear (random access) tests.

Assessment creators should explore their options under settings; students should make a point of noticing if they have the chance to review questions, or if they should make sure not to skip questions!

For more details on how to use Test & Surveys Beta, browse through these IT Training materials:

Least You Need to Know documents

• For instructors:
• Tests & Surveys Beta: Settings Overview
• Tests & Surveys Beta: Create a Test or Survey

• For students:
• Tests & Surveys Beta: Taking an Assessment

Feature Demonstrations

• For instructors:
  • Tests & Surveys Beta, Settings overview
  • Tests & Surveys Beta, Creating a new assessment

• For students:
  • Tests & Surveys Beta, Taking a linear test
  • Tests & Surveys Beta, Taking a non-linear test

1. aesthetic skills (to make things look good)
2. information architecture skills (organizing the content in a way so that users can find what they need)
3. interaction design skills (making sure that the paths within a website makes sense and are pleasurable for the user)
4. technical skills (XHTML, CSS, knowing how to turn on a computer)

Many web design shops have pros who are experts in each of these areas. How can you, a smart but inexperienced person, compete with that?  You’re just trying to put together a little web site for yourself, your aunt the locally famous banjo player, or a volunteer organization…

divide et impera, or, Divide and Conquer

It is quite likely that you will go crazy if you attempt to figure out the page content at the same time you’re trying to figure out whether the color scheme should be pink with purple or tan with brown. It is my opinion that the most amazing design sense cannot overcome bad planning, so, it is my recommendation that you focus on the stuff in the site first, then worry how it looks. Decide what stuff is going where, in roughly what order, and then you can experiment with graphics, colors and typography.

Wireframes to the rescue

Wireframes in the design world are very plain sketches or diagrams that show where the content, navigation, and buttons on a webpage go. Wireframes are usually in black and white, and use placeholders like

to represent images that will go onto the page later. To use an analogy, wireframes are to an Amish person what a finished website is to Lady Gaga.

The nice thing about doing wireframes as part of your planning process is:

• they’re much easier to change and modify than an actual web page
• you don’t have to invest any time on the technical side (figuring out how to make the XHTML and CSS work together to accomplish your vision)

So, what are some tools you can use to create wireframes?

Pen and Paper

If you have some artistic skills and are working on a site by yourself, hand-drawn sketches can be a great way to go.  They get you away from the computer and can be fun to do; just grab pencil and paper.

Gliffy.com

A cross-platform, online-based tool, Gliffy is definitely not all-powerful, but it is pretty easy to use,  free, and allows you to share your sketches with others. Running your ideas and sketches past other people is always a good idea, and its a lot easier to change aspects of your design at this phase than it is later on.

There are actually quite a few tools for wireframing, but the important thing is to wireframe first, then add the design bells and whistles later. You really don’t have to learn a whole new tool just to do a wireframe.

Good luck!

Design First, Then HTML-ize

If you’re new to the web design game, developing a new website (or redesigning an old one) is much like starting a new job: there are a thousand small details competing for your attention and its difficult to know how to proceed in a relatively efficient fashion.

One typical workflow, especially for smaller sites that only have static HTML pages, is to design the appearance of the site first. Some folks sketch designs on a pad of paper, others use a graphics program like Adobe Photoshop or Adobe Fireworks to lay out how the site will look. In fact, there’s been more than one great website design where the impetus came from cocktail napkin scratchings at a Friday night happy hour.

The Challenges of Translating Your Design into HTML

Regardless of the method, at some point, the designing phase must end, and translating the design into HTML pages must begin. And therein lies the potential for much frustration and consternation – what is possible with Renaissance-age pen and paper can be difficult or impossible to achieve with space-age web browsers. For new web designers who have a background in designing for print, the road is made more difficult because the most elemental aspects of design that are assumed in print (oh, you know, like choice of font and the font size) cannot be assumed at all when designing for the web. “Wait a minute, ” you wail. “Is this really true?  Do I really have such little control over how my pages look?”  In a word, yes. Here’s why:

• Web browsers, much like snarky teenagers, vary widely in how they choose to interpret your commands. What looks great in Firefox may look like a train wreck in Internet Explorer on the Mac.
• End-users may be viewing your web pages on an ancient computer with a tiny monitor, or via their iPhone, or via a giant LCD screen.
• End-users, via their browsers, can override many of your settings. You may intend your content to display in 12 pixel Georgia, but my great-aunt Betty can set up her browser to display the content at 44 pixel Verdana. And if you didn’t account for that, great-aunt Betty will see a horrid-looking page and never send you cookies for your birthday ever again.

A Solution for Cross-browser, Cross-platform Checking

So, what to do about this state of affairs?  A simple adage: test early and test often, across as many different browsers, browser versions,  and operating systems as possible. Don’t spend hours and hours hammering away on your HTML pages and then test, as the problems you discover during testing will necessitate more hammering and undoing of what you already spent hours doing. But how do you test across all the various browsers and platforms there are?

Use http://browsershots.org/.

Unlike its commercial competitor BrowserCam, BrowserShots is free (albeit slow, depending on how many other folks are using it.) Here’s how to see what your web site looks like in a variety of browsers and operating systems:

1. Upload one of your HTML pages to a web server; don’t forget to also upload any needed images or CSS files. Make sure to note the URL.
2. In a web browser,  navigate to: http://browsershots.org/

Once the BrowserShots page loads,

1. Type in the URL to the page you uploaded to the server
2. Indicate the browsers and operating systems you want to see your page displayed on
3. Select other attributes, like screen resolution
4. Click the submit button at the top of the page.

The wait to see screenshots of your page might be awhile, so go grab a cup of coffee.

The Results

When the results come up, BrowserShots will display a thumbnail-sized image of the page as it will be rendered in the various browsers and operating systems you selected on the first page. There will also be a link to download the images so you can look more closely at various areas.

In the above screenshot of the BrowserShots results page, there are two thumbnail images in the middle that look like pure text, with no images.  BrowserShots sometimes grabs a screenshot of the page before it actually finishes loading. In these cases, the problem is not with your page design, but BrowserShots. If the other screenshots look as you would expect, don’t worry about the ones that look like this and move on.