Starter guide to implement Responsive Design

Categories: Technology | Web design |

Nowadays anyone can access from multiple devices to any website they want. In fact, the sales of mobiles devices such as tablets, smartphones and phablets excess by far the sales of computers. The visualization of websites from a high number of different screens with different displays leads us to the urge to create adaptable web pages for different device formats.

Basically, this concept is what we call Responsive Design: a website that adapts to all types of devices without the need of creating different versions of the same page.

The use of responsive design not only can help us provide a better User Experience; it also collaborates with SEO positioning, and even Google recommends its implementation.

HOW TO IMPLEMENT RESPONSIVE DESIGN

When implementing Responsive Design, we may encounter two typical sceneries:  The first one is working on a website that’s already been created. This option can turn into a real headache if there isn’t a good html structure.

Second scenario: when you have to create a new site from scratch. If this is your situation in this article you will find an easy-to-follow starter guide.

First of all, we need to define what type of adaptive design we want to use. There are two alternatives:

  •  Adapting your site to different window sizes: This theory consists of adapting the different web elements to the screen width. Some elements may be reduced, resized or even their layout may be changed.
  • Columns design: what you do here is split the site into columns. The columns can be aligned horizontally or vertically, covering the entire screen.

As an example, I would like to show you our webpage. In this case, we adapted all the different elements of the website to the display width.

Website adapted to different window sizes
Website adapted to different window sizes

IMPORTANT CONCEPTS

In order to create a responsive site, we need to know some useful concepts:

  1. Viewport:

    In a responsive website, the Meta Viewport tells the browser how to behave in order to show our website.

Example:

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = No.">

As you can see, we can include several parameters such as:

  • Width: Sets the page width. We can define this value in pixels or set “device-width”, which basically means to use the maximum page width available.
  • Height: Sets the page height and works exactly as the width parameter.
  • Initial-scale: Initial Zoom and Page Scale values are 1.0. (no zoom). For example, if you set the value in 3, the page will increase its zoom 3 times.
  • Minimun-scale: Minimum Zoom that the page allows.
  • Maximun-scale: Maximum Zoom that the page allows.
  • User-scalable: Defines if we allow or not to zoom the page.
  1.      CSS parameters

  • It is important that we don’t set the dimensions in pixels. We should set up the values in percentages. For example, we could define the width of a div in 60%  as  width:60%; 
  • We can limit the width of a box using the properties min-width, max-width and  min-height , max-height. 
  • Try to not use absolute or fixed positions, the best thing is to float them with the property float or display. 
  • When we use background images, it is important that we know how to adapt them. To do this we can use @media queries.
  1.   @media queries

The @media queries are elements that can be used in our css style sheet. With this element you can configure our content behavior according to the size of each device. For example, if the device resolution is between 961 and 1024 pixels, we can define a background image as class .baner_principal.

@media screen and (min-width: 961px) and (max-width: 1024px) {
  .banner_principal{
     	background-image:url("/img/headers/productDevelopment-softwareDevelopment_1024x415.jpg");
}
}

With the use of these tools we can adapt different details depending on the screen size.

FRAMEWORKS

It is important to know that we can use a set of files already created to work on responsive websites. Usually, they already contain css and js files to include several styles and functionalities already preset to fit our needs. These files often have available documentation that may come in handy to help you implement the framework.

The use of frameworks helps reduce time of web layout work. Sometimes we will have to use other types of customization, but it is important to highlight how much useful you may find these elements.

Some of the most popular frameworks are Bootstrap, Foundation, semantic-ui and pure.  

CONCLUSION

Technology always changes and we can’t build our website only for a certain user type. It is important that we provide a good user experience no matter what device they use to navigate through our site.