WEB 200: Week 09

Agenda, Thursday

Due Tuesday 27 Feb at the end of class: the link to the index.html page you built in class. Post it in Slack in the #in-class-feb27 channel (see staging links)
Due Thursday 1 March: revised style-palette and design (print and bring to class)
ALL05: Visual design
NEXT WEEK: 06: Responsive templates


Design walk-around

We’ll take about 15 minutes to walk around the room, looking at the designs. Think about how different they look when printed on paper versus seen on a screen. Take notes.

Then we’ll sit back down and comment on each design. Each person needs to have a comment (even if it’s a point someone else has made, your reasons for making it will be unique) for design.

  • Observations should not be personal but should be based on what we’ve learned about design (‘the contrast appears insufficient for readability’; ‘I could not find the contact page’)
  • Observations can note best practices (but the best comments help us improve, not just pat us on the back)
  • Observations should not be prescriptive (‘move the social media logos to the footer’)

Design notes

To “call” font awesome (make it appear in browsers visiting your site), you need to get a snippet of code from FA.

  1. Go to FontAwesome
  2. Go to Get Started
  3. Copy the javascript
    get font awesome
  4. Paste it in the HEAD of your template and any pages that are already on your site.


Thursday 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.

Next wee, we will work on customizing your home page code so that it is responsive. I will also have a working contact form for you.

Build out

** Continue working on your sites. You are building out your final design.

See staging links (Kathy – teaching points here)

Agenda, Tuesday

Lab: Templated design
Due Thursday 22 Feb at 9 pm: complete style-palette.html
Due Saturday 24 Feb at midnight: 
mobile and desktop design sets
Due Tuesday 27 Feb at noon: peer feedback
Due Tuesday 27 Feb at the end of class: the link to the index.html page you built in class. Post it in Slack in the #in-class-feb27 channel
Due Thursday 1 March: revised style-palette and design (print and bring to class)
ALL05: Visual design studies & visual design

  • Peer review update
    • I will get feedback collated while you all code; if you haven’t done so, please provide feedback for Elizabeth (0ne, two) and Mark (links were shared in Slack). Still missing comps from Ling.

In-class exercise – building our live sites

We are building a five-page site. For this exercise, we will not need folders/directories for content. With a large site, that is not the case. HTML5 review

Best practices for file naming conventions:

  • all lower case
  • no underscores
  • no spaces
  • spell out words (good for SEO)
  • if you want to separate words in a file name, useCamelCase or use-hyphens
  • use the same naming convention throughout your site

1. Create a template file and 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
    • 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 your visual designs.

  • Once you’ve built the raw template, add site header info (for most of you, global navigation is here) and footer information. Be sure to create a link for each of the five pages of your 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. It should look something like this (DropBox link).

  • 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*.

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. Begin experimenting with your CSS so that these templated pages look like you envision them.

5. Next (not tonight) we’ll add content inside the “main” section of each page

  • DUE TONIGHT AT THE CLOSE OF CLASS: the link to the index.html page you built in class. Post it in Slack.


ftp fil

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