RESPONSIVE WEB DESIGN

TECHNICAL REPORT
ON

RESPONSIVE WEB DESIGN
SUBMITTED
BY

N.NAWAZ KHAN
IV B.Tech, C.S.E
(103P1A0548)

Department Of Computer Science and Engineering

PRIYADARSHINI INSTITUTE OF TECHNOLOGY
RAMACHANDRAPURAM, TIRUPATHI-517561

2013-2014

1

TECHNICAL REPORT
ON

RESPONSIVE WEB DESIGN
SUBMITTED
BY

N.NAWAZ KHAN
IV B.Tech, C.S.E
(103P1A0548)

Department Of Computer Science and Engineering

PRIYADARSHINI INSTITUTE OF TECHNOLOGY
RAMACHANDRAPURAM, TIRUPATHI-517561

2013-2014

Coordinator

Head of the department

INDEX

CHAPTER NO

TITLE

PAGE NO

1

ABSTRACT

1

2

INRODUCTION

2

3

HISTORY

5

4

SYSTEM

13

5

ADVANTAGES

28

6

DISADVANTAGES

29

7

FUTURE VISION

30

8

CONCLUSION

34

9

REFERENCES

35

1. ABSTRACT
Responsive web design is a web design approach aimed at crafting sites to
provide an optimal viewing experience—easy reading and navigation with a
minimum of resizing, panning, and scrolling—across a wide range of devices.
Approach-It suggests that design and development should respond to the user’s
behavior and environment based on screen size, platform and orientation. The
practice consists of a mix of flexible grids and layouts, images and an intelligent
use of CSS media queries. As the user switches from their laptop to IPad, the
website should automatically switch to accommodate for resolution, image size
and scripting abilities. In other words, the website should have the technology to
automatically respond to the user’s preferences. Flexible grid-In adaptive grids,
we define pixel-based dimensions. Hence we will have to adjust the widths and
heights manually in certain device viewports. Since fluid grids flow naturally
within the dimensions of its parent container, limited adjustments will be needed
for various screen sizes and devices, flexible images-adjusting screen resolution,
responsive images. Media queries-using css3 and html5, showing or hiding
content, one can create multiple style sheets, as well as basic layout alterations
defined to fit ranges of widths, it includes all such features.
web design gives a good scope and easy usage of any web site in any device
and makes the site interface comfortable to user, in future probably such
responsive and cross platform apps will be designed which can be used anywhere,
anytime, in any device will make human life much better.

1

2. INTRODUCTION
Almost every new client these days wants a mobile version of their website.
It’s practically essential after all: one design for the BlackBerry, another for the
iPhone, the iPad, netbook, Kindle — and all screen resolutions must be
compatible, too. In the next five years, we’ll likely need to design for a number of
additional inventions. When will the madness stop? It won’t, of course.
In the field of Web design and development, we’re quickly getting to the
point of being unable to keep up with the endless new resolutions and devices. For
many websites, creating a website version for each resolution and new device
would be impossible, or at least impractical. Should we just suffer the
consequences of losing visitors from one device, for the benefit of gaining visitors
from another? Or is there another option?
Responsive Web design is the approach that suggests that design and
development should respond to the user’s behavior and environment based on
screen size, platform and orientation. The practice consists of a mix of flexible
grids and layouts, images and an intelligent use of CSS media queries. As the user
switches from their laptop to iPad, the website should automatically switch to
accommodate for resolution, image size and scripting abilities. In other words, the
website should have the technology to automatically respond to the user’s
preferences. This would eliminate the need for a different design and development
phase for each new gadget on the market.
Together, Apple, Android, and Windows offer the inhabitants of the digital
world thousands of different mobile devices from witch it is possible to browse the
web. As a result of this technological development and expansion, the notion of
mobile first has become extensive and forms an attitude towards creating web
package solutions that seem to fit every single device at once. One of the most
2

