Responsive Web Design

Introduction to Responsive Web Design

I had conducted a javatar(our weekly technical workshop) at Sokrati on a simple introduction to Responsive Web Design:

Slide 1: Intro

The range of devices available to us are increasing exponentially with 4K Tvs and iWatches.Its a a matter of time when people will start browsing apps and websites on their iWatches, SmartPhones, Tablet Phones, iPad minis, iPads, laptops, pcs, large screen tvs.. etc.

Slide 2: Pillars

The four basic requirements or pillars of RWD are EMs/Percentages, Media Queries, Flexible Media and a flexible grid layout.

Slide 3: Typography

Lets start with fonts.The default base font size for web-pages is 16px, but some browsers might set it as different or the user might change it according to his preference. We should always honor and make sure that our design accomodates it without breaking.
We have a very simple page with a heading and a paragraph, how do we make it responsive ?

The Page:

See the Pen GgojKE by Jay Kanakiya (@kanakiyajay) on CodePen.

Resize your browser or use Chrome devtools rwd feature |

The font-size of heading is 80px while that of the paragraph is 32px, we have to make it responsive to page width, because if a person on Opera Mini visits this page, whole screen will be covered with the heading only.

So to make this responsive easily, you should use a new css property known as “vw” -> viewport width.
So if we make an elements font-size as 3vw and viewport width is 1000px that means its font-size will be 30px.
So now as we want the base width for 1300px width to be 16px, we do some maths

base = (16 * 100)/1300 = 1.23

So we set the body’s font-size as 1.23 vs with a fallback of font-size: 100%;
Now we come to the concept of ems. Ems is a size of measurement similar to pixels.Unlike pxs ems are relative to their parents font-size (You can also use rems which means relative to body-width we will cover it later).

ems

So if the base font size is 16px and we have a heading whose font-size is 48px we can set its font-size as 3ems. The benefit of ems over px for responsive design is that you need to change only to change the font-size of its child-elements.

So here is our sample page fully reponsive:

See the Pen ZYQpzP by Jay Kanakiya (@kanakiyajay) on CodePen.

Slide 4: Font Formula

An important thing to note in responsive typography is the formula

result = target / context
( 2em = 32/16 )

This is until http://caniuse.com/#feat=calc we can use calc() easily.
The target refers to the font-size that we want to apply, while the context refers to the font-size of the parent.
Remember the context is the parent elements font-size.
Note: You can also use rem which means it will take the context as the base font-size.

Slide 5: Widths

Consider a simple 2 column layout with one for main content the other for sidebar.
The width of wrapper is 900px, main column is 600px while that of sidebar is 300px.

See the Pen RNrGNV by Jay Kanakiya (@kanakiyajay) on CodePen.

How do we make this responsive ?

By using percentages. Percentages are very easy to use so over here we will set the width of main column as 66.666% while that of sidebar as 33.333%
We also give a max-width of 960px with margin: 0 auto for large screen monitors.
So here’s the final result

See the Pen qEbaEb by Jay Kanakiya (@kanakiyajay) on CodePen.

Slide 6: Paddings and margins

Lets apply the same responsive concept to paddings and margins. I have always set the box-sizing property to ‘border-box’ makes it easier to calculate.

Just 4 simple rules :

  1. Set Paddings/Margins ‘Rights’ and ‘lefts’ in percentage widths.
  2. Set Padding ‘tops’ and ‘bottoms’ in ems.
  3. Margins depend upon elem’s container.
  4. Padding depends upon elem’s.

Slide 7: Flexible Images

This is the most simplest way to implement. Just add a max-width:100% to every image.
This will make sure the image will never go beyond the right border and will be sized accordingly.
Here’s a demo with unresponsive images as well as responsive images.

See the Pen wBMzBm by Jay Kanakiya (@kanakiyajay) on CodePen.

Slide 8: Flexible Media

Similarly you can apply this to other objects such as flash, video and embeds.


img,
embed,
object,
video {
     max-width: 100%;
}

Slide 9: Media Queries

Media Queries are the foundation upon which responsive design is built.
For any website media queries are through which we can control minute details of our website.
The two karan and arjun of media queries are max-widths and min-widths:

  1. Maximum Widths -> means apply styles when less than
  2. Minimum Widths -> means apply styles when more than

Syntax:


@media screen and (max-width: 600px) and (min-width: 300px) {
    .para {
       width: 300px;
    }   
}

The above code means for viewport widths greater than 300px and less than 600px the elements with class para should have width 300px.

A simple demo

See the Pen RNrGPV by Jay Kanakiya (@kanakiyajay) on CodePen.

Slide 10: Viewport meta tag

This small yet useful important tag says for every device (especially mobile browsers) always take the width equal to device-width. Also depending upon your application you can disable user zooming and scaling.
By default, Mobile Safari renders web content at 980px wide—even though its display is 320px wide when held in portrait mode.


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

Slide 11: Bootstrap Grid

Docs

Before starting any web-design project its imporant to create a layout that will work for any device from 4K laptops to a feature phone running Opera Mini.
The bootstrap grid has 12 columns and you depending upon the classes of your divs you can change its width depending on the device-width.

So lets say you want to spread 25% of the width for large tablets but 50% for smartphone and 100% for small phones all you need is to apply col-md-4, col-sm-6, and col-xs-12.
Bootstrap css will automatically take care of the width.

Bootstrap Grid Builer

bootstrap grid

2 thoughts on “Introduction to Responsive Web Design”

  1. Single codebase that supports iWatch & 4K TV at the same time? Responsive is good and all but don’t overuse it like that.

    1. If the requirements are there, then support it, otherwise its unimportant right now, but who knows what will happen 4 years down the line ?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>