Responsive Design

Question 1

What are the 3 key priciples of Responsive Design?

Answer 1

1. A mobile first approach to design. This means you build the mobile version before you construct the desktop layout.
2. The @media at-rule syntax (also called media queries) lets you write styles that only apply under certain conditions.
   Note: You should only apply media queries when the design breaks
3. The use of fluid layouts. This approach allows containers to scale to different sizes based on the width of the viewport.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 2

What is progressive enhancement?

Answer 2

Progressive enhancement is a design philosophy that provides a baseline of essential content and functionality to as many users as possible, while delivering the best possible experience only to users of the most modern browsers that can run all the required code.

Source MDN

Question 3

What is graceful degradation?

Answer 3

Graceful degradation is a design philosophy that centers around trying to build a modern web site/application that will work in the newest browsers, but falls back to an experience that while not as good still delivers essential content and functionality in older browsers.

Source MDN

Question 4

When should you use progressive enhancement and when graceful degradatation?

Answer 4

Both progressive enhancement and graceful degradation try to do the same thing: keep our products useful to every user.

Progressive enhancement is a more stable way of assuring that but it takes more time and effort. Graceful degradation can be used more easily as a patch for an already existing product; it means harder maintenance later on, but requires less initial work.

Source w3.org

Question 5

What does the viewport HTML metatag do?

Answer 5

It tells mobile devices you’ve intentionally designed for small screens. Without it, a mobile browser assumes your page is not responsive, and it will attempt to emulate a desktop browser.

Example:

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

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 6

List the most common viewport HTML metatag settings

Answer 6

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

• width=device-width tells the browser to use the device width as the assumed width when interpreting the CSS
• initial-scale=1 set the zoom level at 100% when the page loads.

There is another common setting user-scalable=no, which prohibits the user from using two fingers to zoom in and out on their mobile device. While it is used. Be aware that is very annoying for the users to not be able to zoom images and the like.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 7

What considerations should you take for print styles?

Answer 7

To help with printing, there are some common steps you can take. It’ll be helpful to apply them inside of a @media print {…} media query.

• Use display: none to hide non-essential parts of the page, such as navigational menus and footers.
• Globally change font colors to black and remove all background images and colors behind blocks of text. In many cases, a universal selector does the job for this. I use !important here so I don’t need to worry about the cascade overriding it:

@media print {
  * {
    color: black !important;
    background: none !important;
  }
}

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 8

What does CSS property aspect-ratio do?

Answer 8

The CSS property aspect-ratio lets you create boxes that maintain proportional dimensions where the height and width of a box are calculated automatically as a ratio.

In other words, this property helps us to size elements consistently, so the ratio of an element stays the same as it grows or shrinks.

Example:

.element {
  aspect-ratio: 2 / 1; /* ↔️ is double the ↕️ */
}

.element {
  aspect-ratio: 1 / 1; /* ⏹ a perfect square */
}

Source css-tricks

Question 9

CSS property aspect-ratio syntax and values

Answer 9

aspect-ratio: auto || <ratio>;

Values:

• auto: The default value, Specifies that the element has no preferred aspect ratio and should size itself as it normally would.
• <ratio>: Two positive numeric values separated by a forward slash (/) , targeting the width and height of the element. In the case of a single value, the second value is considered to be 1. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing.
• initial: Applies the property’s default setting, which is auto.
• inherit: Adopts the aspect-ratio value of the parent.
• unset: Removes the current aspect ratio from the element.

Note: it is not inherited

Source css-tricks

Question 10

What does the following CSS ruleset

.element {
  aspect-ratio: auto 1 / 1;
}

do?

Answer 10

If both auto and a <ratio> are specified together, the preferred aspect ratio is the specified ratio of width divided by height, unless it is a replaced element with an intrinsic aspect ratio, in which case that aspect ratio is used instead.

Source css-tricks

Question 11

When does aspect-ratio property gets ignored?

Answer 11

• When both width and height are declared on the element
• When content breaks out of the ratio
• When it “loses” to min-* and max-* properties

Source css-tricks

Question 12

Common use cases of aspect-ratio property?

Answer 12

• Responsive iFrames that show youtube videos

iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

• Hero images

.hero {
  aspect-ratio: 4 / 3;
  background: url(background.png);
}

• Layout consistency: In a flexbox or a grid layout with auto-fill mechanism, you may want items to stay square, but items width and height can shrink or grow based on their content or their parent’s size and as a result it’s most likely that items don’t stay square.

Setting aspect-ratio to 1/1 changes the height dynamically while your item’s width scales:

grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.grid-item {
  aspect-ratio: 1 / 1;
}

Source css-tricks

Question 13

What is a fluid layout?

Answer 13

a fluid layout (sometimes called liquid layout) refers to the use of containers that grow and shrink according to the width of the viewport.

A fluid layout can be slightly narrower than the viewport, but never wider.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 14

What’s the problem with tables and fluid layouts?

Answer 14

Tables are particularly problematic for fluid layout on mobile devices. If a table has more than a handful of columns, it can easily overflow the screen width.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 15

What can you do when a table’s width breaks a fluid layout design?

Answer 15

One approach could be to force the table to display as normal block elements.

table {
  width: 100%;
}

@media (max-width: 30em) {
  table, thead, tbody, tr, th, td {
    /* Makes all table elements block display */
    display: block;
  }

  thead tr {
    /* Hides the headings row by moving it off the screen */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    /* Adds a little space between each set of table data */
    margin-bottom: 1em;
  }
}

The above styles causes each cell to stack atop one another, then adds a margin between each <tr>. This approach makes the <thead> row no longer lineup with columns beneath it, so we use some absolute positioning to remove the header row from view. We avoid display: none for accessibility

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 16

How do you deal with images on responsive layouts?

Answer 16

In responsive design, images need special attention. Not only do you need to fit them on the screen, you must also consider the bandwidth limitations of mobile users.

One approach could be to serve a different image depending on the viewport size:

.hero {
  . . .
  /* Uses the smallest image on mobile devices */
  background-image: url(coffee-beans-small.jpg);
}

@media (min-width: 35em) {
  .hero {
    . . .
    /* Uses a larger image on medium-size screens */
    background-image: url(coffee-beans-medium.jpg);
  }
}

@media (min-width: 50em) {
  .hero {
    . . .
    /* Uses the full resolution image on large screens */
    background-image: url(coffee-beans.jpg);
  }
}

Although a better approach would be to use the srcset attribut of the HTML img tag

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.