Prevailing examples of this is the responsive web design where the diversity
in terms of platform and use is the main focus. As these new technological
possibilities arise, I find it important to investigate a dominant form within the
World Wide Web that carries more challenges than meets the eye.
As this World wide web is becoming a greater as well as much larger cause for
most persons function and interpersonal activities, there is a huge attraction for
folks about how to style internet websites, at the same time regarding the
development right behind the website but in addition typically the image design
and style which is shown for the individuals who visit the web-site.
When you're to generate an internet site from the bottom, it may possibly take
more time to generate the application, since you also have to have all the encoding
expertise to earn an affordable in addition to user-friendly internet site. What is
more, you might really need to be fully aware of exactly how and also what the
website should be like, according to the style and design on the web page. Should
you be setting up a distinct internet site on a unique factor, which include
competitive sports and / or numerous technology hype site, you will need to have
some designs in addition to images of which benefit highlighting on the on the
from the web-site. Commonly, the web design is about the most prominent
boundaries on the web site, given it helps you to support these viral website
visitors as they just like what these people observe. There could be several
websites that include a much better content plus wording, yet due to the
webdesign, there are numerous alternative web pages that have an improved rate
connected with visitors.
Quite simply, webdesign is definitely considerably of importance to a web page

3

Apart from the webdesign, latest concepts are suffering from within the degree
where mobile devices, smallish laptops besides other mobile instruments. This will
furthermore transform certain requirements regarding web-sites, once you have to
have internet websites that can be readily available as a result of the whole set of
stated items. This particular term is addressed as responsive web design, from
where the page layout shifts in line with the screen quality. There are a lot of
dimensions with personal computer monitors and in so doing a variety of
resolutions, nevertheless they are typical allowed to be willing to access many
web-sites. By having a responsive design upon your web page, all people are likely
to access that webpage.
There are numerous points when making a new responsive website in comparison
with an old-fashioned webpage and also designers will need to learn about good
and bad of each procedure, prior to when making use of a particular or perhaps one
more. Naturally, you'll be able to access almost all of the items along with pictures
should you perform a top resolution, even while running a portable web browser,
you are going to possibly just get access to the key and applicable content on
websites. Especially huge pictures can be very hard to make available intended for
smaller resolutions, traditionally graphics ought to be in any specified dimension
so as to exhibit the significance and communication. Even if, important things that
include article content and even content material are very all too easy to fit into
small browsers and even instruments by performing a responsive webdesign.
Altogether, responsive designs are needed because of the current tendency about
growing web browsers plus items, if you want to come up with a direct impact
upon as many visitors as is feasible.

4

3. HISTORY
How the web and web design started?
In 1989, whilst working at CERN Tim Berners-Lee proposed to create a
global hypertext project, which later became known as the World Wide Web.
Throughout 1991 to 1993 the World Wide Web was born. Text only pages could
be viewed using a simple line-mode browser. In 1993 Marc Andreessen and
EricBina, created the Mosaic browser. At the time there were multiple browsers
however the majority of them were Unix-based and were naturally text heavy.
There had been no integrated approach to graphical design elements such as
images or sounds. The Mosaic browser broke this mold. The W3C was created in
October 1994, to "lead the World Wide Web to its full potential by developing
common protocols that promote its evolution and ensure its interoperability."[4]
This discouraged any one company from monopolizing a propriety browser and
programming language, which could have altered the effect of the World Wide
Web as a whole. The W3C continues to set standards, which can today be seen
with JavaScript. In 1994 Andreessen formed Communications corp. That later
became known as Netscape Communications the Netscape 0.9 browser. Netscape
created its own HTML tags without regards to the traditional standards process.
For example Netscape 1.1 included tags for changing background colors and
formatting text with tables on web pages. Throughout 1996 to 1999 the browser
wars began, as Microsoft and Netscape fought for ultimate browser dominance.
During this time there were many new technologies in the field, notably Cascading
Style Sheets, JavaScript, and Dynamic HTML. On a whole the browser
competition did lead to many positive creations and helped web design evolve at a
rapid pace.

5

