v5 Week 10: Responsive Design

Week	Topic	Learning Objectives	Key Resources
10	Responsive Design	Students will be able to explain what a media query does and build two media queries in their portfolio project to account for two of the three device types (mobile/tablet/desktop); experiment with grid to understand how it is similar/different to flexbox for formatting.	Week 10 Slides TBD

Overview

Responsive Design

Introduction

• Responsive design is creating websites that respond to changes in browser size
• Techniques to implement responsiveness on websites
• Requirement since the release of the iPhone in 2007
• Make sites work on any size screen using flexible and layout-changing techniques

Screen Sizes

• Smallest phones rarely get smaller than 320px
• Plan for the possibility of very wide screens (2000px+)
• Set a max-width for content and center it on the page

Natural Responsiveness

• Plain HTML is responsive by default
• Maintain natural responsiveness in your projects
• Tips for maintaining natural responsiveness:
  • Viewport meta tag
  • Avoid fixed width and height
  • Prefer max-width or min-height
  • Avoid heights, use margin and padding for spacing
  • Fixed widths appropriate for small elements
  • Use flex and grid for responsive layouts

Responsive Images

• Aspect ratio is the main issue when resizing images
• Use a flexible width and set height to auto
• Use background-size, background-position, and object-fit for more control
• Serve different images for different screen sizes using the <picture> tag

Media Queries

• Basic syntax: @media (max-width: 600px) { /* styles */ }
• Apply styles based on screen size
• Use sparingly and rely on natural flexibility of layouts
• Common breakpoints: mobile (<500px), tablet (500-1000px), desktop (>1000px)
• Breakpoints should be based on content and design
• Zooming can affect media queries
• Print styles can be defined with @media print

Guidance for Mentors

Some potential trouble spots for students:

• Overusing media queries instead of relying on the natural flexibility of layouts
• Struggling with the concept of breakpoints and how to choose them effectively
• Forgetting to include the viewport meta tag, leading to unintended layout issues
• Difficulty understanding how to use background-size, background-position, and object-fit for responsive images
• Confusion about when to use fixed widths and heights versus using responsive units like percentages or viewport units

Assignment Rubric

Lesson 12 Assignment Rubric

Repository Setup

• Merged previous lesson-11 pull request into main branch
• Created new lesson-12 branch from updated main branch

CSS Media Queries

• Determined whether to build the site mobile-first or desktop-first
• Added comment notation to organize and identify desktop/tablet/mobile style code sections
• Added media queries for the other two device types (based on the chosen approach)
  • Media query for tablet-sized devices
  • Media query for desktop/laptop monitors (or mobile if desktop-first)

CSS Changes within Media Queries

• Made at least two changes to at least three elements in each media query
  • Media Query 1 (e.g., Tablet)
    • Element 1: Change 1
    • Element 1: Change 2
    • Element 2: Change 1
    • Element 2: Change 2
    • Element 3: Change 1
    • Element 3: Change 2
  • Media Query 2 (e.g., Desktop/Laptop or Mobile)
    • Element 1: Change 1
    • Element 1: Change 2
    • Element 2: Change 1
    • Element 2: Change 2
    • Element 3: Change 1
    • Element 3: Change 2

Stretch Goal (Optional)

• Reformatted one or both flexbox sections (Experience or Connect) to use a grid layout

Git and GitHub

• Staged changes using git add
• Committed changes with a meaningful commit message using git commit
• Pushed changes to the GitHub repository using git push
• Created a pull request for the lesson-12 branch

Minimum Requirements

• At least two media queries defined in the index.css file
• Media queries change a minimum of two style properties across at least three HTML elements