I can still remember the good ‘ol days when “making your design device-compatible” basically meant ensuring that it looked good on a 1024px-wide screen.

There wasn’t much of anything else to do back then in terms of variety. Sure, we had some larger screens and resolutions getting popular, but as long as you managed to make your design 1024px-compatible then you’ve had yourself an optimized creation.

Mobile web browsing was non-existent.

But things have changed. Drastically.

These days, good web design doesn’t exist without the word responsive attached as a prefix.

Quite frankly, if you’re working on any web design project today, making it responsive is just as expected as placing the logo in the upper left corner.

Or is it?

 

The reality of responsive design

To my surprise, responsive design isn’t as popular on the web as I thought.

In fact, an interesting experiment by Guy Podjarny revealed that only around 11-12 percent of the top 100,000 websites are responsive.

And it gets worse. Among the top 100 sites, the number goes down to 10.5 percent.

 

What gives, why is this still a thing?

The only reason I could see when looking into this was that maybe responsive design didn’t deliver actual results. Where by results, I mean monetary results.

For instance, if making a site responsive doesn’t make the site owner more money then why would they bother, right?

This time, very unsurprisingly though, it’s turned out that making a site responsive indeed is among the best web-related business decisions you can make, and it holds an incredible ROI.

One example I actually shared in my previous post – How to Design a Mobile Website That Converts – highlights the story of O’Neil Clothing, and what they’ve achieved after making their e-commerce store responsive. Quote from that post:

Just for the iPhone/iPod traffic, the conversions increased by 65.71 percent, the transactions by 112.50 percent, and the overall revenue by 101.25 percent.

But that’s just one case study, and there are many more like it.

In a wider survey, Econsultancy pointed out that 62 percent of businesses increased their sales noticeably as a result of making their websites mobile-ready and responsive.

What all of this means is that “responsive” as a concept indeed works, both from an accessibility as well as a pure ROI-centered point of view. However, businesses in general just aren’t very bothered to make the jump and invest in a modern re-design.

If there’s anyone who can change this, it’s us – the designers – no matter if we’re working on completely new designs or refreshing the already existing ones. It’s up to us to sell responsive design, so to speak, and convince our clients that having a responsive website pays off, big time.

But let’s step back for a minute before we get into the nitty-gritty how-to part:

 

What’s responsive design in 2015 exactly?

In its basic meaning, we’re all quite familiar with what responsive design stands for.

The simplest definition out there reads:

Responsive web design is design that responds to the screen size it’s being viewed on.

The above does its job when it comes to making the concept more familiar to whoever is first exposed to it, but it doesn’t tell the entire story of how responsive design works in 2015.

Under the hood, we basically have two types of responsive design:

• Intelligent responsive design.
• Dumb responsive design (excuse the expression).

Let’s start with the latter. Dumb responsive design is how it actually all started.

If we go back in time a little, we have to realize that responsive design was conceived in response (no pun intended) to the mobile revolution.

With more and more devices sprouting up along with their different screen sizes, making sure that your creation rendered well on a 1024px display wasn’t enough any more.

Responsive design fixed the issue.

In short, it made our job easier and gave us a way to make our work compatible with every existing and new device that might come out in the future. Sort of.

The problem is that in its default version, responsive design assumes that ever piece of content on a given web page should be made available regardless of the device it’s being viewed on. The responsive mechanism only makes sure that things scale to fit and that they remain more or less readable.

The issue with this is that what’s important for a desktop user, might not be important for someone using a mobile.

For example, a mobile visitor won’t be pleased if they have to scroll down through the whole 3,000-word page endlessly just to get to some small piece of crucial info that they need at the moment, which may be in the footer.

This is where intelligent responsive design comes into play.

Good responsive design, modern responsive design, associates the available viewport with the possible user intent, and tunes the page to reflect what the user is most likely to be looking for at the moment.

For example, Google has been doing this for years. Based on where you’re browsing from and the device you’re using, they display different results and guide your attention to different listings. They go above just making their page readable on mobile, they make it actually usable and helpful.

So the main question here is how.

 

How to make your responsive design intelligent

Specifically, how do you make your responsive design in tune with the user’s intent and actually go further than scaling things down and making them fit on the screen?

Firstly, the technology is already there. We don’t have to develop new functions or experiment with JS libraries. Everything you would want to achieve is perfectly available through tools like Adobe Dreamweaver or even through raw CSS and HTML5.

So the only challenge is developing the right framework for deciding how your design can be adapted, and what needs to be adjusted when taking the user’s intent into account.

In other words, modern responsive design requires more thinking, and less actual designing.

 

Make sure basic responsiveness works

As the screen shrinks, whatever still remains in the viewport needs to be visible and scaled properly. This is something we must take care of before we can move to more intelligent aspects of responsive design.

Particularly, focus on the following:

• The viewport as a whole needs to scale. In short, horizontal scrollbars are not your friend. No matter how small the viewport might get, no horizontal scrollbar should appear.
• Things shouldn’t get cut off unpredictably. Don’t put hard limits on certain block widths or texts. Always find a way to make things scale, crop, or predict how they will cut off, and then make them look right.
• Don’t wrap menus. The hamburger icons, although controversial, are a nice trick to make menus look good on most devices. Alternatively, use shorter menus altogether.
• Make the images fit. If you ever get surprised by a horizontal scrollbar, it’s most likely due to an image not scaling properly. Making your images responsive is a must-do for every web design project.

Remove what’s unimportant as the screen gets smaller

The key to intelligent responsive design is predicting what parts of the page become unimportant as the viewport gets smaller.

However, this isn’t just about removing elements arbitrarily, but more about predicting what gets more and more unimportant to the user as they switch to a smaller-screen device.

Such user intent investigation is best done with actual user testing – giving users a standard responsive interface and seeing what gets their attention through heat-maps – and then taking this information and using it to remove the parts that the users skipped anyway.

Although this is possibly the best method to figure things out, there’s not always time nor budget to do so. In those scenarios, you’ll have to do with your own experience, while also considering your client’s goals for the site.

Note. Remember that everything you do even before putting together the first design draft should be included in your rate, the scope of the project, and the overall price of your services (you can see this guide if you need help sorting those things out). You don’t want to end up not getting paid for some of the most crucial parts of the job – which figuring out the responsive mechanisms certainly is.

In general, you can start by assuming that everything that’s not crucial to the main site goal, and not strengthening it in any way, can be removed as the screen gets smaller.

This is also something we talked about in the previous post, when discussing mobile design that converts.

That being said:

 

Don’t worry about making your design compatible with extra-small screens

Particularly, this is about wearable devices like the new Apple Watch or slightly more familiar Android Wear technology.

Currently, none of those devices have usable web browsers.

It seems that the standard web is just not compatible with such small screens and viewports.

More than that, we could even argue that the standard human is not compatible with consuming information straight from their watch face.

For instance, it’s hard to imagine reading a 2,000-word article – like the one you’re reading now – on your watch and actually considering the experience pleasing.

At the end of the day, the wearable technology has a lot to improve, and perhaps web browsers won’t ever be an important part of it. It’s likely that the only usable form of web access will remain to operate through apps, which only use web interfaces to fetch specific packets of data and then display them selectively.

Whatever things might turn out to be, wearable device responsiveness is not on the plate right now.

 

Make your design “content-first”

You’re probably familiar with the term “mobile-first,” as in “making a design mobile-first.”

It’s surely a good starting point, but it doesn’t cover all the specific scenarios that might come into existence in the future.

Therefore, a much more universal approach could be making things content-first.

Here’s what I mean. In a standard mobile-first approach, we’re making sure that specific content presentationlooks good and works well on mobile. In other words, we’re making sure that the interface we’ve designed is compatible with mobile.

In a content-first approach, we’re making sure that the content itself is compatible with the device.

A classic example of non-compatible content is text as image. While it can technically be displayed on every modern device, it’s not always readable on some smaller screens, and it also can’t be used by screen readers.

In other words, you can easily make such an element responsive by tweaking its CSS attributes and so on, but it doesn’t mean that you should. Instead, you ought to try finding a solution that uses raw text, which can then be used by screen readers plus any other text-processing software that might come out in the future.

 

Start with fonts and typography

Effectively, the content-first approach starts by using good fonts and designing good typography.

Even though it seems like a slightly archaic thing, text is still the main type of content consumed online. That’s why you need to make sure that your design handles it well on all possible device and screen scenarios.

If you get this wrong, it’s a dead giveaway that the responsive design wasn’t done right.

Luckily, the CSS of today allows you to tune this however you wish based on the viewport size, so the technical difficulty isn’t there.

What is still challenging, though, is picking the right sizes, fonts, and etc. in a way that would keep everything readable.

For instance, it’s not always as simple as just making things smaller (or bigger) as the screen shrinks. Sometimes you need to switch things up to improve the actual real world readability.

Consider the following example. On a desktop experience, quite obviously, the fonts can’t get too small because this would force the user to get closer to the screen. However, with mobile devices, it turns out that you can safely use smaller fonts because people tend to hold those devices closer anyway. In practice, a bigger font could paradoxically make the text less readable because it would force the user to look at the device from a longer distance.

 

Conclusion

Right now, responsive design is one of the must-have elements for those site owners who do know better and are aware of all the financial benefits that responsive brings.

That being said, the device-centric design is almost done, and especially with all the wearable gizmos coming out. If you really want to future-proof your creations, focus on content first.

But that’s just my take on this. What do you think? Is responsive design something you always take care of when working on a new website, or do you maybe contribute to the other 88 percent of websites that aren’t responsive?