3.2 Evolution of web design
3.2.1 The first web pages

In August 1991, Tim Berners-Lee published the first website, a simple, textbased page with a few links. A copy from 1992 of the original page still exists
online. It had a dozen or so links, and simply served to tell people what the World
Wide Web was all about.
Subsequent pages were similar, in that they were entirely text-based and had
a single-column design with inline links. Initial versions of HTML (Hypertext
Markup Language) only allowed for very basic content structure: headings
(<h1>, <h2>, etc.), paragraphs (<p>), and links (<a>). Subsequent versions of
HTML allowed the addition of images (<img>) to pages, and eventually support
for tables (<table>) was added.
3.2.2 World Wide Web Consortium is formed
In 1994, the World Wide Web Consortium (W3C) was established, and they set
HTML as the standard for marking up web pages. This discouraged any single
company from building a proprietary browser and programming language, which
could have had a detrimental effect on the web as a whole. The W3C continues to
set standards for open web markup and programming languages (such as
JavaScript). Web pages will often require more screen space than is available for a
particular display resolution. Most modern browsers will place a scrollbar (a
sliding tool at the side of the screen that allows the user to move the page up or
down, or side-to-side) in the window to allow the user to see all content. Scrolling
horizontally is less prevalent than vertical scrolling, not only because such pages
often do not print properly, but because it inconveniences the user more so than
vertical scrolling would (because lines are horizontal; scrolling back and forth for
6

every line is much more inconvenient than scrolling after reading a whole screen;
also most computer keyboards have page up and down keys, and many computer
mice have vertical scroll wheels, but the horizontal scrolling equivalents are rare).
When web pages are stored in a common directory of a web server, they become
a website.

Examples:
3.2.3 The first web page (1992)

7

Yahoo! (1996)

AltaVista (1996)

8

Table-based designs
Table-based layouts gave web designers more options for creating websites. The
original table markup in HTML was meant for displaying tabular data, but
designers quickly realized they could utilize it to give structure to their designs,
and create more complicated, multi-column layouts than HTML was originally
capable of.
Table-based designs grew in complexity, incorporating sliced-up background
images, often giving the illusion of a simpler structure than the actual table layout.
Design over Structure
This era of web layouts paid little attention to semantics and web accessibility,
often opting for aesthetics over good markup structure.

This was the same era where Spacer GIFs were popularized to control whitespace
of web layouts. Some major companies even educated designers about the Spacer
GIF; see Introducing the spacer GIF for use in HTML tables on Microsoft.com.
The development of the first web design applications, all of which used table-based
layouts, increased the use of tables. In addition, some of those programs created
9

