Responsive Web Design - Is your website ready beyond the desktop?

Recent studies of online browsing patterns suggest that site visitors are using a multitude of devices these days to browse websites. These can vary from desktops, laptops, netbooks to tablets (iPad, Kindle, eBook Readers) & Smartphones (iPhones, Android, BlackBerry). These studies also highlight the future growth of mobile devices. According to numerous sources, the future of the web will rely heavily on mobile devices, instead of desktops and laptops.

For professional websites, multiple versions are being developed to suit these devices. Yet the number of new devices with unique configurations (screen sizes and resolutions) is rising on a daily basis, thus making it unfeasible to keep investing in newer versions of these websites in order to achieve maximum reach.
 
Latest research in the field of website development and design has led to what is called “Responsive Web Design”.

What is Responsive Web Design?

Responsive Web design is the latest “need-based” innovation in the domain of web site development & publishing. The core idea is to design and develop web sites and applications that are sensitive to the user’s behavior and environment based on screen size, platform and orientation.
 
In technical terms, it involves mixing flexible grids and layouts, images and some technology features such as CSS media queries and their intelligent usage. A user switching from a laptop to an iPad or iPhone would see different versions and layouts of the same site optimized to his screen size / resolution / image size and scripting abilities.

The Benefits of Responsive Web Design

Responsive Web design detects the medium where the site is currently being displayed in order to provide the best experience possible to the user in terms of navigation and readability. This eliminates on a larger scale, the requirement for different designs and development phases for each new gadget on the market and also enhances usability for very visitor to the site.

Some of the benefits:

•  Use one site to deliver an excellent experience to virtually any device that visits your site

•  Reduce initial development costs

•  Reduce maintenance costs. Less updates to the design will have the effect of driving down development costs of your site

•  Enhance user engagement and experience

How we can Help

Some of the approaches that our design team are working on at present include the following:

• Development of Liquid & Elastic Layouts

• Context Aware Image Sizing (e.g. Fluid Images) via hiding & revealing portions of images,sliding composite images & foreground images   that scale with the layout

• Using CSS 3 Media Queries & JavaScript based device polling techniques (this collects data about the visitor and utilises it to apply CSS styles)

• Showing or Hiding parts of content based on the available screen dimensions

At Monsoon Consulting, we are constantly upgrading our technology capabilities & solution deliverables. This enables us to help our clients extract the maximum benefits from their investments. As part of the same endeavor we are exploring Responsive Web Design solutions and we look forward to offering this as a standard feature soon.

Some Useful Tips

When designing a responsive website, there are a number of important factors that need to be considered:

1. Key information should always remain visible to users without having to
   scroll. This will help reduce the probability of users abandoning the
   site early
2. Text must be easy to read.
3. The size of clickable links and buttons will need to be evaluated when
   designing websites for smaller devices. This is especially true for
   touch screen devices. Research has confirmed that fingers are not as
   precise as the conventional mouse cursor.
4. Avoid using too many images, as this will have the effect of increasing load times on small devices.
5. For examples of Responsive Web Designs, please click here

If you have any questions, please feel free to ask them in the comments section below.