
Ditching responsive design - hirokitakeuchi
https://gocardless.com/blog/unresponsive-design/
======
adriand
This post is somewhat odd, because their site design is so clean and simple
that it seems like an easy candidate for RWD. I don't really see how this
design is unconstrained compared to what they'd be able to implement if they
used a responsive design.

As far as RWD taking twice as long to design and implement, perhaps this is
just a question of experience. Once you've had some practice with RWD,
although it does take some extra time, I don't think double the time is
typical.

The argument that only a few of their customers are on mobile is the strongest
reason presented not to use RWD, but the question I would be asking is, "Is
this situation likely to remain that way? Will mobile users only ever be 2% of
our traffic, or can we expect that this proportion will climb?"

Personally, I would expect that this proportion would in fact increase over
time, but I don't have a crystal ball and can't say this for certain.

~~~
splatcollision
Building responsively is an investment for the future. You can bet good money
that there will be more and more diversity of screen sizes as we keep going.

I'd be interested to learn more about their design and implementation
workflow, that they mention RWD taking 'almost twice as long'. How much time
are they wasting building static comps that illustrate a picture of what some
people will see when they come to their website? This is speculation - I don't
know how much live prototyping they do in their design process.

I'll have to mention Edit Room again, my web design tool that makes creating
responsive, multi-screen web layouts as easy as dragging things around on-
screen. If you start your design work in the browser, you save so much time
that lets you go that extra 10% on a design. That gives you the time you need
to make your designs work everywhere.

<http://www.edit-room.com>

~~~
peterhunt
I agree that the estimate of amount of time it takes to make their site
responsive seems high to me. Even if it's not perfectly designed it's better
than not being responsive at all, and getting it pixel perfect will probably
be cheaper and reasonably performant as designing a mobile-only experience.

However I disagree that making a design responsive today is an investment for
the future. Designs change much quicker than demographics, so if they don't
have significant mobile traffic today it's unlikely they'll have it during the
lifetime of the design.

------
linssen
The popular interpretation of responsive web design has been, I feel
bastardised. It's not just about a fluid grid with break points in your CSS to
move things around depending on the size of your viewport.

It should be much more about how system responds to where, how and why it's
being used. That might well mean apapting the layout to fit a smaller device,
but equally it could mean things like presenting considered controls to touch
devices, offering geo-aware information, changing content to user patterns
etc.

The term itself is derived from responsive architecture which is defined thus:

 _Responsive architectures are those that measure actual environmental
conditions (via sensors) to enable buildings to adapt their form, shape, color
or character responsively_
<http://en.wikipedia.org/wiki/Responsive_architecture>

Go Cardless have made the right decision for them about layout, but I can't
help feeling that they're setting the conversation about RWD back.

------
sergiotapia
>For our new design, we decided to stick to a fixed grid of 980px.

Yep, this is what I've been doing for a while now. Looks great on desktops,
and looks great on iPad devices and tablets.

Responsive sounds good on paper, but when your 1 person in a team of 2
startup, you can't afford to waste time like that building something truly
flexible. Not worth the time investment.

Again: MEASURE your audience. If your mobile visitors are a small percentage,
it ain't worth it. Let them pinch and zoom.

~~~
kd5bjo
How does a 980px grid look good on a 768px-wide screen?

~~~
sergiotapia
My answer to those people, "Deal with it."

My analytics on my sites have shown people with screens smaller than that are
in the very very small minority.

~~~
kd5bjo
I just asked because you specifically mentioned iPads, and 2 of the 3 models
on sale today are only 768px wide.

------
andrewmunsell
Personally, I have to disagree with their reasoning. No, I will often not use
their service from my phone, but what if I'm surfing on the bus and want to
look at their pricing or features? On my iPhone, which has a relatively small
screen, I'd be almost out of luck. I would either have to hope Safari Reader
or Pocket could pick out the text, or deal with scrolling back and forth.
Normally, I'd just leave and likely forget about their service.