tables so complex that many designers would never have created them from
scratch (such as tables with rows only 1-pixel high and hundreds of cells).
Designers had to rely on tables if they wanted to create designs that were even
mildly complex (such as multi-column designs).
In 1996, Microsoft released its first competitive browser, which was
complete with its own features and tags. It was also the first browser to support
style sheets, which at the time was seen as an obscure authoring technique. The
HTML markup for tables was originally intended for displaying tabular data.
However designers quickly realized the potential of using HTML tables for
creating the complex, multi-column layouts that were otherwise not possible. At
this time, as design and good aesthetics seemed to take precedence over good
mark-up structure and little attention was paid to semantics and web accessibility.
HTML sites were limited in their design options, even more so with earlier
versions of HTML. To create complex designs, many web designers had to use
complicated table structures or even use blank spaces .GIF images to stop empty
table cells from collapsing. CSS was introduced in December 1996 by the W3C to
support presentation and layout; this allowed HTML code to be semantic rather
than both semantic and presentational, and improved web accessibility, see table
less web design. In 1996, Flash (originally known as Future Splash) was
developed. At the time, the Flash content development tool was relatively simple
compared to now, using basic layout and drawing tools, a limited precursor to
Action Script, and a timeline, but it enabled web designers to go beyond the point
of HTML, animated GIFs and JavaScript. However, because Flash required a plugin, many web developers avoided using it for fear of limiting their market share
from lack of compatibility. Instead, designers reverted to gif animations (if they
didn't forego using motion graphics altogether) and JavaScript for widgets. But the
10

benefits of Flash made it popular enough among specific target markets to
eventually work its way to the vast majority of browsers, and powerful enough to
be used to develop entire sites.
3.3 End of the first browser wars
During 1998 Netscape released Netscape Communicator code under an open
source license, enabling thousands of developers to participate in improving the
software. However, they decided to stop and start from the beginning, which
guided the development of the open source browser and soon expanded to a
complete application platform. The Web Standards Project was formed, and
promoted browser compliance with HTML and CSS standards by creating Acid1,
Acid2, and Acid3 tests. 2000 was a big year for Microsoft. Internet Explorer had
been released for Mac; this was significant as it was the first browser that fully
supported HTML 4.01 and CSS 1, raising the bar in terms of standards
compliance. It was also the first browser to fully support the PNG image format.
During this time Netscape was sold to AOL and this was seen as Netscape’s
official loss to Microsoft in the browser wars.
3.4 During 2000—2012
Since the start of the 21st century the web has become more and more
integrated into people’s lives, as this has happened the technology of the web has
also moved on. There have also been significant changes in the way people use and
access the web, and this has changed how sites are designed.
Between 2000 and 2005, the top sites included the likes of apple.com,
msn.com, ebay.com, napster.com, forbes.com, adobe.com and microsoft.com. This
period is known for the rise of multiple navigation options. Common navigation
and organization elements included the search bar, top navigation tabs and left bar
categories. There were 70,000,000 sites at the end of this period, but mobile still
hadn’t become a web design focus area.
The top sites between 2006 and 2012 included pogo.com, reddit.com,
google.com, myspace.com, craigslist.org and mapquest.com. Log-in screens
became highly popular during this stretch—and the most common navigation and
11

Organization elements included top navigation tabs, a login screen and the
landing page. There were 250,000,000 sites at the end of this phase, and mobile
web design gained importance.
Highly curated and limited navigation has been the major theme of 2013.
Common navigation and organization elements include the login screen, landing
page and search box. Top sites on the web in 2013 include bing.com,
facebook.com, wikipedia.com, twitter.com, wordpress.com, linkedin.com and
tumblr.com. The importance of mobile web design has only continued to rise this
year.
While Internet Explorer was the browser of choice for most users for several
years, Google Chrome has now taken the lead. Firefox has also been gaining favor
among users over the last few years.
3.5 Modern browsers
Since the end of the browsers wars there have been new browsers coming
onto the scene. Many of these are open source meaning that they tend to have
faster development and are more supportive of new standards. The new options are
considered by many to be better that Microsoft's Internet Explorer.
3.6 New standards
The W3C has released new standards of HTML (HTML5) and CSS (CSS3),
as well as new JavaScript API's each as a new but individual standard. However,
while the term HTML5 is only used to refer to the new version of HTML and some
of the JavaScript API's, it has become common to use it to refer to the entire suite
of new standards (HTML5, CSS3 and JavaScript).

12

4. SYSTEM
What is responsive web design?
Responsive web design is a web design approach aimed at crafting sites to
provide an optimal viewing experience—easy reading and navigation with a
minimum of resizing, panning, and scrolling—across a wide range of devices.
Responsive is scalable. When creating responsive web design, the developer
needs only to work within one software technology and from here, the design1 can
be scaled to fit different devices. RWD is in other words a way of thinking about
design where scalable images and experiences, and not specific devices, are the
main focus. Both design and content are important factors to take into
consideration in this relation because the user’s needs when browsing a web site on
the desktop might not be the same when he visits the same site from his
phone/tablet in a new context. With RWD, content, image size, and the amount of
frames are adaptive and programmed to fit the specific screen and browser.
A site designed with RWD adapts the layout to the viewing environment by using
fluid, proportion-based grids,flexible images,andCSS3 media queries,an extension
of themedia rule.
The fluid grid concept calls for page element sizing to be in relative units like
percentages, rather than absolute units like pixels or points.
Flexible images are also sized in relative units, so as to prevent them from
displaying outside their containing element.
Media queries allow the page to use different CSS style rules based on
characteristics of the device the site is being displayed on, most commonly the
width of the browser.
Server-side components (RESS) in conjunction with client-side ones such as
media queries can produce faster-loading sites for access over cellular networks
13

4.1 Adjusting Screen Resolution
With more devices come varying screen resolutions, definitions and
orientations. New devices with new screen sizes are being developed every day,
and each of these devices may be able to handle variations in size, functionality
and even color. Some are in landscape, others in portrait, still others even
completely square.

As we know from the rising popularity of the iPhone, iPad and advanced
smartphones, many new devices are able to switch from portrait to landscape at
the user’s whim. How is one to design for these situations?
In addition to designing for both landscape and portrait (and enabling those
orientations to possibly switch in an instant upon page load), we must consider
the hundreds of different screen sizes. Yes, it is possible to group them into
major categories, design for each of them, and make each design as flexible as
necessary. But that can be overwhelming, and who knows what the usage
figures will be in five years? Besides, many users do not maximize their
14

Browsers, which itself leave far too much room for variety among screen sizes.

4.2 Flexible Everything
A few years ago, when flexible layouts were almost a ―luxury‖ for websites, the
only things that were flexible in a design was the layout columns (structural
elements) and the text. Images could easily break layouts, and even flexible
structural elements broke a layout’s form when pushed enough. Flexible
designs weren’t really that flexible; they could give or take a few hundred
pixels, but they often couldn’t adjust from a large computer screen to a netbook.

15

Now we can make things more flexible. Images can be automatically adjusted,
and we have workarounds so that layouts never break (although they may
become squished and illegible in the process). The entire design is a lovely mix
of fluid grids, fluid images and smart mark-up where needed. Creating fluid
grids is fairly common practice, and there are a number of techniques for
creating fluid images:
If resized too small, the image would appear to be of low quality, but keeping
the name of the website visible and not cropping it off was important. So, the
image is divided into two: one (of the illustration) set as a background, to be
cropped and to maintain its size, and the other (of the name) resized
proportionally.
<h1 id="logo"><a href="#"><img src="site/logo.png" alt="The Baker Street
Inquirer" /></a></h1>
Above, the h1 element holds the illustration as a background, and the image is
aligned according to the container’s background (the heading).
This is just one example of the kind of thinking that makes responsive Web
design truly effective. But even with smart fixes like this, a layout can become
too narrow or short to look right. In the logo example above (although it
works), the ideal situation would be to not crop half of the illustration or to keep
the logo from being so small that it becomes illegible and ―floats‖ up.

16

4.3 Flexible Images
One major problem that needs to be solved with responsive Web design is
working with images. There are a number of techniques to resize images
proportionately, and many are easily done.
img { max-width: 100%; }
As long as no other width-based image styles override this rule, every image
will load in its original size, unless the viewing area becomes narrower than the
image’s original width.

The maximum width of the image is set to 100% of the screen or browser
width, so when that 100% becomes narrower, so does the image.

17

4.4 FILAMENT GROUP’S RESPONSIVE IMAGES
This technique, presented by the Filament Group, takes this issue into
consideration and not only resizes images proportionately, but shrinks image
resolution on smaller devices, so very large images don’t waste space
unnecessarily on small screens. Check out the demo page here.
<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">
The data-fullsrc is a custom HTML5 attribute, defined in the files linked to
above. For any screen that is wider than 480 pixels, the larger-resolution image
(largeRes.jpg) will load; smaller screens wouldn’t need to load the bigger
image, and so the smaller image (smallRes.jpg) will load.
The JavaScript file inserts a base element that allows the page to separate
responsive images from others and redirects them as necessary. When the page
loads, all files are rewritten to their original forms, and only the large or small
images are loaded as necessary. With other techniques, all higher-resolution
images would have had to be downloaded, even if the larger versions would
never be used. Particularly for websites with a lot of images, this technique can
be a great saver of bandwidth and loading time.

4.5 STOP IPHONE SIMULATOR IMAGE RESIZING
One nice thing about the iPhone and iPod Touch is that Web designs
automatically rescale to fit the tiny screen. A full-sized design, unless specified
otherwise, would just shrink proportionally for the tiny browser, with no need
for scrolling or a mobile version. Then, the user could easily zoom in and out as
necessary.
18

Because this works only with Apple’s simulator, we can use an Apple-specific
Meta tag to fix the problem, placing it below the website’s <head> section.
Thanks to Think Vitamin’s article on image resizing, we have the Meta tag
below:

<meta name="viewport" content="width=device-width; initial-scale=1.0">
Setting the initial-scale to 1 overrides the default to resize images
proportionally, while leaving them as is if their width is the same as the
device’s width (in either portrait or landscape mode).
4.6 Custom Layout Structure
For extreme size changes, we may want to change the layout altogether, either
through a separate style sheet or, more efficiently, through a CSS media query.
The most of the styles can remain the same, while specific style sheets can
inherit these styles and move elements aroundwith floats, widths, and heights
and so on.
19

If a style sheet made the layout too narrow, short, wide or tall, we could then
detect that and switch to a new style sheet. This new child style sheet would
adopt everything from the default style sheet and then just redefine the layout’s
structure.
4.7 MEDIA QUERIES CSS3
Supports all of the same media types as CSS 2.1, such as screen, print and
handheld, but has added dozens of new media features, including max-width,

20

device-width, orientation and color. New devices made after the release of
CSS3 (such as the iPad and Android devices) will definitely support media
features. So, calling a media query using CSS3 features to target these devices
would work just fine, and it will be ignored if accessed by an older computer
browser that does not support CSS3.
<link rel="stylesheet" type="text/css" media="screen and (max-device-width:
480px)" href="shetland.css" />
This media query is fairly self-explanatory, if the browser displays this page on
a screen (rather than print, etc.), and if the width of the screen (not necessarily
the viewport) is 480 pixels or less, then load shetland.css.
New CSS3 features also include orientation (portrait vs. landscape), devicewidth, min-device-width and more. Look at ―The Orientation Media Query‖ for
more information on setting and restricting widths based on these media query
features.
/* Smartphones (portrait and landscape) ----------- */ @media only screen and
(min-device-width: 320px) and (max-device-width : 480px) { /* Styles */ }
/* Smartphones (landscape) ----------- */ @media only screen and (min-width :
321px) { /* Styles */ }
/* Smartphones (portrait) ----------- */ @media only screen and (max-width :
320px) { /* Styles */ }
The code above is from a free template for multiple media queries between
popular

