Ditching responsive design
gocardless.com
gocardless.com
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.
That is actualy a rather bold statement and might be true for common patterns. Scaling, (and pricing) RWD is really challenging for me when it comes to unkonwn things like this:
Fresh identity, responsive front page. All nice and smooth,right?
But how about this? http://www.itv.com/tvguide/
well... I guess they just gave it up here. I`m not saying it is impossible to implement but I have no freakin idea how to estimate a deadline for something like this. And itv is a big company, with a decent budget.
An other example is the famous bostonglobe.com. Beautiful site, working nicely too, but it has freakin ~12K lines in the css!
So plenty of blind spots all over the place, especially for small teams and individuals like me, when it comes to estimating, scaling and pricing.
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.
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.
I find responsive design a cheap copout, jack of all screen resolutions, master of none.
Just create a good desktop design, and make sure it plays on a modern smartphone with tap-to-zoom. Tablets will work automatically.
I dont'see "more diversity of screen sizes" coming affecting this at all. New screen sizes will just be bigger than an 2010 iPhone/Android phone. Those can play well with desktop-sized designs anyway.
And even if you have a 30" monitor you still don't need more than 1000-1200 pixels of webpage estate anyway. For one, people can't read or follow freakishly long lines of text easily.
Even so, it's a matter of rate of growth vs lifespan of design, in the context of what your mobile users are actually looking to do.
Even if mobile use is growing, if people are only using their mobiles to do one or two things (say, search documents and view balances) it doesn't necessarily make sense to build and maintained a responsive design that delivers the 'full' experience on mobile.
Cost/benefit may well indicate it's better to do a desktop design + purpose-built minimal mobile design. Over time, things change and naturally the next re-design should revisit the problem.
But who knows? By then, people may be looking for interfaces and feature support for all-new devices. Say, wearables like the Pebble or Google Glass.
In terms of growth in mobile traffic, I have no doubt you are right. However, considering the lifetime of the design - I would be surprised if this number changes significantly before we do another redesign!
their decision might not be popular, but it is definitely right for them. especially in the short- to mid-term.
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.
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.
My analytics on my sites have shown people with screens smaller than that are in the very very small minority.
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%.
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.
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).
Websites on a HiDPI display are effectively pixel doubled, the viewing side is the same. The same happens with the iPhone 4 and later.
Deleted comment
Also, I avoid visiting Apple site (I never liked it, I never find what I want on it).
That is bad.
their focus on such an overwhelming majority of users makes a ton of sense from a business perspective.
(sidenote: does anyone with a VEEEERY WIIIIDE monitor maximize windows?)
Yes. I don't know why though.
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!
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.
Or having a separate webapp. There are numerous times when that is the more appropriate response, even if it involves more work.
...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?
The point is that not everyone uses your websites the way you want them to.
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.
If I was shooting from the hip, my immediate thought about a website I can't get to the sign up button in a basic setup has issues with their team doing proper testing, a possible inattention to detail, and more growth required in their product and processes until they have a fully-fleshed out and mature product.
I'm not saying that's the case; I'm saying that's what my impression would be with no other research.
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.
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.
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.
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.comI 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.
For less popular sites and sites with different usage patterns, people might not be willing to install an app and app development might be too expensive. In these cases, responsive design is an option to provide a smooth mobile experience without too much extra work.
Of course, this doesn’t change the point that you should evaluate the need for responsive design without bias, but comparing your site with popular websites might not give you the full answer.
Responsive design will not bring you one additional customer when compared to fixed design.
The geometric problem of A/B testing a responsive site makes it a loosing proposition in my book. If you applied half that effort to A/B testing a fixed layout site you run chance of improving conversions dramatically over time. The same optimization problem is at least N times harder with fluid design and, more than likely N2.
In short, from a financial perspective, not worth it.
This is simply untrue. Even exposure is a form of commerce, and if you can't sell your content, you're out of luck. If there are no other external reasons for the user to be there, she will close the tab and move on to more legible things.
People don't visit websites to be in awe of the design. They visit to get something out of them. Craigslist has more than proven that what most of us would consider absolute-shit design works just fine if what you are selling is what visitors want. You won't find me dead doing a CL-type site, but it does have the power to ground you when thinking of grandiose animations and all manner of neat-but-pointless design flights-of-fancy.
We can agree to disagree. For me, first is content or product, second is usable fixed design that converts well (through A/B testing) and a distant last is investing time, money and efforts into responsive design. I just don't see how it can possibly improve profitability.
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.
For most sites using tools like Bootstrap, etc. to make responsive sites using media queries should in my opinion be the default strategy.
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
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?
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.
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.
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.
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.
Doesn't seem like that innovative of a company with a post like that.
Sure, the design of the site might limit mobile use a bit, but it probably wouldn't cause that big of a disparity in and of itself.
Also, the post mentioned good reasons to go responsive or mobile-first and said that the benefits to a fixed layout for most pages outweighed the drawbacks for them. They have even optimized some pages for mobile where it makes sense to them.
Doing what is right for your business is more important than jumping on the newest techniques solely to be seen as "innovative".
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).
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.
>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.
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.
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/)
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
Calling it responsive just because the navigation menu is moved above the content when viewing it from the phone doesn't make it "responsive".
HN is great and usable on my 27" desktop monitor or my 4" phone screen. Less design is more.
Yes.
>HN is great and usable
No. HN is not the default, it uses both pixel and point dimensions, and makes unreasonable assumptions about them. If HN used ems or exs then it would be usable.