TECHNICAL REPORTON

RESPONSIVE WEB DESIGN

SUBMITTED

BY

N.NAWAZ KHAN

IV B.Tech, C.S.E

(103P1A0548)

Department Of Computer Science and Engineering

PRIYADARSHINI INSTITUTE OF TECHNOLOGYRAMACHANDRAPURAM, TIRUPATHI-517561

2013-2014

1

TECHNICAL REPORTON

RESPONSIVE WEB DESIGN

SUBMITTED

BY

N.NAWAZ KHAN

IV B.Tech, C.S.E

(103P1A0548)

Department Of Computer Science and Engineering

PRIYADARSHINI INSTITUTE OF TECHNOLOGYRAMACHANDRAPURAM, TIRUPATHI-517561

2013-2014

Coordinator Head of the department

INDEX

CHAPTER NO

1

2

3

4

5

6

7

8

9

TITLE

ABSTRACT

INRODUCTION

HISTORY

SYSTEM

ADVANTAGES

DISADVANTAGES

FUTURE VISION

CONCLUSION

REFERENCES

PAGE NO

1

2

5

13

28

29

30

34

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 web

design, there are numerous alternative web pages that have an improved rate

connected with visitors.

Quite simply, web design is definitely considerably of importance to a web page

3

Apart from the web design, 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 web design.

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, text-

based 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 plug-

in, 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, and CSS3  media queries, an

extension of the media 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.

13

4. SYSTEM

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 around with 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), device-

width, 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 Andy Clark.

21

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 far more variations.

22

PPT SLIDES

PPT SLIDES

PPT SLIDES

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 actions with 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 screen.

31

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-for-responsive-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 Mickley Gillenwater

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