devices

by

21

Andy

Clark.

4.8 CSS3 MEDIA QUERIES
Below is an example of how media queries, both from CSS 2.1 and CSS3 could
work. Let’s now look at some specific how to use CSS3 media queries to create
responsive Web designs. Many of these uses are relevant today, and all will
definitely be usable in the near future.
@media screen and (max-width: 600px) {
.aClassforSmallScreens{
clear: both;
font-size: 1.3em;
}
}

Now, with the use of max-width, this media query will apply only to browser or
screen widths with a maximum width of 600 pixels or narrower.
The min-width and max-width properties do exactly what they suggest. The
min-width property sets a minimum browser or screen width that a certain set of
styles (or separate style sheet) would apply to. If anything is below this limit,
the style sheet link or styles will be ignored. The max-width property does just
the opposite. Anything above the maximum browser or screen width specified
would not apply to the respective media query.
4.9 JAVASCRIPT
Another method that can be used is JavaScript, especially as a back-up to
devices that doesn’t support all of the CSS3 media query options. Fortunately,
there is already a pre-made JavaScript library that makes older browsers (IE 5+,
Firefox 1+, and Safari 2) support CSS3 media queries. There are many
solutions for pairing up JavaScript with CSS media queries. With the addition
of

JavaScript,

we

can

