3 Responsive Web Design techniques

3 responsive web design techniques

Website responsive images

Before going into the 3 responsive design techniques, let’s briefly explain what responsive design means. Responsive design is the ability to create a website
or a web application that is easily accessible to mobile users. This means that your site can be viewed on mobile devices like iphones,tablets, ipads,
etc including laptops, desktops and TVs.
It’s very important that you adapt a responsive design to your web application especially now that there is a recent change in the way
websites are indexed by google.
Google has begun creating its search listings based on a responsive content or a mobile version of a website content. Google now uses mobile version of a website as their
main search engine index. This is why it is paramount to create a mobile first design when creating a website.
For the above reason i compiled the below 3 responsive design techniques to make your website responsive.

Using Fluid measurement

If you want to integrate responsiveness into your website, then you need to use a fluid measurement.
Fluid measurement is one of the 3 responsive design techniques to make a website respond to mobile devices.
Fluid measurement is the act of using percentage, em, vw and vh as a means of measurement, contrary to using pixel based measurement which is the same as fixed measurement.Although vw and vh are not as widely supported as rems,they are good units for a responsive layout.
When fluid measurement is used for instance, it gives the containing element of your website a percentage width, content is displayed on all screens according to the
size of that screen. If you give a container 100% width, it means no matter the width of the device that is accessing your
website, content would be displayed 100% of the device. That is, full width of the device. So if you use an android phone to access a website with a fluid width of 100%,
content will be displayed
in full width of the android and if you have a laptop of about 1200px your content will equally expand to 100% of the laptop.

Boostrap is the second of the 3 responsive design techniques

Boostrap is a framework used for designing and styling web applications.
Boostrap is a grid system that displays its content according to the number of grids assigned to it.
Boostrap is a very good and easy to use framework if you need a responsive design. To download boostrap or link to a boostrap CDN click on
https://getbootstrap.com/
This is how to integrate boostrap into your webApp to make it responsive.
Copy the link from the boostrap page to your HTML markup.
Next, Give the container holding your content a class of “.container-fluid”.
Then use row to create a horizontal group of columns.
Responsive design is created by specifying number of grid columns ranging from 1 to 12. For instance if you want four equal columns you will apply either/all of these classes
“col-xs-3”, “col-sm-3”, “col-md”, “col-lg-3” to each column. The four column measurement targets different devices.
The XS means extra small devices, the SM is for small devices, MD means medium devices and the LG means large devices.

Example of use
first make sure you have boostrap downloaded or include this bootstrap cdn link
< link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” >

<div class=”container”>

<div class=”row”>

<div class=”col-xs-12 col-sm-6 col-md-4″>

Nulla tincidunt ex lacinia, facilisis odio faucibus, consequat quam. Curabitur dapibus eros in libero tincidunt placerat. Proin ultricies diam sed elit faucibus cursus. Nunc vehicula augue sit amet ligula commodo efficitur. Praesent a fermentum tortor. Maecenas pellentesque eu tortor et interdum. Donec massa arcu, ullamcorper non ipsum
</div>

<div class=”col-xs-12 col-sm-6 col-md-4″>

Ut eu libero felis. Donec felis nibh, ultrices quis purus ut, dictum tempor lorem. Donec finibus, ante at facilisis pulvinar, felis arcu tempus nulla, tempus faucibus sem nibh vitae mauris. Maecenas varius dui libero, eget ullamcorper turpis consectetur at. Nunc rhoncus erat vel velit pulvinar, a congue nibh pharetra. Orci varius natoque
</div>

<div class=”col-xs-12 col-sm-6 col-md-4″>

Vestibulum nunc odio, tincidunt eu nisi eget, rutrum laoreet arcu. Proin molestie, mi vel pharetra porta, velit orci eleifend orci, a malesuada magna quam a ipsum. Integer dignissim metus non arcu imperdiet, imperdiet imperdiet ligula feugiat. Etiam vitae risus vel orci placerat consequat. In commodo luctus nunc in finibus. Maecenas eleifend

</div>
</div>
</div>

The above code will be displayed like this on desktop
responsive design example

On tablet it will display a two columns as specified in “col-sm-6” while it will cover the entire width of smaller mobile devices as written in “col-xs-12”. I will bring a full tutorial on using bootstrap
for dynamic layouts and designs

Media query is the last of the 3 responsive design techniques.

Media query as the name implies is used to set a rule for how a website should be displayed on different devices or media.
Media query is a necessary part of website design if you must render its content on mobile devices.
Most people start by targeting the most used mobile phones width like the 480px, 760px, 980px.
The disadvantage of this technique is that content will only be displayed well on the stipulated width and anything outside the targeted with will not render well.
Sometimes when you use max-width: 480px: At 250px it still does not display well. When you give it max-width: 760px
at 500px it still does not display well.
Considering the growing number of different devices/phones it is not possible to target all the screen width in the world.
So what is the technique to use in other for contents to display
uniformly and adequately on all devices and at different specified or non specified breakpoints.
The technique i used, taught to me by my professor back in school is called “wave technique”. Wave technique starts the breakpoint where the last breakpoint ends.
With this technique, no breakpoint is left out, all mobile and non mobile devices are responsive.

Leave a Reply