What it Takes to be Truly Responsive?

Responsive websites that cascade into various layouts as and when users resize their browsers are “in” at the moment. But what does it take to be truly responsive?

Responsive web design is aimed at providing users with an optimal viewing experience. It should be easy to navigate and read with minimum scrolling, panning or resizing, across various devices. Even though 2013 was called the Year of Responsive Web Design, many professional websites still lack in the responsive part. They may look great on a laptop or desktop computer, but their landing pages aren’t optimised correctly for mobile devices. This often results in lost visitors.

Besides, Google is favourable toward a “responsive web design” and conforming to their guidelines will aid your SEO efforts. According to the search giant, a mobile-friendly website is “a critical part of website management.” This totally makes sense as more than 3 billion people are now accessing Internet via mobile devices. It is imperative to have a truly responsive website to increase your business’s reach.

Mobile Website: What you Need to Know

According to Google Developers, you can break down a mobile website into three areas:

  • Responsive: Your website uses the same HTML and CSS configurations for all platforms, which is free of redirects and preferred by Google.
  • Dynamic: Google recommends using “the Vary HTTP” in header for different HTML configurations for different screens. Websites using a hidden URL can let the search engine know where to find them using this method.
  • Separate Mobile/Redirect: You can send your mobile users to a different URL. However, you need to establish a “bidirectional link annotation” to show the relationship between the other URL and your domain.

If you are looking for a simple and effective way to design your website, “responsive” is the answer. Not just because there are hundreds of responsive templates available for different platforms, they also come with certain unquestionable SEO benefits.

The opportunities in respect to web designing are immense; however, the approach to how to deal with them makes a great deal of difference. In fact, it is essential to understand that not all “mobile” website are responsive.

Is Your Website Responsive or Adaptive

Both responsive and adaptive web designs aim to provide optimal user experience across various devices. While responsive web design is based on the principle of flexibility, adaptive design follows the concept of progressive enhancement.

Adaptive design arranges your content into various fixed templates depending on the type of device. It detects the device and its specific features and accordingly provides feature and layout that match the predefined characteristics. At its simplest form, adaptive design transforms a three-column desktop version into two columns on a tablet and one on a smartphone.

Adaptive design not only accommodates the resolution of a screen, but also its pixel density and size. As a result, a designed-for-desktop image would be too small on the iPad and users would need to increase its size to view it comfortably. However, these websites tend to have a faster load time.

The drawbacks include a lack of consistency across devices and platforms. And it is impossible to design for every screen resolution, browser window size or device.

This is where you need responsive design.

Responsive design is based on the principle of flexibility. It is called fluid design at its simplest form, based on flexible grids, media queries and responsive images. The design aims to create an optimal user experience that is consistent across various devices.

Instead of converting a three-column design to two/one column, responsive design splits a two-column grid into 50:50 or 70:30 ratio, irrespective of the screen size. The images, videos or text used in the content resize automatically. However, it has slower load time compared to adaptive design.

Becoming Truly Responsive

We earlier said that a responsive design is a fluid design. But that’s only half true. A truly responsive web design is fluid as well as adaptive. A fluid design alone cannot provide optimum user experience. A three-column grid website, for example, is likely to be unreadable on a mobile phone. You will need a series of adaptive templates for different types of devices. You also need to consider how the user is holding the device.

The templates you need include a smartphone/tablet portrait, smartphone/tablet landscape and desktop. And each of these adaptive templates must be fluid to allow for flexing resolutions, pixel density and screen sizes across various devices.

Core Concepts

At the heart of a truly responsive design lie three key technical features:

  • Implement media queries & media query listeners by
    1. using the @import rule
    2. putting them directly in the style sheet
    3. including a query in the media attribute of a linked style sheet
  • Use a flexible grid-based layout by applying relative sizing
  • Use flexible images and media via CSS or dynamic resizing

To have a truly responsive design, you need to implement all three features.

The secret behind a truly responsive design is adapting to the device capabilities and user’s needs. It is therefore important to understand the needs of different users and cater to them. For instance, to provide optimum experience to a user who will be viewing your website on a smartphone i.e. a small screen, you need to think beyond adapting your text and media files to the particular screen size.

It is imperative to consider what that user is looking for when visiting your website from a mobile device and accordingly lay out the content. This might require you to present the content in a different order as well as change the fonts and/or interaction areas to better respond the touch environment.

All these factors define the characteristics of a truly responsive website.

If you are not sure about your website being a responsive one, there is a simple way to find out. Load you website into a desktop/laptop computer and then check it out on your tablet or smartphone. Remember the viewing experience must be consistent. If you see any differences, it’s time to approach your designer.

In Conclusion

The display landscape is constantly changing, with smartphone screens and desktop monitors becoming larger, laptops getting smaller, and tablets staying roughly the same size. You cannot disregard any of these segments. It is essential to serve all of them and responsive gives you the freedom to be innovative with your display across devices.

Last Updated: Sun Apr 3 12:25:43 2016

App Friendly

Angry Frog! Content Management allows you to manage the content in your smartphone app from the same place you manage the content in your website.

Developer Friendly

Web designer productivity is a key focus for Angry Frog!, with our own large team of web designers/developers using the system daily as well as you.

Marketer Friendly

Login, blog, import your list, start mailing, it really is that easy. Create emails in seconds, measure results, make money.