accommodate
22

far

more

variations.

5. ADVANTAGES
1. Better user experience
Users will have the same experience whether they access the website from their
desktop or from a Smartphone. The greatest benefit is that users can access the
website wherever they are and whenever they want to.
2. Single site management
You won’t have to handle numerous websites, but instead you will have to abide
the maintenance cost of just one mobile-friendly site. Responsive website will
surely make you save money from managing several websites.
3. Single-view analysis
In just one view, you can scrutinize the statistics of the site traffic instead of
making some custom adjustment for mobile only traffic.
4. Easy viewing of socially shared sites
A responsive web design makes sharing the website on social networks easy. It
also makes it feasible to view the mobile optimized version of a socially shared
website while using a desktop.
5. Keep on connected to the hottest trend
Responsive web designing is the hottest trend of the web world. It’s the need of the
end users, so avoiding this isn’t possible at all. A website having a responsive web
design will surely appeal to the prospects and customers, so responsive web design
is the best approach to have more sales.

28

6. DISADVANTAGES
1. Necessitates a redesign of your website.
With the intention of implementing Responsive Website Design (RWD) on a
website we have to use a simple adaptive website layout and that usually requires
going through major redesign of existing web site.
2. It takes time
If you want your website to be launched at an earlier period of time, responsive
web design cannot be the best choice as it takes additional time as well as effort.
The usual time of creating a responsive web design is usually 10% more than the
time required for a typical website. Yet when using Content Management System
(CMS) and frameworks the development of a responsive website will be finish
earlier but still it depends to the developer.
3. Your mobile traffic is less than 5%
If your website is receiving less than 5% of mobile traffic, then going for a
responsive web design is not a wise choice; it is better to utilize your budget
somewhere else.
4. It doesn’t mean to be one-size-fits-all
Through a responsive web design you are not creating a website for every design,
but for screens of different sizes. There might be some devices lacking fully
optimized experience for the site users.
In my own opinion I believe that RWD is very helpful in driving traffic to your
websites since most of the people today are using iPad, tablets and other mobile
devices in surfing the internet.