Which is kind of why I decided to use responsive design completely on ThreeBar
(<https://threebar.net>). In fact, not only are the static pages responsive,
but the _entire_ administration dashboard is responsive as well, so users of
the service can actually manage their entire account on their phones if they
wish. Often, I want to check analytics from my phone, and with this design I
can do that. In contrast, my original prototype design was _not_ responsive.
It made the site impossible to show off on my phone to anyone who was curious,
and there was no easy way to read the text.

It isn't perfect on mobile, but it does give a slightly better experience when
just casually surfing, and it's worth it to me-- even if it only affects 2%.

~~~
splatcollision
Great points. Also you never know who's in that 2% of visitors - they may be
your most important next customers!

------
petenixey
Great post and great reality check. If the data really showed that people
shopping for Direct Debit do so from the desktop then this makes a tonne of
sense.

There is a certain mob dogma that occasionally overwhelms the design
community. The passion around responsive design today reminded me of the
heated advocacy of accessible design back in 2004. It was a good thing and
opening up the web to more people and especially people who are isolated in
the outside world is a wonderful thing.

When a site or a service isn't yet fully formed and doesn't know what it is or
who exactly wants it, "enabling it for everyone" can accidentally be paid for
by "making it appealing to no-one". You need to start by figuring out why
people want to go into your site and once you know that, let more of them in.

Some sites which are already useful can best improve themselves by making
themselves available to more people on more devices. During the teenage self-
discovery phase though, when a service is still learning who its customers are
and what it itself is, there's no point optimising that for everyone because
it could be different tomorrow. The important thing is to first of all find
out what is right.

------
speeder
980px is annoying.

I for example use at night as my "laptop" a cheap tablet with keyboard, it is
800px wide.

Also 980px also will suck for people with VEEEERY WIIIIDE monitors.

Or apple retina (that has absurd resolution, thus resulting in their site
becoming very small and unreadable).

~~~
lucian1900
It also sucks if you don't use a maximised browser window.

~~~
mlf
Exactly! I normally run two browser windows side by side on a 1600px wide
screen. I generally don't go back to sites that force me to resize my browser
in order to view them correctly.

------
DigitalSea
I can see where they are coming from, but I think they're missing the point of
RWD completely. Responsive Web Design is more than ensuring your site looks
good on a mobile screen, a truly responsive site will not only scale down but
also scale up for larger screens as well. They mention using a 980px grid, The
Semantic Grid System (<http://semantic.gs>) sounds like a perfect candidate
for this. You set your column width and gutters and it handles the rest for
you, set the container width to 100% for fluid and BAM! you've got a
responsive site that only needs minimal work.

The difficulty of responsive web design is way over-exaggerated. A decent web
developer shouldn't take any longer than an extra day (if that, just a few
hours) to make a grid based responsive site. I feel as though it's embedded in
my developer workflow so much so I don't think it makes things more
complicated having a responsive aspect. It's never taken me double the time
even when I first started building responsive sites, another exaggeration. All
you need to do is divide the width of an element by it's parent container and
multiply it by 100, the same can be applied for left and right padding and
margin values as well.

Another thing about RWD is if you're doing it for the sake of a good mobile
experience you've already failed. Shrinking a site down doesn't reduce the
overall page weight. An iPhone will still load stylesheets, Javascript files
and other unneeded bloat you're hiding with a display:none; so the experience
can sometimes be extremely cumbersome for a mobile user as opposed to building
a separate mobile site. Having said that, making an already relatively light
page respond to a smaller screen is acceptable.

PS. Don't forget to set max-width:100% and height:auto on your images as well!

~~~
pmichaud
I think you may be missing some of the difficulty in RWD. The hard part, as
you said, isn't implementing a few media queries and resizing stuff. That is
easy, you're right.

The hard part is the _design_. If you need to shrink an element down 50%, is
it still readable? Crisp? Does your logo do well under that kind of pressure
or does it become a blob of color? If you blow it up and make it 100% on a
large screen, how are you handling the columns of text? Because of course
you're not just letting text lines expand indefinitely, right? Because that
would be a readability disaster.

Those are just a couple examples of where an overzealous programmer can get
the design totally wrong by implementing the "easy fix." RWD is still pretty
hard to get really right.

------
homosaur
This post kind of annoys me actually. The only actual legitimate reason on
here not to pursue responsive is lack of mobile audience. The rest are
problems with not knowing what the hell one is doing. OF COURSE YOU'RE
SUPPOSED TO DO APPROPRIATE DESIGNS FOR YOUR MARKET, ALSO SKY IS BLUE. And
while your mobile audience is low now, you sure aren't going to fix that by
ignoring that audience. Now this product, perhaps that's okay. It really is
okay for everything not to be responsive, but the title of this article would
be more accurate if it were "we ditched responsive because we couldn't figure
it out."

~~~
untog
_The only actual legitimate reason on here not to pursue responsive is lack of
mobile audience._

Or having a separate webapp. There are numerous times when that is the more
appropriate response, even if it involves more work.

------
ChikkaChiChi
I'm on a Retina Macbook Pro 15" set to use "Best for Display" I use my web
browser on 25% of my screen via window snapping. Here's what I see now on
their website:

<http://imgur.com/0xy16xo>

...and the navbar does not scroll with the content, so I can't even click
"Sign Up" if I wanted to!

It's also inappropriate to disregard 2% of your audience unless you have
analytics proving that this minority is opting not to convert specifically.
What if your conversion rate is ONLY 2% and there is a corollary?

~~~
lukeholder
why are you putting a browser into 25% of the screen? Also, on a 15 inch
screen a retina resolution of only 1440 x 900 is pretty crazy. slide it up to
the next notch on the scaling in display preferences - i love 1680 x 1050 on
mine.

~~~
papsosouid
>why are you putting a browser into 25% of the screen?

Because that's how he wants it? I do the same thing, my web browser exists to
retrieve information from web sites. Having it take up my entire screen would
be a hindrance. People who foolishly assume that because I have a high
resolution display, that my browser must also be that resolution are, quite
frankly, incompetent. This is web design 101 stuff, nobody should be working
in a professional capacity that thinks a fixed resolution website is
acceptable.

~~~
lukeholder
Well would your argument stand if I said i have my browser filling 5% of my
screen? responsive design is useful, but designing for majority screen
resolutions is just good business sense. How far do you take responsiveness?
100px wide?

~~~
papsosouid
>Well would your argument stand if I said i have my browser filling 5% of my
screen?

That depends how big your screen is.

>responsive design is useful, but designing for majority screen resolutions is
just good business sense.

And limiting your site to 960+ is a pretty dumb idea for that reason. A
quarter of my monitor is 800 pixels wide. That is an entirely usable size, and
any decent website works fine in it. It is especially dumb to break a website
for people using <960px browsers when the website in question is incredibly
simple and could easily work in a 300px window.

------
tom_usher
It's perhaps interesting to note that at the size I run my browser (half my
screen horizontally), the 'Sign Up' button is cut off - maybe responsive is
slower to implement, but at least it makes you think about issues like that
before launching your new site.

