info@paripoorna.in    |    +91 44 43626468 / 78 /  88    

Responsive Web Design For Better User Experience

Here’s how moving to responsive web design brought about a boom in our most valued customer’s business

Customer Challenges

Customer’s business demanded that they improve their website’s user experience on all devices. With the burgeoning smart phone users, it made sense to optimize and make their website responsive since

  • It was getting difficult to navigate in a mobile view
  • Too much of scroll, pinch and zoom were required
  • Images did not fit the screen
  • Users were experiencing slow loading time
  • Needed to improve the Google ranking of the website

Our solution

Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it. RWD is one approach to the problem of designing for the multitude of devices available to customers, ranging from tiny phones to huge desktop monitors.

The same HTML is served to all devices, using CSS (which determines the layout of webpage) to change the appearance of the page. Rather than creating a separate site and corresponding codebase for wide-screen monitors, desktops, laptops, tablets and phones of all sizes, a single codebase can support users with differently sized viewports.

In order to provide the customer with a holistic solution we had to address the following

  • Speed, because performance affects everyone.
  • Accessibility, since it should work with no styles, backgrounds or JavaScript.
  • Content parity, as the same content and functionality should be on all platforms.
  • Device-agnostic, so as to leave no platform behind.
  • Future-friendly, in order to cut down on maintenance.
img

Solution Methodology

We used analytics data from the previous website, using Google Analytics, to help us better understand what existing users wanted and needed from the website. As a result, we were able to streamline and prioritize a content strategy based on how the users actually interact with the website.

google_analytics
img

We put the speed of the website at the heart of all design and technology decisions. The advantage is that a better performing website would benefit all users, not just mobile users

We replaced heavy social-media plug-in with lightweight social media links.

social_media
img

To further improve the speed of the new website, we loaded the JavaScript only when it’s needed or supported. We achieved this by using RequireJS to ensure that JavaScript is loaded only after checking that JavaScript is available in the requesting browser and that the browser only loads scripts it can support.

In order to deliver a truly responsive design, we delegated all styling and display tasks to the CSS alone, using JavaScript to simply alter the “status” of elements by adding and removing CSS classes, as opposed to hiding and showing the elements with JavaScript directly.

google_analytics

For the breakpoints, we used multiple CSS media queries to responsively deliver the optimal presentation of content to screens both large and small. This device-agnostic approach ensures that we do not need to optimize the code later when other devices come to market.

Multiple media queries can also be dropped right into a single style sheet, which is the most efficient option when used:

/* 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 */
}

Business Benefits

  • The responsive web design enabled the customer to make sure that the website looked and felt great no matter how the user or potential users were accessing it.
  • It made it very easy for Google to index their website so that it shows up near the top no matter what format a user is searching from.
  • As it was just one website that adapts to the format it’s being viewed on, there was only one website that needs to be updated. There by easing the maintenance time and cost.
  • It gave the customers a competitive edge having a responsive website that worked great in all platforms.
brandAccelerator_Responsive

Similar stories

Tell us a little about yourself, and we'll be in touch right away

GET IN TOUCH