Agenda for Thursday, September 29

  • Opener
    • What’s the point of responsive design?
  • (2) Work day for Independent Project
  • (1) Responsive design
  • (1) Introduce Restaurant Site
  • (2) Independent Progress Check 3 on Tuesday
    • Blog post (on site)
    • Verbal update on progress
      • At this point you need to be making tangible progress and should have some specific information to share (information for the presentation, specifics on your demo, things you have been testing out, etc.).

Agenda for Tuesday, September 27

  • Single Purpose Site and WordPress Site critique
    • Questions to consider
      • Single Purpose Site
        • Does the site have a single purpose and does the design of the site compliment that purpose?
        • Is the site laid out correctly? Is every element styled appropriately?
        • Is the content of the site clear, concise, and well-organized?
      • WordPress Site
        • Is the site laid out correctly? Is every element styled appropriately? Is it responsive?
        • Is the design aesthetically pleasing and easy to read?
        • Is the content of the site clear, concise, and well-organized?
        • Will future content fit easily into the current organizational structure?

Responsive Design

My files

  • Responsive design
  • Flexible layouts
    • Percentages
      • Use percentages for layout widths
      • How to do percentages inside of percentages
    • rem
      • Used instead of pixels for font-size, border, as well as margin and padding in some cases
      • Target ÷ context = result (24px ÷ 16px = 1.5rem)
        • Context is the font size of the html element (16px).
        • Put your math in a comment next to the result.
      • Continue using em for line-height
  • Borders in flexible layouts
    • CSS for divs with borders: box-sizing: border-box;
    • Counts padding and border as part of width
  • Media queries
    • Will mostly use ones based on width (max-width or min-width)
    • Other options available
    • General viewport widths
      • Newest iPhones – 375-414px
      • Older iPhones – 320px
      • iPads – 1024px by 768px
      • Other tablets – 1280px by 800px
      • Others
    • Web inspector’s responsive design mode
    • Using multiple media queries
      • Largest to smallest
      • Multiple values
  • Flexible images
    • max-width: 100%; will work most of the time
    • background-size: cover; (example) and background-size: contain; (example)

Example media query

@media screen and (max-width: 414px) {
        /* alternate CSS here */

Agenda for Thursday, September 22

  • Opener
    • Website size
  • Work day
  • Single Purpose Sites and WordPress Sites due Sunday night by midnight
    • Please post as a new forum thread in Basecamp (Forum > Post a message).
      • Include a brief description of what you did and a link.
      • Before class on Tuesday, everyone should go on the forums and comment on 4 of your classmates’ projects (Web 1 or Web 2).
    • WordPress Sites should include an overview/introduction to your Independent Project, the two blog posts you should have done so far, and an about page.

Agenda for Tuesday, September 20

  • Opener
    • How do people of different ages experience the web differently?
  • Projects due Sunday night, critique next Tuesday
  • (1 and 2) Work day
  • (2) Progress Check 2
    • Blog post
    • Rough draft of introductory material that you will put on your WordPress Site
    • Verbal update on progress