front end design stack beginner's guide to responsive web design
TRANSCRIPT
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.
@media (query) {/* CSS Rules used when query matches */
}
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:
<!-- /#main_div --><div>
<header>
<hgroup>
<h1 id="logo"> <a href="#">Main Title</a> </h1>
<h1 id="description"> Description </h1>
</hgroup>
<nav>
<ul id="main_menu" class="tab1">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">More</a></li>
</ul>
</nav>
</header>
<div>
<article>
<header>
<h1><a href="#">Content Title</a></h1>
</header>
<figure>
<img src="img1.jpg" />
</figure>
<p> Here is some text </p>
</article>
</div>
<aside>
<section>
<h4>Sidebar1</h4>
<ul>
<li><a href="#">1</a> </li>
<li><a href="#">2</a> </li>
<li><a href="#">3 </a></li>
</ul>
</section>
</aside>
<footer>
<p>This is the footer</p>
</footer>
</div>
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
@media screen and (max-width: 650px) {/* header */
#header {
height: auto;
}
/* main nav */
#main-nav {
position: static;
}
/* site logo */
#site-logo {
margin: 15px 100px 5px 0;
position: static;
}
/* site description */
#site-description {
margin: 0 0 15px;
position: static;
}
/* content */
#content {
width: auto;
float: none;
}
/* sidebar */
#sidebar1 {
width: 100%;
float: none;
}
#sidebar2 {
margin: 0 0 10px;
}
}
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
@media screen and (max-width: 480px) {html {
-webkit-text-size-adjust: none;
}
/* main_menu*/
#main_menu a {
font-size: 90%;
padding: 10px 8px;
}
}
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.