Your SlideShare is downloading. ×

RESPONSIVE WEB DESIGN

847

Published on

A TECHNICAL REPORT ON RESPONSIVE WEB DESIGN …

A TECHNICAL REPORT ON RESPONSIVE WEB DESIGN

BY
N.NAWAZ KHAN
PDIT
TIRUPATI

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
847
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 1
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. Yahoo! (1996) AltaVista (1996) 8
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. 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
  • 23. 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
  • 24. 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.
  • 25. 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.
  • 26. PPT SLIDES
  • 27. PPT SLIDES
  • 28. PPT SLIDES
  • 29. 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
  • 30. 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
  • 31. 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
  • 32. 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.
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. 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

×