Introduction to modern RWD

RWD - Responsive web design. In short, it’s a combination of many things that make the page flexible depending on which device it is displayed.

In 2016, for the first time, mobile devices overtook desktop when it comes to website traffic. Mobile devices remain to be a huge part of all the web traffic, what can be seen on the StatCounter diagram below.

That means that nowadays the website should be fully adapted not only for desktops, but also for mobile devices and tablets. We’ve entered an era that can be easily named the 'Mobility Era' where almost every client wants a fully responsive website!

This article is based on SCSS (Sassy CSS) syntax-based solutions used on Software Brothers website, which was created while rebranding the company. Why SCSS? Well, because it is one of the most popular and powerful CSS extension language in the world. SCSS syntax is more similar to CSS, so everyone who knows CSS feels comfortable with it.

Breakpoints

Breakpoints are special points that provide the user with the best possible layout to absorb the most important information. Our basic grid breakpoints are defined for mobile devices, tablets and finally desktops.

$media-min-mobile-width: 320px;
$media-min-tablet-width: 576px;
$media-min-desktop-width: 768px;
$media-min-large-desktop-width: 1280px;
$grid-breakpoints: (
  sm: $media-min-mobile-width,
  md: $media-min-tablet-width,
  lg: $media-min-desktop-width
) !default;

In addition to basic breakpoints, we also use custom ones depending on the content of the page and its width,  e.g., topbar-hamburger-breakpoint(900px), phablet(640px) etc.

They are also an integral part of media queries.

Media queries

In order for our website to become responsive, we need to add the terms of the media queries to our CSS. To use Media Queries, we need to find out what they are and how they work. Let's present one of the multiple methods which we use to adapt the layout to page width.

@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name);
  @return if($min != 0, $min, null);
}
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

As we can see in the picture above, method media-breakpoint-up will include CSS content if the browser window width is the same or bigger than the passed breakpoint’s width.

 @include media-breakpoint-up(lg) {
    .video-chat {
      margin-top: rem(200px);
    }
  }

If the browser window is the same or bigger than lg (media-min-desktop-width), video-chat’s margin-top will have the rem value (200px).

What is a rem unit?

Rem unit is relative to the root element font size. It means that 1rem equals the font size of the html element (mostly 16px) and on our page html font size is fluid (adapts to different screen sizes of users’ devices). For a better control, we implemented functions which count a specific value in rems depending on the passed value in px and base font size ($base-font-size: 20px , $base-font-size-mobile: 16px). We use these functions in every CSS property which takes “length” values like width, margin, padding, etc.

These functions are shared on rem and rem-mobile (used in mobile resolutions):

@function rem($size-in-px, $context: $base-font-size) {
  @return ($size-in-px / $context) * 1rem;
}

@function rem-mobile($size-in-px) {
  @return rem($size-in-px, $base-font-size-mobile);
}

Fluid Typography

The idea of fluid typography is relatively new and not often used. There are many types of fluid typography based on the viewport units with some minimum and maximum sizes.

On our page we applied fluid typography based on breakpoints and linear equations.

For this topography, we rely on the following methods:

fluid-font-constant - font size of html element is the same as the passed value ($constant-font-size), for minimum passed width ($from-breakpoint).

fluid-font-scale-up - font size of html element dynamically increases between passed font size values ($from-font-size, $to-font-size) and passed width range ($from-breakpoint, $to-breakpoint), including viewport width.

@mixin fluid-font-constant($from-breakpoint, $constant-font-size) {
  @media screen and (min-width: $from-breakpoint) {
    font-size: $constant-font-size;
  }
}

@mixin fluid-font-scale-up($from-breakpoint, $from-font-size, $to-breakpoint, $to-font-size) {
  @media screen and (min-width: $from-breakpoint) {
    font-size: calc(#{$from-font-size} + #{strip-unit($to-font-size - $from-font-size)} * ((100vw - #{$from-breakpoint}) / #{strip-unit($to-breakpoint - $from-breakpoint)}));
  }
}

Summary

These are just a few of the necessary practices that allow our website to fully adapt to all devices, from the smallest ones of 320px up to high-resolution formats like 4K.

When it comes to the responsive websites we can confidently say that it is (or at least should be!) a daily bread of every good developer and designer.