Responsive Design

Device-Agnostic Approach To Responsive Web Design



1. Basics


  1. WikiPedia: Responsive Web Design
  2. Google: Responsive Web Design Basics
  3. CSS-Tricks: Optimizing for Large-Scale Displays
  4. The pro's guide to responsive web design
  5. Device-Agnostic Approach To Responsive Web Design
  6. Responsive Design

2. Viewport


Monitor sizes as the basis of breakpoints


The viewport meta tag tells the device at what scale to render the page.


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

 @viewport {
   width: device-width;
   zoom:1;
}

Viewport Mobile
Media Queries
W3C: Media Queries Level 4
CSS Breakpoints


Tests

  1. Mobile-Friendly Test
  2. http://quirktools.com/screenfly/

2.1. Browser Support

https://caniuse.com/css-deviceadaptation

2.2. Resources


3. Layout

sketch of a page’s desired layout


Multi-Device Layout Patterns

4. Markup

<!DOCTYPE html>
<div class="wrapper">
  <header>...</header>
  <main>
     <article>...</article>
     <nav>...</nav>
     <aside>...</aside>
  </main>
  <footer>...</footer>
</div>

5. CSS


CSS Guidelines
How to Order CSS Selectors

5.1. Units

5.1.1. Em

target ÷ context = result


So with our formula in hand, let’s turn back to that 24px headline. Assuming that our base font-size: 100% on the body element equates to 16px, we can plug those values directly into our formula. So if we need to express our h1’s target font size (24px) relative to its context (16px), we get:


24 ÷ 16 = 1.5


And there we are: 24px is 1.5 times greater than 16px, so our font-size is 1.5em:


h1 {
  font-size: 1.5em; /* 24px / 16px */
  font-style: italic;
  font-weight: normal;
} 

Browser default considered as :root {font-size:16px}
Pixel Em Percent Keyword Notes
8px 0.5em 50%
9px 0.5625em 56.25%
10px 0.625em 62.5% x-small
11px 0.6875em 68.75%
12px 0.75em 75%
13px 0.8125em 81.25% small
14px 0.875em 87.5%
15px 0.9375em 93.75%
16px 1em 100% medium
17px 1.0625em 106.25%
18px 1.125em 112.5% large
19px 1.1875em 118.75%
20px 1.25em 125%
21px 1.3125em 131.25%
22px 1.375em 137.5%
23px 1.4375em 143.75%
24px 1.5em 150% x-large
26px 1.625em 162.5%
28px 1.75em 175%
30px 1.875em 187.5%
32px 2em 200% xx-large
34px 2.125em 212.5%
36px 2.25em 225%
38px 2.35em 235%
40px 2.5em 250%
42px 2.625em 262.5%
44px 2.75em 275%
46px 2.875em 287.5%
48px 3em 300%

Tools

  1. Convert pixel-point-em-rem-percent
  2. Fluid-responsive font-size calculator

5.1.2. Resources

5.2. Breakpoints

 
@media screen and (min-width: 1200px) {
    body { font-size: 110%; } /* Increase the font size */
}
@media screen and (min-width: 1400px) {
    html { padding: 0 15%; } /* Reduce the container width */
}
@media screen and (min-width: 1600px) {
    body { font-size: 125%; } /* Increase the font size */
}
@media screen and (min-width:1800px) {
    html { padding: 0 20%; } /* Reduce the container width */
}

5.3. Flexbox


Flexbox vs Grid

  1. Flexbox: content dictates layout
  2. Grid: container dictates layout (to some extent)

Flexbox is great, it just isn't the best thing for overall page layouts.
Flexbox and grid play well together, and are a huge step forward from the float & table hacks they replace. The sooner we can use them both in production, the better.

main { display: flex; }
main > article { order: 2; min-width: 12em; flex:1; }
main > nav     { order: 1; width: 200px; }
main > aside   { order: 3; width: 200px; }

@media all and (max-width: 600px) {
  /* Too narrow to support three columns */
  main { flex-flow: column; }
  main > article, main > nav, main > aside {
    /* Return them to document order */
    order: 0; width: auto;
  }
}

5.3.1. Browser Support

https://caniuse.com/flexbox

5.3.2. Resources


https://www.mediaevent.de/css/display-flex.html
https://www.mediaevent.de/tutorial/flexbox.html

5.4. Grid


main { display: grid;
       grid: "h h h"
             "a b c"
             "f f f";
       grid-template-columns: auto 1fr 20%; }
article { grid-area: b; min-width: 12em;     }
nav     { grid-area: a; /* auto min-width */ }
aside   { grid-area: c; min-width: 12em;     }

@media all and (max-width: 60em) {
  /* Too narrow to support three columns */
  main { display: block; }
}

Examples

  1. Responsive Layout with Grid – line-based placement
  2. Grid Template Areas

5.4.1. Browser Support

https://caniuse.com/css-grid

5.4.2. Resources

6. Typography

6.1. Font Size

html {font-size: 100%;}

6.2. Leading (Line Height)

6.3. Measure (Line Length)

45 to 85 characters
An estimate for optimal line length: between 45 and 75-85 characters (including spaces and punctuation), with 65 the “ideal” target value.


1rem = 1character
Using a rough estimate of 1rem = 1character, we can control the flow of text for a single column of content.


.container {
  width: 100%;
}
 
@media (min-width: 85rem) {
  .container {
    width: 65rem;
  }
}

6.4. Hyphenation

6.5. Resources


7. Helpers


8. Frameworks

  1. Bulma
  2. Spectre.css
  3. Foundation
  4. Bootstrap - > build a theme for R6
  5. Ulkit
  6. Semantic UI

Show Files (1 file)