10 ms·
Ditching responsive design
- tom_usher 14y agoIt'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 14y agoI 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/ http://futureofwebdesign.com/london-2013/
- thejosh 14y agoWhy not use something like Foundation that helps you with this, rather than a static 980px?
- homosaur 14y agoThis 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 14y agoThe 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.
- speeder 14y ago980px 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).
- nwh 14y ago> 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.
- lucian1900 14y agoIt also sucks if you don't use a maximised browser window.
- mlf 14y agoExactly! 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.
- deleted 14y ago[deleted]
- 14y ago
- pjmo 14y agoI 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 14y agoResponsive 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.
- JCraig 14y agoWith only 2% of visitors coming from mobile, why would they go mobile-first? 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".
- thomseddon 14y ago>> 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/ http://cssgrid.net/)
- zalew 14y agohttp://vimeo.com/32143919 http://vimeo.com/32143919
- mariusmg 14y agoI 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 14y agoYou 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 14y agoIf you call "having to zoom in to make the text even readable" great and usable, then yes, HN is "responsive".
- papsosouid 14y ago>You know what's really responsive? Proportional width, aka the default. 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.
- jordanmoore_ 14y agoNot if you use media queries that look for resolution and pixel density to make appropriate adjustments. It all comes down to the implementation. Your example is a generalisation sir. I can give you plenty of fine examples of responsive web design where it's more than "moving a menu". It's all in the implementation and the implementer.
- pxlpshr 14y agoIf 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.
- edbloom 14y agoI'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/ 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 14y agoWhen 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".
- heliodor 14y agoAs 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.
- linssen 14y agoThe 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 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.
- jordanmoore_ 14y agoResponsive design as a design system isn't at fault here. The article implies (indirectly) that it is.
- adriand 14y agoThis 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.
- roc 14y ago> "Personally, I would expect that this proportion would in fact increase over time" 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.
- 28inch 14y ago"As far as RWD taking twice as long to design and implement, perhaps this is just a question of experience. " 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: http://www.itv.com/ http://www.itv.com/ Fresh identity, responsive front page. All nice and smooth,right? But how about this? http://www.itv.com/tvguide/ 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.
- jongold 14y agoResponsive 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)
- mark_l_watson 14y agoOnly 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 14y agoMost 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 https://gocardless.com/example-checkout
- bthomas 14y agoDo you think a higher % of first time visitors come in on mobile? I'd worry that you are losing an opportunity to make a great first impression. Some people see a great responsive site on mobile and think "yes, I love when sites work like this."
- ChikkaChiChi 14y agoI'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 14y ago
- DigitalSea 14y agoI 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 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 14y agoI 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.
- petenixey 14y agoGreat 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.
- strictfp 14y agoResponsive 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 14y agoIt 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 14y agoNot 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/ 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 14y agoYour 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/ 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.
- robomartin 14y agoWhen 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 14y agoI 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
- sergiotapia 14y ago>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 14y agoHow does a 980px grid look good on a 768px-wide screen?
- sergiotapia 14y agoMy 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 14y agoI just asked because you specifically mentioned iPads, and 2 of the 3 models on sale today are only 768px wide.
- timrpeterson 14y agothis is some lame wackness, cmon try harder next time.
- conductr 14y agoAs 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.
- ChikkaChiChi 14y agoI'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 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 14y agowhy 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 14y ago>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.
- ChikkaChiChi 14y agoDon't get me wrong, I'm not willing to throw the baby out with the bathwater, but if I have a to-do of 20 some web services I'm reviewing to find the right competitors to pit against one another, I do judge a book by its cover in some respects. 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.
- ommunist 14y agoI 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.
- aartur 14y agoWhat 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)?
- eboyer 14y ago"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 http://www.abookapart.com/products/mobile-first
- andrewmunsell 14y agoPersonally, 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 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 14y agoGreat points. Also you never know who's in that 2% of visitors - they may be your most important next customers!
- mfsch 14y ago> 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.
- programminggeek 14y agoResponsive 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).