~~~
hollandben
I have the same browser setup and a majority of the sites I visit have cut off
edges (I have to view most at 90% zoom). Saying that, I'd rather view at 90%
than be greeted by a site like FOWD -
<http://futureofwebdesign.com/london-2013/>

------
thejosh
Why not use something like Foundation that helps you with this, rather than a
static 980px?

------
robomartin
When thinking about these two options, responsive vs. not, I try to pull
myself away from the developer or designer roles. If wearing either of those
two hats one might be tempted to become an evangelist for responsive design
because, among other things, it's an interesting challenge. Intellectually
stimulating challenges do drive decisions sometimes.

What I do is put on a business hat and think in terms of actual benefits. An,
in my not-so-humble opinion, responsive design doesn't really mean greater
revenue. Here "responsive design" means a site where elements squeeze, move,
re-align, collapse, etc. as you grab the sizing handle on your browser window
and shrink or expand the browser canvas.

Why do I think this way?

    
    
        www.ebay.com
        www.craigslist.com
        www.nytimes.com
        www.latimes.com
        www.ticketmaster.com
        etc.
    

Of course, there are plenty of examples for responsive design. Amazon uses a
mild form of it and it works well.

IF responsive design were critical to keeping or increasing interaction or
revenue all major sites would be using it today. I think it might be safe to
say that the vast majority of the top 500 sites use fixed designs.

