Responsive web design is boring!

Responsive web design is boring!

Jonathan Longnecker, co-founder of web and graphic design agency FortySeven Media, argues that most responsive sites are boring and comes up with a few starting points to help us create designs that break the mould

I'm just going to come out and say what some of us have been thinking about responsive design. It breeds boring.

There are plenty of high level thinkers out there that have made the case for designing "mobile first" with multiple screens in mind. I won't lie; I've jumped on the bandwagon myself. I got pretty psyched setting up my first responsive design – it's exciting to see your creation shape shift to fill different screens. It seemed like the future, and it probably is.

From a practical standpoint, responsive design makes loads of sense, too. Why maintain five versions of your site when you can maintain one? The promise of build once, work everywhere is very tempting indeed.

So what's the problem?

I'm worried that in our quest for modular, gridded and responsive nirvana we've lost the spark. Case in point: the much talked about Boston Globe refresh. From a technical and UI perspective it really is fantastic and forward thinking. But it's almost like it lost its soul to get there. Where's the character? Where's the personality? Does it really make sense to be more wowed by seeing what happens when you change the width of the browser than the visual impact of that first page loading up? Personally, I was underwhelmed.

If cold, technical proficiency is the future of web design, it certainly doesn't sound like much fun. Every site we build should tell our client's story, and the visual language we use is a large part of that. Not the mathematical accuracy of our grid. We have to make sure we don't sacrifice their story for a responsive design. Boring is still boring, no matter what screen size.

Extreme opposites?

Have you ever received a mockup from a print designer that simply isn't possible? Maybe they're using typefaces that aren't available on the web, or maybe they're just not thinking the right way in terms of how the site needs to be built. Drives us crazy, doesn't it? Well that's one end of the spectrum.

I think the other end of the spectrum might be the responsive trend of designing and building so modularly that we start to lose the interesting and creative things that break the mould. Or the grid. I worry that starting with mobile first keeps us from designing to our full potential. So far, my internet searching hasn't proven me wrong. Most responsive sites aren't bad, but they just don't capture your attention visually. There are some bright spots, though. More on that in a minute.

What do we do then, genius?

Look, I'm not going to sit here and say responsive design sucks. I think it's pretty freaking cool. But I don't want a framework or technology to dilute our creativity. As we move into this new era of having our designs viewed on massively different-sized screens, we've got to find the middle ground. Here's a few common sense starting points:

  1. Make sure you can still deliver the tone and feel you need at all sizes.
  2. Don't rely too heavily on a grid. Try to break it when it's appropriate.
  3. Keep the technology in mind when designing, but don't let it stifle innovation.
  4. Don't let the responsive nature suck the life and fun out of the site.
  5. Look for ways to make interesting and challenging decisions about how the site works at different sizes.

Light at the end of the tunnel

Remember when I said I’d found some bright spots in my research? Rather than just give you vague starting points I thought it would be good to supply a few examples of stellar designs that also happen to be responsive. Let's take a look.

Food Sense

Food Sense is a great example of an editorial style design that still manages to have personality and feel. It also makes some surprising and intelligent choices as you resize the width.

Naomi Atkinson Design

While I almost wrote a whole paragraph about how single-column layouts shouldn't count as responsive design, the site for Naomi Aktinson Design proves me wrong. Upon further investigation it reveals a lot of smart design choices, both at full size and and at smaller sizes.

Forefathers Group

Talk about personality! The Forefathers design company guys bring it in spades. You could get lost for hours in the painstaking care they took to make their beautiful design work in different widths. Seriously well done, guys.

Don't let responsive design's grids and rules keep the spark out of your design. Squash the boring, make the awesome.

24 comments

Comment: 1

I think people spend too much time being wowed by the site changing as they resize their browser window on their desktop and not enough time actually perfecting the layout for different devices. Yeah it looks awesome putting a CSS transition on your site so that when someone resizes the window they see shit move, but in the real world, when is a viewer ever actually going to sit and do that.

Good article though which raises some interesting points, I find the problem we have is justifying the cost to the client, as it essentially means there are going to be 4 designs, so instead of looking at it as a "has to be done" type exercise which is how I feel a lot of people are viewing it, it has to be looked at on a client by client basis, which should in turn lead to better designed layouts.

