Like Quertime on Facebook!

The Best User Interface Design in a Responsive World

Updated on by in Web Design

The total number of visitors on the Internet has grown exponentially during the past decade and continues to increase as more devices become capable of browsing the Internet. While this means that more people are likely to visit any given website in the future, it also means that they will be more likely to visit any website you make on a device that may not necessarily be a computer.


As you may well be aware, that means that you have to plan for a device that is your typical 4:3 or 16:9 aspect ratio on a large (1440×900 or larger) resolution. It is extremely difficult to make one layout that works for every type of device that can browse your website. Even when you manage to make one type of layout, it is likely optimized for only one type of viewing device, such as a computer or a mobile browser.

That’s where responsive web design enters the scene. By incorporating it into your website, you can use it to help overcome useability issues across all devices and ensure that your user interface design excels are promoting users to explore everything your website has to offer.

What is Responsive Web Design?

Responsive web design exists for the sole purpose of trying to help web designers work around the various resolutions, pointer types and accessibility issues, The sole purpose behind it is to teach user interface designers how to create a website that is flexible for every type of viewing device.

To understand how this works, you first need to consider how web layouts have traditionally been handled.

They have been designed for one device at a time. If a website needed a layout that worked specifically for an audience minority, then a low fidelity version of that website might be implemented on a separate mobile website.

Furthermore, each layout would be handled in a static way. That means elements would be arranged in the exact same way regardless of the device used to view a website. That means while a desktop user may have an easy time browsing and navigating, a mobile device user may find it tedious to bring their hand up to one of the top corners of the screen after reading a long letter-style web page.

There are five principles that user interface designers must address when trying to design a suitable layout for a website. They are:

1. Browser Compatibility: Different browsers may be less-than-compliant with the latest standards. Generating code and styles that can circumvent this is even more important when even quirkier browsers than Internet Explorer exist on mobile devices.

2. Navigation and Accessibility: Small click zones are fine for desktop users and touch devices with pen input, but finger-touch devices like smartphones will have a difficult time using a website that can’t accommodate them. Similarly, layout choices can dissuade a user from trying to even navigate a website if it isn’t made for them to do so.

3. Layout and Form: Different technology has different viewports. Mobile devices tend to be an outstanding example of this, as they lack any kind of uniform aspect ratio or even resolution. Making a website that can compact, grow and accommodate any kind of viewport is essential.

4. Font Choice: A medium, readable font that appears crisp and clear on a large, high resolution desktop monitor may appear oversized and blurred for mobile users. Ensuring that page content can be read comfortably is a priority.

5. Image Clarity: Mobile users tend to have less bandwidth than regular computer users, which is what made mobile websites such a popular choice. Ensuring that images of the appropriate resolution and size for not only the kinds of images inserted articles but also those used in layouts is imperative to creating a design works across all platforms.

Responsive web design attempts to address these concerns by breaking away from the one size fits all kind of logic.

A user interface that is created using responsive design principles exists to address these useability concerns. It recognizes that different technology can be used to navigate and view a website and works to provide the best interface possible for each of these devices.

The goals of responsive design are accomplished in two ways:

1. Websites should separate the meta (text content, images and HTML code) into a well-structured frame that supports the website.

2. The ‘responsive’ part of the design should occur using style sheets and a pinch of JavaScript. This allows dynamic content that conforms accurately with each type of device used to view a website without altering the HTML markup.

When these two parts are brought together, you have a website that can look and feel as natural on a desktop computer as it does on the latest smart phone or other mobile device. This allows anyone to feel at home while receiving the right message you want your website to deliver in the way that you want.

Why Bother with Responsive Design?

When it comes to websites, most owners will recognize that most of their traffic tends to come from users who aren’t on mobile devices. They register them as a very small minority and argue that, even while they may be growing in number, they tend to have another device that can be used to access their website at a different time. This is very dangerous thinking that you should avoid.

The customer, or reader in this case, should always be given a chance to access your website in a way that refrains from alienating them. The easier your website is to access and use, then the more likely that users will continue to visit it over competitors who may be able to offer cheaper prices, better service or even superior advice. Furthermore, there is a greater value behind mobile users than first meets the eye.

From a business perspective, you want to value mobile users just as you would traditional users because they tend to be just as impulsive about what they spend their money on while also having more disposable income. That means while you may have fewer visitors using mobile devices now, this will not always be the case. Also these mobile users will tend to be more willing to part with their cash to solve a problem.

From a non-business perspective, you want mobile users to be able to enjoy your website because they tend to be some of your most active users. While they won’t usually be publishing long novels from their phones and other devices, they will tend to aid in the creation of user-driven comments such as comments, forums posts, polls and other invaluable user interaction.

That also includes the publishing of social media that can lead to numerous benefits to your website, such as free publicity and positive social signals for SEO.

With all those conditions laid out, it should make sense as to why responsive design is the key tool used in the websites of many successful industry leaders. They recognize that mobile viewers are just as valuable as computer users when it comes to their business.

Every audience member has a potential benefit to not only your business, but also your website. So you should take every foreseeable step to ensure that they feel just as invited to your business’s virtual home as any other user.

Author: James Patterson

James Patterson is Simple iD’s lead online marketing consultant. Simple iD is a full service online marketing agency that offers clients everything that they need to succeed online, from web design and development to a complete tailor-made online marketing package.

Tags: , ,

Comments are closed.