Celebrating 20 Years of infernoCelebrating 20 Years of inferno

 

Insight July 10, 2018

An Introduction to Responsive Website Design

 

Responsive website design is not a new concept. We’ve been building responsive websites for our clients for years. What is new is the idea that responsive website design is fast becoming the industry standard for mobile development.

While the internet may still be filled with poorly-designed, non-responsive websites, users today expect more from their mobile experiences.

  • 40 percent of users will abandon a website if it takes longer than three seconds to load.
  • More than half of internet users won’t recommend a business with a poorly-designed mobile site.
  • According to Google, 61 percent of users are unlikely to return to a site on mobile if they had trouble accessing it – and 40 percent visit a competitor’s site instead.

Is “mobile-friendly” the same as responsive website design?

Back in the early days of mobile development, designers would build a mobile version of the desktop site tailored to a specific device. These “mobile-friendly” websites help a webpage function on a mobile device – but they leave a lot to be desired in terms of user experience.

The main problem with early mobile-friendly websites is that they make the entire website fit on the screen. Understandably, this approach would work better on some devices more than others. With smaller screens, users are forced to zoom in and out to navigate the website on their mobile device.

So, businesses had to choose whether to accept that the user experience would vary from device to device or create multiple mobile-friendly websites for various devices (e.g., designing for iPhone and iPad).

As more people access the web from a greater variety of devices, we’re quickly approaching the point where it would be impractical (if not impossible) to keep up with the endless supply of different resolutions, definitions, and screen sizes.

Imagine trying to craft a mobile-friendly website for each new iPhone, iPad, netbook, Kindle, or other mobile device in existence, as well as those which haven’t been released. Sounds like an impossible assignment, right?

What is a responsive website design anyway?

Inspired by a movement in modern architectural design, responsive website design is an approach that suggests a webpage’s design and development should respond to the user’s behavior and environment. It takes things like the screen size, platform, and orientation of a user’s device into account when serving up content.

One of the key benefits of a responsive website design is that there’s no need to build a mobile version of your website for every new device on the market. Instead, your website adjusts to the pixel-width of whatever device is being used.

Mastering the art of responsive website design takes time, but there are a few tips we recommend to help you get started:

Design for mobile first. According to internet monitoring firm StatCounter, mobile and tablet internet usage outpaced desktop worldwide for the first time back in 2016. If you design your website using the mobile-first approach, you identify the essential features and core content. It makes designing for all other devices that much easier.

Focus on the content. One of the primary goals of responsive website design is to show users the content they want to see, not everything your website has to offer – at least not right away. Your goal should be to put the right content into the right places. Mastering the navigation of your website – via collapsible menus, dropdowns, or a structured visual hierarchy of content – can make it easier for users to find what they need.

Respect the fumble fingers. Fingers are wider than pixel-precise mouse cursors, so your primary call-to-actions on your website should always be big and tappable. You’ll want to add a wide margin around the touch targets, too. Apple recommends a minimum tappable area of 44pt x 44pt for all controls.

Want more posts like this? Subscribe to infernotes to get our latest blogs right in your inbox!