Comment: 2

If a site is underwhelming as you point out in regards to the Boston Globe then that is your opinion of a poorly designed site. Whether it's responsive or not is irrelevant in that case, it's a site that you don't like. You go on to point out sites that you do like, meaning that responsive isn't boring if you're seeing examples of sites that you like that happen to be responsive.

Grids have been considered the basis of good design for centuries, making it responsive doesn't breed boring design - the same way a static grid doesn't. Do baseline grids make a site boring as well? I think the issue is that responsive is a new approach and we're all still finding out feet with it - and if a site has a boring design then that is your opinion on the site and the designer, not because it is responsive or not.

Comment: 3

Saying that the Boston Globe redesign has lost its soul w/o providing any basis is, well, pretty lame. Any decent designer knows that a proper critique finds both things that work and things that don't work about the new design based on a given set of goals. Perhaps a lesson in proper critique is what's called for here.

Have you considered what the goals are of the site? It's to present and consume content and to support a business. The Boston Globe redesign does this in a clean and elegant manner. I love the other sites mentioned in this article. However, comparing a food site and two design agency sites to the Boston Globe is missing the mark. Hardly in the same arena. More like two different galaxies.

Responsive design is hardly boring. If anything responsive web design has brought some excitement back to the web design community. We recently did an update to our company's site messagefirst.com (disclaimer: we're a design studio and we focus primarily on apps) and found the experience and challenge of taking a mobile first, responsive approach was both challenging and rewarding.

Mobile first and responsive design really makes you prioritize your design decisions. It helps you focus on what's most important. Cut the fluff and just deliver a really solid design that presents your content in a meaningful way. Mobile first and responsive design doesn't preclude you from using nice aesthetics, like background textures, linear gradients, layering, shadows, contrast in size, beautiful typography, etc. In fact, I found quite the contrary. It actually facilitated playing w/typography.

In our mobile version, some of the page headings are one size, weight and alignment. Scaling up to the tablet and desktop size, we adjust the typography, changing size, weight and even alignment for something that's more appropriate.

Perhaps Jonathan just doesn't get mobile first and responsive design. If his point is that mobile first, responsive grid-based designs can be boring, well, then sure they can. But that's not exclusive to mobile first, responsive grid based designs. Show me a non-mobile first, non-responsive, non-grid based design that is future friendly, looks beautiful on the different devices that are really accessing the content.

For those who want to get left behind and stick to designing for the desktop, please, stick with your fixed 960 designs. The rest of us will be moving on and waving back at you.

Comment: 4

It seems to me that you have a problem specifically with grid-based websites rather than responsive websites. As you pointed out, many websites that "break the grid" are also responsive. I'm not sure why you have a distaste for grid-based design, but you're entitled to your own opinion.

I do think it's close-minded to single out a design such as the Boston Globe for their grid. Most newspapers need the grid. When you're dealing with thousands of content nodes on a monthly basis, most of which is changing daily, sometimes the grid is the best display method.

Comment: 5

@jonXmack - The cost angle is very true - though I think Responsive design is a better value than making an entire mobile site. It's should certainly be cheaper to implement.

@gpirie Never said it was poorly designed...just boring :) It certainly fires on all technical levels (even technical design in regards to grids/ratios/whitespace, etc...) but for me personally there's a spark missing. I'm worried that starting responsive could be the cause of this. I hope I'm wrong, though. I think Responsive Design is pretty cool.

@zakiwarfel Thanks so much for reading and bringing up some great points. This is not a proper critique of any sites mentioned, merely my opinion (thus, in the opinion section:) But in the real world there are no proper critiques. Normal people connect with your site and enjoy it or don't come back. Responsive design can definitely help them connect on a device they wouldn't have before, but again if it is missing the feel, the story, the spark then we've missed the mark. For all of Boston Globe's technical mastery, it felt cold to me on the first load. That is all.

