HCDE: Week 08

  • Homework review
  • Overview: Responsive design
  • In-class exercise – beginning to code
  • For next week…

Homework review

Take a few minutes and look at fellow student implementation. Remember to run your page through the W3C HTML validator. Both “contact” and “about” links should work.

Overview: Responsive design

Responsive web design is a framework that allows websites adapt to different output devices (which have different screen sizes), such as a desktop computer monitor or a mobile device. In practice, a responsive site relies on one design that changes across devices. Adaptive sites use templates that are optimized for various output devices.

The typical set of output devices that designers consider are

  • a widescreen desktop monitor
  • a smaller desktop or laptop
  • a tablet and
  • a mobile phone.

Our primary job is twofold:

  • optimize the layout of the content and
  • identify which content must be visible on each device.

One hallmark of responsive design is the use of min/max widths with elements (divs, sections) that are defined in percentage widths, not absolute pixels. We also have to consider image size, both actual size and file size.

There are many frameworks that help developers create responsible websites, such as Twitter Bootstrap or the W3C Framework.

Tonight we are going to begin building our sites for desktop/laptop displays.

 

In-class exercise – building our live sites

1. Create a template file and new stylesheet

  • Create a new folder on your computer to hold tonight’s files
  • Create a new HTML5 document and name it “template.html”
  • Divide it into, at a minimum, these sections
    • Header
    • Nav
    • Main (if you are using another name for this section, follow your own convention
    • Footer
  • It should look something like this (dropbox link)
  • We need a stylesheet named main.css
    • Either save your most recent version of your stylesheet as main.css (if you like how your design is going) or
    • Create a new blank stylesheet and name it main.css
  • Upload the main.css stylesheet to your scripts directory.
  • Then add that link inside the head of your template (edit the placeholder).

The driver for the content and design of these sections should come from assignment 06.

Once you’ve built the raw template, add your site header, global navigation, and footer. Be sure to create a link for each page of the site; name the home page link index.html. Save the file. There should be no content in the main content section (except the H1 placeholder).

2. Using the template to build dummy pages

  • Save the template.html file as contact.html.
  • Now edit the TITLE tag and add the page title in the H1.
  • Then remove the link to “Contact” in your main navigation.

You have created a dummy or placeholder file for the contact page.

  • Save the template file “as” each page of your site.
  • The edit each of those files, changing the TITLE tag and H1 and removing the appropriate link.
  • Upload at of these files to your server at root. For example, the URL of the contact form should be xxx.washington.edu/yourNetID/contact.html.

3. Time to test the links

  • You should have a set of pages that look alike except for the title and H1. The global navigation link should not be enabled on “self.”
  • Make sure your links work and each page has its link disabled in the global navigation.

4. Now add content inside the “main” section of each page

Thomas and I will work with you to customize your stylesheet to meet your design vision.

For next week …

  • Put content (even if it’s lorem ipsum) in the main section of each child page. As you do this, think about the structure of your content and how you want the content to flow when the output device is a mobile phone.
  • Work on the home page.

 

Resources for finding images