Podcast Episode Details

Responsive Design

Episode 16

Responsive design has revolutionized how websites are developed, but static layouts still have their place. We explore these two different layout methods in this episode of the podcast.

Reference from Treehouse: https://blog.teamtreehouse.com/which-page-layout

Segment 1 - What is Responsive Design?

• Responsive design responds to its environment, in the case of web design it’s specifically referring to how a website’s user interface responds to different window sizes and technologies available.
• This gives us the ability to have a single design that changes and adapts to various devices from ultrawide PC displays, down to older smartphones.
• It also allows users to make the most  of the screen real estate they have
• Responsive design makes the use of a variety of tactics that are generally found in CSS including: media queries, relative positioning, relative length units, whitespace
  • Having two browsers snapped to each side of a 1080p display for more information, rather than always having a webpage open at full resolution
• Responsive design makes the use of a variety of tactics that are generally found in CSS including: media queries, relative positioning, relative length units, whitespace

Segment 2 - How to Implement Responsive Design

• CSS Responsive Tactics:
  • Media Queries
    • Offer breakpoints to a design, allowing developers to apply design changes at a specific breakpoint, such as a certain max-width (probably most popular breakpoint)
  • Relative Positioning
    • Position: relative;
    • Positioning absolute elements within a relative container and then controlling that relative container to automatically move the elements within the container
  • Relative Length Units
    • Units that allow your elements to be responsive. These units are dynamic and change based on their environment
    • Unlike exact, or absolute length units which are (cm, mm, px, etc.)
    • 3 examples:
      • rem - relative to the font-size of the root element
      • % - relative to the parent element
      • Vw - relative to 1% of the width of the viewport
    • Reference link: https://www.w3schools.com/cssref/css_units.asp
  • Whitespace
    • The space between elements (ie the space between columns)
    • It’s basically blank space on the web page
    • Responsive design uses this as a buffer zone to move elements around various elements
    • Filling a site up too much (minimal whitespace) requires space for elements to be displaced and the site will become too crowded on smaller screens (infinite scrolling, or a lot of pagination)
• Main high-level CSS responsive tactics include: Flexbox, CSS Grid
• Mobile or Large screen first design?
  • It seems currently it’s more popular to design for mobile first and then create media queries for larger displays
    • This is useful if you are also designing for older browsers and want to use newer technologies like Grid of even Flexbox
    • Older browsers will see a mobile design (one column) while any larger screen or new browser can utilize the newer technology for a more advanced/easier to set up layout
  • Traditionally we design for larger screen and adapted for mobile/smaller
    • This is still viable depending again on your audience, an older audience for example still prefers larger screens

Segment 3 - When to use Static instead of Responsive Design

• Static layouts/static design is when the page is laid out in a fixed way

---

Published on 7 years, 1 month ago