Front End Design Stack – Beginner’s Guide To Responsive Web Design

The onset of the internet and its related usage has seen unprecedented growth in recent times. However outgrowing it, is the mushrooming of mobile devices coupled with mobile internet usage. In fact, the growth of mobile internet usage has by far outpaced the growth of the general internet.

The figures on the number of mobile internet users in India alone has crossed the 200 million mark.  The day is not far off when the number of mobile internet users will exceed that of the desktop internet users.

In this scenario, the goal of any website owner is that it should reach maximum internet users (whether desktop or mobile). This implies that the website developers need to design websites that can be used by both these groups.

Given that the desktop and mobile screen sizes vary in sizes – in fact mobiles come in all kinds of sizes: from small to large screen, the question that arises is how to design the websites that are suitable for all kinds of devices.

It certainly does not imply that the developer should know the entire spectrum of screen sizes and resolutions that are widening every day, and creating a different version of a website that targets each individual device. This is not a practical way forward. This is the problem that technology addresses with the “Responsive Web Design” (RWD).

RWD in simple words is the concept of designing web sites in such a way that the layout and the elements in the web page adapt so as to conform to the device’s screen size in which it is being used.

The idea of responsive web design was started by Ethan Marcotte.

A basic knowledge of CSS will help you to start off on RWD. For a web page to adapt to the screen size, it should first sense the screen type/size. This is possible with media queries which is a mix of flexible grids, layouts, images and an intelligent use of the same.

Media Query facilitates the use of adaptive layouts to adapt web pages to different browsers dimensions (width, height, and aspect ratio), device dimensions (device-width, device-height and device-aspect-ratio), browser orientation, color information (color, color-index and monochrome) and other things. To sum up, RWD can be achieved with a combination of flexible grids and layouts, images and an intelligent use of CSS media queries.

The AcadGild web site is a fine example of responsive design!

To see it in action, click on the URL shown below from a desktop and slowly make the browser thinner and wider.

https://acadgild.com/help/Android-Programming-For-Children/academy5_in

The layout adjusts beautifully to match the new width of the browser-even if you make the browser width as thin as that of a mobile screen.

Here are the screenshots of the AcadGild website at different resolutions:

As mentioned above fluid grids, flexible images, and media queries happen to be the three main ingredients for RWD.

You will now see the basic concept of RWD and media queries applied in 3 basic steps:

Step1:  When you are going to build a responsive webpage first step is to write a viewport tag. (Viewport basically takes the full width of the device when it is specified as device-width.)

Pages optimized to work for variety of devices must include a viewport in head tag. A meta viewport gives browser the instructions on how to scale the screen sizes of different devices.

A typical mobile-optimized site contains something like the following:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

Use the meta viewport tag to control the width and scaling of the browser’s viewport.

• Include width=device-width to match the screen’s width with independent pixels.

Include initial-scale=1 to establish a 1:1 relationship between CSS pixels and device-independent pixels.

The width property controls the sizes of the viewport. It can also be used to set the specific required pixels or the special value device-width value which is the width of the screen in CSS pixel.

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale and user-scalable properties control how users are allowed to zoom the page in or out.

Step2: Add media queries for every particular screen size.

• Media queries can be used to apply styles based on device characteristics.
• Use min-width over min-device-width to ensure the broadest experience.
• The min-width is based on the size of the browser window, whereas min-device-width is based on the size of the screen.
• Use relative sizes for elements to avoid breaking layout.

A key concept behind responsive design is fluidity and proportionality as opposed to fixed width layouts. Using relative units for measurements can help simplify layouts and prevent accidentally creating components that are too big for the viewport.Step3: Defining the different sizes for particular screen.

To demonstrate the above three steps, let us consider creating a simple HTML page with a header, body, sidebar, and footer sections as shown below and then make it responsive.

Designing a Normal HTML Page (without responsive quality)

Design the structure of the page which will be a basic HTML file. The structure of the page is as shown:

After this give styling to your page using a external or internal CSS file. You can give the styling as per your requirements. I have set the main_div container as 980px wide. Header has a fixed height of 160px. The content container is 600px wide floated left. The sidebar content is 280px wide floated right.Styling the HTML Page with CSS

Styling a Responsive Web Page

Let’s begin the responsive design part by giving the meta viewport tag which is as follows:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Applying Media Queries for Screen Size Less than 980 Pixels

Then add the required media queries. Suppose if the screen size changes to 900px then the width of the main_div is reduced to 95%, content width has to be 60%, and sidebar width is set to 30%.

Tips for making a web page fluid: Use percentage (%) value to make the containers fluid instead of pixel.

The following set of rules will be valid if the screen size is less than 980px.

Now if the screen size is less than 650px then the screen should look like a single column layout. For this to happen set the header as auto and then set the float property of both sidebar1 and content container as none. The main-nav position is reset to static and content width is set to auto.Applying Media Queries for Screen Size less than 650 pixels

If the viewport is smaller than 480px which is the width of the iPhone screen in landscape orientation, then disable text size adjustment. You can disable the text size adjustment by adding the tag: -webkit-text-size-adjust: none. Then reset the font size of main_menu to 90%.If the viewport is smaller than 480px which is the width of the iPhone screen in landscape orientation, then disable text size adjustment. You can disable the text size adjustment by adding . Then reset the font size of main_menu to 90%.Applying Media Queries for Screen Size Less than 480 Pixels

If all the styles applied are correct, then your screen should look as shown in Figure 3 below:

If you want to experience the whole responsive page just click on the link

Conclusion:

Visitors have certain expectations when viewing your site on everything from a desktop to a laptop to a netbook to a tablet to a handheld. They expect your site to maintain a high level user satisfaction no matter how or where they see your site. And it is obvious that applying web responsive techniques is simple enough if the right tags are used and if you have sufficient knowledge of CSS media queries.

Hopefully, this article will start you thinking about how best to use media queries and provide you with enough examples to head you down the right path.