{"id":1321,"date":"2020-08-14T13:15:50","date_gmt":"2020-08-14T13:15:50","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=1321"},"modified":"2020-08-14T13:15:50","modified_gmt":"2020-08-14T13:15:50","slug":"beyond-screen-sizes-responsive-design-in-2020","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=1321","title":{"rendered":"Beyond screen sizes: responsive design in 2020"},"content":{"rendered":"\n<p>Responsive design was introduced more than 10 years ago. In fact, Ethan Marcotte\u2019s&nbsp;<a href=\"https:\/\/alistapart.com\/article\/responsive-web-design\/\" rel=\"noreferrer noopener\" target=\"_blank\">seminal article<\/a>&nbsp;turned 10 on 25 May. Here\u2019s how I would describe responsive design:<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><em>The way a website adapts to different screen sizes by reflowing and repositioning content as the available space allows.<\/em><\/p>\n\n\n\n<p>We do this by using media queries and flexibly sized elements using relative, minimum and maximum sizes. In recent years, this has gotten easier with the introduction of the&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Flexible_Box_Layout\/Basic_Concepts_of_Flexbox\" rel=\"noreferrer noopener\" target=\"_blank\">Flexbox<\/a>&nbsp;and&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\/Basic_Concepts_of_Grid_Layout\" rel=\"noreferrer noopener\" target=\"_blank\">Grid<\/a>&nbsp;layout modes, which have been developed with responsive design in mind.&nbsp;<\/p>\n\n\n\n<p>Before responsive design, we already had a way to develop websites for smaller devices. Back in 2008 I wrote an article for a Dutch web development site on handheld stylesheets. These used the now deprecated \u201chandheld\u201d media type and were supported by mobile browsers back then, like Opera Mini and Internet Explorer Mobile.<\/p>\n\n\n\n<p>However, overall support for these handheld stylesheets, and what you could do with them, was pretty terrible. I ended my article with a glimmer of hope. Soon we would be able to use a thing called \u201cmedia queries\u201d, which would allow us to respond to device widths, heights and&nbsp;<em>number of colours<\/em>. Somehow that seemed important to mention back then.&nbsp;<\/p>\n\n\n\n<p>The best news was that Opera 9 and Safari 3 already supported it. We didn\u2019t realise it back then, but the mobile internet and media queries were here to stay.<\/p>\n\n\n\n<p>We\u2019re now more than a decade in, and of course support for media queries is terrific:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/image8-300x100.png\" alt=\"\" class=\"wp-image-22619\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/caniuse.com\/css-mediaqueries\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Support for media queries<\/em><\/a><em>&nbsp;according to caniuse.com.<\/em><\/p>\n\n\n\n<p>I also think we have a solid, shared understanding of what constitutes good responsive design. Here\u2019s how I would describe it. (If you disagree,&nbsp;<a href=\"http:\/\/twitter.com\/kilianvalkhof\" rel=\"noreferrer noopener\" target=\"_blank\">find me on Twitter<\/a>.)<\/p>\n\n\n\n<p>Responsive design means\u2026&nbsp;<\/p>\n\n\n\n<ul><li>Mobile first<\/li><li>Media queries with widths in ems<\/li><li>Base font-size of at least 16 pixels<\/li><li>Allows for user resizing and zooming, even on mobile<\/li><li>Scrolling is fine, because there is no fold.<\/li><\/ul>\n\n\n\n<p>But I think we\u2019re now at a point where we can start considering a new type of responsiveness. One that doesn\u2019t just look at the width and height of the screen, but also at what your user prefers. For simplicity\u2019s sake, let\u2019s call this:&nbsp;<strong>r<\/strong><strong>esponsive websites.<\/strong><\/p>\n\n\n\n<h2>Responsive websites<\/h2>\n\n\n\n<p>A responsive website doesn\u2019t just respond to viewport sizes but also adapts to user preferences. In web development, we usually reason about what a device can do, but we really want to be responsive to the user, their environment and their preferences. The device is just the proxy that sits between us and the user.<\/p>\n\n\n\n<p>Luckily, on the modern web we already have a lot of ways to be more responsive. We can respond to:<\/p>\n\n\n\n<ul><li>User preferences<\/li><li>Environment<\/li><li>Network conditions<\/li><li>Device<\/li><\/ul>\n\n\n\n<p>In the rest of this article, we\u2019ll go over these and see what\u2019s possible in each of these categories. Unless explicitly mentioned you can use these features in production right now, with good support in all evergreen browsers.<\/p>\n\n\n\n<h3>User preferences<\/h3>\n\n\n\n<p>Let\u2019s start with user preferences. You\u2019re probably familiar with the first one:&nbsp;<em>Prefers-color-scheme<\/em>. Or as you might know it, dark mode support.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td>@media (prefers-color-scheme: dark) {<\/td><\/tr><tr><td><\/td><td>\/* wants dark mode *\/<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>@media (prefers-color-scheme: light) {<\/td><\/tr><tr><td><\/td><td>\/* wants light mode *\/<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba\/raw\/c08d0d8eefdab0ada43a146c6ff98ed5fb79c8bd\/prefers-color-scheme.css\">view raw<\/a><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba#file-prefers-color-scheme-css\">prefers-color-scheme.css<\/a>&nbsp;hosted with&nbsp;<img alt=\"\u2764\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/2764.svg\">&nbsp;by&nbsp;<a href=\"https:\/\/github.com\/\">GitHub<\/a><\/p>\n\n\n\n<p>With this setting, users can indicate to your website that they prefer to see a light or dark interface. If there is no explicit preference, your browser will default to light mode.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/image10-300x176.png\" alt=\"\" class=\"wp-image-22625\"\/><\/figure>\n\n\n\n<p><em>A website with both a light and dark mode style shown in&nbsp;<\/em><a href=\"https:\/\/polypane.com\/\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Polypane<\/em><\/a><em>.<\/em><\/p>\n\n\n\n<p>Some users might be sensitive to bright lights or just prefer darker colours, but others might explicitly choose a light mode for the usually increased contrast. Offering both a light and dark mode can help make your website more accessible to users.&nbsp;<\/p>\n\n\n\n<p>If you already have a website, there\u2019s a fair chance that it\u2019s in what you would consider \u201clight mode\u201d. If you want to add a dark mode but don\u2019t have a lot of time or budget, then you can add something I like to call \u201ccheap dark mode\u201d:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td>@media (prefers-color-scheme: dark) {<\/td><\/tr><tr><td><\/td><td>:root {<\/td><\/tr><tr><td><\/td><td>background: #111;<\/td><\/tr><tr><td><\/td><td>filter: invert(1) hue-rotate(180deg);<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>img,<\/td><\/tr><tr><td><\/td><td>video {<\/td><\/tr><tr><td><\/td><td>filter: invert(1) hue-rotate(180deg);<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba\/raw\/c08d0d8eefdab0ada43a146c6ff98ed5fb79c8bd\/cheap-dark-mode.css\">view raw<\/a><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba#file-cheap-dark-mode-css\">cheap-dark-mode.css<\/a>&nbsp;hosted with&nbsp;<img alt=\"\u2764\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/2764.svg\">&nbsp;by&nbsp;<a href=\"https:\/\/github.com\/\">GitHub<\/a><\/p>\n\n\n\n<p>This isn\u2019t perfect but it will get you dark mode in just a few lines of code. Here\u2019s how it works: First it adds a dark background colour. Then it uses a filter to invert all the colours on the page (the background won\u2019t be affected).&nbsp;<\/p>\n\n\n\n<p>The invert turns all light colours dark and all dark colours light, but it also switches all colours. Blue becomes orange, green becomes pink and so on. If you want your colours to remain mostly the same, you\u2019ll also have to rotate their hue 180 degrees, so they\u2019re back to normal. This does mean that your colours\u2019 lightness will change. You don\u2019t get to keep your brand colours perfectly, but this is&nbsp;<em>cheap<\/em>&nbsp;dark mode after all.<\/p>\n\n\n\n<p>There\u2019s another thing we need to do though: With the invert, all our images and videos are now also inverted and they\u2019re being shown as negatives. We want to turn those back to their original colour. We can do that by adding another invert (inverting the invert) and rotating the hue another 180 degrees (getting it back to the original colour).<\/p>\n\n\n\n<h4><strong>Prefers reduced motion<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td>@media (prefers-reduced-motion: reduce) {<\/td><\/tr><tr><td><\/td><td>\/* wants reduced motion *\/<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>@media (prefers-reduced-motion: no-preference) {<\/td><\/tr><tr><td><\/td><td>\/* doesn&#8217;t want reduced motion *\/<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba\/raw\/c08d0d8eefdab0ada43a146c6ff98ed5fb79c8bd\/prefers-reduced-motion.css\">view raw<\/a><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba#file-prefers-reduced-motion-css\">prefers-reduced-motion.css<\/a>&nbsp;hosted with&nbsp;<img alt=\"\u2764\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/2764.svg\">&nbsp;by&nbsp;<a href=\"https:\/\/github.com\/\">GitHub<\/a><\/p>\n\n\n\n<p>With&nbsp;<em>prefers-reduced-motion<\/em>&nbsp;a user can indicate that they want to see less stuff happening on the screen. Reasons they want to do this can include motion sickness, vestibular disorders or just plainly they don\u2019t want to wait around while your nice animations play.&nbsp;<\/p>\n\n\n\n<p>If a user has this turned on, it doesn\u2019t mean you can\u2019t show&nbsp;<em>any<\/em>&nbsp;motion, just that you have to be mindful: use motion only where it helps understanding, and if you do use motion, choose simple motions like a fade. If it doesn\u2019t help understanding, turn it off. For videos, make sure you don\u2019t autoplay them.&nbsp;<\/p>\n\n\n\n<p>If you\u2019re building a new website, it\u2019s good to think of motion as a progressive enhancement. Develop your website with reduced motion, and add the animations in a&nbsp;prefers-reduced-motion: no-preference&nbsp;media query. That way the default experience is the more accessible one, and users that don\u2019t mind animations get them for free.<\/p>\n\n\n\n<p>For existing websites you can add \u201ccheap\u201d reduced motion support by turning off all animations and transitions, like so:<\/p>\n\n\n\n<p>Make sure you also use the following bit of JavaScript to check if you can autoplay videos:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td>const video = document.createElement(&#8216;video&#8217;);<\/td><\/tr><tr><td><\/td><td>const canAutoPlay = window.matchMedia(&#8216;(prefers-reduced-motion: no-preference)&#8217;).matches;<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>video.setAttribute(&#8216;autoplay&#8217;, canAutoPlay);<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba\/raw\/c08d0d8eefdab0ada43a146c6ff98ed5fb79c8bd\/prefers-reduced-motion.js\">view raw<\/a><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba#file-prefers-reduced-motion-js\">prefers-reduced-motion.js<\/a>&nbsp;hosted with&nbsp;<img alt=\"\u2764\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/2764.svg\">&nbsp;by&nbsp;<a href=\"https:\/\/github.com\/\">GitHub<\/a><\/p>\n\n\n\n<p><em>The previous two media queries have wide support in all evergreen browsers, but the next few user preferences don\u2019t. Consider them a taste of what\u2019s to come.<\/em><\/p>\n\n\n\n<h4><strong>Prefers-reduced-transparancy<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/image7-300x195.png\" alt=\"\" class=\"wp-image-22618\"\/><\/figure>\n\n\n\n<p><em>A website without (left) and with (right) reduced transparency.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td>@media (prefers-reduced-transparency: reduce) {<\/td><\/tr><tr><td><\/td><td>\/* wants reduced transparency *\/<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>@media (prefers-reduced-transparency: no-preference) {<\/td><\/tr><tr><td><\/td><td>\/* doesn&#8217;t want reduced transparency *\/<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba\/raw\/c08d0d8eefdab0ada43a146c6ff98ed5fb79c8bd\/prefers-reduced-transparency.css\">view raw<\/a><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba#file-prefers-reduced-transparency-css\">prefers-reduced-transparency.css<\/a>&nbsp;hosted with&nbsp;<img alt=\"\u2764\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/2764.svg\">&nbsp;by&nbsp;<a href=\"https:\/\/github.com\/\">GitHub<\/a><br>Users can use this media query to indicate that they prefer seeing text on solid colours, usually due to visual impairments making it hard to read text on busy backgrounds, like images or patterns. This feature can also help people with dyslexia or concentration problems to read your content easier.<\/p>\n\n\n\n<p>Unfortunately, there is no browser support yet.<\/p>\n\n\n\n<p><strong>Prefers-contrast<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td>@media (prefers-contrast: high) { }<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>@media (prefers-contrast: no-preference) { }<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>@media (prefers-contrast: low) { }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba\/raw\/c08d0d8eefdab0ada43a146c6ff98ed5fb79c8bd\/prefers-contrast.css\">view raw<\/a><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba#file-prefers-contrast-css\">prefers-contrast.css<\/a>&nbsp;hosted with&nbsp;<img alt=\"\u2764\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/2764.svg\">&nbsp;by&nbsp;<a href=\"https:\/\/github.com\/\">GitHub<\/a><\/p>\n\n\n\n<p>Equally unsupported,&nbsp;<em>prefers-contrast<\/em>&nbsp;indicates whether a user prefers a high or low contrast interface. (Notice how it\u2019s&nbsp;<em>prefers-contrast<\/em>&nbsp;and not&nbsp;<em>prefers-reduced-contrast<\/em>&nbsp;like the previous media queries. This one goes both ways!)<\/p>\n\n\n\n<p>Some visual impairments can make it difficult to make out details or subtle differences in colour, in which case people will prefer a higher contrast. On the other hand, people might be sensitive to harsh, high contrast and prefer low contrast.<\/p>\n\n\n\n<p>Note that wanting less transparency is not the same as wanting more contrast, and these should not be lumped together. They are there for different reasons and can be compensated differently for.<\/p>\n\n\n\n<h4><strong>Inverted-colors<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/image3-300x263.png\" alt=\"\" class=\"wp-image-22609\"\/><\/figure>\n\n\n\n<p><em>Safari showing a website without (left) and with (right) inverted colours. Source:&nbsp;<\/em><a href=\"https:\/\/a11yproject.com\/posts\/operating-system-and-browser-accessibility-display-modes\/\" rel=\"noreferrer noopener\" target=\"_blank\"><em>The A11Y Project<\/em><\/a><em>.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td>@media (inverted-colors: none) {<\/td><\/tr><tr><td><\/td><td>\/* colors are normal *\/<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>@media (inverted-colors: inverted) {<\/td><\/tr><tr><td><\/td><td>\/* colors are inverted *\/<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba\/raw\/c08d0d8eefdab0ada43a146c6ff98ed5fb79c8bd\/inverted-colors.css\">view raw<\/a><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba#file-inverted-colors-css\">inverted-colors.css<\/a>&nbsp;hosted with&nbsp;<img alt=\"\u2764\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/2764.svg\">&nbsp;by&nbsp;<a href=\"https:\/\/github.com\/\">GitHub<\/a><\/p>\n\n\n\n<p>You\u2019ll notice this media query doesn\u2019t start with&nbsp;<em>prefers<\/em>, and that\u2019s because it indicates that the operating system has already inverted colours. The operating system in this instance is Mac OS, the only OS to implement this setting.&nbsp;<\/p>\n\n\n\n<p>You might think you\u2019d use this to double-invert your images (like our cheap dark mode from earlier in the article) but Safari, the only browser to support this media query, already does this for you.<\/p>\n\n\n\n<p>You can however, still invert or hue-shift other parts of your website to make sure your icon colours are still correct and brand colours are being followed.<\/p>\n\n\n\n<h4><strong>-ms-high-contrast\/forced-colors<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/image1-300x172.png\" alt=\"\" class=\"wp-image-22606\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/image9-300x173.png\" alt=\"\" class=\"wp-image-22622\"\/><\/figure>\n\n\n\n<p><em>GitHub.com shown without forced colours (left) and with (right). Source:&nbsp;<\/em><a href=\"https:\/\/adrianroselli.com\/2017\/11\/os-high-contrast-versus-inverted-colors.html\" rel=\"noreferrer noopener\" target=\"_blank\"><em>adrianroselli.com<\/em><\/a><em>.<\/em><\/p>\n\n\n\n<p>On the Windows and Edge side, we have the&nbsp;-ms-high-contrast&nbsp;media query. A big difference with&nbsp;inverted-colors&nbsp;is that it\u2019s much more destructive. It will strip out any background images if there\u2019s text over them and force all your background and text colours to use system colours, making everything uniform with the rest of your operating system.<\/p>\n\n\n\n<p>If you\u2019ve been doing web development for a while, you might remember that we could style elements with system colours. That\u2019s no longer possible due to security implications, but in the windows high contrast mode a subset of them is back:<\/p>\n\n\n\n<ul><li><strong>windowText<\/strong>: controls the colour of text content.<\/li><li><strong>highlightText<\/strong>: controls the colour of selected text.<\/li><li><strong>highlight<\/strong>: controls the background colour of selected text.<\/li><li><strong>buttonFace<\/strong>: controls the colour of a &lt;button&gt; element\u2019s text.<\/li><li><strong>window<\/strong>: controls the colour of the background.<\/li><li>The&nbsp;<strong>&lt;a&gt;<\/strong>&nbsp;element controls the colour of links.<\/li><\/ul>\n\n\n\n<p>These colour names are not here for you to pick and choose, high colour mode already overwrites all your text, background and button colours with these values. They\u2019re there for you to use on other elements to make them fit the rest of the site, like custom icons.<\/p>\n\n\n\n<p>Only Edge implements the&nbsp;-ms-high-contast&nbsp;value, the spec equivalent that\u2019s being worked on is called&nbsp;forced-colors, but it has no browser support at the moment.<\/p>\n\n\n\n<p><em>These last three media queries,&nbsp;<\/em><em>prefers-contrast<\/em><em>,&nbsp;<\/em><em>inverted-colors<\/em><em>&nbsp;and&nbsp;<\/em><em>forced-colors<\/em><em>, do not serve the same purpose.&nbsp;<\/em><em>Forced-colors<\/em><em>&nbsp;very explicitly overwrites your styling to one of the user\u2019s choosing, often with significantly increased contrast. With&nbsp;<\/em><em>prefers-contrast<\/em><em>&nbsp;it\u2019s your job to increase contrast, but the user would still like to see your design. Lastly,&nbsp;<\/em><em>inverted-colors<\/em><em>&nbsp;has no such explicit goal but is primarily used to make screens less bright.<\/em><\/p>\n\n\n\n<h3>Environment<\/h3>\n\n\n\n<p>Alongside user preferences, there\u2019s also two upcoming media queries that will tell you something about the environment your page is shown in,&nbsp;light-level&nbsp;and&nbsp;environment-blending. Neither are supported by browsers at the moment.<\/p>\n\n\n\n<h4><strong>Light-level<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/image6-300x198.png\" alt=\"\" class=\"wp-image-22615\"\/><\/figure>\n\n\n\n<p><em>Polypane emulating a dimmed, normal and washed screen side by side.<\/em><\/p>\n\n\n\n<p>Light level has three possible values:&nbsp;<em>dim<\/em>,&nbsp;<em>normal<\/em>&nbsp;and&nbsp;<em>washed<\/em>. When each of these values is triggered is determined by the operating system based on the light sensor or camera on the device.<\/p>\n\n\n\n<p>Light level will be&nbsp;<em>dim<\/em>&nbsp;if the screen is shown in a dark place, whereas&nbsp;<em>washed<\/em>&nbsp;means that it\u2019s shown under bright lights or in outdoor conditions with lots of sunlight.<\/p>\n\n\n\n<p>Operating systems nowadays already compensate for these situations by themselves by increasing or decreasing brightness, but we can make specific changes to our web pages too. In dim situations, you might opt to decrease strong contrast here and there and decrease the overall brightness of your page. In washed situations you will want to increase the contrast of all text compared to the background to make sure that it\u2019s still readable.<\/p>\n\n\n\n<h4><strong>Environment-blending<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td>@media (environment-blending: opaque) { }<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>@media (environment-blending: additive) { }<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>@media (environment-blending: subtractive) { }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba\/raw\/c08d0d8eefdab0ada43a146c6ff98ed5fb79c8bd\/environment-blending.css\">view raw<\/a><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba#file-environment-blending-css\">environment-blending.css<\/a>&nbsp;hosted with&nbsp;<img alt=\"\u2764\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/2764.svg\">&nbsp;by&nbsp;<a href=\"https:\/\/github.com\/\">GitHub<\/a><\/p>\n\n\n\n<p>Environment blending is a little more sci-fi. With it you can test whether or not a screen blends with its environment, for example if it\u2019s projected on a piece of glass (think Minority report or the HoloLens). There\u2019s three possible values:&nbsp;<em>opaque<\/em>, which is the default and like a regular monitor.&nbsp;<em>Additive<\/em>, which is when the image is projected onto a transparent screen, means that white is 100 percent light and black is 100 percent transparent. Lasty,&nbsp;<em>subtractive<\/em>&nbsp;is when you have an LCD display like a gameboy screen, where pixels that are \u201con\u201d are black, and if they\u2019re off, they\u2019re transparent.&nbsp;<\/p>\n\n\n\n<h3>Network: prefers-reduced-data and the save-data header<\/h3>\n\n\n\n<p>Not everyone is lucky enough to have fast or reliable internet, or unlimited data plans. If you don\u2019t, you\u2019re generally not happy with websites downloading many megabytes per page and would rather have a slimmed-down version.<\/p>\n\n\n\n<p>Browsers can send the&nbsp;Save-data: on&nbsp;HTTP header, and servers can then choose to send smaller images and videos, prevent downloading some scripts and disable any form of polling or preloading. Mobile browsers have this in their settings already, and for desktop browsers there are browser extensions that do this.<\/p>\n\n\n\n<p>Dealing with such a request on a web server level is often hard to do. Either because you lack access or the configuration requirements to make it work are just too complex. That\u2019s unfortunate because it\u2019s potentially very impactful.<\/p>\n\n\n\n<p>Coming up in browsers, and available behind a flag in Chromium Canary, is the&nbsp;prefers-reduced-data&nbsp;media query. Though you can do less with it compared to the&nbsp;Save-data&nbsp;header (which you could theoretically use to send an entirely different web page), you can still use it in CSS to prevent downloading unneeded fonts and background images, or simply requesting smaller background images. And in JavaScript you can use it to prevent polling, preloading and automatically streaming video.<\/p>\n\n\n\n<p>Though the&nbsp;prefers-reduced-data&nbsp;media query is not implemented yet, both Firefox (behind a flag) and Chrome implement a new Network Information API which lets you check if&nbsp;saveData&nbsp;is on, and what the effective type of an internet connection is.<\/p>\n\n\n\n<p>effectiveType&nbsp;takes into account not just the type (Wi-Fi, cellular etc) but also how long previous round trips to the server took and what the download speed is. There\u2019s slow-2g, 2g, 3g and 4g as possible values.<\/p>\n\n\n\n<h3>Responding to device settings<\/h3>\n\n\n\n<p>Though my main point in this article is that the device is a proxy for user preferences, we\u2019re also getting more access to information about the device that we can use to provide better experiences.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/image2-300x149.png\" alt=\"\" class=\"wp-image-22607\"\/><\/figure>\n\n\n\n<p><em>A notched phone showing bands to prevent text from running behind the notch. Source:&nbsp;<\/em><a href=\"https:\/\/webkit.org\/blog\/7929\/designing-websites-for-iphone-x\/\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Webkit<\/em><\/a><em>.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td>&lt;meta name=&#8221;viewport&#8221; content=&#8221;initial-scale=1, viewport-fit=cover&#8221; \/&gt;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba\/raw\/c08d0d8eefdab0ada43a146c6ff98ed5fb79c8bd\/viewport-cover.html\">view raw<\/a><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba#file-viewport-cover-html\">viewport-cover.html<\/a>&nbsp;hosted with&nbsp;<img alt=\"\u2764\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/2764.svg\">&nbsp;by&nbsp;<a href=\"https:\/\/github.com\/\">GitHub<\/a><\/p>\n\n\n\n<p>When Apple came out with the notch on the iPhone X, they introduced a new viewport property called viewport-fit: cover, without which a site would be shown banded on a notched phone.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/image5-300x149.png\" alt=\"\" class=\"wp-image-22613\"\/><\/figure>\n\n\n\n<p><em>With&nbsp;<\/em><em>viewport-fit: cover<\/em><em>, text falls behind the notch and becomes unreadable. Source:&nbsp;<\/em><a href=\"https:\/\/webkit.org\/blog\/7929\/designing-websites-for-iphone-x\/\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Webkit<\/em><\/a><em>.<\/em><\/p>\n\n\n\n<p>Turning it on can obscure content, so in order to then respond to that, they also introduced new \u201cenvironment variables\u201d to use in your CSS to make sure your content would be readable.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td>body {<\/td><\/tr><tr><td><\/td><td>padding:<\/td><\/tr><tr><td><\/td><td>env(save-area-inset-top, 0px)<\/td><\/tr><tr><td><\/td><td>env(save-area-inset-right, 0px)<\/td><\/tr><tr><td><\/td><td>env(save-area-inset-bottom, 0px)<\/td><\/tr><tr><td><\/td><td>env(save-area-inset-left, 0px)<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba\/raw\/c08d0d8eefdab0ada43a146c6ff98ed5fb79c8bd\/envs.css\">view raw<\/a><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba#file-envs-css\">envs.css<\/a>&nbsp;hosted with&nbsp;<img alt=\"\u2764\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/2764.svg\">&nbsp;by&nbsp;<a href=\"https:\/\/github.com\/\">GitHub<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/image4-300x149.png\" alt=\"\" class=\"wp-image-22611\"\/><\/figure>\n\n\n\n<p><em>The safe-area-inset-* environment values give you a safe space where your content won\u2019t be obscured. Source: Webkit.<\/em><\/p>\n\n\n\n<p>This feature has been available in Mobile Safari since the iPhone 10, and in Chrome for Android since version 69.<\/p>\n\n\n\n<p><strong>Interaction<\/strong><\/p>\n\n\n\n<p>Lastly, I want to point out the new interaction media queries. These are supported across the board in evergreen browsers, though iPads don\u2019t change from coarse to fine with the new trackpad (they might in a future update). Nowadays, we have many more input devices compared to when the web got started. Mouse pointers still exist, but we also have touch, external controllers like Wii remotes and even things like AR hand detection.<\/p>\n\n\n\n<p>Some things that are easy to do with a mouse are harder or impossible to do with touch devices, like hitting small targets or hovering. With the interaction media features you can adapt to these devices in clever ways.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td>@media (hover: none) and (pointer: coarse) {<\/td><\/tr><tr><td><\/td><td>\/* you&#8217;re on a touch-only device *\/<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>@media (hover: none) and (pointer: fine) {<\/td><\/tr><tr><td><\/td><td>\/* you&#8217;re on a device without hover but with a stylus<\/td><\/tr><tr><td><\/td><td>or other fine pointing device *\/<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>@media (hover: hover) and (pointer: coarse) {<\/td><\/tr><tr><td><\/td><td>\/* you&#8217;re on a device with hover but a coarse pointer,<\/td><\/tr><tr><td><\/td><td>like a gamepad or wii remote*\/<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>@media (hover: hover) and (pointer: fine) {<\/td><\/tr><tr><td><\/td><td>\/* you&#8217;re on a device with a mouse or trackpad *\/<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba\/raw\/c08d0d8eefdab0ada43a146c6ff98ed5fb79c8bd\/interaction.css\">view raw<\/a><a href=\"https:\/\/gist.github.com\/Kilian\/7fb4440b832d22351e656e15090ae3ba#file-interaction-css\">interaction.css<\/a>&nbsp;hosted with&nbsp;<img alt=\"\u2764\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/2764.svg\">&nbsp;by&nbsp;<a href=\"https:\/\/github.com\/\">GitHub<\/a><\/p>\n\n\n\n<p>The way I would go about this is consider a touch device as the most minimal implementation. It won\u2019t have hover effects, and the precision of your input device is coarse. For this group, you can\u2019t have things popping up on hover, so they need to be visible or behind an explicit toggle, and your tap targets will need to be larger. Then as you start to get hover capabilities, you can add those with hover:hover. As you get more precise input, you can choose to make clickable targets smaller (but not too small!). This way you can make an interface that works well with the input device a user has, not despite it.<\/p>\n\n\n\n<p>The interaction media queries pointer and hover will check the primary input device, like touch on mobile, making the pointer coarse even if you\u2019re using a stylus. If you want to check the capabilities of any of the input devices that are connected to your device, you can use any-pointer and any-hover.<\/p>\n\n\n\n<p><strong>In closing<\/strong><\/p>\n\n\n\n<p>As we\u2019ve seen, there are many more ways to adapt our websites than just to the screen size of your user\u2019s device. With new media queries we can accomodate a user\u2019s preference for a dark website and for seeing less motion. We can serve up a stripped down website if a user wants to save data and make sure our site works regardless of the user\u2019s input device. In the future, we can further adapt our websites to accommodate people\u2019s eyesight, whether they want more or less contrast, or if they need extra help to make text easier to read. We can do this not just based on user preference but also on their environmental conditions, for example when they\u2019re in a dark room or in bright sunlight.<\/p>\n\n\n\n<p>It might feel like a lot more work and a lot more you need to take into account, but remember that was the case with responsive design, too. With responsive design we needed to go from a single preferred screen width to a near-infinite number of screen sizes. And just like with responsive design, we\u2019ll find ways to integrate this into our workflow using progressive enhancement and new defaults. Websites are about to become a lot more responsive, and I\u2019m glad they are.<\/p>\n\n\n\n<p><strong>About Kilian<\/strong><\/p>\n\n\n\n<p>Kilian is the creator of&nbsp;<a href=\"https:\/\/polypane.app\/\" rel=\"noreferrer noopener\" target=\"_blank\">Polypane<\/a>, the web browser for developers and designers. Polypane helps developers, designers and QA build and test high-quality websites with tools like built-in live reloading, accessibility testing, design comparison, built-in handoff support, social media previews and testing for a wide range of situations like colour blindness, bright sunlight, colour contrast issues and other visual impairments. Kilian is a frequent open-source contributor and has nearly two decades of experience building websites. He regularly speaks and writes about topics like responsive websites, design systems and accessibility. He can be found on&nbsp;<a href=\"https:\/\/twitter.com\/kilianvalkhof\" rel=\"noreferrer noopener\" target=\"_blank\">Twitter<\/a>&nbsp;and writes on his&nbsp;<a href=\"https:\/\/kilianvalkhof.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">blog<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Responsive design was introduced more than 10 years ago. In fact, Ethan Marcotte\u2019s&nbsp;seminal article&nbsp;turned 10 on 25 May. Here\u2019s how I would describe responsive design:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1321"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1321"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1321\/revisions"}],"predecessor-version":[{"id":1322,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1321\/revisions\/1322"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}