You might have heard the terms ‘responsive’, ‘fixed width’, ‘liquid content’ being thrown around by developers and tech savvies, this must have made you wonder what these terms have to do with an actual website? As a businessman, you might wonder what impact do these terms have on the cost of your business if you were looking for a web solution. What is a responsive design? Is it better than an adaptive web design? Let’s find out!
The arrival of smartphones a few years back, and the sudden boom in their use posed a whole new challenge to web developers. Before, they used to design the layout of the web site for standard PC screens which were almost similar. Webpages were developed that had a fixed width and did not resize or budge on different view ports. Piece of cake! Now, alas, they had to deal with a diverse number of screens, ranging from large monitor screens to tiny smart watches and also keeping in mind the complexities that have recently became an integral part of a website/ web app.
Today, it is widely accepted by organizations that designing a website with multiple screens and dimensions in mind is one of the most important factors for a successful project. Limiting the design to exclude mobile phones or other viewing devices is not at all advisable, since more and more people rely on using the web on their smartphones. If the same ‘fixed width’ design were to be practiced, it would mean the user would have to zoom into each webpage to read the text and scroll horizontally to view the entire web page again and again. Sounds tiring, doesn’t it?
Adaptive and responsive web designs aim to cater the issue of viewing on different devices specifically, each in their own way. Both offer solutions and options to web designers and developers as to how they can execute and develop their design with perfection.
The concept of responsive web design has been around as early as 2001, when Audi launched it’s website on which the content could dynamically adapt with the browser. Even though it was ‘responsiveness’ at it’s crudest, the web site became quite popular and paved way for other developers to try the technique as well. It was not until 2010 that the idea of Responsive Web Design was formally recognized Worldwide, when Ethan Marcotte aptly named it on an online article. In the years that followed, its popularity simply quadrupled.
Responsive designing aims to make the viewing of websites easier to navigate and use on different devices and view ports. To put in a nutshell, this designing technique uses flexible layouts, flexible images and media queries to allow websites to adapt to any screen size. Unlike other approaches, responsive design does not require the designers to design multiple versions of their website; in fact, only one design is implemented on different view ports.
When the browser size is at 100%, for instance, the web page may have four columns and a banner that spans the entire width of the page. If you resize it to 50%, the webpage may have been set to display the same banner, but resized, and only two columns. The content simply slides to adjust to the change in screen size, allowing the designer to set up the placement of the content for different view ports. Websites created using responsive design are programmed to display different content as the browser is expanded or reduced, dynamically
The ‘responsiveness’ is not only limited to the content or it’s placement on the website; different quality of photos and videos are downloaded on a responsive website, depending on the quality of internet that is being used. A lower resolution video will play on a slow internet connection and the same HD version of that video is played when the internet speed allows it. This allows seamless browsing without any delays in buffering etc.
Implementing a responsive web design is not difficult. Only one design is required; the rest is up to the developer to put up media queries and use the proper CSS classes. But, a good concept of the whole project and an in-depth knowledge of the needs of the customer is very much necessary.
– Great user experience: Because of its fluid nature, responsive web design results in a great user experience. The content can be enjoyed as much on your mobile phone as you would like it on your PC. The content is readable, well positioned and seamless, giving an overall excellent UX.
– Perfect for SEO: The biggest boost in terms of SEO was observed when Google announced that it would be giving priority to responsive websites. Makes sense since it makes it easier for Google to deal with content that does not repeat itself for every other device. Moreover, all social sharing links can be collected through a single URL address on a responsive website.
– Easy to implement(comparatively): What with the readily available templates on WordPress, Joomla etc., all responsive, you can get started with creating your own responsive website in no time at all!
– Saves Cost: From the point of view of the developer, their work is reduced since they have to work on a single design and work on it, rather than developing separate designs for each kind of device (smartphones, tablets, PC’s). The maintenance cost is also reduced for the same reason.
– Misplaced advertisements: Obviously, the web site is not designed and developed with a lot of emphasis on the advertisements at that stage. Adds are mostly added afterwards and this poses a problem on a responsive site. The advertisements may be showing in the correct position on your PC, but most probably would be misplaced on your tablet or smartphone.
– Compatibility issues: There is no problem on most of the browsers (Mozilla, Chrome, Safari etc.), but there are issues reported on some of the older versions of Internet Explorer. These include IE6, IE7 and IE8. The content does not load properly and sometimes the images and videos are not displayed when the page is refreshed. You might want to think of an alternate web design if your users use these versions of Internet Explorer.
– Takes time to design: Planning the overall responsive structure (and that too for multiple devices) requires time and brains. Prototypes need to be designed and tested, designed and tested and on and on until the final product is achieved that satisfies the developer and the customer alike. The process becomes lengthier when an existing site has to be made responsive, as each class in the style sheet has to be scrutinized and changed accordingly. So, it’s always recommended to start your responsive website from scratch.
Adaptive design was introduced around the same time when responsive websites were gaining popularity. Aaron Gustafson, a brilliant web designer, coined the term in 2011 in one of his books “Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement”. He described adaptive web designing as a progressive enhancement of a website that allows viewing of a site possible on every available device.
Both adaptive and responsive design cater to the same problem, but in completely different ways. Whereas responsive designing is fluid and fits in the available screen size, adaptive web design works by creating fixed, multiple designs for different screens. The device browser detects the current screen size and then selects the most appropriate layout to be displayed. This means that whichever device you browse the website from, the best layout would be automatically displayed.
For example, when you open an adaptive website on your laptop, the browser checks the available width/size of the screen and chooses the most appropriate design for that. The designs are fixed in nature and resizing the browser has no effect on them whatsoever. Usually, the layouts are designed different for every device, unlike responsive design where only one design was made to slide over different view ports.
It is common while developing an adaptive web design to make at least six designs for the most common screen sizes. So, it’s no surprise that it requires more effort, more labor and is thus costly. Many big organizations including Apple and Amazon have implemented adaptive designing for their websites to provide a fully optimized user experience. One thing you will notice about these websites is that the layout displayed on a desktop would be different than the layout on your smart phone (which is the whole point, of course).
– Best user experience for the appropriate device: Since the design does not flow to adapt to the different screens, there is no discrepancy in the layout. The user is able to enjoy the most appropriate design that is available for their device.
– Optimized advertisements: Designers have the option to better optimize the advertisements displayed on adaptive websites. Different sized adds can be added in the designing stage so that they can be displayed appropriately and subsequently more money can be charged for them.
– Less loading time: Since only the required media is transferred depending on the device, adaptive web allows the content to load faster.
– Complex designing and development: As mentioned above, almost six designs are created for different view ports which makes the whole process complicated. A lot of manual work and time is required to develop all the designs, not to forget that each design that is deployed has its own unique URL associated with it, making things messier.
– Internal Linking: It becomes a problem when you have different versions for your website and you have to internally link them correctly in a way that each version is linked to the next page of that same version. The developer has to practice extreme precaution so that the user of the mobile version does not redirect to the PC version of that site when they click any link and so on. As you increase the number of designs, the linking becomes more and more complicated.
– SEO issues: Creating different versions of the same website means that each design has its own URL. This is not something that is appreciated by search engines as they have trouble identifying and classifying identical sites. This can mean an overall decrease in the amount of traffic to your website.
Responsive or Adaptive?
It is safe to say that responsive design is much easier to develop and deploy than an adaptive design which makes it the preferred method by the majority for website development. But that does not mean that it’s always the perfect choice.
Due to the ready-made responsive templates offered for free (or very cheap), many novice developers prefer to use responsive web design. The amount of work that is required to build a website from scratch is drastically decreased and is deployed in a very short time. Adaptive, on the other hand, requires a whole team of professionals that are at the top of their game and they carefully build the website version by version and obviously the maintenance requires the same dedication and effort.
Adaptive designing is complex, it is complicated and it is expensive. But if you are looking to reach the maximum audience, specially the mobile phone users, then adaptive is the better option. There are many phones that have problem displaying a responsive website because of compatibility issues and this is where an adaptive design comes in handy. You can design a version for any device using adaptable approach so that no user gets left out from viewing your site in the best possible way.
All in all, when choosing the right web design for your project, the most important thing to consider is the type of audience that you are encountering. Once you have made sure who your end users are and what devices they prefer to use and the type of content that they want to see, it becomes easier to implement the method that can benefit you more.