Beautiful Designs that “Respond” With responsive web design, whether your website is viewed on a mobile phone, tablet, laptop, smartphone or desktop computer, your site will adapt effortlessly to ensure a beautiful experience for your users, by cascading information seamlessly across devices. As a site owner you can publish your content once and have it delivered to all devices without the need to develop different versions for different contexts. This in turns saves time, money and maintenance.

1. Responsive Web Design
Your Website is “Alive”.

2. The Facts & Figures
Your website doesn’t just sit on a desktop anymore. OK. So you knew that one!
Most websites have 10% to 20% of
their visit arising from a smartphone
or tablets already.
IDC estimates that by 2015, access via mobile devices will surpass PC usage when
connecting to the internet. With these statistics and the speed of technology
developments, it becomes vital to make sure your website is dynamic and can
adapt its design to be user friendly on every type and size of device.

3. Are You Future Ready?
A website that responds to the device that accesses it and delivers the appropriate
output for it uses responsive design. Rather than designing multiple sites for different-
sized devices, this approach designs one site but specifies how it should appear on
varied devices.
From mobile browsers to netbooks, laptops, desktops, smartphones and tablets, users
are visiting your sites from an increasing array of devices and browsers. Are your
designs future ready? Are they “Responsive”?

4. Beautiful Designs that “Respond”
With responsive web design,
whether your website is
viewed on a mobile phone,
tablet, laptop, smartphone or
desktop computer, your site
will adapt effortlessly to
ensure a beautiful
experience for your users, by
cascading information
seamlessly across devices.
The need to scroll on the
screen or the common issue
of images getting “cut off” is
completely eliminated.

5. How Does this Technology Handle Images?
Images in responsive web designs are called context-aware.
This particular technique serves images at different resolutions, ranging from larger
screens to smaller ones. The scaled images appear to change fluidly with the help of
updated developer tools and coding languages, allowing designs to look sharp in
every context.
Context Aware resizes an image, yet keeps the
important elements intact without cropping the
original image
Let’s have a look at this video* which excellently explains “Content Aware
Image Resizing” applied to Real World examples:
http://www.youtube.com/watch?v=c-SSu3tJ3ns
* Video Courtesy: Dr. Ariel Shamir

6. So How Does It All Work?
To get started with building a
responsive site, having a strong toolkit
can make a world of difference. One
needs three elements to make a site
responsive:
 A flexible/fluid grid
 Responsive images
 Media queries

7. The Technical Jargon
What on earth is “Fluid Grid Layout”?
Latest web design software introduces features for designing adaptive
websites. These feature helps you create flexible, fluid grid layouts for
pages using a column grid. You design the layouts visually, and web
designing software generates the source code for the layouts using
CSS3 and HTML5 technology.
“Media Queries” sounds pretty cool.
How the heck do “Responsive
Images” work?
A media query consists of a media
type such as an image and
Adaptive Images detects your visitor's
instructions for rendering that media.
screen size and automatically
The most commonly used media
creates, caches, and delivers device
feature is width. By restricting rules to
appropriate re-scaled versions of your
a certain width of the device
web page's embedded HTML images.
displaying a web page, one can
No changes needed. It is intended for
tailor the page's representation to
use with Responsive Designs and to
devices (i.e. smartphones, laptops,
be combined with Fluid Image
desktops, netbooks etc.) with varying
techniques.
screen resolutions.

8. Responsive Web Design – Wireframe Examples
Separate wireframes need to be developed for each screen size. A few examples
are below to help you understand the concept. However, in simple terms, a fully
responsive website will have multiple page designs and templates that will adapt and
work on every type of device, regardless of the size, brand or model. This really does
also future proof your website for a good many year so is a worthwhile investment at
this stage.

9. RWD – The Real Advantages
As a site owner you can publish your content once and have it delivered to all
devices without the need to develop different versions for different contexts. This in
turns saves time, money and maintenance.
Save Time
Save Money
Save on
Maintenance

10. Top Problems & How to Avoid Them
Well, yeah, there’s always a flip side to everything, however, there’s always a solution
too.
Explaining RWD to Navigation
Clients
In the past, navigation used to
The “old” designing system was be horizontal along the top or
very linear, and clients could sometimes down the left of a
easily see what they were page. It now needs a more
getting. The key here is to considered approach. The
demonstrate the power of RWD solution: Use good, consistent
to clients design.
Converting Fixed-Width Testing Time & Cost
Sites
How to test & which devices to
A huge question is how to test with is a big questions. The
convert the code for an existing solution is to share devices
fixed width website. The best between agencies / testers,
solution here is to go for a though this is still not widely
complete rebuild of your site. Its practiced.
well worth the efforts.

11. Examples of Responsive Web Design in Action
Sasquatch! Music Festival
www.sasquatchfestival.com
The Boston Globe
www.bostonglobe.com

12. The Way Ahead for RWD
Jumping on the responsive Web design wagon isn’t something to take lightly. Take
into account what you need to achieve, and consider whether catering to a
specific version of a desktop or mobile device makes the most sense.
Responsive Web Design is in its early stages. HTML and CSS standards are still
evolving but it’s clear that some form of responsive Web design will be used to
meet the challenges, and it’s equally clear that standards will continue to evolve
as better ways of handling the changing world of devices and browsers are
discovered.
Hopefully this slide helped, but if you’re still feeling confused about responsive
design, don’t be afraid to leave a question or comment. If you’re already utilizing
responsive web design in your site or web application, share the link with us so we
can see!

13. </two55am>
a digital agency
Authored by
Pankaj Umrania | Founder & Director
+91.98182 23471
pankaj@two55am.com
in.linkedin.com/in/pankajumrania www.two55am.com | info@two55am.com