5 Key Components of Successful Responsive Design
Date: August 25, 2014Category: Author: Jennifer
For the last few years, Responsive Web Design (RWD) has been the buzzword of web designers everywhere. First defined by Ethan Marcotte in 2010, it began as a nice forward-thinking concept, quickly becoming one of the top web trends. Today, with the number of mobile devices and screen sizes available, and more and more users accessing the internet via these devices, Responsive Design has transformed from a nice trend to a top priority, even a necessity.
For those thinking, “Responsive…what?”, put simply, a responsive website is one that responds to the size and capabilities of the screen or device, thus making a more pleasant experience for the user. To see it in action, go ahead and minimize your web browser and play around with the width. You’ll see this blog’s layout change with the screen size – two columns becoming one and a simplified, mobile-friendly navigation being swapped out for the desktop version. These seemingly small changes make our blog much easier to read and navigate on a hand-held device.
So what makes a successful responsive design? There are a number of considerations here, but from my experience, I’ve found the following 5 components to be especially critical.
1. Navigation:
Starting at the top of the website, the navigation can easily make or break the user experience. After all, it is the user’s main guide to sort through the content and hopefully find what they seek – a treasure map, of sorts. Typically on a desktop site, the menu is up in the header and is a horizontal list of a handful of relevant categories. On a smaller screen, there simply isn’t room for this.
There are a few useful solutions for this, but the most common is to place a button at the top of the screen that will reveal a tucked-away menu when requested. On all of our websites, we incorporate a similar solution with a slight modification to include the most pertinent links (map, request an appointment, and contact us) in an easy-access header. This allows the user to very quickly connect with the dentist and also find all the other information they may need with the click of a button.
The main consideration with the navigation is to make it easily accessible while still keeping it from overtaking the page.
2. Columns:
Columns can play an important role in a design. They help to organize the information, break up the content into readable chunks, and offer additional space for added features. While a desktop site can accommodate 2-3 columns, a tablet may be most readable with two, and a smartphone only one. It all depends on the particular design.
Logical breakpoints must be considered both during the design and development phases. A breakpoint is simply the point at which the layout breaks. When the column becomes too wide or too narrow to be easily readable, it should be considered a breakpoint. This is where it would be best to either remove the column or sidebar entirely or move it above or below the main content. It should be noted here that it’s not advisable to remove the content entirely unless it can easily be found elsewhere or is simply supplementary content.
Another thing to consider with layout is adequate white space and padding. All too often, when trying to fit a desktop amount of content on a smaller screen, everything becomes squished together. Leaving in plenty of padding between elements and text helps the eye know where to go.
3. Typography:
Web designers today are fortunate to have a tremendous amount of options when it comes to fonts. A well-selected font can really add to the aesthetics of a website. Unfortunately, on a small screen, they can go from lovely, to “what-on-earth-does-that-say” very quickly. When designing for a responsive website, it’s important to ensure the fonts look just as lovely and read just as nicely on mobile devices as they do on a desktop computer.
The same goes for font-size. Too large a font on a smaller screen, and the eye has a hard time following the lines. Too small and no one’s going to be able to read it.
4. Buttons and links:
A cute little mouse cursor can go where many a fat finger cannot. Our fingers can feel mighty large when trying to tap on a teeny tiny link on our smartphones. This is an important consideration when designing links and buttons for responsive websites. There is nothing more annoying then trying to click on one link and having your browser confuse it with a neighboring link. Have it happen twice and you’re almost certain to lose a visitor.
5. Slideshows and images:
Slideshows and images can be a very nice touch to a website, but on a small screen can become unreadable and/or a distraction from the main content. Where minimal screen space is available, images may lose there effectiveness and should be removed.
On this same topic, images are resource hogs. Have too many (think slideshows), and you’re going to kill your website’s load time. Users on mobile devices are in a hurry and don’t want to wait around for that cute little picture of a cat brushing its teeth to load. Unless, of course, you offer dental services to cats.
In a previous post, we also addressed the problem of Flash for mobile. It’s crucial to eliminate Flash slideshows from your responsive websites.
On our websites, we carefully determine which images to display on smaller screens and typically switch out resource-heavy slideshows with lighter images for mobile users.
Don’t be a responsive wannabe
I’ve seen a lot of websites that wanted so badly to be responsive but just didn’t quite make it by ignoring one of these key components. While some businesses may regard responsive design as a trend, I assure you, with more and more people consuming technology on the go, this practice is here to stay. Don’t get left behind.
Leave a Reply