Front Digital

Responsive Design vs. Cross Device Compatibility

The number of users accessing the web with devices is increasing. This means further design considerations are necessary to achieve an optimum user experience. But what is an optimum experience? It can be hard to tell when the difference in web experiences varies so greatly. From smart phones, tablets, and e-readers to laptops, desktops and larger high definition screens.

For instance, someone using an iPhone will have approximately 4-inches of touch screen real estate. A Kindle user however, may access content via its 6-inch E-ink display; black and white without touch sensitivity. Compare these experiences to that of using a 27-inch desktop screen complete with a keyboard and mouse. Can you spot the problem? When digital content is designed for a specific purpose, the user experience doesn’t translate across devices.

What is Responsive Design?

This is where responsive design can help. It’s a concept whereby digital content is designed with a variety of layouts. Often referred to as fluid due to the adaptive nature of such layout designs. When accessed via a particular device, a suitable layout is presented accordingly. Consider it as a website that responds to it’s environment.

Responsive design layouts for iPad and iMacProgramming queries are used to deploy the relevant design to the appropriate device. This is what makes it possible for the same website to appear differently when viewed on a mobile device, than when viewed via a desktop computer.

As you can see, Responsive Design is appropriately named. This is because content is programmed to check the nature of a device and respond to it accordingly. This method of checking is referred to as a media query. And these queries can be used to check details such as screen size, orientation, resolution, colour properties and the type of browser.

So, what are the actual results?

A simple example could be a website designed with 3 different layouts. On a desktop computer it may have a full width layout consisting of 4 columns. When that same site is viewed on a tablet device such as an iPad, the website may adapt to a 2 column layout with some adjustments to the display of elements such as the navigation and images. Furthermore, on an android device the same site may have one column in width with considerable structural adaptations. Practical changes may also be implemented such as touchscreen menus and accessible buttons.

Mashable responsive design website

How does Responsive Design differ to Cross Device Compatibility?

On the other hand we have the preexisting technique of cross device compatibility. This is also a method to ensure web content is accessible on a range of devices, albeit a less sophisticated technique. Compatibility is achieved by making small adjustments to a website to ensure that users can access the site without faults or bugs, regardless of the device being used. Whilst some styling issues may be addressed, the website may have little difference across devices than that of a varying size. For instance on an android smartphone a compatible website may just be a miniature version of the website as it appears on a desktop computer. Therefore, the user may need to use zoom features to navigate and read paragraph text.

Which should I use? Responsive Design vs. Cross Device Compatibility

There are several considerations required when deciding on the best approach to adopt for your web content. What is the purpose of your assignment? This can help you identify whether your intended audience are mobile or desktop users. If you’re developing a mobile app this will obviously eliminate some requirements for adaptability.

Further issues include time and cost. Responsive design is generally more time consuming and expensive to develop. If you have restrictions in these areas, cross device compatibility may be a suitable alternative.

The nature of the content is also important. Is the content text heavy, or image based? Is there any video required? Another factor is performance. Mobile browsing tends to be a little slower due to longer loading times. Adjusting content accordingly may improve the resulting user experience.

Considering these factors should help when deciding the best approach to use. Preparing a quick overview and writing a simple brief of your requirements is always a good idea. Hopefully this will help enable you in making the most appropriate deployment decisions for your project.

Peter Loving

Peter has a background in digital design, user experience and consultancy. He has worked with brands including Pearson, HSBC and Western Union, helping them to launch digital campaigns, websites and social platforms.

Leave a Reply