Comm 333 Web Design II

Skip to navigation

Week 10 4.4

Notes

Responsive Media

Browser Support (caniuse.com):

Use picturefill to add and normalize browser support for responsive images.

Relevant Library Code

SVG

Notes

SVG Resources

SVG Viewbox

Videos on SVG (Lynda.com)

Single Page Website Example

The following is a rough demo showing how to use viewport units to create full height sections. It also incorporates a fixed side navigation as well as the use of full page background images and gradients. Review the code of the site to see how elements are used. The last section contains links to resources used in the demo.

Reading

Review the reading on SVG graphics posted in the SVG Resources.

No reading summary due.

Homework

Complete the first version of a working prototype for your Travel Experience project. Review the requirements for the final project on the project page.

Pick a nonprofit organization for your final project. Begin reviewing the existing content to see what type of information they have on their website. Create a page or section for your final project on your class website. You will post all materials for your final to this page. Post your nonprofit organization with a link to their existing website. Complete a website audit for the site as well. All details are posted on the project page.