29

7. FUTURE OF RESPONSIVE WEB DESIGN
The next generation of responsive web design: RESS

Luke W. coined the term RESS in one of his blog posts a couple of years ago, and
outlined some of its main benefits. Loosely defined, RESS is a responsive website
with server-side detection built-in, meaning the server will detect what device is
coming to the website and deliver an appropriate experience to that device (note:
RESS has also been referred to as ―adaptive design‖ as well – both terms fit the
definition above). A responsive website consists of tons of complex code, and
instead of delivering all of this code to every website visitor; RESS will deliver
specific code and specific image sizes optimized for that visitor’s device. This
allows a responsive website to load much faster on different devices, and also
improves user experience.
Why is it the Future?
Sure, all of this ―server-side‖ tech-speak may sound cool and innovative, but what
are the real benefits and why does it represent the next generation of responsive
design?
30

While there are many benefits to current responsive design, there are a number of
drawbacks as well. I would say the two biggest drawbacks of traditional responsive
design are:
1. Long load times on smartphone and tablet (can be anywhere around 15-30
seconds)
2. Difficult to deliver device-specific call to actionswith RESS, both of these issues
are solved.
Without server-side detection, smartphone and tablet devices are forced to
load the entire code-base of a responsive website, which takes them significantly
longer due to their smaller processing capabilities and sometimes slower
connection speeds. Imagine having a large pile of mulch in your driveway and
needing to move the whole thing yourself with a shovel and wheelbarrow, when
you should be using a pickup truck.
That’s exactly what your smartphone is doing when trying to load an entire
responsive website code-base. With server-side components, the server will detect
that a smartphone is coming to the website, and serve up a much smaller code base,
one that fits perfectly into your ―wheelbarrow‖. Not only will a mobile user be
served less code, but images will also be smaller in size so that load times are
minimized.
A typical desktop image is usually 1-2MB, when on mobile that image
should be 200-300KB. This image will still look crisp; you just don’t need as many
pixels

