ART 435 Fall 2013

Web Design

Day 21

Wed. 10/30/13 | Notes

Project 6 site

Class canceled — internet outage

Update

Per our conversation in class, the critique date for Project 6 has been moved from Wednesday, November 6 to Monday, November 11. Pertinent deadlines:

  • Link and brief description of your project posted on the class forum by Sat. 11/9 at 9am
  • Three constructive replies to other students’ projects on the class forum by Mon. 11/11 at 3:30pm

This information has been updated on the project rubric and syllabus. Please let me know immediately if you have any questions.

Day 15

Wed. 10/9/13 | Notes

Today’s files

  • Extra credit: You may bring in snacks for the class on the day of our Project 5 critique for 5 bonus points. Please bring enough for everyone. Snacks must be thematically appropriate to your site.
  • Project 5 work day
  • Examples

Day 14

Mon. 10/7/13 | Notes

Today’s files

  • Media queries
    • Purpose
    • Use
      • The code: @media screen and (max-width: 1024px) { /* your CSS */ }
      • Multiple values: @media screen and (min-width: 768px) and (max-width: 1024px) { /* your CSS */ }
      • Will most frequently use min- or max-width
    • Revisiting the viewport
      • 980px vs. device width
      • General viewport sizes
        • Older iPhones — 320px by 480px
        • Newer iPhones — 320px by 568px
        • iPads — 1024px by 768px
        • Other tablets — 1280px by 800px
  • Flexible images
    • The rule that works 99% of the time: img { max-width: 100%; }

Day 13

Wed. 10/2/13 | Notes

Today’s files

  • Introduce Project 5
  • Responsive Design
    • Examples
    • Getting started
      • Move the reset stylesheet
      • Add text size adjustment rule to the reset stylesheet
      • Set the viewport on mobile devices
      • Set the body font size to 100%
    • Percentages
      • Use percentages for layout
      • Percentages inside of percentages
      • Set a max-width if needed
    • ems
      • Target ÷ context = result
      • Context starts at 16px but can change
      • Put the math in a comment
    • Deciding when to use percentages vs. ems
    • Etc.
      • Use HTML5 elements where appropriate — ch. 17
        • Please note that hgroup is now considered obsolete
      • Use a class to style the current menu item

CSS import rule

@import url("reset.css");

Text size adjustment rule

html {
    -webkit-text-size-adjust: none;
}

Viewport meta tag

<meta name="viewport" content="initial-scale=1.0, width=device-width">