Adobe Creative Cloud

August 28, 2015 /

Is Responsive the End Game of Web Design

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.

Responsive Web Design at

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 presentation looks 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.


Presentation Bootstrap Theme” by Dani Marti

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.


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?

Join the discussion

  • By Nate - 11:28 AM on August 28, 2015  

    ” an interesting experiment by Guy Podjarny”

    You do realize that post is 19 months old, right?

    Google has since started weighing search rankings based on mobile usability, so that statistic is no longer accurate.

    • By Karol K - 8:39 AM on September 1, 2015  

      The study may be 19 months old, but it still presents an interesting insight.

      On another note, what Google does isn’t very relevant here.

  • By LS5000 - 10:56 AM on August 29, 2015  

    No surprise responsive design to be not popular. The reality is that the only true efficient way to browse WEB is with Desktop! So why compromise the good experience? Some sites that have simple and minimalistic design can be made responsive quickly and efficiently, but in the majority of cases – NOT.
    Bottom line – Tablets suck.

    • By Karol K - 8:38 AM on September 1, 2015  

      Desktop does give you the best browsing experience indeed. This won’t change. But we still need to adapt to the way the majority of people use the web, and that means making our designs mobile-friendly.

    • By Rachel Reveley - 11:59 AM on September 2, 2015  

      Tablets don’t suck. Bad web development does. Not everyone has the luxury of tme to sit at a desktop PC when at home.

      • By Karol K - 8:18 AM on September 3, 2015  

        I agree here. Tables are still useful for a number of purposes … like displaying an actual table, for example.

  • By Timothy - 2:55 PM on August 31, 2015  

    I’m still scratching my head over the removal of the MultiScreen Preview in Dreamweaver CC.
    If responsive design is so vital, why did the makers of my favorite tool make it harder to see three breakpoints simultaneously?

    • By Matt - 6:12 PM on August 31, 2015  

      DW CC does. They just went a step further since mobile VP vary much more than having just one size for mobile/tablet now that there are several major players to the market.
      View > Window Size

    • By Justin Avery - 1:07 PM on September 2, 2015  

      I agree that a move towards removing device specific viewport previews and providing an option to specify them is the right way to go. The less we concern ourselves about device sizes and the more we focus on ensuring content can be easily consumed the better the sites will be.

  • By Rachel Reveley - 11:58 AM on September 2, 2015  

    I suspect a large proportion of those top sites simply haven’t had a major overhaul in the last few years. I would be more interested to know how many redesigned sites are responsive.

    • By Karol K - 8:25 AM on September 3, 2015  

      That’s a good question, Rachel. The problem here is that redesigns don’t happen that often. And it can be hard to convince a given business owner that their site design needs to be updated when it’s still profitable for the business.

  • By Ezra - 6:26 AM on September 4, 2015  

    I’m often telling clients about the ever growing reality of mobile traffic, however when I look at analytics I rarely find any of my websites have over 15% mobile traffic. Whilst those 15% of users need the optimal experience, I think the urgency to always support mobile usage is overstated.

    • By Karol K - 10:15 AM on September 7, 2015  

      It all depends on the purpose of the site and the target group. Some audiences still use almost 100% desktop, but with more casual projects – like Facebook – mobile can make up most of the traffic. Either way, mobile is going to continue getting more market share regardless of the niche. For some it will happen slowly, for others rapidly.

  • By Elizabeth S - 4:48 PM on September 15, 2015  

    Really great article. I completely agree that a responsive design is necessary especially with so many devices out in the market. A recent statistic was released in July 2015 saying 52% of adults are using their mobile phones to browse and 42% on desktop. Responsive design is the new standard.

    • By end user - 3:04 AM on October 25, 2015  

      I hate mobile sites and always revert to desktop version and if the responsive one suck I move on. Sure I might use my phone to browse the internet but its for quick look ups that don’t require forms or any complicated interaction. Seriously why would anyone use a phone as their 99% Internet access device unless all you do is watch YT or any media that requires no more than 15 seconds of attention span.

  • By Lori Beck - 5:28 AM on November 23, 2015  

    Thank you for sharing very informative Content… this is very usefull to everyone.

  • By ZipBooks - 7:07 AM on March 3, 2016  

    Responsive design gave us a quick win over some of our competitors even though they had been around a lot longer because we had a useable mobile experience and they have a lot of technical debt.

  • By responsive web design - 12:08 PM on May 26, 2016  

    nice article,The end game is not a responsive web. It’s an accessible web.

  • By Jigar Shah - 6:41 AM on July 1, 2016  

    Yes, I agree that Responsive Web Design is of prior importance in today’s world of technology. Some good ideas are shared which will help make the website responsive. Nice Posting!!!