GD2480 Designing for the Web

Syllabus and Meeting Times

GD2480 Designing for the Web

Students integrate design skills with the basic computer language skills (HTML) required in order to create web pages. Emphasis is balanced between the design and technical elements of Web Page design and production.

Instructor: John Keston

Meeting Times and Location:
Tuesday / Thursday
11am – 2pm (with appropriate breaks), Room 304, Pence building

GD2480 Designing for the Web
Speaking in Styles: Fundamentals of CSS for Web Designers
Recommended Texts:
Fluid Web Typography by Jason Cranford
Textbook: HTML5 and CSS3 (7th edition) Visual Quickstart Guide by Elizabeth Castro

Week 1 | Week 2 | Week 3 | Week 4 | Week 5 | Week 6
Week 7 | Week 8 | Week 9 | Week 10 | Week 11

Week 1

Session 1: Learn about and utilize basic CSS and HTML tags, including divs and tables, in a web calendar of the current year. Our assignment for the week is to create a 12 month calendar for the current year. Each month must contain all the accurate days for the month arranged in a table structure of columns and rows. The requirements for this exercise are as follows:

1. Use CSS to apply a typeface other than the default (Times Roman).
2. Include content besides day numbers (i.e. holidays, etc.).
3. Create borders WITHOUT using the table border attribute.
4. Create navigation to get to every month from any month.
5. Use CSS background images in some of the cells.
6. Use background colors to enhance your design.
7. Upload to your student webspace or comparable hosting.
8. Create a link to your calendar on your project portal page.

This assignment is due Week 3, Session 1.

W3 Schools
HTML Cheat Sheet (an excellent html resource) (a comprehensive web development resource)

Session 2: Today we will be looking more carefully at tables to organize information in a grid, like a calendar. We will also cover some techniques on how to trick tables into being more flexible like using bgcolor and cellspacing to create a border, or using “colspan” within your table data cells to merge cells without days in the beginning and end of months (i.e. <td colpsan="4">&nbsp;</td>). Try adding images and/or text for holidays or birthdays. Also, use “width” and “height” attributes to line up the calendar days. Here’s an example month:

<table width="100%" height="100%">
<th width="14%">Sunday</th>
<th width="14%">Monday</th>
<th width="14%">Tuesday</th>
<th width="14%">Wednesday</th>
<th width="14%">Thursday</th>
<th width="14%">Friday</th>
<th width="14%">Saturday</th>
<tr bgcolor="#999999" height="20%">
<td colspan="2"> </td>
<td valign="top">1</td>
<td valign="top">2</td>
<td valign="top">3</td>
<td valign="top">4</td>
<td valign="top">5</td>
<tr bgcolor="#999999" valign="top" height="20%">
<tr bgcolor="#999999" valign="top" height="20%"><td>13</td><td>14</td><td>15</td>
<tr bgcolor="#999999" valign="top" height="20%">
<tr bgcolor="#999999" valign="top" height="20%">
<td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td colspan="2"> </td>

Note: The use of HTML escape sequences such as &nbsp; allows you to place special characters into your HTML documents. Less than (“<") and greater than (">“) symbols would not be available without using an escape sequence. View the link below for a complete list of HTML escape sequences.

HTML Escape Sequences

This weeks reading:
Speaking in Styles – Chapters 2, 3, and 4 (Pages 17 – 88)

Week 2

Session 1: Today I will demonstrate everything necessary to produce the calendar project that was assigned in Week 1.

Session 2: Let’s wrap up questions you may have regarding the calendar project today and then begin our discussion surrounding the SCANMIC Project. This project will involve utilizing box model to layout text content and images that illustrate how the SCANMIC criteria applies to a website of your choice.

Assignment: Let’s create single page with the layout, images and type all formatted with CSS. Write the content for your web page as a critique of a website that you consider a bad design. Create a one or two page web based evaluation of the website outlining how your example site does not adequately apply the usability points above. The site you evaluate must be accessible over the internet and shouldn’t be too high profile or contain inappropriate materials. Make sure you include links to the pages that you’re evaluating in your web document also include images to illustrate your points. Links to your evaluations will be due on the drop off drive by Session 1, Week 4.

