Well, if you only want to view one or two websites once in a while, its fine. But as soon as accessing internet from mobile becomes a regular activity, you start realizing how frustrating and tedious it can be to zoom in and out constantly in order to make the content readable.

1. 1
Responsive Web Designing with
HTML5 and CSS3

2. 2
Table of Contents
How smart phones helped responsive web designs evolve?................................................ 3
Responsive Web Design.......................................................................................................... 4
Why should you choose Responsive web Design...................................................................5
Educating the clients about the Responsive web designs.....................................................5
When should you use Responsive Web Design services?.....................................................5
Responsive Designing with HTML 5 and CSS3...................................................................6
HTML5 - Why should you opt for it?...................................................................................7
How CSS3 supports responsive web design..........................................................................8
Media Queries and Responsive Web Designs.......................................................................9
But media queries are only a part of solution......................................................................9
Fluid layout.............................................................................................................................10
Content comes first with Responsive web designs...............................................................10
Summary................................................................................................................................11

3. 3
How smart phones helped responsive web designs evolve?
While the statistics should not be the only reference point, but you would be amazed to note
that as per gs.statcounter.com the use of mobile browser for accessing internet has augmented
from 2.86 to 7.02 percent across the globe and the use of Internet Explorer (Internet browser
used on computers) has fell steeply from July 2010 to July 2011. This percentage has
increased considerably in last two years as well.
So, there is a large percentage of people using small screen mobile devices for accessing
Internet as compared to the ones who still use traditional ways of accessing internet (through
computers or laptops). The internet browsers on these mobile devices are specifically
designed to handle the loading and display of an existing website without problems. These
devices shrink the display size of the website to fit into the screen size of the device that is
viewable area. Then users can navigate on the page and can zoom the particular area they
want to see. Simple, so how does it create the need for a different type of website if viewing
the regular websites is so easy?
Well, if you only want to view one or two websites once in a while, its fine. But as soon as
accessing internet from mobile becomes a regular activity, you start realizing how frustrating
and tedious it can be to zoom in and out constantly in order to make the content readable, and
then moving your fingers from left to right to be able to read the full sentence. It's really
annoying and it placed the demand on the web developers and designers to develop more
appropriate websites that can easily fit into the screen of a mobile device. Now, if there
would be a single screen size, the things would have been easier. The web-developers and
designers only had to design the websites to fit into that specific screen size, but, as we all
know, that's not the case. Every mobile, tablet and smart phone makes ensures that their
screen size is better than the other, and thus, we have numerous mobile phones in the market

4. 4
with varying screen sizes. So, now we need a design that can fit into every type of screen size
appropriately in order to give the best user experience across every device.
This is how the developers realized the need for developing Responsive web Designs.
Responsive Web Design
Responsive web designs have become one of the most popular web designing techniques
today, as it is a flexible design which lets the website fit aptly into any screen size without
affecting its contents. Ethan Marcotte, the man behind the term Responsive Web Design
consolidated three existing web development techniques, namely media & media queries,
flexible images and flexible grid layout in one unified approach to develop what we all know
as Responsive Web Design. Some of the characteristics or terms with which one can identify
a responsive web designs are flexible design, cross-device design, adaptive layout, liquid
design, rubber layout, elastic layout and fluid design etc.
However, a truly responsive design methodology is much more than making mere alterations
in the layout of a website on the basis of viewport sizes (The viewing area on the screen of a
mobile). It actually follows a completely opposite designing approach. Usually, web
designers begin with a fixed sized desktop website design and then, scale it down and re-flow
the content to make them appropriate for smaller viewports. But in responsive designing, the
design for the smallest viewport is first designed and then it is progressively enhanced to fit
into larger viewports.
Briefly, a responsive web design is the way of presenting the web contents of a website in the
most accessible manner, so that any viewport can access it and display it perfectly.

