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
- CSS Tricks: Using SVG - Basic overview
- Jenkov.com: SVG Tutorial - This site isn't much to look at but includes a lot of good information
- Sitepoint: The Designer’s Guide to Working with SVG – Pt 1 - Another basic overview
- Sitepoint: Tips for Creating Accessible SVG - must read
- Sara Soueidan: Structuring, Grouping, and Referencing in SVG - Read the first section on grouping
SVG Viewbox
- Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio
Videos on SVG (Lynda.com)
- SVG Animations with CSS (3 videos)
- Understanding SVG (9 Videos)
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.