SCANMIC Evaluation Project Requirements
1. Select a poorly designed “under the radar” website to evaluate.
2. Write a paragraph or two of content for each of the seven SCANMIC points.
3. Create anchors with navigation to each point from the top of the page.
4. Use a linked or imported custom CSS document to format the type and images.
5. Link your evaluation on the drop off drive by Session 1, Week 4.

Student Example:

Reading Assignment (PDF):
Identifying Web Usability Criteria

Download: IM2420 Problem Set 1
1. All IM2420 problems are due by the beginning of class on the next day that the class meets.
2. Answers must be available via links on the OLS or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.

Week 3

Session 1: By the end of lab today your calendars are due. Today we will cover anchor links or “page jumps”, link targeting, and frames. Anchor links are used to jump to content within an HTML document. The most typical use is for navigating back to the top of a page where a lot of scrolling is required, or to sections within the content.

<a name="top">This is the top of the page</a>
<a href="#top">Go to the top of the page</a>

Link targeting is most commonly used to open the content of a link in a new browser window or tab. This can be achieved by using the “target” attribute and setting the value to blank (i.e. <a href="" target="_blank">External Link</a>).

Targeting is also required to load content into specific frames. I do not recommend the use of frames, but it is still important to understand how they work. Jakob Neilsen, a prominent usability expert, cited “Using Frames” among the top ten mistakes in web design. However, there are rare instances of when frames (generally iframes are preferable) can help solve specific problems. This example shows how a basic frame set behaves.

Stylesheets (technically Cascading Stylesheets), or CSS allow web developers much more control over the look of their web pages than with HTML alone. They make it possible to define styles globally for a site, eliminating the need for repetitive font tags, color tags, alignment attributes and so on. This creates better organization by separating form from structure. Sytlesheets are a critical tool for any web developer and make creating sites infinitely faster and easier, once you’ve learned how to use them.There are four ways to include styles in your HTML documents.

1. Local or Inline is right inside a tag and overrides other definitions. Example: <h1 style="color: orange; font-size: 18pt; font-family: Verdana, sans-serif">This is an INLINE style</h1>

This is an INLINE style

2. Global or Embedded. A better solution is to include the style definitions in a style tag otherwise known as by using the global (embedded) technique. Like this example:

<title>Style Demo Page 1</title>
<style type="text/css">
h1 { color: red; font-size: 24px; font-family: arial }
p { text-indent: 1cm; background: #eeeeee; font-family: courier }
td { font-family: arial }
b, i { color: green; font-size: 20px }
<p>Hello World</p>
<tr><td>I'm in a TD tag with no font tag</td></tr>
<b>bold. <u>underline</u> within bold (no style)</b><br />

3. Linked stylesheets are even better because they allow you to define the styles for an entire website once, then when you modify the stylesheet the changes take effect over the entire site, or wherever the stylesheet is linked. Here’s how you link a stylesheet:

<title>Untitled Document</title>
<link rel="stylesheet" href="/im2420/my_styles.css" type="text/css">

and here’s what the stylesheet document (my_styles.css) looks like:

/* CSS Document */
h1 { color: red; font-size: 24px; font-family: arial }
p { text-indent: 1cm; background: #eeeeee; font-family: courier }
td { font-family: arial }
b, i { color: green; font-size: 20px }

4. Imported stylesheet go within a style tag, thus allowing you to include other global styles which will override what’s imported. In the following example the h1 definition will override the h1 definition found in my_styles.css:

<style type="text/css">
@import url(my_styles.css);
h1 { color: #ff00ff; font-family: impact }
textarea { text-transform: uppercase }

Click any of the following links to view the examples we looked at in class:

Reading assignment: Stylesheets are extremely powerful and critical to creating useable, consistent and accessible sites. Please take the time to read the following tutorial and checkout other resources so you can take advantage of these techniques in your projects (note: using stylesheets is a requirement in all subsequent projects).
Web Monkey Stylesheet Tutorial (Getting Started)
W3Schools CSS Reference
Brainjar CSS Positioning Tutorial
Selectutorial – CSS selectors

Session 2: Now we are going to take a closer look at CSS positioning. CSS can be used to format type, but also be used to position and style <div> layers or containers. Just like HTML tables, CSS positioning can be used to arrange content within the browser. CSS positioning also offers some advantages over the traditional table method; primarily that the content can be separated from the layout to provide better site maintenance and accessibility.

CSS vs Tables for Layout
CSS Zen Garden

For the next exercise the content has been provided in a word document. It includes some information about cycling collected from wikipedia. It’s your job to design a set of six pages using the text content provided. Create a consistent design scheme that incorporates images, navigation and type treatments using CSS styles and positioning. The use of tables for this exercise is not allowed. The requirements and a link to the content follows:

CSS Positioning Exercise
1. Organize the content provided into six pages
2. Create a consistent design scheme
3. Include navigation on each page to all the pages
4. Incorporate images into each page
5. Format type, images and the positioning of the content with CSS
6. Each piece of content (including images) should be contained in a <div> layer/container
7. Use of HTML tables is prohibited
8. Due before class on Session 2 of Week 5

Content for the CSS Positioning Exercise
Sample CSS Page Layouts – Step by step tutorial from Max Design
CSS Layout Techniques – Great tutorial on “no tables” layout
Student Example of CSS Positioning Exercise

Download: GD2480 Problem Set 2
1. All GD2480 problems are due by the beginning of class on the next day that the class meets.
2. Answers must be available via links on your Webspace or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.

Week 4

Session 1: Today we will look at a variety of CSS layouts starting with a simple two column, fluid layout with a banner that spans both columns (see code example below). We will also examine 3 column layouts and static width layouts.

<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CSS Layout Example</title>
<style type="text/css">
#banner {
    margin: 10px auto 0px auto;
	width: 80%;
	border: #cccccc solid 1px;
	padding: 3px;
#container {
    padding: 3px;
    margin: 0px auto 0px auto;
	width: 80%;
	border: #cccccc solid;
	border-width: 0px 1px 1px 1px;
	clear: left;
	overflow: hidden;
#left_sidebar {
    padding: 3px;
	border: #cccccc solid;
	border-width: 0px 1px 0px 0px; 
    float: left;
	width: 30%;
	margin-right: 5px;
#main_content {
    padding: 3px;
<div id="banner">Content for id "banner" Goes Here</div>
<div id="container">
  <div id="left_sidebar">
  1. left_sidebar content<br />
  2. left_sidebar content<br />
  3. left_sidebar content<br />
  4. left_sidebar content<br />
  5. left_sidebar content<br />
  6. left_sidebar content<br />
  7. left_sidebar content
  <div id="main_content">
Praesent ut nulla. Sed tellus magna, tempor sit amet, pulvinar eu, 
dignissim sit amet, purus. Phasellus ultrices massa sed metus. Nulla 
scelerisque, metus a ultricies blandit, nisi arcu lacinia orci, et 
posuere urna lacus bibendum turpis. Maecenas nibh nulla, cursus in, 
pulvinar eu, dictum quis, neque. Curabitur ac purus a ipsum ultrices 
consequat. Aliquam sed velit sit amet diam mattis aliquet.
<br /><br />
Pellentesque habitant morbi tristique senectus et netus et malesuada 
fames ac turpis egestas. Sed bibendum molestie tortor. Sed ut nunc. 
Maecenas purus felis, scelerisque id, egestas ut, pretium et, nulla. 
Nunc nisl arcu, vulputate et, feugiat non, luctus eu, justo. Quisque 
rhoncus. Mauris dapibus orci non dui. Mauris lobortis. Aenean 
gravida pede a justo.

Multi-column CSS layouts like these allow for problems to arise. Mis-matched column heights for one, but also issues related to variations in browser defaults.

Multi-column height solution
Normalize CSS file

Useful CSS navigation resource:

Technique to create tiled backgrounds:
How to Turn a Texture into a Seamlessly Tiled Background

Week 4 Reading:
Chapter 8 “Working with Stylesheet Files”
Chapter 17 “Forms”

Important: by now it is valuable to start using CSS Reset or CSS Normalize stylesheets to reduce browser discrepancies. Download the CSS Reset style here, or look at the newer CSS Normalize stylesheet here.

Session 2: Today we will be covering the next assignment which involves creating an XHTML form:

1. This week we will start by creating the form and layout using HTML5 and CSS.
2. Next we will use some simple Javascript to help validate the input from the user.
3. Thirdly we will will discuss server side scripting but it is not required.

Here’s a very basic table-less form formatted with CSS:

<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Form Demo</title>
<style type="text/css">
input {
	display: block;
	width: 150px;
	float: left;
	margin-bottom: 10px;
label {
	display: block;
	text-align: right;
	float: left;
	width: 80px;
	padding-right: 5px;
	margin-bottom: 10px;

br {
	clear: left;
<form action="" method="post">
  <label for="first_name">First Name:</label>
  <input id="first_name" name="first_name" type="text" />
  <br />
  <label for="last_name">Last Name:</label>
  <input id="last_name" name="last_name" type="text" />
  <br />
  <label for="email">Email:</label>
  <input id="Email" name="last_name" type="text" />
  <br />

The following resource illustrates how forms can be put into horizontal, vertical, columnar, and other formats using CSS with fieldset, label, and legend tags:
CSS-Based Forms: Modern Solutions

Week 5

Session 1: Today we’ll be looking at a complete example of an HTML5 form, similar to what is expected for the Interactive Form project. The form demo can be found here:

Form Demo

Once we have looked carefully at the form I will demonstrate how to use Javascript to pre-validate the input from the user. Javascript validation is a useful way to prevent users from leaving out required information from the form. However, server-side validation is also necessary in case Javascript has been disabled in the browser.

Introduction to Javascript

Also, if you are looking for more ideas on form layout. Have a look at this list hosted on Smashing Magazine:

CSS-Based Forms: Modern Solutions and…
Diving into HTML5: Forms

Milestone: CSS Positioning (Cycling Assignment) During lab time today please be ready to show the progress items listed below.

1. Be prepared to show a completely designed (navigation, layout, type, colors images) HTML5 template.
2. Illustrate that your navigation is operational on a minimum of two pages.
3. Make use of hover behaviors and hit states in your navigation.

Session 2: Today we will start looking at more ways to design and organize the form input fields, including text fields, checkboxes, radio button, select lists, and text areas. We will also pay attention to layout, type faces, type treatments and Javascript. We will also look briefly at the server side scripting necessary to make the form function properly. Although applying this technique will not be required, it is recommended. The language we will be using to do this is PHP. The primary resources for PHP is

Interactive Form Project Requirements:
Create an interactive form designed to collect information from users, validate that required information has been entered via javascript. Optional: process the information, and send an email to yourself containing the user input. Required: The form must be designed well using HTML5 and CSS positioning. No table layouts are acceptable.

1. The form must contain a minimum of ten input fields.
2. Use of text fields, check boxes, radio buttons, select lists, and text areas are required.
3. Design the form with HTML5 and CSS (no table layouts).
4. Validate required fields with Javascript.
5. Use Google Fonts and typesetting CSS properties
6. Optional: Process the user input on the server side using PHP.
7. Optional: Automatically email the formatted data to your email address.
8. Due on Session 2, Week 7.

Week 6

Session 1: Today we will look at some more examples of Javascript form validation. Let’s also start discussing the next project that involves using javascript framework behaviors and also start thinking about the final project for the class.

Session 2: Continuing our focus on Javascript, let’s start examining a few projects that make Javascript more accessible and allow for advanced handling of content through the use of slideshow, gallery, carousel, and slider frameworks. These frameworks have become more and more popular for web and mobile content because modern browsers support HTML5 and Javascript features that rival Adobe Flash while working across many platforms including desktop/laptop computers, iOS (iPhone and iPad), and Android (phones and tablets). Here’s some links to examples:

Light Box
Impress jS
Simple Carousel
Grid Nav

Javascript Gallery Assignment:
Implement a pre-existing Javascript framework to display a collection of images in a slideshow. Provide a way for the user to navigate between images and also expand images into a larger format.

1. Use a jQuery or Javascript gallery plugin to display images
2. Include a minimum of 6 images in your gallery (use your own work)
3. Provide a method for the user to navigate through the images
4. Allow the user to expand the image if thumbnails are in use
5. Make an effort to style the gallery differently than the default setting

Due: Session 2, Week 8.

Week 7

Session 1: Let’s finish working on our form projects today, so that we can move on to the next assignment that involves delving deeper into the possibilities of Javascript within web application design. We will be looking at several Javascript frameworks and then utilize JQuery to implement motion graphic elements into a web application. There are many advantages to using pre-existing Javascript frameworks, rather than writing new code from the ground up.

1. You are not reinventing the wheel
2. Browser compatibility in built into most frameworks
3. Large development and support communities surround the projects
4. Security exploits are quickly found and resolved by the developer community

Reading Assignment:
How jQuery Works
jQuery vs. MooTools
Animating with jQuery

Sessione 2: Today we will be discussing the requirements for the next project as well as having a look at your form projects.

Javascript Framework Project:
In this project we will be using a Javascript framework called JQuery to add functionality beyond what is possible with XHTML and CSS alone. Due on session 2 of week 8.

1. Use JQuery to animate hidden content into view
2. Integrate JQuery animation techniques to text navigation
3. Apply one or more tutorials from under one of the following headings:
    a) General Tutorials
    b) Manipulation, Attributes, and CSS
    c) Traversing and Selectors
    d) Using jQuery with…

Week 8

Session 1: Session 1: Today I’ll be demonstrating how to enable a Javascript framework within an HTML document. We will also start looking at how to apply functionality that exists in the framework to our web applications, including content animation behaviors as shown here:

Session 2: After discussing the final project requirements we will look at your JQuery exercises.

Final Project Requirements:
The final project we are producing for this class involves creating a web application with a minimum of five content areas. The site content must be formatted using XHTML and CSS. It is also required that the site use behaviors included in the JQuery Javascript framework.

Final Web Application Content:
1. Create something that is suitable for your portfolio
2. Sites for organizations or businesses work well
3. Informational sites are also acceptable (FAQ, etc.)

Final Web Application Requirements:
1. You must include a minimum of 5 pages or content areas
2. All content must be formatted with XHTML (or HTML5) and CSS
3. It is required that the JQuery Javascript framework is used for animations, etc.
4. Use JQuery as an integral part of the UX.
6. You may not use Flash. This is a web standards project.

Final Web Application Evaluation:
1. All requirements must be met to achieve a passing grade on the final
2. The SCANMIC criteria will be used to evaluate the design and functionality

Session 2: The Web gallery assignment is due today. See week 6 for the detailed requirements for the Web Gallery project.

Week 9

Session 1: Let’s continue examining JQuery behaviors and how we can apply them to our web applications. Also, here are the requirements for the mockup milestone which are due before class starts on Session 2 of Week 9.

More jQuery examples (2012)
More jQuery examples (2013)

Mockup Milestone:
Two mockups of one page design are required for in class critiques on Session 2, Week 9

  1. Create a minimum of two mockups of a single page that contains a typical amount of content
  2. No mockups of splash pages!
  3. Try changing navigation, typefaces, layout, color schemes and/or logos
  4. Acceptable formats include: jpg, gif, png, pdf, html
  5. Presenting your mockups in class earns you 5% of the points for the final project
  6. Place your mockups in a folder under your name on the drop off drive before class on session 2, week 9 (next session)

Session 2: Today we will be reviewing everyone’s mockups in class. This is a group participation project that will last most of the session due to the size of the class.

Week 10

Session 1: Let try to continue to get a better understanding of how jQuery works and apply it to our finals. Also, we’ll be discussing how things are going on your final projects.

Prototype Milestone
On session 2 of week 10 (next session) I would like to see a working prototype of your final project.

1. Include working navigation to a minimum of three pages
2. Demonstrate the use of CSS in your layout
3. Discuss how you intent to use Javascript behaviors in your site

Session 2: Prior to presenting your milestone, most of the day will be focused on individually answering questions and help with troubleshooting.

Week 11

Session 1: Today is the last chance to get instructor feedback on your final projects.

Session 2: Today we’ll critique your final projects. These critiques are a required component for your final project, so don’t miss the classes.