Initial commit

jessicarush · Jul 9, 2020 · a86c92b · a86c92b
1 parent d85ec74
commit a86c92b
Show file tree

Hide file tree

Showing 12 changed files with 162 additions and 0 deletions.
diff --git a/css_responsive_images/base.css b/css_responsive_images/base.css
@@ -0,0 +1,53 @@
+@charset "UTF-8";
+
+
+
+/* VARIABLES -------------------------------------------------------------- */
+
+:root {
+  --heading-font: 'Open Sans', sans-serif;
+  --main-font: 'Open Sans', sans-serif;
+  --minor-font: 'Open Sans', sans-serif;
+  --heading-color: rgba(0,0,50,.9);
+  --main-color: rgba(70,70,90,.9);
+  --minor-color: rgb(190,190,200);
+  --emphasis-color: rgb(27,211,165);
+}
+
+
+
+/* DEFAULTS --------------------------------------------------------------- */
+
+html {
+  color: var(--main-color);
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-weight: 400;
+}
+
+/* TYPOGRAPHY ------------------------------------------------------------- */
+
+.primary-heading {
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-size: 2rem;
+  font-weight: 400;
+}
+
+.highlight-text {
+  color: var(--emphasis-color);
+}
+
+
+
+/* LINKS & BUTTONS -------------------------------------------------------- */
+
+/* LAYOUT ----------------------------------------------------------------- */
+
+/* COMPONENTS ------------------------------------------------------------- */
+
+/* COSMETIC --------------------------------------------------------------- */
+
+/* UTILITY ---------------------------------------------------------------- */
+
+/* STATE ------------------------------------------------------------------ */
diff --git a/css_responsive_images/cat-fallback.jpg b/css_responsive_images/cat-fallback.jpg
diff --git a/css_responsive_images/cat-fallback_2x.jpg b/css_responsive_images/cat-fallback_2x.jpg
diff --git a/css_responsive_images/cat-small.jpg b/css_responsive_images/cat-small.jpg
diff --git a/css_responsive_images/cat-small_2x.jpg b/css_responsive_images/cat-small_2x.jpg
diff --git a/css_responsive_images/cat.jpg b/css_responsive_images/cat.jpg
diff --git a/css_responsive_images/cat_2x.jpg b/css_responsive_images/cat_2x.jpg
diff --git a/css_responsive_images/index.html b/css_responsive_images/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Site | Page</title>
+  <link href="base.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
+</head>
+
+<body>
+
+  <header>
+    <h1 class="primary-heading">CSS Responsive Images</h1>
+    <nav></nav>
+  </header>
+
+  <main>
+    <p>
+      This demo looks at two ways of creating repsonsive images as discussed in <a href="https://pusher.com/sessions/meetup/viennajs/an-introduction-to-html5-responsive-images?utm_source=twitter&utm_medium=social&utm_campaign=sessions-html5-responsive-images" target="_blank" rel="noopener noreferrer">this talk by Roland Schütz</a>. There's also a great explanation on MDN: <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images" target="_blank" rel="noopener noreferrer">Responsive Images</a>.
+    </p>
+
+    <h2>Responsive in terms of art direction</h2>
+
+    <p>
+      The idea here is that we want to specify <span class="highlight">different images</span> based on the screen size.
+    </p>
+
+    <p>For example:</p>
+
+    <picture>
+      <source media="(min-width: 800px)" srcset="cat.jpg, cat_2x.jpg 2x">
+      <source media="(min-width: 450px)" srcset="cat-small.jpg, cat-small_2x.jpg 2x">
+      <img src="cat-fallback.jpg" srcset="cat-fallback_2x.jpg 2x" alt="a cat">
+    </picture>
+
+    <p>
+      In the code above the <code>source</code> element specifies the different images to use based on the min-width of the media. These will be checked top down so the first matching condition will be used. The <code>srcset</code> attribute provides a double-density version for high res screens. The <code>img</code> element provides a fallback image in the event that zero of the conditions are met or the browser is outdated.
+    </p>
+
+    <p>
+      Keep in mind, this approach requires a lot of work in preparing all the different images.
+    </p>
+
+    <h2>Responsive in terms of performance</h2>
+
+    <p>
+      The idea here is that we want to make <span class="highlight">different image sizes</span> available so that each device can display only what it needs.
+    </p>
+
+    <p>For example:</p>
+
+    <img srcset="tiger-400.jpg 400w,
+                 tiger-800.jpg 800w,
+                 tiger-1200.jpg 1200w,
+                 tiger-1600.jpg 1600w"
+         sizes="(max-width: 600px) 95vw,
+                (max-width: 900px) 600px,
+                (max-width: 1400px) 900px,
+                1400px"
+         src="tiger-400.jpg"
+         alt="a tiger">
+
+    <p>
+      In the code above, the <code>srcset</code> attribute specifies a series of images along with their intrinsic width in pixels.
+    </p>
+
+    <p>
+      The <code>sizes</code> attribute defines a set of media conditions (e.g. screen widths) followed by a value which is the width of the "slot" the image will fill when the media condition is true. The last value in this list would be the default (fallback) size. You could, if you wanted, specify only this last default instruction. For example, in the example below which says "display the image at 50vw no matter what". Note: For the slot width, you may provide an absolute length (px, em) or a length relative to the viewport (vw), but not percentages.
+    </p>
+
+    <p>
+      So, with these attributes in place, the browser will:
+    </p>
+
+    <ol>
+      <li>
+        Look at its device width.
+      </li>
+      <li>
+        Work out which media condition in the sizes list is the first one to be true.
+      </li>
+      <li>
+        Look at the slot size given to that media query.
+      </li>
+      <li>
+        Load the image referenced in the srcset list that has the same size as the slot or, if there isn't one, the first image that is bigger than the chosen slot size.
+    </li>
+    </ol>
+
+    <img srcset="tiger-400.jpg 400w,
+                 tiger-800.jpg 800w,
+                 tiger-1200.jpg 1200w,
+                 tiger-1600.jpg 1600w"
+         sizes="50vw"
+         src="tiger-400.jpg"
+         alt="a tiger">
+
+    <p>
+      Note that Google's web page speed test will give you a bad rating if you only provide one size for your images.
+    </p>
+
+  </main>
+
+  <footer>
+  </footer>
+
+</body>
+</html>
diff --git a/css_responsive_images/tiger-1200.jpg b/css_responsive_images/tiger-1200.jpg
diff --git a/css_responsive_images/tiger-1600.jpg b/css_responsive_images/tiger-1600.jpg
diff --git a/css_responsive_images/tiger-400.jpg b/css_responsive_images/tiger-400.jpg
diff --git a/css_responsive_images/tiger-800.jpg b/css_responsive_images/tiger-800.jpg