5. 5
Why should you choose Responsive web Design
Now the question arises, whether responsive web design is the only technique that helps to
develop web designs for smaller and varying screen sizes. Though there are many other ways,
like mobile websites but in that scenario one has to maintain two versions of the website. One
for computers and laptops, and other for mobiles. Also, the digital marketing, maintenance
and every other task related with website doubles. Thus, it's not a feasible way and thus,
responsive web designs seem to be the best solution for solving the problem related with
varying screen sizes and introduction of newer computing & mobile devices.
Educating the clients about the Responsive web designs
The most difficult hurdle that a web design company may face before embarking on a
responsive web design is to change the mindset of the client. Most of the people seeking web
design India services often ask to transform the existing graphic designs into standards
compliant CSS/ HTML and jQuery-based web pages. But, what most of the people do not
understand that it is the user experience that is extremely significant than making a web
design that can do well on all the browsers. Even, a general website will be able to fit itself in
the browser of a mobile and in its viewport, but the user experience would not be very
pleasant which may turn off a number of potential users.
Thus, a web design company must educate its clients about the detailed aspects related with
web designing to make them understand the imperativeness of a responsive web design in
todays' mobile driven world.
When should you use Responsive Web Design services?
Well, Responsive Web Design services have become quite popular, but still, many wonder
why do they need a responsive web design for their website when it's doing fine with a

6. 6
normal web design. Here are some prominent reasons that why should you opt for a
Responsive web design:
 It supports the largest growing marketplace of internet users across the globe.
 It provides the most maintainable, fastest and cleanest code base.
 It provides a subtly different and most appropriate user experience across different
browsers and devices.
However, if a large percentage of your website visitors use Internet Explorer 8 or lower, for
accessing your website, then you must not indulge into developing your website with a
responsive web design. Internet Explorer 8 and lower versions do not provide support to the
CSS3 properties or HTML5 elements as standard, so it does not makes a lot of sense that you
use your resources to develop a design which is primarily based on CSS3 and HTML5.
Responsive Designing with HTML 5 and CSS3
A responsive web design can easily handle the changing viewports and gives the best
possible user experience. But is it enough? No. let's go further.
HTML5 offers an incredible set of features as compared to HTML4, and the meaningful
semantic elements of HTML5 are helpful in forming the basis of our markup. Similarly, the
media queries offered by CSS3 are one of essential ingredients for responsive web designs
but some additional CSS3 modules can empower our web-designs with astounding levels of
flexibility. For Responsive web designing, we do not use complicated JavaScript, instead we
can use lean CSS3 gradients, transformations, animations, typography and shadows. Thus,
emphasizing on responsive CSS3 and HTML5 powered web designs yields best results.

7. 7
HTML5 - Why should you opt for it?
HTML5 places great emphasis on streamlining the required markup for creating a web page
that validates to W3C standard and links all the required JavaScript, CSS and image files. As
we know that our users will view the websites from their mobile screens, and might have
internet connection with possibly limited bandwidth. So, the key features that we must target
with Responsive web designs include making the website suitable for limited & varying
viewports and developing it in a way that gets loaded in the fastest possible time. HTML5
helps in removing the superfluous mark up elements that aids in achieving the above
mentioned targets.
HTML5 offers an amazing set of benefits and features that can be utilized for making
responsive designs even more effective. First of all, the new semantic elements of HTML5
help it to provide an extremely meaningful code to search engines.HTML5 also enables
features like form submission, negating the requirement for the heavier JavaScript form
processing. This helps in developing a responsive web design with a faster-loading and leaner
code base. HTML5 saves both time and code.
How CSS3 supports responsive web design
Earlier, the web designs used to be table based and styling used to be intertwined with web
content. Later, CSS (Cascading Style Sheets) were introduced for separating content from
design. Though, web designers took some time to adapt to the new way of designing, the
CSS-designing but by seeing what all could be achieved with CSS, it became quite popular.
Today, CSS has become a standardized way for defining the presentational layer of a web
page.

