Choose a job. Choose a career. Choose a family. Choose to create responsive apps

Responsive design

There is three key principles for reponsive design:

1 - mobile first design to design

2 - use @media at-rules

3 - use of FLUID layout, that can adapt to different viewport sizes.

Mobile designs don't have a lot of space to waste. So it's all about the content. The most important things first.

The header must be hidden, and side elements sent to the bottom -the most important info must come first-. Also, it's important that the most important info comes first for the screen readers, we don't want them to read a side element before the important information.

Trick to have a nice font-size for all sizes:

:root {
 box-sizing: border-box;
 font-size: calc(1vw + 0.6em); <--- Base font size scales slightly with the viewport
}

// and this just in case the font grows a little bit too much
@media (min-width: 50em) {
 :root {
 font-size: 1.125em; 
 }
}

*new trick!! toggle the presence of a class with js:

menu.classList.toggle('is-open')

viewport meta tag: This is an HTML tag that indicates mobile devices that 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.

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

First, it tells the browser to use the device width as the assumed width when interpreting the CSS, instead of pretending to be a full size desktop browser.

Second, it uses initial-scale to set the zoom level at 100% when the page loads.

** A third common option that many developers add to the content attribute is

user-scalable=no, which prohibits the user from using two fingers to zoom in and

out on their mobile device. Including this is generally a bad practice.

media queries

WARNING!! You should use ems for media query breakpoints. It’s the only unit that performs consistently in all major browsers should the user zoom the page or change the default font size. Pixel- and rem-based breakpoints are less reliable in Safari. Ems also have the benefit of scaling up or down with the user’s default font size, which is generally preferable.

most common media queries:

• min-width: 35em ---- for viewports bigger than
• max-width: 35em ---- for viewports smaller than

and then the rest:

• (min-height: 20em)—Targets viewports 20 em and taller
• (max-height: 20em)—Targets viewports 20 em and shorter
• (orientation: landscape)—Targets viewports that are wider than they are tall
• (orientation: portrait)—Targets viewports that are taller than they are wide
• (min-resolution: 2dppx)—Targets devices with a screen resolution of 2 dots per pixel or higher; targets retina displays
• (max-resolution: 2dppx)—Targets devices with a screen resolution of up to 2 dots per pixel

Because of support for dppx, the best way to target retina devices is:

@media (-webkit-min-device-pixel-ratio: 2),
 (min-resolution: 192dpi) { … }

This approach will work on all modern browsers. Use it when you want to serve higher-resolution imagery or icons to screens that can benefit from them. This way, users with lower-resolution screens won’t waste bandwidth loading larger images when they won’t be able to see the difference.

So we can write styles like this, if we want:

.title { 
 ... <-- for mobile
}

@media (min-width: 35em) { 
 .title {
 ... <--- bigger devices
 }
}

@media (min-width: 50em) { 
 .title {
 ... <-- huge devices
 }
}

** Always be sure each media query comes after the styles it overrides, so the styles within the media query take precedence.

** Fluid layout vs fixed layout: the fixed one is the one that is set using px or ems or whatnot. The refers to the use of containers that grow and shrink according to the width of the viewport.

responsive images

For images that are referenced in the css:

.hero {
 padding: 2em 1em;
 background-image: url(coffee-beans-small.jpg); 
}

@media (min-width: 35em) {
 .hero {
   background-image: url(coffee-beans-medium.jpg); 
 }
}

@media (min-width: 50em) {
 .hero {
   background-image: url(coffee-beans.jpg); 
 }
}

for images that are referenced in the html using <img>, use the srcset attribute:

<img alt="A white coffee mug on a bed of coffee beans" src="coffee-beans-small.jpg" srcset="coffee-beans-small.jpg 560w, coffee-beans-medium.jpg 800w, coffee-beans.jpg 1280w" />

** add always this to your layouts so you don't run into problems:

img { max-width: 100%; }