Quartz 4

Responsive Design and Media Query

8 min read

Responsive Design

  • The website can be viewed by different screen sizes, like mobile, tablet and desktop and shapes like notch on mobile screen
  • The website can be used by Voice assistants without any screen
  • It might be possible that website will be used in different screen configurations like dual screen desktops, foldable mobile and tablets in future
  • The website can be used by different input mechanisms like keyboard, mouse, touch screen
  • The website can be accessed by different internet speeds
  • Example: github.com which will change its layout if browser is resized
  • Reference: https://web.dev/learn/design

Adaptive Design

  • Instead of one flexible design, adaptive design detects the device and other features, and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics.
  • Example: google.com which does not change if browser is resized, but if the website is opened in mobile then mobile friendly website is loaded

Media Query

Syntax

  • In CSS using @media query:
@media type and (feature)
@media (feature) /** omitting type **/
  • In HTML using <link> element:
<link rel="stylesheet" href="specific.css" media="type and (feature)">
<link rel="stylesheet" href="specific.css" media="(feature)">
/** omitting type **/

Breakpoint

  • The point at which a media feature condition becomes true is called a breakpoint.

Media Query: type

  • all: If type is omitted, this is taken by default
  • screen
  • print
  • speech

Media Query: feature

  • min-width and max-width
  • min-height and max-height
  • hover and any-hover
  • pointer and any-pointer

Preferences

  • prefers-color-scheme
  • prefers-contrast
  • prefers-reduced-motion
  • prefers-reduced-data

Colors

  • monochrome and color
  • color-gamut, color-index, dynamic-range, inverted-colors, forced-colors

Macro Layout

  • High level layouts which cover large amounts of the screen
  • We can use media query
  • Also consider whether grid and flexbox can be used instead

Micro Layout

  • Consider using Flexbox and grid
  • Container queries will be used in the future which are based on container dimensions as compared to page dimensions in media queries

Typography

  • Text should appear properly no matter where it appears
  • Use unitless and relative font height like 1.5 instead of 1.5rem or similar

Responsive Images

  • Restrict image size to parent container:
    • We can also use max-width and max-height but we are using logical properties
    • Images without containment/styles will be as large as their natural size by default
img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}
  • Image Cropping:
    • Use aspect-ratio, object-fit, object-position attribute
  • Image Delivery:
    • Sizing hints: width and height attributes
      • Use them to set aside the area for images
      • If you don’t set them then images randomly take up space when they are loaded
      • it downscales your original image, so use this if you know the size beforehand
    • Loading: loading attribute
      • lazy: images will load at last
      • eager: (default) images will try to load early, use this if there is important image to load
    • Fetch Priority: fetchpriority attribute
      • high
      • low
      • auto: Browser will determine priority
    • Decoding: decoding attribute
      • sync
      • async: (default)
    • Multiple images: srcset attribute takes list of urls with meta data/descriptor to choose one of them to download conditionally
      • Width Descriptor: srcset="small-image.png 300w, medium-image.png 600w"
      • Pixel density descriptor: srcset="small-image.png 1x, medium-image.png 2x"

Picture element

  • Set different Image formats using <source> inside <picture>

Alternative Formats

  • Use type attribute to specify the type of image to browser
    • As per the example below, the order matters
    • If browser is able to render then only it will render avif image
    • If fails then it will attempt for webp
    • If both fails then it takes image from src of img element
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async">
</picture>

Alternative Sizes

  • Use media attribute to specify media query on <source>
<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async">
</picture>

Alternative Cropping

  • Use height and width on <source>
<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" loading="eager" decoding="sync">
</picture>

Icons

  • Use SVG for scalable responsive iconography
  • SVG in HTML is useful to switch between light and dark mode

Theming

  • Adapt your designs to match user preferences such as a dark mode.
  • How theme Palette implemented?

Theme Color

  • If a user “Install” your web app then theme-color will cause the browser’s whole color to match:
  • Theme color in meta tag:
<meta name="theme-color" content="#00D494">
  • Theme color in manifest file:
<link rel="manifest" href="/manifest.json">
{
  "short_name": "Clearleft",
  "name": "Clearleft design agency",
  "start_url": "/",
  "background_color": "#00D494",
  "theme_color": "#00D494",
  "display": "standalone"
}

Detect Dark Theme

  • Use media query prefers-color-scheme to detect dark theme
@media (prefers-color-scheme: dark)
  • Combine with meta:
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

Build Color Scheme

  • Can be achieved using CSS custom properties (aka CSS variables or cascading variables)
  • --page-color and --ink-color are defined variables which are used later using var()
