Design

Must-know facts about responsive design

By Marc Schenker

June 13, 2013

Responsive design is a relatively new term in web design. It was only coined three years ago in May of 2010, when web designer Ethan Marcotte used the term in his article for A List Apart.

Today, there’s even a mini debate going on regarding whether responsive design is here to stay or whether it’s just a flash in the pan. Only time will tell, but for now, it’s clear that responsive design strives to make the user experience as comfortable as possible.

Responsive design is a web design philosophy that focuses on creating sites that give users an enhanced viewing experience. This includes features such as effortless navigation and reading, and a minimum of browser resizing, scrolling and panning. All of this takes place across a range of different devices, from desktops to smartphones.

Since this web design approach is still in a fledgling state, you may not be totally clear on what responsive design is all about. Is it more about seamlessly displaying content across multiple platforms, or is it mainly about helping businesses build more attractive sites to increase their sales through a better user experience?

Mashable has already gone out on a limb and called 2013 the year of responsive design. While that remains to be seen, some basic aspects of responsive design are standards that will never go away. Here are the most important responsive design facts to familiarize yourself with.

There’s a difference between responsive design and mobile design

You’d be forgiven for thinking that responsive design and mobile design are one and the same — but they’re not. Sure, responsive design does create websites so that they both respond to a browser’s size and are mobile-friendly, but responsive design really is whole web design. The problem with referring to this web design approach as mobile design is that it’s inherently limiting, which does a disservice to the approach itself.

The most effective responsive websites may be viewed as they were meant to be, across a range of resolutions. This includes everything from the usual 1024x768 pixels to the 1920x1080 displays and everything in between. Sites like these also look splendid on tablets (both retina and standard displays), as well as on smartphones. If a web designer looks at responsive design solely through the context of mobile, then he’s potentially missing out on a broader user experience.

At the same time, mobile is a really opportune starting point for the entire responsive design discussion. It’s been the norm to begin with a mobile scheme and then expand this design to additional sizes as a responsive website is developed. Lots of designers believe it’s simpler to grow visuals rather than to minimize them.

Quality and image size are priorities

If there’s a rule that web designers ought to follow, it’s that image quality is a whole lot more vital than the actual number of images. The reason is that a low-quality image simply doesn’t look attractive in any size. The time it takes a site to load an image is almost as important as the size. Mobile users will agree with this because they have limited bandwidth with which to contend.

What’s a web designer to do? Simply reach a smart balance between load time and quality. This includes scaling images with CSS height and width properties, steering clear of loading full-size images, and optimizing images for the Internet. Prior to uploading, it’s highly advised to crop any images and save each picture at the smallest size possible, as long as it still maintains sharp, visual quality.

Check out Sony USA’s website. Note how all the images are super sharp in quality, no matter what size they are. Once you visit the site or refresh the homepage, also note how fast the images load. You don’t have to wait more than a second for everything to come into focus extremely sharply.

Designers have many choices when incorporating images in a responsive setting. They can use only a few images; lessen the use of images within mobile-sized schemes; permit images to mask themselves in mobile surroundings; or utilize various file sizes and versions. These choices will work effectively, although some developers are against hiding images, because the user will still have to load the images in spite of them being unseen.

Let’s talk about responsive type

Type shouldn’t be one size fits all. One kind of font that looks appealing to the eye on your desktop may be horrid on your smartphone. Typography must follow the same rules as other aspects of responsive design.

The most important aspect of responsive typography is the line length. For smooth readability, type ought to be optimized based on the width of the screen. The rule of thumb, for desktop websites, is that between 50 and 75 characters a line is ideal; for mobile devices, just between 35 to 50 characters is ideal.

Type must also be easily read vertically. Lots of sites utilize a line space that’s up to 140 percent of the screen’s point size for bigger blocks of text. If the screen is smaller, more space should be added.

Even the specific typeface that’s utilized is significant. Fancy fonts and novelty typefaces have the ability to look visually appealing on bigger screens, yet they’re hard to read if the point size is small. These sorts of fonts should have lots of space between them. When you work with smaller sizes, it’s easiest to utilize normal sans serif styles and even strokes.

On Hardboiled Web Design’s site, you can see a lot of these principles being followed, making for good responsiveness. Note how its line length of text on a desktop — while on average greater than the ideal recommendation of 50 to 75 characters — is comprised of a typeface that’s clean and easy to read. In addition, the line space is also greater than the point size of the font. On mobile devices, the site’s responsiveness performs even better: On an iPhone 5 display, the number of characters per line was approximately 67, which is just a bit over the ideal rule of between 35 and 50 characters.

Don’t forget about navigation

When it comes to the user experience — which is one of the most important factors that web designers should think about — navigation is right at the top of priorities. Navigation has to be smooth and efficient to ensure a comfortable user experience.

Effective responsive design must ensure this by paying extra attention to the specific width of a given browser. A site that uses responsive design well will lay out its site navigation in different areas, all dependent on the browser’s width. One of the best examples of this is Food Sense’s site navigation.

It would be a mistake for responsive design to scale the site navigation to larger proportions on devices with bigger screens.

The takeaway of responsive design

So now, when you hear web designers talking about responsive design, you’ll know that it isn’t just about making a website look good and run smoothly on smaller, mobile screens. You’ll know that this design approach is based on the principle of making websites of all sizes provide the most optimal experience to the user — no matter what they're using to view the site.

Responsive design is still a relatively new concept, at least to most people who just view websites on the internet. That’s why so many people still can’t agree on what makes responsive design…responsive design. Is it about seeing everything properly on mobile screens? Is it just about load times and high-quality images that will please the eye? Is it about a clean design and easy-to-read typefaces?

It’s all of that and more. Those are just the fundamentals of this web design approach, but responsive design is still evolving and changing, so chances are good that additional elements will be considered, too. In the end, it’s about enhancing the user experience, because no one wants to deal with a website that’s slow, blurry, hard to read, cluttered or difficult to navigate.

Is responsive design just a trend? What are the key aspects of responsive design? Let us know your thoughts in the comments.

Featured image/thumbnail, via s58y