Website Design Responsive Website Design 5 — Questions and Answers
Question 1: What is the difference between 'adaptive design' and 'responsive design'?
- They are identical concepts
- Adaptive design uses fixed layouts for specific breakpoints; responsive design uses fluid, flexible layouts (Correct answer)
- Responsive design only works on mobile
- Adaptive design requires JavaScript; responsive does not
Correct answer: Adaptive design uses fixed layouts for specific breakpoints; responsive design uses fluid, flexible layouts
Adaptive design serves distinct fixed-width layouts per device type, while responsive design uses fluid grids and CSS to create a single layout that scales across all sizes.
Question 2: Which CSS media feature detects if the user prefers reduced motion for accessibility?
- prefers-contrast
- prefers-reduced-motion (Correct answer)
- prefers-color-scheme
- motion-safe
Correct answer: prefers-reduced-motion
The prefers-reduced-motion media feature detects when the user has requested minimal animation in their OS settings, allowing developers to disable animations.
Question 3: What does 'fluid typography' mean in responsive web design?
- Using only web-safe fonts
- Font sizes that scale smoothly with the viewport width without distinct breakpoints (Correct answer)
- Typography that animates on scroll
- Using variable-width characters
Correct answer: Font sizes that scale smoothly with the viewport width without distinct breakpoints
Fluid typography uses viewport units (vw) or the clamp() function to make font sizes scale proportionally with the viewport, avoiding abrupt size jumps.
Question 4: What is the purpose of the CSS 'object-fit' property in responsive image design?
- It sets the image file format
- It controls how an image fills its container without distortion (Correct answer)
- It defines the image's download priority
- It sets the image's border radius
Correct answer: It controls how an image fills its container without distortion
The object-fit property specifies how an image or video should be resized to fit its container, with options like cover, contain, and fill.
Question 5: In responsive web design, what is a 'container query'?
- A SQL query filtered by container size
- A CSS feature that applies styles based on the size of a parent container rather than the viewport (Correct answer)
- A JavaScript API for querying DOM containers
- A media query targeting container elements
Correct answer: A CSS feature that applies styles based on the size of a parent container rather than the viewport
Container queries allow styles to be applied based on the size of the element's parent container, enabling truly component-level responsive design.
Question 6: Which strategy best handles responsive design for a complex data dashboard with many components?
- Showing all components at all screen sizes
- Using component-level responsive rules with container queries and prioritizing critical data on small screens (Correct answer)
- Converting all charts to plain text on mobile
- Only supporting desktop for dashboards
Correct answer: Using component-level responsive rules with container queries and prioritizing critical data on small screens
Component-level responsiveness with container queries combined with progressive disclosure (showing priority data first) creates usable dashboards across all screen sizes.
Question 7: What CSS technique allows you to create a masonry-like responsive grid layout without JavaScript?
- Using float: left on all items
- Using CSS Grid with grid-template-rows: masonry (experimental) or multi-column layout with column-count (Correct answer)
- Using Flexbox with align-items: stretch
- Using absolute positioning
Correct answer: Using CSS Grid with grid-template-rows: masonry (experimental) or multi-column layout with column-count
CSS multi-column layout (column-count or column-width) or the experimental CSS Grid masonry value can create Pinterest-style layouts without JavaScript.
Website Design Responsive Website Design 5
What is the difference between 'adaptive design' and 'responsive design'?