This doesn't mean that you can't have one or two alternative CSS layouts for
mobile viewing. That might be the smartest approach: one fixed design for
desktop and one fixed design for small screens.

With this, if you have the traffic, you can A/B test and slowly optimize each
fixed design to improve conversions. With responsive design you might have to
optimize over a dozen layouts, which is a huge job.

Again, in the end, I think that considering the options from a business
perspective can cut through the crud and cause one to focus on what really
matters if you don't have a hobby site.

~~~
larrydavid
I would argue that just because those fixed-width sites you mention aren't
currently responsive doesn't mean that they never will be, or aren't currently
in the process or being developed. It is certainly no trivial task to develop
a responsive version of a site like eBay.

Even though RWD is a relatively new concept for a lot of people, I think we
are past the "It's a fad!" phase (despite the small amount of middlebrow
dismissal/stubbornness that is still evident), and I think it's encouraging
that there are a lot of major companies embracing the approach. I made a quick
list off the top of my head below.

    
    
      http://www.time.com
      http://bostonglobe.com
      http://www.vogue.co.uk
      http://www.starbucks.com
      http://microsoft.com
      http://disney.com/?intoverride=true
      http://www.about.com
      http://www.sony.com

~~~
robomartin
There are always at least two sides to every story.

I guess the point I am arguing is that I don't think responsive design makes
you any more money than fixed design. If it did organizations such as eBay
would have certainly made the move by now.

At some level --at least for me-- if it isn't going to generate more revenue
it isn't worth the extra effort.

Clearly I don't have any data to back-up my claim so we'll have to leave it as
conjecture at this point. I can't say either way. Just a hunch from observing
what's going on with top-level sites both as a developer and a user.

I equate this to the whole 3D movie/3D TV fad. Yes, this is probably a bad
analogy. The point is that 3D has always been a fad. It comes back every N
years and everyone proclaims that "this is what it will take off". Film
producers get all hot-and-bothered and jump on the 3D bandwagon and forget why
people go to see movies: The story. A 1940's black and white movie with a
great story will always do better than a new film with a bad story, no matter
how much tech, 3D and special effects you throw at it.

I guess what I am saying is that content is far, far more significant than
design gimmicks. Customers don't come to your site to be in awe of your
engineering or design chops. Craigslist proved that point long ago. No, they
come to your site for the value they may be able to derive from it. Good
relevant content and great value are at the top of the list. Ease of use and
security may be second. Beyond that, everything else is optional and, in my
book, can only be justified if you can show that it can improve conversions
relative to other approaches.

As I said before, one of the reasons I currently tend to reject the idea of
responsive design is that it can create a situation where site optimization
becomes a geometric problem. Now you have a dozen layouts per page to optimize
vs maybe two. I've seen some really amazing optimization reports where things
as simple as the position and size of elements have made a huge difference. I
am not sure how you'd even begin to approach that with responsive design when
you've introduced so many additional variables in to what --in the cased of
fixed design-- was so simple.

------
pxlpshr
If your last site design was responsive without looking at analytics, your
first error was not making a data driven decision.

If no data existed, your product guy should have asked himself when was the
last time he evaluated and purchased a financial services product from his
phone. And asked people around you... answer probably would have been close to
0.

What should be responsive is your customer account center where a user will
want to sign in and check their balance while standing at a cash register
about to check out. And they might not have your app yet, nor want to download
an app.

I think it would serve you all well to compile user-stories the next time you
redesign anything, whether its your marketing site or account center.

On a related note, I think yalls acquisition designs look very nice. Props.

------
mark_l_watson
Only 2% of their traffic is mobile? Surprising in the modern world. So they
are a statistical outlier.

For most sites using tools like Bootstrap, etc. to make responsive sites using
media queries should in my opinion be the default strategy.

