So would you rather piss off those on small screens, or go the responsive route even if it is not optimal for the small screen.
I always wonder how long it will take for tablets and phones to be so ubiquitous that this debate will become moot and you target mobile from the get-go?
"I am a fan of responsive (or alternative) design in certain situations – for example, when dealing with a web application whose desktop design could not practically be contained within a mobile device’s screen."
Note that the author is a wordpress blogger. He may be referring to traditional web sites more than the average HN'er, to who the entire web consists of apps (and a few blogs over there in the corner). I believe that his point has a lot more merits when considering web sites than when considering web apps.
For example, my favourite online newspapers on my cellphone are those which don't default to some half-arsed mobile layout.
Why do so many responses seem to be "well, that's just a bad example of it"? It reminds me of the similar "well, they're just not a true conservative/liberal".
So the converse is true instead? eMachines are PCs, thus all PCs suck?
Yeah, some responsive web designs suck. Some are good. Raging against all responsive web design is as silly as raging against all grouped and stereotyped things.
Except that skrebbel said "some half-arsed mobile layout", which automatically narrows us down to the cases where responsive design is implemented poorly. It is ridiculous to argue against a design technique because sometimes the technique is executed badly, and that's the argument that skrebbel's comment put forward.
And no, it isn't in any way similar to "no true Scotsman". There is a pretty simple and clear definition of what responsive design is, and that goalpost does not move from example to example. There are cases of responsive design that interfere with the user. There are other cases where you would only notice that it's responsive if you actually compared the site on mobile vs. on the desktop. The latter is good design, while the former is bad design.
Yeah as a full-time frontend developer this article doesn't hold much water. Responsive designs are a quick and relatively cheap way to get a mobile compatible site going. It help decrease bounce rates and increase conversions as well.
This article lost me the moment he quoted wikipedia to explain responsive design. This is not 8th grade, come up with your own definition if you're such an expert.
The rest of article was downhill too. Claiming the full site looks fine on your iPhone is akin to saying "It works on my machine!".
It's pretty much a waste of time from top to bottom.
Out of curiosity, what cell phone that meets the criteria can you afford? The iPhone 4 seems to go for about $200 used, or "free" if you want to tie it to a cell contract – since you are buying a cell phone, that seems like something you will need anyway. There doesn't seem to be a lot of margin for a lower-cost device there.
This only holds true if A: your user has never seen a mobile site before (and if they are on a phone thats true for about ~0.5s), or B: if your responsive design is poorly implemented. A well designed site will be intuitive.
2 - It Costs More and Takes Longer
Let's assume that you have customers that will use your site on a non desktop device. If that is the case - you are making users use the wrong tool for the job. A site that takes advantage of the desktop experience will not work as well on mobile. Creating a tailored experience for them will absolutely increase conversion (if your site converts anyone to anything), and at the very least, reduce frustration and eye strain. I can't speak for everyone, but the month or two of part time work it took one of my jobs to add a mobile site was paid for by the increase in sales not too much long after. Not only that, but its now built in. When the kindle fire was released, we saw great numbers on that device. Why? because the responsive design was well done and fit that device's screen great. Saying that it 'costs more' is incredibly short sighted.
3.Non-Responsive Designs Usually Work
'working' doesn't mean it can't work better.
all text websites work, too. But we use images because they enhance the experience.
4. There is Often No Load Time Benefit
All this is saying is that a lot of sites are done badly. This has nothing to do with the style of responsive design in general. Tools like Modernizr allow you to optionally load a number of resources that would otherwise not load.
5. It’s a Compromise
Of course? All design is compromise. The goal is to make the compromise in the favor of the customer.
Responsive design is not a silver bullet, and not always a good idea, depending on the site - but this article is /really
/ weak.
So many people talk about responsive design taking longer and being not worth the effort.... That's true if you start with the desktop and try and work your way backwards to the small screen, which is how a lot of designers look at it, I think.
If you take a progressive enhancement approach and work your way up from low-end mobile to full-featured desktop, the process is 100x easier and the end result is, in my experience, an overall cleaner and more stable code base that makes for better performance across all devices/platforms.
Untrue in my experience, but if you're experience has been positive that's great. I've done the mobile first approach and found that for anything with interactions that are more complex than a simple blog or other content driven service it does add significant time and effort and the quality of the desktop experience typically also suffers as most of the focus is on polishing the look and feel of the mobile browser experience in addition to addressing each and every browser quirk between Android and iOS.
I'm a fan of responsive/adaptive designs but based on experience just dont' feel I can always recommend the "mobile first" approach to startups. Perhaps for more established businesses that can afford the extra design effort, it's fine. I still have a lot of reservations though.
There are a lot of cases where responsive design just isn't a good fit, and something with complex user interactions (like a lot of web apps) is often one of them. Responsive design is great for things like content sites, galleries, informational sites... most forms of content publishing. Anything that requires the user to actually create and/or manage large amounts of data or has a lot of interactive media, however, would probably benefit more from a dedicated mobile site and/or app.
You are absolutely right about the complex user interactions. In that case the responsive design could just be informational only (hiding all the complex features that would otherwise be very hard to use on a mobile screen).
This is a terrible suggestion. The age of crippled, stripped down mobile sites is long gone, and smartphone users expect full functionality on their phones. If that functionality can be provided with a responsive design, that's great. If they have to use the regular website and do some zooming and panning, that's a nuisance, but one with which users are familiar. It's certainly better than not having the feature available at all, or having to hunt for a link to disable the mobile layout.
I'm really tired of everyone talking in absolutes (also the overuse of the word terrible). The right answer is (almost) always "it depends".
It depends how critical that functionality is to the core value the site provides. It depends how appropriate it is to a mobile platform experience.
As a contrived example I'd probably be perfectly happy if I could only browse, read, and maybe vote on HN if the mobile experience of reading was significantly improved. I never want to write a comment from my phone, I hate typing on it. Not a great example since a textarea isn't complex and it's easy to add to a mobile layout, I just want to get across the point that not all interaction is appropriate or important on every platform.
This is why responsive design is hard, because doing it well means far more than just changing the layout, size and visibility of elements. It is a different interaction paradigm and generally will need to be treated as such to maintain a quality experience.
>As a contrived example I'd probably be perfectly happy if I could only browse, read, and maybe vote on HN if the mobile experience of reading was significantly improved. I never want to write a comment from my phone, I hate typing on it. Not a great example since a textarea isn't complex and it's easy to add to a mobile layout, I just want to get across the point that not all interaction is appropriate or important on every platform.
But you didn't get across the point, because your example isn't true. I want to post on HN from my phone; heck, I've posted on HN from my kindle before. I wouldn't give that up for all the optimized mobile design in the world.
Grandparent is right, an absolute is appropriate here. Provide all the functionality of your desktop site, or I won't use your mobile site.
I decided to try converting some of my site designs to bootstrap recently, instead of having one of our developers do it. I haven't actually coded the HTML/CSS design on an entire page in 3 or 4 years now (not counting simple stuff) and this was light years easier than I ever remember. If responsive design is hard, your doing it wrong.
You built one very basic bootstrap site and despite not having done HTML/CSS in 3/4 years you've now got the expertise to tell everyone else they are doing responsive design wrong?
I've built responsive sites in Bootstrap, Foundation and "without a net" and I wouldn't presume to tell anyone what's hard or not about responsive design or even if I'm doing it right or wrong. Look if out-of-the-box Bootstrap is good enough for your needs (and more importantly your user's) awesome. That's called an anecdote.
When I shifted my design thinking to use this approach to building UX, I found not only were my sites/apps easier to bring to mobile but the desktop versions were usually better as well. Mobile first designs often lead to better designs on desktop, at least in my experience so far (with content-heavy apps).
>That's true if you start with the desktop and try and work your way backwards to the small screen
I resize my browser window to be less wide. If it looks too big, I add some CSS to fix that. I resize it to be even thinner. If it now looks too big again, I'll add some CSS to fix it. And then I'm done.
Granted, I'm a programmer, not a designer, but this is the way I do "responsive design".
That's exactly how I started, with the low-end mobile and worked my way up. Check out a little project I made using css media queries. http://www.TimeForZen.com (resize the window width to mimic tablet and smart phone widths)
It didn't defeat user expectation, it didn't cost more and take longer, it works better than a non responsive design would, it doesn't really save any bandwidth but it does make code maintenance easy, and it's NOT a compromise.
I can see some of his points when applied to more complicated non-blog sites with ads and sidebars. Rather than say "responsive design isn't worth it" he should have written it from the perspective of "responsive design isn't always enough".
When I tap-zoom the text in your "about" page on my (retina, iOS 6) iPad, the text box moves off the screen to the left, and when I scroll down on the same page, the top of the text box moves down with the viewport. Sadly, I have come to "expect" these sorts of strange behaviors on responsive sites...
And while modern phones have become rather good at zooming on the content (which does not mean the text gets big enough, far from it, I regularly encounter blogs I can't read without using readability other other equivalent tools, because the font is too small even zoomed in) scrolling is still rather fiddly, especially one-handed: it's not rare that the scrolling "starts wrong" and I end up decentered from the column I want to read, and now I have to fiddle with positioning and zooming to get back to reading.
To start, regardless of whether the experiment pays off long-term, that does not negate the fact that it does require extra design and development time. There is much more code to handle, regardless of whether you use a framework or build it bespoke. Additionally, whether you design for mobile first, or last, there is more design time required. Period.
Second, both the author and OP have lumped 100% of all websites together, and generalized the argument. Sure, responsive may be worthwhile in some cases (as the post misses), but there are many cases where it isn't worthwhile.
My argument for using responsive is that yes, it's worthwhile, if and when the return is there. As a freelancer, this means I must be getting paid for the extra work. As a company owner, this means that we must see value from the resource spend, which could be in the form of better UX, more eyeballs, or more profits.
Indeed. I consider myself fairly well informed compared to most of my peers, but the sheer choice of technologies for building modern web apps (responsiveness, other front-end UX considerations) is daunting. I'm trying to build up a list of modern web design/development links for myself, but I'm already lost. The parent comment about "modernizr" made me sigh with frustration: yet another tool/tech I don't know about or have time to learn.
I don't meant to be rude but if you are not familiar with Modernizr and you work with markup; you are probably nowhere near as well informed as you think you are.
No one is saying that it takes extra time and money. Everything that is done in your life takes time and energy. But if you can do x amount of work and get y amount of gain, where x < y, I don't see the fact that x exists as a negative.
To your second point, please see my conclusion. I agree with you.
I'm confused. Is this argument for responsive versus standalone desktop or mobile, or responsive versus two sites, one for each.
Because I'd like to say that managing two projects, be it two code bases that both have to be created and configured, takes just as long if not longer, than simply building the edge cases needed for an intuitive responsive site.
But there's points for both methods in my books. I just think not accounting for mobile either way is ridiculous (unless a client is unwilling to pay for it).
I'm saying that in many cases, you don't have two projects, you have just one, which is that of the website built for desktop/laptop screens. Could be a cheap client, or a short-term project that doesn't require a mobile site, etc.
Actually, I think he's suggestion that we should let the hardware manufacturers and OS providers worry about scaling content to their screens/OS, rather than doing it all client side.
The hardware/OS-providers will almost always do a far worse job though, because they simply don't have enough information. Just using smaller pixels or hardware scaling/filtering to linearly scale down a "big browser" site typically results in an unreadable page at typical mobile screen-sizes.
Useful size-adaptability is all about knowing what's important and what's not, and what constraints need to be maintained for usability. The site author knows these things very well, but the hardware / OS / browser do not.
I would argue 1 even in the case of users that have seen mobile sites before. Unless the desktop version of the site is completely unusable on a mobile device (which to me points to bad design anyway), I've hated mobile site experiences... the reality is that good mobile site design is the exception rather than the rule. Take eBay for example. The mobile site makes me feel like I'm on WAP and not a device with more power than the Space Shuttle.
On that note, I'm really curious what "continue to full site" clickthroughs are across the internet. I could be the only one thinking this way.
That is mostly because eBay is a generally badly designed site. They have one of the most averse-to-change user bases on top of it, so bad decisions stick for a longtime.
Check out amazon, or google for wonderful mobile versions of sites.
I don't understand your question - are you saying how to full site click throughs work? Most of the time it sets a cookie or a query string that overrides the session 'isMobile' value. If you meant something else - please elaborate.
If by google sites you mean google.com and the search results, I would agree, but anything else is usually a disaster, including pretty much all of google apps.
As the article says, the good sites are not the rule, but the exception.
And I think the question in the above comment was simply about wondering how many people, out of all mobile visitors to a website, click on the desktop version link (what percentage of users prefer the desktop version on their mobile devices).
No disagreements on eBay's terrible design. If you go to 5 different pages on their desktop site you'll get 5 fully different designs.
OK, let's take Amazon (I was going to complain about Google's image search for mobile but I just checked it and it addressed the issues I had with it... still no pinch to zoom, though). On the desktop site, I get a home page filled with images of products that I'm probably interested in based on my previous Amazon habits. On the mobile site, I mostly get text with a small image advertising the Kindle Fire. If I browse to books, I get ~5 list items on the screen at one time, vs the desktop version (on my mobile) that gives me a landing page of bestsellers and books tailored to my interests. There's a whole layer of functionality missing on the mobile version for the sake of formatting that I don't honestly need. The reason why the original iPhone's web browser was so amazing was that it made it comfortable and efficient to browse full desktop web pages on a small screen via the whole pinch to zoom action. On a text heavy page, if I double tap it reflows the whole page to fit text on my screen.
Now, I'm not totally against mobile sites. I've seen some truly wonderfully designed mobile sites like Google's main page and some from design centric companies who don't rely heavily on long lists or grids of items. But I would generally agree with the OP that dedicated mobile sites are largely unnecessary at best and a design nightmare most of the time that actually serves to degrade the expected user experience. Users want to pinch to zoom and drag and double tap.
No I'm asking about click through rates to full sites. As in, what percentage of users choose to stay on the mobile version and what percentage click through to the full desktop site? What percentage of users know how to change their user agent on their mobile browser to only get desktop sites (probably minuscule).
I agreed with your first post. I am also holding out for the thought that there are exceptions. Interestingly, this comment stood out to me: "That is mostly because eBay is a generally badly designed site. They have one of the most averse-to-change user bases on top of it, so bad decisions stick for a longtime." But they have a huge userbase. Transactions are happening. This is where my confusion kicks in... People claim a site has bad design, but a ton of users actively use the service. I would venture to guess that a large percentage of those users are not tech-savvy.
So what is the measure by which we are able to claim that some site's design is "bad"? I provide the counter: large, active userbase and a lot of money moving through ebay. Perhaps not enough money goes there? Do we think someone could create a competitor to ebay with a "better" site design and steal ebay's crowd? What role does site design actually play here?
I think you bring up some interesting points, but I just want to address the "Do we think someone could create a competitor to ebay with a "better" site design and steal ebay's crowd?" line.
eBay isn't successful because of design or lack of design. It's successful because it's where people go to sell or buy in an online auction format. Same thing for Craigslist.
Yet look at Apple, specifically the iPhone and iPod. The smartphone and mp3 player were not new innovations, but Apple's design and marketing built the world's richest company on them.
TL;DR: Design makes all the difference. Design makes none of the difference.
I totally agree. It's happened to me many many times that some functionality is missing on the mobile website, and they usually make it impossible to get to it (eg. LinkedIn (and many other sites, including a lot of Google-made things) even though it has an option to go to the desktop site, it will automatically send you to the mobile site on some parts of the site, completely defeating the option of going to the desktop site).
My personal experience is that more often than not I end up searching for the "Desktop version" link. Especially on websites I'm familiar with. It would appear that "poorly implemented" is the norm. Bottom line: I suffer.
As a web developer, I find that implementing a responsive design to be a fairly and rewarding task. I think it is worth the efforts given the screen variances of web-enabled devices. However, not all websites/services are fit for a responsive model. Something like a Google Maps or gmail will benefit more from a separate mobile site. While a Hacker News could easily go responsive.
Give me a usable website over one that "meets my expectations", dammit! As much as I like the desktop version of let's say www.theverge.com, I can honestly say it wouldn't work on a mobile at all. It would be too cluttered, and the links too small to tap.
On a side note, is there a mobile version of Hacker News out there?
The author raises a good point about page load times not really being minimized and lack of thought around good responsive design. However, I'm unconvinced about the rest of the arguments.
For example, he notes "The first rule in usability 101 is to give the end user what they expect." Maybe for the first year or two in the smartphone era it might have been acceptable to simply provide a shrunken zoomed out version of the site. The onus would have been on the user to navigate appropriately. Which... is a lot of work. My (swiftly getting older) eyes appreciate the larger fonts and readability that in theory a responsive design provides. I now expect to be able to read am article in portrait mode with a decent font size without having to zoom in and out. Maybe I'm alone but I would not be surprised if more users expect this now.
With mobile-first you are optimizing for mobile, so the only extra bandwidth would be that fraction of your CSS that addresses bigger screens, so I think that his page load times is a weak point just like the first one, it all comes down to badly designed sites being bad.
> The author raises a good point about page load times not
> really being minimized and lack of thought around good
> responsive design
The author has likely not experienced the wonders of setting images as DIV backgrounds, then setting @media screen and (max-width: 320px) { #ID {display: none; } }
Or even going that (oh so tedious) extra step of sniffing browser signature at the server-side, and negating higher bandwidth assets.
Personally, I do not want to see a sidebar, taking up a third of the screen, on my smartphone. I find the example that he considers fine quite unusable and would not read that on a smartphone.
Wouldn't that make you think that we should revisit the sidebar to find a more effective way to navigate rather than simply telling the user that you shouldn't have any options?
> Wouldn't that make you think that we should revisit the sidebar
No.
The sidebar works and is effective when there's significant horizontal space, such as on a desktop screen with ample horizontal space. It just does not work when horizontal space is a premium, as is the case on smartphones (which generally barely fit a standard typographic line length at readable size in portrait)
Sidebars don't add anything necessary to the user experience. It's just clutter. If there's enough horizontal space, I suggest using columns instead, they fit the purpose better.
> Sidebars don't add anything necessary to the user experience. It's just clutter.
This is a really weird argument; sidebars are preferable to a lot of other patterns depending on the site and doesn't at all mean the content is less important than anything else on the page.
Can't tell if you're trolling at this point or if we're both misunderstanding each other. http://store.apple.com/us, the iTunes store and the App Store all rely heavily on sidebar navigation. Vertical content containers save space in addition to giving the user an area of the page that is generally relevant to what they're on the site for (shopping carts, advanced search, related content/archives, account information) without needlessly cluttering the more important horizontal space.
Neither. It's just that different things needs different design approaches. An online store has nothing in common with a presentation site. Just like a real store needs shelves, an online store needs to group the information somehow. Sidebars aren't the only way to group information. I bet Apple will redesign its online store in the near future.
As many people, I find a long text (like a blog post sometimes is) easiest to read if it is about ~80 characters wide. My laptop has a 16:9 display, and I usually have my browser in full-screen mode with tabs in a sidebar on the left. This leaves plenty of space for a website to put a sidebar and text side by side, so I don't really mind it on the desktop.
Obviously, if the sidebar does not add much (like on many blogs), I wouldn't mind if it goes away entirely.
edit: Columns seem to be problematic when there is no well-defined "end-of-page", as on paper.
Double-tap on the text. Like the article says. It really does work, quite often way better than attempts at responsive design. And then there's the reader functionality in my phone.
The issue isn't, I think, responsive design itself, it's that it's not so trivial to make it work better than device-based workarounds.
But why require someone to double tap on the text? On a blog like this, the primary action of the user is to read the article. It's bad user experience to require an extra unnecessary step to do the primary action.
Because you might have some more pressing issues to fix than that -- it's not a good experience, but, unless you did something horrible (which newspapers often do, unfortunately), it's not that bad either. It is economy of time and attention, especially as there's always a risk that your "better" version won't be good enough anyway, and people like me will use the text extraction features of the browser anyway.
Edit: I don't mean to say that it's necessarily a bad idea to go responsive -- it's just that it's not a clear, universal win.
Is it just me, or is double-tapping on text still not usable enough? Every time I do that, my finger inadvertently slides horizontally instead of vertically, and I need to re-center the text to continue reading.
This is one of the main reasons I love readers like Instapaper.
The author fails to take into consideration tablets, e-readers, smart TVs and every other device, currently available or in the distant future, that will have a web browser.
"It Defeats User Expectation"
So let's keep everything exactly the same?
Responsive design to me is progress, eventually we'll either come up with good practices for working with it or maybe something else will take it's place. The way we access the internet is in constant flux and the 960 magazine layout has many pit falls in terms of usability outside of desktop sized screens.
Like the author says, I would argue that it depends on the experience. The first thing to determine is: what is the core experience you're going after. For example, if you're an e-commerce website and your visitors expect to be able to find things, follow things, and then buy things, a mobile website that leaves out key functionality is frustrating.
There have been many a time that I've searched desperately for the "desktop version" of the site because I need to do something that the mobile version doesn't allow me to.
Terrible article. The problem with it is that you effectively explained why typical responsive design (specifically) is not worth it. The older you get, the more accustomed you become to expecting everything the same way. Accept change! There is nothing wrong with it!
Preface by saying responsive design _can_ be worth it.
That said: If your mobile phone has so much trouble displaying a 960px width static centered website (the norm on the current web), so much so, that your mobile browser demands a different design, then I posit your design isn't broken, some mobile browsers are broken.
I expect that in the near future, when resolutions get upped and mobile browsing experiences advance, responsive design becomes more and more unnecessary. To me responsive design for mobile devices seems more of a band-aid for less capable devices. Less capable devices with post-stamp sized browsers, we will soon drop in the same pile as IE6 -- Because soon we can expect any browser on any device to be able to display a 960px width static centered design just fine, without responsive design. If responsive designs stays necessary, to me it would mean the failure of mobile hardware and software manufacturers.
Though I see a difference between access to design and access to content.
I think it is fine to just serve up a reset-CSS for 2008 blackberry devices in a few years, like some now do for IE6 browsers. I don't think it is reasonable or necessary to expect designers to create responsive designs that translate to 2008 blackberry devices (or IE6 browsers) and also work on the future devices of our choice.
You are making a very strong assumption that scaling a 960px fixed width site to a viewport on a device is an optimal solution. It's fantastic I can see the entire site on my device in landscape mode; it's a tragedy that I have to double tap on a text block to make it readable.
Designers should be working to eliminate unnecessary and repetitive interactions that get in the way of accessing content.
Seriously. Not to mention even if his "960pix wide" site is displayable that doesn't mean it will be usable on a very small screen (or window -- being able to shrink one's browser window can be very useful, but many sites become utterly unusable).
My phone has high-resolution screen, but it's pretty small too, and it can easily display stuff that's a complete pain to actually read because the font size is so small.
His examples of "just fine" non-responsive designs in small windows are, well, pretty horrible.
I dunno if this guy is ego-driven ("I will never allow my beautiful site design to be besmirched just to suit its users!") or just lazy, but one thing is clear: he doesn't care very much about his users...
A surprising (or unsurprising perhaps) number of negative responses to this article. I do see why people are so generally defensive of responsive design, I mean it just seems like the right thing to do, it fits with what we wish the commonly accepted wisdom should be.
That said, building anything more interactive than a blog layout with it is actually very hard. It is time consuming, there is tedious work to do to tweak for each individual mobile browser quirk, and it may not be the best thing for a startup to invest time in. "Mobile first" certainly sounds nice, but "desktop first" is probably a faster more efficient route to product-market fit.
So I'd just recommend caution in how strongly we parrot "responsive/adaptive all the things" as common wisdom without discussing the possible downsides. It isn't black and white.
I agree, responsive is challenging and always worth a conversation before starting. However, his arguments in this article have no place in any meaningful discussion. He essentially puts the blinders on and claims there's nothing wrong and mobile design is unnecessary.
Agreed it's not a very good article. I'm just bothered by how quickly the cargo cult behind any new technique or technology come out with their pitchforks.
Responsive Design doesn't have to be a pain if you just do a little bit of thought, research and planning, and a little bit know and care about your craft. Let the content inform the design, and plan from the start for flexible designs.
It is going to get a LOT easier when I'm done with the next revision of Edit Room... Designing to multiple custom breakpoints is amazing... [1]
Going responsive and flexible does involve a leap of faith, and articles like this one are from folks who have not yet taken it.
Simply put, Responsive design is only worth it if you do it correctly. Just because your site scales with browser dimensions does not mean that it scales with user expectations. There are a few rules to follow:
1) Test on as many devices as possible, even if you are using a tested framework. Your design is going to be different that what the framework author(s) have done.
2) Be agile and responsive to your users. Just because your responsive design is amazing doesn't mean that the user experience will match.
3) Catalog your "must have" features, such as search and navigation. Make sure that these "must haves" are present and accessible across all your designs. Loosing navigation on mobile means dead ends for your users.
4) Related to #3, keep your experience consistent across your devices. Perhaps mobile users do need a different site, but don't loose the core purpose of the site. Mobile shopping carts need to function as similar as possible to their non-mobile versions.
5) Responsive !== Mobile (sometimes). Just because the design scales with browser size doesn't mean it's ready for mobile.
6) Use a framework whenever possible. I don't care how smart you are, it's smarter to use a tested framework at least once. Even if this means that you eventually build your own, it will give you an idea of the conventions to follow.
7) Frameworks are awesome, but none are launch ready out of the box.
8) Find your dimension breakpoints, and what they'll do to your design. Don't go too crazy though, you don't need to design for every conceivable screen dimension.
This is an opinion. People are allowed to have them. The article may make points that some (many) don't agree with, but that doesn't make them not valid. That said, the title of the article inflates the argument.. just a tad.
This reads like someone's justification for their own lack-of-talent with media queries and CSS, or their laziness toward creating an optimized experience for all users.
"Responsive" is a trendy buzzword thing for what solid digital designers have been doing ever since Netscape 0.9b tossed alignment into the image tag (among other things)... paying attention to how a design looks on multiple screens. We just have more screens and means by which to optimize for those screens now.
And I'm really not sold on "mobile first" either -- feels like another short-lived trendy buzzword thing. Scaling a mobile design concept up to the desktop is shorting your 1024w and up users. Designers who care think about all screens at a design's inception... then plan the CSS accordingly.
138 comments
[ 4.2 ms ] story [ 191 ms ] threadI always wonder how long it will take for tablets and phones to be so ubiquitous that this debate will become moot and you target mobile from the get-go?
That's the whole idea.
For example, my favourite online newspapers on my cellphone are those which don't default to some half-arsed mobile layout.
Again, that's an argument against bad responsive design, not responsive design in general.
Yeah, some responsive web designs suck. Some are good. Raging against all responsive web design is as silly as raging against all grouped and stereotyped things.
And no, it isn't in any way similar to "no true Scotsman". There is a pretty simple and clear definition of what responsive design is, and that goalpost does not move from example to example. There are cases of responsive design that interfere with the user. There are other cases where you would only notice that it's responsive if you actually compared the site on mobile vs. on the desktop. The latter is good design, while the former is bad design.
The rest of article was downhill too. Claiming the full site looks fine on your iPhone is akin to saying "It works on my machine!".
It's pretty much a waste of time from top to bottom.
wrong. wrong. wrong. wrong. wrong.
A rebuttal -
1. It Defeats User Expectation
This only holds true if A: your user has never seen a mobile site before (and if they are on a phone thats true for about ~0.5s), or B: if your responsive design is poorly implemented. A well designed site will be intuitive.
2 - It Costs More and Takes Longer
Let's assume that you have customers that will use your site on a non desktop device. If that is the case - you are making users use the wrong tool for the job. A site that takes advantage of the desktop experience will not work as well on mobile. Creating a tailored experience for them will absolutely increase conversion (if your site converts anyone to anything), and at the very least, reduce frustration and eye strain. I can't speak for everyone, but the month or two of part time work it took one of my jobs to add a mobile site was paid for by the increase in sales not too much long after. Not only that, but its now built in. When the kindle fire was released, we saw great numbers on that device. Why? because the responsive design was well done and fit that device's screen great. Saying that it 'costs more' is incredibly short sighted.
3.Non-Responsive Designs Usually Work
'working' doesn't mean it can't work better. all text websites work, too. But we use images because they enhance the experience.
4. There is Often No Load Time Benefit All this is saying is that a lot of sites are done badly. This has nothing to do with the style of responsive design in general. Tools like Modernizr allow you to optionally load a number of resources that would otherwise not load.
5. It’s a Compromise Of course? All design is compromise. The goal is to make the compromise in the favor of the customer.
Responsive design is not a silver bullet, and not always a good idea, depending on the site - but this article is /really / weak.
If you take a progressive enhancement approach and work your way up from low-end mobile to full-featured desktop, the process is 100x easier and the end result is, in my experience, an overall cleaner and more stable code base that makes for better performance across all devices/platforms.
I'm a fan of responsive/adaptive designs but based on experience just dont' feel I can always recommend the "mobile first" approach to startups. Perhaps for more established businesses that can afford the extra design effort, it's fine. I still have a lot of reservations though.
It depends how critical that functionality is to the core value the site provides. It depends how appropriate it is to a mobile platform experience.
As a contrived example I'd probably be perfectly happy if I could only browse, read, and maybe vote on HN if the mobile experience of reading was significantly improved. I never want to write a comment from my phone, I hate typing on it. Not a great example since a textarea isn't complex and it's easy to add to a mobile layout, I just want to get across the point that not all interaction is appropriate or important on every platform.
This is why responsive design is hard, because doing it well means far more than just changing the layout, size and visibility of elements. It is a different interaction paradigm and generally will need to be treated as such to maintain a quality experience.
But you didn't get across the point, because your example isn't true. I want to post on HN from my phone; heck, I've posted on HN from my kindle before. I wouldn't give that up for all the optimized mobile design in the world.
Grandparent is right, an absolute is appropriate here. Provide all the functionality of your desktop site, or I won't use your mobile site.
I've built responsive sites in Bootstrap, Foundation and "without a net" and I wouldn't presume to tell anyone what's hard or not about responsive design or even if I'm doing it right or wrong. Look if out-of-the-box Bootstrap is good enough for your needs (and more importantly your user's) awesome. That's called an anecdote.
When I shifted my design thinking to use this approach to building UX, I found not only were my sites/apps easier to bring to mobile but the desktop versions were usually better as well. Mobile first designs often lead to better designs on desktop, at least in my experience so far (with content-heavy apps).
I resize my browser window to be less wide. If it looks too big, I add some CSS to fix that. I resize it to be even thinner. If it now looks too big again, I'll add some CSS to fix it. And then I'm done.
Granted, I'm a programmer, not a designer, but this is the way I do "responsive design".
It didn't defeat user expectation, it didn't cost more and take longer, it works better than a non responsive design would, it doesn't really save any bandwidth but it does make code maintenance easy, and it's NOT a compromise.
I can see some of his points when applied to more complicated non-blog sites with ads and sidebars. Rather than say "responsive design isn't worth it" he should have written it from the perspective of "responsive design isn't always enough".
And while modern phones have become rather good at zooming on the content (which does not mean the text gets big enough, far from it, I regularly encounter blogs I can't read without using readability other other equivalent tools, because the font is too small even zoomed in) scrolling is still rather fiddly, especially one-handed: it's not rare that the scrolling "starts wrong" and I end up decentered from the column I want to read, and now I have to fiddle with positioning and zooming to get back to reading.
To start, regardless of whether the experiment pays off long-term, that does not negate the fact that it does require extra design and development time. There is much more code to handle, regardless of whether you use a framework or build it bespoke. Additionally, whether you design for mobile first, or last, there is more design time required. Period.
Second, both the author and OP have lumped 100% of all websites together, and generalized the argument. Sure, responsive may be worthwhile in some cases (as the post misses), but there are many cases where it isn't worthwhile.
My argument for using responsive is that yes, it's worthwhile, if and when the return is there. As a freelancer, this means I must be getting paid for the extra work. As a company owner, this means that we must see value from the resource spend, which could be in the form of better UX, more eyeballs, or more profits.
No one is saying that it takes extra time and money. Everything that is done in your life takes time and energy. But if you can do x amount of work and get y amount of gain, where x < y, I don't see the fact that x exists as a negative.
To your second point, please see my conclusion. I agree with you.
Because I'd like to say that managing two projects, be it two code bases that both have to be created and configured, takes just as long if not longer, than simply building the edge cases needed for an intuitive responsive site.
But there's points for both methods in my books. I just think not accounting for mobile either way is ridiculous (unless a client is unwilling to pay for it).
Useful size-adaptability is all about knowing what's important and what's not, and what constraints need to be maintained for usability. The site author knows these things very well, but the hardware / OS / browser do not.
On that note, I'm really curious what "continue to full site" clickthroughs are across the internet. I could be the only one thinking this way.
Check out amazon, or google for wonderful mobile versions of sites.
I don't understand your question - are you saying how to full site click throughs work? Most of the time it sets a cookie or a query string that overrides the session 'isMobile' value. If you meant something else - please elaborate.
As the article says, the good sites are not the rule, but the exception.
And I think the question in the above comment was simply about wondering how many people, out of all mobile visitors to a website, click on the desktop version link (what percentage of users prefer the desktop version on their mobile devices).
OK, let's take Amazon (I was going to complain about Google's image search for mobile but I just checked it and it addressed the issues I had with it... still no pinch to zoom, though). On the desktop site, I get a home page filled with images of products that I'm probably interested in based on my previous Amazon habits. On the mobile site, I mostly get text with a small image advertising the Kindle Fire. If I browse to books, I get ~5 list items on the screen at one time, vs the desktop version (on my mobile) that gives me a landing page of bestsellers and books tailored to my interests. There's a whole layer of functionality missing on the mobile version for the sake of formatting that I don't honestly need. The reason why the original iPhone's web browser was so amazing was that it made it comfortable and efficient to browse full desktop web pages on a small screen via the whole pinch to zoom action. On a text heavy page, if I double tap it reflows the whole page to fit text on my screen.
Now, I'm not totally against mobile sites. I've seen some truly wonderfully designed mobile sites like Google's main page and some from design centric companies who don't rely heavily on long lists or grids of items. But I would generally agree with the OP that dedicated mobile sites are largely unnecessary at best and a design nightmare most of the time that actually serves to degrade the expected user experience. Users want to pinch to zoom and drag and double tap.
No I'm asking about click through rates to full sites. As in, what percentage of users choose to stay on the mobile version and what percentage click through to the full desktop site? What percentage of users know how to change their user agent on their mobile browser to only get desktop sites (probably minuscule).
So what is the measure by which we are able to claim that some site's design is "bad"? I provide the counter: large, active userbase and a lot of money moving through ebay. Perhaps not enough money goes there? Do we think someone could create a competitor to ebay with a "better" site design and steal ebay's crowd? What role does site design actually play here?
eBay isn't successful because of design or lack of design. It's successful because it's where people go to sell or buy in an online auction format. Same thing for Craigslist.
Yet look at Apple, specifically the iPhone and iPod. The smartphone and mp3 player were not new innovations, but Apple's design and marketing built the world's richest company on them.
TL;DR: Design makes all the difference. Design makes none of the difference.
Give me a usable website over one that "meets my expectations", dammit! As much as I like the desktop version of let's say www.theverge.com, I can honestly say it wouldn't work on a mobile at all. It would be too cluttered, and the links too small to tap.
On a side note, is there a mobile version of Hacker News out there?
For example, he notes "The first rule in usability 101 is to give the end user what they expect." Maybe for the first year or two in the smartphone era it might have been acceptable to simply provide a shrunken zoomed out version of the site. The onus would have been on the user to navigate appropriately. Which... is a lot of work. My (swiftly getting older) eyes appreciate the larger fonts and readability that in theory a responsive design provides. I now expect to be able to read am article in portrait mode with a decent font size without having to zoom in and out. Maybe I'm alone but I would not be surprised if more users expect this now.
I'm not suggesting pagespeed isn't important, that's something completely different and impacted by variety of factors.
The author has likely not experienced the wonders of setting images as DIV backgrounds, then setting @media screen and (max-width: 320px) { #ID {display: none; } }
Or even going that (oh so tedious) extra step of sniffing browser signature at the server-side, and negating higher bandwidth assets.
Effort. Try it sometime. ;)
No.
The sidebar works and is effective when there's significant horizontal space, such as on a desktop screen with ample horizontal space. It just does not work when horizontal space is a premium, as is the case on smartphones (which generally barely fit a standard typographic line length at readable size in portrait)
This is a really weird argument; sidebars are preferable to a lot of other patterns depending on the site and doesn't at all mean the content is less important than anything else on the page.
No, it's pretty much on target. Sidebars need to go away.
Obviously, if the sidebar does not add much (like on many blogs), I wouldn't mind if it goes away entirely.
edit: Columns seem to be problematic when there is no well-defined "end-of-page", as on paper.
The issue isn't, I think, responsive design itself, it's that it's not so trivial to make it work better than device-based workarounds.
Edit: I don't mean to say that it's necessarily a bad idea to go responsive -- it's just that it's not a clear, universal win.
This is one of the main reasons I love readers like Instapaper.
"It Defeats User Expectation"
So let's keep everything exactly the same?
Responsive design to me is progress, eventually we'll either come up with good practices for working with it or maybe something else will take it's place. The way we access the internet is in constant flux and the 960 magazine layout has many pit falls in terms of usability outside of desktop sized screens.
There have been many a time that I've searched desperately for the "desktop version" of the site because I need to do something that the mobile version doesn't allow me to.
That said: If your mobile phone has so much trouble displaying a 960px width static centered website (the norm on the current web), so much so, that your mobile browser demands a different design, then I posit your design isn't broken, some mobile browsers are broken.
I expect that in the near future, when resolutions get upped and mobile browsing experiences advance, responsive design becomes more and more unnecessary. To me responsive design for mobile devices seems more of a band-aid for less capable devices. Less capable devices with post-stamp sized browsers, we will soon drop in the same pile as IE6 -- Because soon we can expect any browser on any device to be able to display a 960px width static centered design just fine, without responsive design. If responsive designs stays necessary, to me it would mean the failure of mobile hardware and software manufacturers.
Don't forget a basic principle of the web: Accessibility.
Though I see a difference between access to design and access to content.
I think it is fine to just serve up a reset-CSS for 2008 blackberry devices in a few years, like some now do for IE6 browsers. I don't think it is reasonable or necessary to expect designers to create responsive designs that translate to 2008 blackberry devices (or IE6 browsers) and also work on the future devices of our choice.
Designers should be working to eliminate unnecessary and repetitive interactions that get in the way of accessing content.
My phone has high-resolution screen, but it's pretty small too, and it can easily display stuff that's a complete pain to actually read because the font size is so small.
His examples of "just fine" non-responsive designs in small windows are, well, pretty horrible.
I dunno if this guy is ego-driven ("I will never allow my beautiful site design to be besmirched just to suit its users!") or just lazy, but one thing is clear: he doesn't care very much about his users...
That said, building anything more interactive than a blog layout with it is actually very hard. It is time consuming, there is tedious work to do to tweak for each individual mobile browser quirk, and it may not be the best thing for a startup to invest time in. "Mobile first" certainly sounds nice, but "desktop first" is probably a faster more efficient route to product-market fit.
So I'd just recommend caution in how strongly we parrot "responsive/adaptive all the things" as common wisdom without discussing the possible downsides. It isn't black and white.
It is going to get a LOT easier when I'm done with the next revision of Edit Room... Designing to multiple custom breakpoints is amazing... [1]
Going responsive and flexible does involve a leap of faith, and articles like this one are from folks who have not yet taken it.
[Edit Room is fast, flexible design prototyping and css animation.](http://www.edit-room.com)
1) Test on as many devices as possible, even if you are using a tested framework. Your design is going to be different that what the framework author(s) have done.
2) Be agile and responsive to your users. Just because your responsive design is amazing doesn't mean that the user experience will match.
3) Catalog your "must have" features, such as search and navigation. Make sure that these "must haves" are present and accessible across all your designs. Loosing navigation on mobile means dead ends for your users.
4) Related to #3, keep your experience consistent across your devices. Perhaps mobile users do need a different site, but don't loose the core purpose of the site. Mobile shopping carts need to function as similar as possible to their non-mobile versions.
5) Responsive !== Mobile (sometimes). Just because the design scales with browser size doesn't mean it's ready for mobile.
6) Use a framework whenever possible. I don't care how smart you are, it's smarter to use a tested framework at least once. Even if this means that you eventually build your own, it will give you an idea of the conventions to follow.
7) Frameworks are awesome, but none are launch ready out of the box.
8) Find your dimension breakpoints, and what they'll do to your design. Don't go too crazy though, you don't need to design for every conceivable screen dimension.
"Responsive" is a trendy buzzword thing for what solid digital designers have been doing ever since Netscape 0.9b tossed alignment into the image tag (among other things)... paying attention to how a design looks on multiple screens. We just have more screens and means by which to optimize for those screens now.
And I'm really not sold on "mobile first" either -- feels like another short-lived trendy buzzword thing. Scaling a mobile design concept up to the desktop is shorting your 1024w and up users. Designers who care think about all screens at a design's inception... then plan the CSS accordingly.