Responsive Web Design (Part-1)

, responsive

Responsive Web Design (Part-1)

In the previous post, we have talked about the responsiveness of a webpage and the techniques that how to achieve responsiveness in an overview. In this post, we will look into more technical details about how we can do it.

As we talked about previously, Responsive Design is an approach that makes websites show in multiple devices appropriate to its width and height. As Ethan Marcotte explained in its article in 2010, there are three key aspects of a website to be responsive:

  • Using fluid grids or fluid design
  • Using media query
  • Using responsive images

Let's dive right in!

Fluid Grids

content-is-like-water

It's kind of a strange way of explaining this but if you have content like a "fluid", wherever you put your content, it will take the space and shows it.

The fluid grid concept is to designing webpage contents/elements proportion to width and height of the container itself- not to container's pixel value. Giving fixed values makes our website more "solid" and not responsive at all.

How do we achieve this? That's very simple - change all the values with the appropriate percentage. For example, if you have a div tag that wraps all the content, instead of giving any pixel value, you simply give percent values.

.content-div{
  max-width:80%;
  height:auto;
}

As you can see above, we can give a div a max-width of 80% of the parent's width and height appropriate to its content.

You can't always use % unit since some properties - like font-sizes - cannot have it. But we have to scale them anyway. So what we do about them? - em to the rescue!

The em unit is a relative measure unit that computes according to the font-size of the current element. For example:

html {
    font-size: 10px;
}
div {
    background-color: red;
    width: 40em; // 400px
}
p {
    font-size: 1.2em; //12 px
}

As you can see, p tags will have 12px value. em also can be used instead of px values of a given element. em is a very useful tool for responsive design and we should use them.

In addition to em , there is a unit called rem which is very similar to the em with a slight difference - it is calculated according to the root element - html. If you defined an html font-size, rem will be using that px value.

html {
    font-size: 10px;
}
div {
    font-size:5px;
    background-color: red;
    width: 40rem; // 400px
}
p {
    font-size: 1.2rem; //12 px
}

As you can see above, the width of the div is still 400px even though the div's font-size is 15px. If we have used em instead of rem, we would have a 200px-width div.

Flexbox

Since we have started to talk about fluid design, we have to talk about flexbox. Flexbox is a layout model that allows its content element to align and position themself according to their container. Flexbox is a great way to implement a responsive design.

Using flexbox is simple: you simply add flex attribute to a given element's display attribute

.container {
  display: flex;
  width:500px;
}

.content{
  width:48px;
  height:48px;
  margin:auto;
}

If you use the content class inside of the container, you will see that content will position itself inside of the container according to its width value (I give px values to make sure the reader would understand the flex concept).

Flexbox is very useful for many situations, but it's not a silver bullet - you can't use it for all situations. For example, it may cause problems when used for page layout.  

All in all, it is a great tool to have and use when it's necessary. You can learn more about flexbox from here and also practice from here ( I highly suggest this playground)

In my next post, we will be looking at the media-queries and responsive images and how we utilize them to achieve responsiveness.