Responsive Web Design and Mobile First

Five basic techniques

Lucas Estevão
Apr 18, 2017 · 8 min read
Image for post
Image for post

Understanding the Concepts

Developing websites (or any web application) with a flexible and adaptable layout and context capable of responding to a large variety of screen resolutions, devices, and contexts is called responsive web design.


Mobile First

When planning for responsive design, we define the basis of the application design for one given screen size, and from there we can adapt the content progressively to different screen sizes, applying different design rules. These rules are directly linked to the size of the screen, since they may restrict certain features of the web site. For instance, displaying a heavy image gallery can provide a poor user experience on mobile devices.


Hands On

So how do we go about creating a responsive design? Below we’ll explore five basic techniques to implement responsive design focused on mobile first. This article will stick to fairly basic methods.

1. Change the box-sizing

In an HTML page, each element is represented as a rectangular box, which is interpreted by the browser using the standard box model (CSS box model). This model determines the content of the space occupied by an element, which is to say, the ratio of the element and its content to its attributes of margin, padding, and border.

Image for post
Image for post
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

2. Convert the typography

To get the result of a fluid layout, we need to use the relative measures (%, em, rem, vw, vh), which provides fluidity to the site when the screen size or font is changed. We use each of these units of measurement as follows:

  • %: classified as data type and not units of measure by the W3C specification. Used in containers (section, article, div), fluid grids, and images.
  • EM: relative distance unit, calculated in relation to another unit of measure. Its value is relative to the size of the parent element font (i.e., an element with font-size: 2em; will be twice the size of the parent element source, whatever it is). This is used in font-size, margin, padding. Unlike percentage, the em is a fixed value like the pixel, but its value is calculated from the value of another element.
  • REM: like the em, it is a relative distance unit. Its value is relative to font-size the document’s root (i.e., an element with font-size: 2rem; will have twice the font size of the document root element, which may be the html tag or the body tag, depending on the CSS rule that was applied). Also used in fonts, margins, and paddings, rem doesn’t work in some versions of Android and IE <9.
  • Viewport units: (vw, vh, vmin, vmax): used in containers, grids, images, and even fonts. This is a truly flexible and adaptable unit. The vh is equal to one percent of the viewport (size of the browser screen) height. For instance, if the browser height is 640px, 1vh is equal to 6.4px and, in the same way, if the viewport width is 320px, 1vw is equal to 3.2px.
h1 { font-size: 24px; }h1 span { font-size: 18px; }
body { font-size: 16px; }h1 { font-size: 1.5rem; } 
/* 24 ÷ 16 = 1.5 */
h1 span { font-size: 1.125rem; }
/* 18 ÷ 16 = 1.125 */
Image for post
Image for post

3. Set the Viewport

The viewport is the screen visible area of the device, where the website is displayed. The viewport customization allows us to define the visible initial resolution of the website and avoid its miniaturization.

<meta name=”viewport” content=”width=device-width, initial-scale=1">
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”> 

4. Define break points

Media Queries are conditional expressions to apply different CSS styles, depending on certain rules such as the viewport width. Through its use, we define points of considerable changes in the layout of the page. For instance, displaying a certain element only to devices with big screens, like a desktop.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
#banner { display: none; } /* banner not displayed */
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { … }
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { … }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
/* banner displayed only for desktops */
#banner { display: block; }
}
/* Devices on portrait mode */
@media all and (orientation:portrait) { … }
/* Devices with screen size like 1280 horizontal pixels and 720 vertical pixels */
@media screen and (device-aspect-ratio: 16/9) { … }
/* Devices with resolution greater than 300 dots per inch */
@media print and (min-resolution: 300dpi) { … }
Image for post
Image for post

5. Use SVG for images

SVG stands for Scalable vector graphics. It is an XML language for describing in a vector shape drawings and two-dimensional graphics, either statically, dynamically or as an animation. We can incorporate SVG on the website responsively using the object tag in order to provide an image alternative to browsers that don’t support SVG.

<!-— ?xml version=”1.0" encoding=”utf-8"? --><svg version=”1.1" id=”Layer_1" xmlns=”http:// 
www.w3.org/2000/svg" xmlns:xlink=”http://
www.w3.org/1999/xlink" x=”0px” y=”0px” viewBox=”0 0 80 80" \=”” enable-background=”new 0 0
80 80" xml:space=”preserve”>
<circle fill=”#682A68" cx=”40" cy=”40" r=”40"></circle>
<polygon fill=”#FFFFFF” points=”39.136,15.483
45.049,33.682 64.186,33.682 48.704,44.93
54.615,63.127 39.136,51.881 !
!23.655,63.127 29.568,44.93 14.087,33.682
33.223,33.682 “></polygon>
</svg>
<object data=”your-svg-image.svg” type=”image/svg+xml”>
<img src=”your-fallback-image.jpg”>
</object>
Image for post
Image for post

Conclusion

These are just a handful of basic techniques, and there are plenty more! Some other techniques to develop responsive design focused on mobile-first worth checking out are user agent, HTML 5 tags, Responsive Navigation, and many others.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store