Responsive Web Applications: Industry Insider’s View
Responsive web applications work equally well on a variety of devices and screen sizes. Similarly, the term responsive web design refers to the web design that renders well, without any distortion, on all devices and screens.
Responsive design is the need of the hour. As you all know, the mobile and tablet use is on the rise and, it seems, it will soon be pervasive and will replace desktop computers and laptops to a large extent.
Now, this raises one very important question for the websites and web application developers:
What approach should they follow to cater to the emerging need for responsive design in both websites and web applications? There are different answers to this question depending upon the approach you use to tackle the responsiveness challenges.
I will give a brief overview of the two approaches to responsiveness in websites and applications and will share the relative merits of each approach. I will conclude the article by sharing how we handled the responsiveness challenge for our web application Nimbus RMS.
Let’s get started!
Different Websites for Different Devices and Applications
One simple solution, already used by many businesses, is to use different websites for desktop and mobile users.
Generally speaking, two different methodologies, Progressive Enhancement or Graceful Degradation, are used for creating multiple device-specific websites.
In the case of Progressive enhancement, we design for the smaller screens. And, as bigger real estate is available in the shape of laptops and desktops we provide more features and functionality. Graceful degradation works exactly in the opposite manner. First, the development is carried out for the bigger screens and then it is simplified for the smaller devices.
Challenges of the multiple websites Approach
First, there is the question about the device which is in the middle of these two, I mean the tablet. Would one of the websites (for mobile and desktop) work for it?
Next, for multiple websites approach you also need to factor in the cost of development. For websites development, the cost is relatively less as it mostly involves providing more content for desktop sites and reducing the content for smaller screens.
However, for web applications, where we have to offer business functions, the cost of maintaining two websites is comparatively more.
Finally, the above approach also creates the challenge of managing different URLs. The desktop and mobile versions of the pages will also need to re-direct. This means if a mobile user gives the URL of a desktop page, s/he should be redirected to the mobile pages. Similarly, if a desktop user enters URL for a mobile site, s/he should be redirected to the desktop version of the desired page.
Now let’s have a look at the other approach.
Responsive Applications and websites
This approach involves creating a responsive design meaning there is usually one website or web application and the output adjusts itself according to the size of the screen. Responsive application approach has its own challenges but the biggest advantage is that the application adapts to the size of the viewer’s viewport.
Tools & Technologies and LumenSoft’s Experience
Many tools and technologies are used for creating a responsive design. Since the scope of this writing is only an overview without the use of technical jargon, I will only discuss these options broadly without going into technical details.
Responsive design can be implemented by front-end developers using media queries, and this design will vary from one designer to another. Also, with the introduction of new devices, the application may encounter problem in upgrades.
Regarding tools, one of the tools for the implementation of responsive design is called Bootstrap. This technology is getting popular and is, in my personal opinion, one of the best available solutions for the design of responsive websites and web applications.
When we built our point of sale (POS) web application it was initially made responsive by use of media queries without using any framework like Bootstrap. This approach provided greater flexibility in design and the look and feel were excellent. But later, we had to change our application to Bootstrap to make it rugged and it also reduced the application maintenance effort. As a tradeoff, we lost some design flexibility.
One of the examples of responsive page design is on our product website. If you look at the URL: https://www.nimbusrms.com/pricing/ you will notice the responsiveness of this page on desktop and mobile.
As far as responsive design for websites is concerned, the content should be carefully optimized and loading time of the page should be monitored since the internet speed of mobile is usually limited. But for web applications, it’s the availability of the functionality and user experience. Further, on some of the complex pages, we can provide limited functionality to the user and expose the hidden functionality with a button or a link.