8. 8
The version of CSS that we are using currently is CSS 3 that uses CSS 2.1 specifications as
its core. And, it would not be incorrect to say that CSS3 can solve a large number of everyday
design problems. Moreover, CSS3 is perfect for responsive web designing. Earlier the web
page enhancements that came under the domain of resource heavy JavaScript or Flash, can
now be accomplished using CSS3 Transformations, as CSS3 makes the animation
maintainable and lightweight, as compared to its heavier counterparts like Flash or
JavaScript. The browsers which support the feature get the animations, while others simply
show a static image in place of it.
Media Queries and Responsive Web Designs
A media query comprises of a media type and zero or more expressions which check for
conditions pertaining to particular media features. The media features which can be used in
media queries include colour, height and width. With the help of media queries, presentations
in a web page can be customized to a particular range of output devices without making any
changes to the content.
At present CSS2 and HTML 4 support media dependent style sheets customized for various
types of media. For example, a document may showcase sans-serif font when viewed on a
screen and serifs font on printing. This implies that screen and printer are the two media types
which have been defined for this content.
Media queries get used when you are developing responsive designs and the media queries
which are used most often include the ones that are related to device's screen width and
device's viewport width. However, there are many other queries which can also be used
during responsive designing. These include:
 width - It refers to the viewport width

9. 9
 height - It refers to viewport height
 device-width - The width of the rendering surface (screen width of the device)
 device-height - The height of the rendering surface (screen height of the device)
 orientation - This capability checks the orientation of the device, that is, whether it is
landscape or portrait in orientation.
 aspect ratio - This is the ratio of width to the height of the device. If the screen's
width is 4 and height is 3, then its aspect ratio would be written as 4/3.
 device aspect ratio - This is the ratio of width to the height of the device's rendering
surface and not of the viewport of the device.
 color-index - It refers to the number of entries that are placed in the colour lookup
table of the device.
 color - It refers to the number of bits per colour component.
 resolution - This capability is used for checking the print or screen resolution. It can
measure resolution in DPI (Dots Per Inch) and DPCM (Dots Per Centi Meter).
 monochrome - This capability tests the number of bits per pixel in a monochrome
frame buffer.
 grid - This capability checks and indicates whether a device is grid based or bitmap
based.
 scan - It checks for the presence of progressive or interlace features.
All the above mentioned media queries can be prefixed with a minimum and maximum value
in order to create ranges except for grid and scan.
But media queries are only a part of solution
Media queries perform exactly in the way they should perform, as they apply suitable styles
depending upon the features of our device. But the problem with media queries is, they only

10. 10
cover a very short spectrum of viewports. This implies that we cannot only depend on media
queries, but we need to use some more techniques in conjunction with media queries in order
to develop perfectly responsive designs.
Fluid layout
Using only the media queries to change the design works perfectly fine if we have a specific
target device and we are aware of its dimensions. But this strategy faces some severe
limitations, including the fact that it is not completely future-proof. Currently, when we resize
our viewport, the design of the webpage snaps at those points which the media queries
intervene and then, the shape of the entire layout changes. However, it stays static till the
time the next "viewport break-point" is reached. So, we need something which works better
than this. This is actually more of an adaptive web design style than more of a responsive
one. We need something more fluid, so that transformations occur more smoothly.
Content comes first with Responsive web designs
Though Responsive designs enable us to ensure the best viewing of website across various
devices. Thus, designers always emphasize on developing designs that can retain as many
features as possible across multiple platforms and viewports, but it is also imperative to mull
over the order in which you want the things to appear on screen. For example, let's consider
the main content and sidebar sections of our mark-up. Usually, sidebars are displayed before
the main content but with Responsive designs, this should not be the case. Since, users are
viewing content on their mobile screens, the view is limited and thus, when the website is
being loaded it should first show the main content and then the sidebar. The reason is that if
the main content is not loaded before the sidebar, the viewers will see the tangentially related
content before the main content gets loaded.

11. 11
Summary
In this ebook, we learned about what responsive designs are and which elements compose a
responsive web design. Then, we learnt about how HTML5 and CSS3 are related to
responsive web designing. In the last few sections, we learnt about CSS in detail and
discussed media queries, how these are useful in responsive designs. We learnt how to
include them in the CSS files and how they help in designing the responsive designs.
However, we found out that media queries can only help us to achieve an adaptable web
design which is not truly responsive. Thus, media queries are imperative in responsive
designs but a fluid layout will help us to achieve the responsive web designs in a better
manner.
Follow Us at Twitter
www.twitter.com/miraclestudios8
Follow Us on Google Plus
https://plus.google.com/b/108107255832151841171/+MiracleStudiosIndia
Catch Us on Facebook
http://www.facebook.com/miraclestudios
Thank you.