Responsive Web Design

Another Article

Mo Isu
Mo Isu
Sep 6, 2017 · 7 min read

Hi guys. It’s been a while since my last piece on here so I thought I return with a relatively lengthy run through of responsive web design and how to achieve it.

This article aims to touch on a few important aspects of responsive web design. You probably have heard about responsive design (because basically every web dev evangelist clamors about how important responsive design is) but on the off chance that you haven’t, let me begin with a brief breakdown.

A design is said to be responsive when it adapts seamlessly to different devices of different sizes i.e no distorted details, no super small text on mobile devices and no zooming in and scrolling around to see the very important content that website is meant to be serving. I will try to highlight the science and implementation of some responsive design concepts, this article is accompanied with demos. You can check the index here and feel free to clone the repo here. Let’s get to it.

Pixels

Misleading picture here

You know exactly what pixels are especially if you are reading this but you probably didn’t realise there are different types of pixels. (yes pixels pass pixels). It is why when you set margin-top to 200px; it might appear differently on different screens. There is some messed up shit going on somewhere

Hardware Pixels

The name is pretty self-explanatory. Hardware pixels refer to the physical pixels of the screen in question. This is typically around the same for devices of the same dimension ( I think) except for devices with very high resolution (aka oversabi aka expensive) and what happens is this screens basically have a lot of pixels packed into very small dimensions resulting in better picture and more detail, this brings us to the second pixel concept

Device Independent Pixels (aka density independent pixels)

I considered using the Wikipedia definition for this but it uses too many words. Basically each device has a unit of measurement based on a coordinate system (like a scale) that it uses to allocate hardware pixels. DIPs are what cause websites built for web to look the way they do on mobile devices. The Dips of the phone or tab cause the site to look as the developer intended for web. You have probably experienced this before and it probably made you really angry. Dips have absolute values eg for some android 1 dip equals 1/160 inches.

Css Pixels

Again the name gives this one away. It is exactly what you think it is.

Relationship between the three

This link explains the relationship between the three more extensively but what is basically happening here is, the dips for the device you are using scales the css pixels in your code and matches it with the hardware pixels of the device in use. One of the many disadvantages of this is that dips vary for different devices, that along with the fact that you probably don’t want to make your users have to zoom in to see content. Or scroll around to view content that the dpi couldn’t render in the viewport. Let’s fix the problem of content overflowing the viewport when it shouldn’t.

If you have done learning by copying what you see in other people’s code (this is how I learnt a good number of things so you are not alone) you have probably seen the above snippet but don’t know what it means. This line sets the width of your content to device-width i.e it matches the screen’s width in device independent pixels. Setting the initial scale to 1 establishes a 1:1 to relationship between your css pixels and dips of the devices. This is necessary because, as I have mentioned earlier dips are absolute for different devices.

Handling Elements

When setting width or heights for elements whose position/dimension scales you want to maintain across device devices, it makes more sense to use absolute dimension values instead of relative ones i.e rather than use pixels for width and positioning you use % or vw or vh. (VW stands for viewwidth while vh stands for Viewheight.) Setting the width or height using vw/vh eg width:20vw; is equal to setting it to 20% of the width of the viewport of any device. These absolute values are better to maintain the scale of your website across all devices. % sets the property to a percentage of the container of that element.

See demo

Max-Width

Max-width and Max-height are very useful to prevent content from overflowing their containers.

This happens a lot with images. Setting a max-width for an image to the width of the container will prevent it from overflowing.

See demo

Using Media Query

Media queries are used to write style for your elements depending on the size of the screen (or print, you can write media queries for print as well) your website is displayed on.

There are two ways to add media queries to your page. Either by linking the stylesheet as shown

OR writing the media queries within your existing stylesheet

The second method is usually preferred because you are making only one http request. Usually you have to write media queries for multiple breakpoints (expatiating on this next) which will mean more style-sheets meaning more requests and this could slow down your webpage.

Breakpoints

When writing media queries, you have to know at what point to switch from one style to another. These points are known as breakpoints

In the code snippet above, 700px is the breakpoint. You can have multiple breakpoints to change styles multiple times. It is why some webpages look different on phones, tabs and laptops. Breakpoints are the major dimensions where the entire layout of the website changes. You can also have minor breakpoints to change stuff like font-size;

See demo

Grid Layout

Now we are moving to broader responsive design concepts. The grid layout is a very popular method of implementing responsive web design, so popular that frameworks like bootstrap use grid layout. The idea is to break the web page into columns/sections so that each column/sections houses its own content. Grid layout makes it easy to control the flow of the page and to change how the page is presented on different screen sizes.

See demo for grid layout

See demo for a responsive grid layout

Flexbox

Flexbox is a very useful css property and it really does help with creating responsive design. In the responsive grid layout demo above, I set the display of the divs to flex. It’s why they display inline and is why I can move them to the next lines on resizing the screen. Check out these two articles to really unlock the power of the flexbox link, link

Responsive pattern

You are now armed with some rules to keep in mind when creating your own responsive design. There are however some pretty popular responsive design patterns you can use in your own design. I have taken the liberty to highlight with examples, three of them.

1 Column Drop

In column drop, the columns on the page stack on each other as the width of the page gets smaller. The responsive grid layout I showed earlier is an example of column drop.

2 Mostly Fluid

The basic idea with mostly fluid is that a margin appears on both sides as the page gets bigger. The page usually surrounds a particular content and nothing else. Instagram uses this.

3 Off Canvas

This pattern pushes some elements off screen on smaller screens. A perfect example would be how the menu bar disappears on many website. The element is usually replaced with a button to toggle between showing and hiding said element.

It is important to always think responsively when designing your website. Rather than designing your website and then thinking of how to scale it down for smaller screen. Start your design by thinking of how it will look on all screens or if you must think of one screen first make that screen mobile and scale up. It will pay you in the long run considering that most of the internet traffic comes from mobile devices. You don’t want most of your users experiencing terrible designs because you didn’t think of them first.

Thanks for reading. Feel free to bookmark, clap, comment and share

Tik Tak

Two learners documenting their learning journey.