~~~
tomblomfield
Most people visiting our homepage are small business owners looking for a new
payments solution - this is typically done from the office, behind a desk.

By way of comparison, we also host payment "checkout pages" which allow these
merchants to accept payment from their customers. These customers are much
more likely to be using mobile devices, so we spent a lot of time making these
checkout pages responsive & fast-loading by stripping out unnecessary
javascript & other assets etc.

You can see an example of the checkout pages here;
<https://gocardless.com/example-checkout>

~~~
ChikkaChiChi
I'm a decision maker on products like this and in my case much of my new
product research is done initially from bookmarks I check out from my Galaxy
Note II while horizontal on my couch at home.

A site that adapts to whatever form factor I'm on screams "current technology"
to me and delivers the expectation that the product its selling probably has
equal attention.

In a similar vein, how likely would you be to rely on shopping cart technology
if the company's website had the old "Built for Internet Explorer" animated
gif from the Geocities days displayed prominently on its front page?

~~~
Chris_Newton
On the other hand, as someone who is also a decision-maker and currently
integrating with GoCardless, we have been far more interested in what _our
customers_ are going to experience than in what we see ourselves.

I’m going to give GC a free plug and say that so far what we’ve seen on the
information and back-end pages has also been nicely done, and as the guy using
it and juggling many other things as well I do appreciate that. But they’re
also a relatively young business, and if they have limited resources and need
to prioritise, I’d definitely prefer they prioritise improving the experience
for my own paying customers than for me as the admin guy.

~~~
ChikkaChiChi
I couldn't agree more. But what I gather from the article is that they
actually went back and started over and eschewed the design they already
had...

As a non-customer of theirs, I'm speaking from an impressions point of view.
Any new service I look at I am weighing my decision to dig further based on
the presentation of their product. Having it be too "markety" is just as bad
as having an e-brochure that looks 10 years old.

There is balance in everything.

------
conductr
As a user, I typically dislike responsive design on anything other than
email/blogs/news/text heavy content. Usually when I visit a business/service
site the first thing I look for is the "full site" link. Sometimes if I can't
find it, I just bounce.

I actually find it more inconvenient to be served a dumbed-down version of the
site just because I'm on mobile/tablet, when really I have a fully capable
browser. I don't know if my preference is (a)typical.

------
edbloom
I'm sorry that's a big step backwards.

At a minimum you should have incorporated an adapative (which is what most
people actually mean when they say responsive) grid like
<http://www.getskeleton.com/> into your redesign process.

Does it take a bit longer? Of course - but not much longer. Sounds like you're
just copping out of investing the time to implement this stuff properly.

~~~
MortenK
When you run a business you have to make decisions about where to invest your
time and these guys found that the extra time was not worth it for their
particular business. It has nothing to do with "copping out".

------
pjmo
I don't agree with those reasons at all. It looks like they tried to build
their mobile site by just downsizing their desktop site instead of going
mobile-first. And yea, not everything is easy and stuff may take a bit longer,
but next time and the time again you get faster and faster.

Doesn't seem like that innovative of a company with a post like that.

~~~
weego
Responsive design isn't an "innovation". It's a presentation shortcut. 1 data
source, multiple views. Considering how little of my career the idea of
responsive design has even been around let along appropriate (say the 6 months
to a year out of 15) I can't actually believe that the comments here so far
seem to assume that responsive is the defacto approach when it's solving a
problem that doesn't really exist by using a solution more complex than is
needed.

------
jongold
Responsive is a great tool, but it isn't a solution for every problem (or a
necessity). Too much dogma around at the moment; not _every_ part of every
web-property your company owns has to be responsive (but obviously optimise
the right bits for mobile - namely checkouts)

------
programminggeek
Responsive design is "hard" as in, it takes effort. It might be worth doing
for some sites and maybe less so for others. It's a question of priorities.

The bigger ongoing question is not up front cost, it's maintenance. Responsive
design might get you device support across bigger or smaller devices over time
without going back to specifically support them, as people are doing now to
support mobile and tablet.

We don't know what people will be using even in 5 years... iPad is what only 3
years old?