html {
  --page-color: white;
  --ink-color: black;
}
@media (prefers-color-scheme: dark) {
  html {
    --page-color: black;
    --ink-color: white;
  }
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}
input {
  background-color: var(--page-color);
  color: var(--ink-color);
  border-color: var(--ink-color);
}
button {
  background-color: var(--ink-color);
  color: var(--page-color);
}

Images

  • media query can be used in SVG directly
  • We can use <source> with media query to swap images based on dark/light theme
<picture>
   <source srcset="darkimage.png" media="(prefers-color-scheme: dark)">  
   <img src="lightimage.png" alt="A description of the image.">  
</picture>

Forms

  • Forms need following to change based on dark theme
    • color-scheme CSS property
    • supported-color-schemes meta property on HTML

Interaction

  • To detect if user is using touch screen or mouse, we can use media query instead of screen size

pointer

  • The media query for pointer reports the primary input mechanism
  • It has following values:
    • none: user might be using keyboard
    • coarse: A finger on touch screen
    • fine: Mouse or Stylus
  • In this example we make button to have more area for click if touch screen is being used:
button {  
  padding: 0.5em 1em;  
}  
@media (pointer: coarse) {  
  button {  
    padding: 1em 2em;  
  }  
}
  • Don’t make elements too small for mouse pointer since it will require more concentration to click

any-pointer

  • People use different input mechanisms together. For example person might be using both mouse and keyboard.
  • any-pointer checks if any of the input mechanism is present
  • It has values:
    • none: No pointing device
    • coarse: At least one of the input is touch screen
    • fine: At least one of the input is mouse or stylus
  • In this example, if the device has both a fine and a coarse input mechanism, the coarse styles are applied:
@media (any-pointer: fine) {  
  button {  
    padding: 0.5em 1em;  
  }  
}  
@media (any-pointer: coarse) {  
  button {  
    padding: 1em 2em;  
  }  
}

hover

  • hover reports if primary input mechanism has ability to hover
  • It has values:
    • hover: It is able to hover, might be mouse or trackpad
    • none: It is not able to hover
  • If you are hiding some element and wanna show only if it hovers some parent element, then It is good idea to implement both :hover and :focus so that both hovering and keyboard navigation executes and show the element

any-hover

  • any-hover checks if any of the input mechanism has ability to hover
  • It has values:
    • hover
    • none
  • The following code hides hamburger menu icon with class extra
button .extra {  
  visibility: hidden;  
}
button:hover .extra,  
button:focus .extra {  
  visibility: visible;  
}
@media (any-hover: none) {  
  button .extra {  
    visibility: visible;  
  }
}

Virtual Keyboards

  • type attribute:
    • Use correct input type attribute to show correct virtual keyboard at the time of entering information
    • Example type values for <input>:
      • email
      • number
      • tel
      • url
  • inputmode attribute:
    • Use inputmode attribute to fine grain the input type
    • Example values for number type of <input>:
      • numeric: whole numbers
      • decimal: decimal numbers
    • But inputmode does not restrict the user from entering wrong format using physical keyboard
  • autocomplete attribute:
    • Use autocomplete attribute to enable autocomplete on input
    • It has many values, some of them are as follows:
      • off: The browser is not permitted to automatically enter a value for this field.
      • on: Allowed to autocomplete the field
      • name: Person’s full name
      • given-name: Person’s first name
      • family-name: Person’s family name
      • email: Email

User Interface Patterns

  • A design viewed on a small screen shouldn’t look like a shrunk-down version of a large-screen layout and vice versa.
  • Design for smaller screens first. It’s easier to adapt small-screen designs to larger screens than the other way around.
  • Overflow Pattern:
    • It means overflow the data which will not be visible on the screen like table data
    • Good for small screens, consider placing a shadow or a gradient over the edge where content is truncated.
  • Progressive Disclosure:
    • Hide element like navigation items by default and provide a toggle mechanism for users to show and hide the contents.
    • It’s better suited to secondary actions.
    • Use text and do not rely on icons if you want to hide important element like menu

Viewport dimensions

min-width and max-width

  • Use either of them
  • If you want to target particular width then use combination of both min-width and max-width

min-height and max-height

  • Use either of them
header {
  position: fixed;
}
@media (max-height: 30em) { 
  header {
    position: static;
  }
}

aspect ratio, min-aspect-ratio and max-aspect ratio

  • We can match exactly using aspect-ratio unlike width and height related media queries
@media (aspect-ratio: 16/9) {  
  //The ratio of width to height is exactly 16 by 9.
}

orientation

  • Possible values:
    • landscape
    • portrait
  • Based on screen height > width

monochrome and color

  • monochrome and color are used to tell if the display has capability for colors
@media (monochrome) {  
  body {
    color: black;
    background-color: white;
  }
}
 
@media (color) {  
  body {  
    color: maroon;  
    background-color: linen;  
  }  
}

Graph View