I agree that Responsive design does make you focus on the things that are important in terms of content. If you happened to read the article again you might see that I never said Responsive Design was stupid or that we aren't already doing responsive sites. I simply said that I'm worried that focusing on the responsive side of things and the technical aspects that come with it have the potential to suck the art, life and fun out of design. Thanks so much for your comments and thoughts!

Comment: 6

@JoshuaSortino Not really, we use a grid as a base for just about everything that we do. What I don't like is a site where I can almost literally see the dividing grid in the design. It should be used as a base, not a crutch.

As for mentioning the Boston Globe...I really didn't want the article to dovetail into a list of boring responsive sites. No one likes a whiner :) I used it as an example because it's probably the highest profile responsive site to date, and when I pulled it up the first time it felt, "meh" to me. My whole point of this article is that we can't let the technology overcome the art. Honestly, I hope everyone proves me wrong. I really like the idea of responsive design.

Comment: 7

Designing something that's going to go on a 27" monitor based on the requirements of a mobile phone doesn't sound very responsive to me.

Responsive design is a great approach; it's the 'mobile first' that's boring.

Comment: 9

In terms of the cautionary message the article holds, it's a fair argument. But I'll be glad when designers can stop talking about design as if it's the make or break of a website. That's where I give the responsive advocates a lot of credit; they're speaking about it in terms of the content. Design is the icing, not the cake. Users are't going to leave and never come back if the content is great and the design's boring. WordPress websites are proof of that. I don't see how anyone could think creating content/design solutions that work across multiple devices would be boring. There's a lot there to puzzle over. If anything, there's more creativity involved, in layers, like onioins. What the world needs is more examples of bigger responsive projects like BG. I'm sure they're coming.

Comment: 10

@necker47 - You did a good job and brought up some relevant points. The truth is, nobody has the right to say that one method of design approach is right or wrong. Though shall not hinder creative expression!

@zakiwarfel - I think it's important to find balance between compatible (responsive) design and pushing creative boundaries. Limiting yourself in any fashion is creative suicide. And considering Mr Longnecker posted this under "opinions" I think it's safe to say that he has the right to share his (whether you or anyone else agrees with it).

Booya.

Comment: 11

Others have said it above, but I think the two points addressed in this article (Responsive Sites and Boring Sites) are entirely unrelated.

Sure, maybe there is no initial wow factor with the Boston Globe site (I disagree, but each to their own). But then is there any news site that jumps off the screen and smacks you in the face with its wow inducing visuals? I doubt that's ever the goal. The Boston Globe redesign has been done with a certain style in mind. I'm not responsiveness has any role to play in that style, and to suggest that coding for responsiveness limits what you can do visually does a massive disservice to the designers and coders associated with such sites.

"My whole point of this article is that we can't let the technology overcome the art."

Obviously that's not happening, and you don't think that all responsive sites lack the wow factor, as highlighted by you showcasing some nice ones, so... what's the point in the article? And why the dig at The Boston Globe?

Comment: 12

@wion Well said, sir.

@JohnnyQuest My point in this article is that I am indeed afraid that responsive sites can lead to boring sites.
I'm doing no one a disservice here. We build responsive sites and love the idea.

This is a gut check and call to arms to make sure we "don't let the technology overcome the art." Rather than spend an entire article putting sites down, I thought it would be better to show examples that didn't succumb to missing that spark. I certainly didn't want to whine about a problem without offering some sort of solution.

Thanks for reading and sharing your thoughts!

Comment: 14

I agree with where you start off. More sites need to break the mold. But than you go and contradict yourself on the examples. These sites don't break the mold. They are all grid based, use a light color scheme. I personally find those examples boring and in line with everything you see on the web, nothing ground breaking or earth shattering there. You said "Does it really make sense to be more wowed by seeing what happens when you change the width of the browser than the visual impact of that first page loading up?" So first impression is important right? These sites draw nothing more than MEH.

Comment: 15

A strange title for an article as many have pointed out is more about a simple issue with underwhelming or unchallenging design and nothing to do with responsive "design".

It fecks me off no end hearing about responsive design being something as simple as resizing a browser to "test" it. It's so much more than that.

