Like cats, your website should fit any container. Photo © Jo Balletti

Six assumptions which could break your website

A mistake consistently made by some of the biggest websites shows they are thinking about responsive web design incorrectly.

“I support both form factors: My iPhoneX and Chrome on a 15" Macbook pro.”

This article won’t be a technical deep dive into Responsive Web Design but instead we will discuss some false assumptions developers often make which will make websites brittle:

“It’s okay to build separate sites for mobile and desktop”

URLs should relate to content not form factor. To assign a different URL to content for different devices violates the One Web Principle. A URL shared from one device should work great on another.

“Mobile and Desktop are the Only Two Form Factors.”

Web Browsers are implemented on a wide variety of devices. There are a wide variety of hand held devices beyond mobile phones such as feature phones, e-readers, tablets and phablets. Which come in a huge variety of screen sizes and aspect ratios.

“Mobile devices have fixed sizes or aspect ratios.”

Frequently website designers will set breakpoints to accommodate the size and aspect ratios of the popular Apple iPhones. Unfortunately this doesn’t reflect the reality of device sizes.

“Window size on mobile devices doesn’t change.”

Samsung DeX
Samsung Galaxy Fold

“Real work gets done on desktop computers or in apps.”

One issue I see is that frequently websites which otherwise do responsive design very well hide essential functionality such as the ability login on mobile with the assumption that real work will be done on the desktop site. This forces users who don’t have a desktop available to use the browsers force desktop mode which will probably be an awkward experience compared to one optimised for mobile.

“I can infer whether the user is using touch interface or mouse from the screen size.”

You cannot.

Sigh… so you’ve read this whole article and still want to specifically target the Samsung Galaxy Fold Folding Phone?

Use this information for testing your site only, don’t build these dimensions into your CSS file as break points! Make sure it works at these sizes but don’t handle them as an edge case.

  • Open: 586×820px

What to focus on when building a responsive website

(By responsive website, I just mean website, all websites should be doing this.)

<!--
Meta tag which enables responsive design
has fast clicks and allows pinch to zoom.
-->
<meta name="viewport" content="width=device-width, initial-scale=1">

(Bonus) Some of my favourite CSS Grid tricks

Layout becomes a lot easier when built with CSS Grid, it’s essentially a very powerful layout framework built into the browser.

You don’t need a framework to use CSS Grid. CSS Grid is a framework.

— Rachel Andrew (@rachelandrew)

Custom CSS Properties make doing Responsive design very clean. By only using custom properties in media queries you can make it very explicit what is changing as the screen size changes.

:root {
    --padding: 15px;
    --grid-columns: 5;
}.my-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    grid-gap: var(--padding);
}@media only screen and (max-width: 1000px) {
    :root {
        --padding: 10px;
        --grid-columns: 3;
    }
}@media only screen and (max-width: 600px) {
    :root {
        --padding: 20px;
        --grid-columns: 1;
    }
}
// Each emoji represents a grid area, e.g. 🍱 is the header
:root {
  --layout-big: "🍱 🍱" min-content
        "🌯 🐠" min-content
        "🍭 🐠" 1fr
        "🏖️ 🏖️" min-content
        /300px 1fr;
    
  --layout-small: "🍱 🍱" min-content
        "🌯 🍭" min-content
        "🐠 🐠" minmax(min-content, 1fr)
        "🏖️ 🏖️" min-content
        /1fr 1fr;
  
  --active-layout: var(--layout-small);
}header {
  grid-area: 🍱;
}.my-grid {
  display: grid;
  grid-template: var(--active-layout);
  grid-gap: 1em;
}@media only screen and (min-width: 600px) {
  .my-grid {
    --active-layout: var(--layout-big);
  }
}

Samsung Internet Developers

Writings from the Samsung Internet Developer Relations Team. For more info see our disclaimer: https://samsunginter.net/about-blog

Ada Rose Cannon

Written by

Co-chair of the W3C Immersive Web Working Group, Developer Advocate for Samsung.

Samsung Internet Developers

Writings from the Samsung Internet Developer Relations Team. For more info see our disclaimer: https://samsunginter.net/about-blog