- Homework review
- Overview: Responsive design
- In-class exercise – beginning to code
- For next week…
Homework review
- Assignment 7: contact form
- The assignment URL should be xxx.washington.edu/yourNetID/hcde532/contact.html
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.
- Aastha | https://staff.washington.edu/aastha11/hcde532/contact.html (about is 404 but it’s present as about-me)
- Alice | https://students.washington.edu/uwalice/hcde532/contact.html (about is blank)
- Chun-Fang (Jenni) | https://students.washington.edu/jennicf/hcde532/contact.html – 404 (also not at root but about is present)
- David | https://students.washington.edu/molinero/hcde532/contact.html – look at this example of a “you are here” marker
- Jake | https://students.washington.edu/grhodes/hcde532/contact.html
- Jihoon | http://students.washington.edu/jihoons/hcde532/contact.html – 404 (about present, homework is contact-demo.html)
- Julie | https://students.washington.edu/jstu2/hcde532/contact.html
- Laura | https://students.washington.edu/lmeise/hcde532/contact.html
- Pierre | https://staff.washington.edu/pdelcour/hcde532/contact.html
- Putri | http://staff.washington.edu/putrih/hcde532/contact.html
- Rachel | https://students.washington.edu/xukun/hcde532/contact.html – check out Rachel’s submit button (about is missing)
- Thana-On | https://students.washington.edu/thanaon/hcde532/contact.html
- Tucker | https://students.washington.edu/tstandle/hcde532/contact.html
- Yaonan (Natalie) | https://students.washington.edu/yaonah/hcde532/contact.html
- Ziyan | https://students.washington.edu/ziyan053/hcde532/contact.html
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
- 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
- Creative Commons image search
- Creative Commons images on Flickr
- Death to Stock photography
- Getty open content images
- Google image search
- NASA
- Open Culture (not image-specific)
- Public domain images on Flickr
- Public domain project
- The British Library on Flickr
- Unsplash
- U.S. government works on Flickr
- Wikimedia commons