I must admit that for all the hype and the unfortunate (for them) high profile nature of the Globe site and development team, I also wasn't that overwhelmed by the actual look and feel either but that's a personal opinion.

For me, the most interesting thing about responsive design at the moment is the delivery of relevant assets, content and the tech under the hood of sites like the Globe which, make no mistake, are utterly cutting edge.

Making elements stack on top of each other when a browser is resized isn't really what responsive design is about.

It's a minute part of it yes but nothing more than that. Making some blocks of content move on top of each other is often only a few hours of work with some media queries. Writing the well considered, lean, markup that allows that flexibility and delivering the relevant (not just using display : none or shrinking large pics) assets and images to the wide range of devices is the exciting challenge.

J.

Comment: 16

Really interesting article and I can see your point - its not responsive design that is boring, its the fact that a lot of responsive sites to date have had their focus on the 'responsive' element rather than the 'design', so to speak, I don't see a great deal of imagination in the responsive sites out there at the moment (although some as per your eg's.).

But it is still very early days and @wion is absolutely right, we need to really see some more high profile cases, not just small <10 page promo and agency sites.

And agree with @jonXmack - transitions between layouts - completely pointless. (does look cool though :) )

Comment: 17

Interesting article. Thanks!

One thing though, the Globe site is newspaper design. IMHO, you have to understand the nature of the newspaper industry to "get" the design decisions they made with their online branding.

I think most readers of online newspapers want readability more than they want graphic frills.

I happen to work at a newspaper and can understand and appreciate the design decisions they made.

Comment: 18

@winddude - Well I rather liked them :) Would be interested to see what you consider interesting design, though.

@welcomebrand - Good points. Agreed the underlying tech of the Globe is awesome. I just think it falters in the feel/experience.

@neilcarpenter - Like I said, can't wait for this whole thing to mature and for people to prove me wrong. Thanks for your comments!

@katejj - Fully aware of the newspaper industry. Worked for years in print design before moving to web. I certainly don't want to see something super graphic and frilly, but it should have personality and make you want to come back. Even newspapers still do that (the good ones at least).

Comment: 19

As a certain Steve Jobs said, "Design is not just what it looks like and feels like. Design is how it works."

Comment: 21

It's an interesting opinion. Personally I don't like the fact that fortysevenmedia's design (a) isn't responsive and (b) hasn't changed in yonks. Whinge over :)

I think it's important that all designers/developers learn the principles and techniques of responsive design. For one thing it forces a content-first approach, after which successive layers of design fluff can be applied.

From a usability point of view I dislike mobile layouts that are as over-designed as their desktop counterparts - simplicity is critical for good mobile UX, particularly ecommerce.

I wholeheartedly disagree with the comment about users not re-sizing their desktop browser. Not everyone has the luxury of multiple monitors and may have several non-maximised windows open at a time on a single screen. If a site or app can be made fluid and/or responsive, it should be.

I think there are some stunning examples on this page - Food Sense in particular is a fabulous example of how responsiveness and minimalism doesn't have to be boring.

Comment: 22

It's nice that you added some "good" examples. Although I would really remove forefathers as a good example. Although their site is well designed as you you move to the narrower breakpoints content is hidden which is a pretty big no no in my opinion.

If the content is not important for a person using a smartphone or small device then the content is probably not important at all, so why even have it on any size device? It's one thing to hide a background image like Naomi atkinson but to hide content (the reason people come to your site) is ridiculous.

Comment: 23

I think getting away from having a lot of blocks, visible columns, and visible rows, like the Forefather's site (second from top above) makes for an interesting site, and not one that looks like it was designed on a grid. My homepage at http://www.seo.kirbyworks.net is one example (though certainly not the best one) of this.

Comment: 24

Mazurka - One reason to hide it on a smaller device is to minimize the distance someone has to scroll to get to the content of a post, for example. I think it would be too easy for someone clicking on a link to a post thinking they have got the wrong page because the post content is way down below a bunch of other stuff.
August issue on sale now!

The Week in Web Design

Sign up to our 'Week in Web Design' newsletter!

Hosting Directory
.net digital edition
Treat yourself to our geeky merchandise!
site stat collection