for

the

smaller

31

screen.

RESS also gives you the opportunity to provide more specific experiences
based on the device. Because the server is delivering a different code base, you can
offer more effective content, calls to action and navigation. For example, a
smartphone user might not be interested in downloading a full white paper, but
they may be likely to sign-up for your newsletter. Or, if you’re a university, you
may want to prioritize a ―campus map‖ link on mobile, but drop that lower in your
navigation for desktop users. Swapping out CTA’s and reordering content will
enable you to create more effective and more engaging web experiences across
different devices – and RESS enables you to accomplish this more easily.
How You Should Be Using RESS
RESS is not necessarily a new method of web design. It’s more of a best
practice for responsive web design, and should be considered with any website
32

redesign. At a minimum, you should be using RESS to adjust image sizes
based on device; this will significantly improve your load times across all devices.
Beyond load times, RESS gives you the ability to deliver more specific
experiences to each device user, whether that is simply using a different call to
action, or rethinking your content for different devices. Creating experiences more
tailored to different devices can greatly improve your website’s usability, and with
RESS, you can do that while still having your website live less than one URL,
which makes it easier for Google and other search engines to index and thus, rank
higher on searches.
RESS has such great potential because it really takes into account user
experience. Simply making your site responsive doesn’t mean users will have a
better experience. If your site takes 30 seconds to load on mobile, how many users
will really wait that long? No matter which approach you take to build your
website, you ultimately want your users to have a positive experience across all
devices. RESS enables you to focus on user experience more effectively, which is
why I think it is the future of responsive web design.

33

8. CONCLUSION
We are indeed entering a new age of Web design and development. Far too
many options are available now, and there will be far too many in the future to
continue adjusting and creating custom solutions for each screen size, device and
advancement in technology. We should rather start a new era today: creating
websites that are future-ready right now. Understanding how to make a design
responsive to the user doesn’t require too much learning, and it can definitely be a
lot less stressful and more productive than learning how to design and code
properly for every single device available.
Responsive Web design and the techniques discussed above are not the
final answer to the ever-changing mobile world. Responsive Web design is a
mere concept that when implemented correctly can improve the user experience,
but not completely solve it for every user, device and platform. We will need to
constantly work with new devices, resolutions and technologies to continually
improve the user experience as technology evolves in the coming years.
Besides saving us from frustration, responsive Web design is also best for the user.
Every custom solution makes for a better user experience. With responsive Web
design, we can create custom solutions for a wider range of users, on a wider range
of devices. A website can be tailored as well for someone on an old laptop or
device as it can for the vast majority of people on the trendiest gadgets around, and
likewise as much for the few users who own the most advanced gadgets now and
in the years to come. Responsive Web design creates a great custom experience for
everyone.

34

9. REFERENCES
RWD: http://en.wikipedia.org/wiki/Responsive_web_design
Kayla Knight:
http://coding.smashingmagazine.com/2011/01/12/guidelines-forresponsive-web-design/
Responsive Web Design, A List Apart
CSS Media Query for Mobile is Fool’s Gold, Cloud Four
Designing for a Responsive Web with Heuristic Methods, Design
Reviver
Examples Of Flexible Layouts With CSS3 Media Queries, Zoe
MickleyGillenwater
The Big Web Show #9: Responsive Web Design, 5by5 Studios
How to Use CSS3 Media Queries to Create a Mobile Version of Your
Website, Smashing Magazine
Application: Rapid Prototyping of Adaptive CSS and Responsive Design,
ProtoFluid

35

RESPONSIVE WEB DESIGN

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to RESPONSIVE WEB DESIGN

Similar to RESPONSIVE WEB DESIGN (20)

Recently uploaded

Recently uploaded (20)

RESPONSIVE WEB DESIGN