Not everything needs to be responsive or perfectly responsive, but getting the
best experience to your user on whatever platform THEY are on will always be
the name of the game (otherwise nobody would support IE 6, 7, or 8).

------
strictfp
Responsive design sounds like a glorified switch clause: instead of making
good fluid design which scales you essentialy fork your webpage design into
multiple versions, and swap between them based on screen size. Seems like a
bad idea to me.

~~~
papsosouid
It isn't, some people just do it that way. Competent web designers have been
doing fluid designs that work at any resolution for over a decade already.
Those also qualify as responsive, not just the stupid grid nonsense people are
obsessed with.

~~~
larrydavid
Not really. What you are describing is commonly referred to as 'liquid'. See
here for the difference between the terms responsive/liquid/adaptive
(<http://liquidapsive.com/>).

There is a lot of misinformation/misunderstanding surrounding responsive web
design, coupled with a decent amount of middlebrow dismissal. It is not simply
just shrinking the page down.

And the use of media queries, or 'stupid grid nonsense' as you call it, is
just one piece of the puzzle.

~~~
papsosouid
Your interpretation of what I wrote, and what I actually wrote share very few
similarities.

>See here for the difference between the terms responsive/liquid/adaptive
(<http://liquidapsive.com/>).

That website has no authority over the term responsive. That is precisely the
nonsense I am saying is wrong. Responsive is not defined as "having several
fixed layouts and choosing between them". Responsive is defined as "responding
to the environment and conditions to customize the behaviour". This
encompasses correct web design.

>And the use of media queries, or 'stupid grid nonsense'

Media queries have absolutely nothing to do with grids. We use media queries
all the time, every single site we have uses them in fact. We have no grids
anywhere.

------
mfsch
> Mobile visitors often have a very different set of objectives for visiting
> your site.

In my experience, this is not true anymore and continues to be less and less
the case. I thought this was the case before I started really using a
smartphone. Now I want to do exactly the same things than on a desktop
computer and the best mobile sites are the ones that let me do everything I do
on a larger screen and make me forget that I’m using a different device with
less comfort.

------
thomseddon
>> _responsive designs took almost twice as long to design and implement
compared to fixed-width designs. This was valuable time we could have spent
improving other areas of the product._

Does this include time to implement + time to write blog post about why you
did it? :)

I jest, but as screen size variation isn't resticted to mobile devices I tend
to go at least "semi responsive" from 1140 to perhaps 800
(<http://cssgrid.net/>)

------
eboyer
"I cant accomplish structuring my content for mobile audiences so I'm going to
give up and write an edgy post to put on hacker news."

Try harder.

Edit: Try starting with mobile first and maybe your content strategy will be
stronger for everyone else: <http://www.abookapart.com/products/mobile-first>

------
jordanmoore_
Responsive design as a design system isn't at fault here. The article implies
(indirectly) that it is.

------
aartur
What about increase in smartphones' screen sizes and resolutions? The next
generation of Galaxy and IPhones will probably have 1920x1080 5" screens.
Doesn't it invalidate the biggest need for responsive design (no need to zoom
to see 980px elements)?

------
heliodor
As with many technologies that become cool, more people jump on the bandwagon
than ideal. These guys realized (after some wasted effort) that they are over-
optimizing and went back to doing what's truly needed for their company.

------
zalew
<http://vimeo.com/32143919>

------
ommunist
I am 100% with the author. Moreover, I now always check the audience and try
to make assumptions about the changing browser usage picture. After that I
design for that particular audience, not for everyone.

------
mariusmg
I fucking hate the term "responsive design" because in reality nothing is
"responsive". A shitty fixed 980px site will still look like crap on 1080p
24'' monitor.

Calling it responsive just because the navigation menu is moved above the
content when viewing it from the phone doesn't make it "responsive".

~~~
lmm
You know what's really responsive? Proportional width, aka the default.

HN is great and usable on my 27" desktop monitor or my 4" phone screen. Less
design is more.

~~~
beaumartinez
If you call "having to zoom in to make the text even readable" great and
usable, then yes, HN is "responsive".

