In the recent years there has been a tectonic shift in the behaviour of the users. Thus it should come as no surprise to read that 30 % to 50 % of the website traffic is now generated by mobile devices.

You may have come across the term ‘post-PC world’ in some or the other article. It is the massive change in the behaviour of the users is what they are referring to. Thus it is highly likely that the desktop and laptop will one day be a minority on the web.

We are currently at a place where a great number of websites being built are that for both the desktop and mobile platform. Such websites are being built using the design techniques like responsive and adaptive. By using such techniques to build the websites the designers can be sure besides being able to view their websites in the most popular way, computers and laptops, they will also be viewable on mobile devices. In addition to that the website will also be easily viewable on the new mobile devices that are expected to be released.

There are three popular approaches that web designers use to make such websites and they are:

1. Responsive designs
2. Client side adaptive designs
3. Server side adaptive designs.

This article takes a look at each one of these web designing techniques in more detail.

Responsive Web Design:

One of the most common and popular approach used for website design these days is responsive web design.

1. Responsive web design makes use of CSS media queries to modify the presentation of a website based on the actual size of the device display.
2. Responsive website design has taken off in a big way and the number of websites using it are on the constant rise ever since it was introduced.

Advantages:

1. Responsive design in that it makes use of popular web development technologies like HTML and CSS.
2. Reduces the work pressure on the website designer since a single template can be used for all the platforms and devices.
3. Once the common design is prepared the web designers simply make use of CSS to determine how to render the content on different screen sizes.
4. Since responsive has grown very popular, there are now many different open source toolkits available, like Bootstrap and Foundation. These toolkits can further simplify the process of building responsive websites.

• The responsive web design in simply fabulous for making new websites, but what about the organizations who already have a website and have the need to convert it into a responsive website. Unfortunately there is no short cut to making a good and decent responsive design. The only solution is a complete redesign.

• The design and testing phases of responsive website development are not well defined. This is essentially a mobile first approach. Special care needs to be taken while building a responsive layout making sure that the design elements used ( images, multimedia etc.) will appear good when views from a mobile device. In fact there are certain fancy desktop designs and features that cannot be used since a common website is being built for both mobile and desktop platforms. A responsive website is first developed keeping the mobile screens and limitations in mind and then enhanced to address the other platforms like tablets and desktops.

• Another factor affecting the responsive web design is the performance issue. Since one common website is being built for several different platforms and screens the layout developed using responsive design tends to get quite big. The elements for each of the different platforms need to be loaded even on the mobile device. The average mobile user is not that patient. Since mobile users will generally be on the go, they will simply drop the website and move on to the next one if it takes a long time to load.

• Thus though responsive design in gaining in popularity the web design community still faces many challenges to improve the performance of such websites.

Client Side Adaptive Web Design:

1.  Adaptive website design is based on the principles of the responsive web design to deliver a good user experience over the targeted devices and contexts.
2. JavaScript is used extensively to enrich the user experience by adding advanced functionality and customizations. For example it has the ability to deliver Retina display quality to only the Retina displays and standard definition display to the other lower quality displays.
3. When the adaptation occurs on the client side, in the user’s browsers it is called Client-Side adaptive design.
4. The main advantage of using client side adaptive website design is its ability to reuse the HTML and JavaScript design across several different devices by simply changing the management and testing.
5. Another big advantage of the client side adaptive website design being that unlike a responsive design you do not need to rebuild the website from scratch.
6. You can make use of the existing website and content and still convert it into a mobile responsive layout. This approach also enables the web designer to target specific devices and screen resolutions, although they also require an advanced skill set and is generally for expert developers.

For example if your website analysis reports states that more than 90% of your users are clients with iPhones (which is true for many), then the client-side adaptive design enables you to optimize the website specially for Apple iPhones.

Server-Side Adaptive Web Design:

• The server-side adaptive web design can be achieved in many different methods. For example via server side plugins and by using custom user agent detections techniques. There are many website that are already making use of this technique.

• There are several different advantages of using server-side adaptive web design. With this technique, a different template is used for each device, thus providing more options for customization. With this technique the device detection logic remains on the server itself resulting in smaller mobile pages that load very fast.

• Online web development make use of many different open source software for building the websites. Many of those software already have the necessary plugins needed. Once such open source software is Magento.

• On the other hand the server-side adaptive web design means significant changes to many back end systems. Such changes not only consume a great deal of time, but are generally costly to implement as well. The fact that the designs demands the use of multiple templates is a big factor that raises the cost of the website as well as the maintenance costs. In addition to which since this is a server side feature, there could be potential server load issues and the website may not perform well in heavy load conditions.

Conclusion:

Thus although there are a few options for the web designer when it comes to selecting the designing technique to make websites that are viewable across multiple platforms, there are not many who dare to adopt the adaptive approach, responsive web design being the more popular one. Though as more organizations opt for one of the three approaches, they do so based on which one will work best for them.

Alakmalak is one Website design and development company that understands these new techniques very well. They are fully aware of pros and cons of using each one the techniques and furthermore have the technical ability to implement them. This is one company that has more than 2000 projects under its belt, for clients from all around the world and is still going strong. With such experience and ability they are in a very good position to advice the clients on which approach is best for their business.

 

• Responsive vs. Adaptive
• responsive website development
• Web Designing