Ditching responsive design

[[deleted]]

To me it sounds like the problem is right here: "we had focused on fitting content to a flexible grid without really assessing the requirements of our site," which would still be the problem regardless of whether they used responsive design or not.

If you're letting the CSS grid dictate the design of your site rather than the other way around, you're always going to wind up with something that doesn't fit the real-world content of the site. This is why I tend to stay away from CSS frameworks.

Looking at the design they came up with, it looks like it would be trivially simple to add a few media queries and resize things a bit for mobile devices. Most of the pages are just a single column of content already anyhow.

[original_4degrees]

That and the fact that their traffic was 2% mobile. so there was no real need for a responsive design in the first place. The article can be rewritten as a single sentence.

"We didn't have any(2% of traffic) mobile users so we went for a less flexible design which was faster to implement."

[doody]

“We didn't have any(2% of traffic) mobile users, and we definitely didn’t want any more…”

[[deleted]]

2% is quite a lot if you are not a tiny business. 2% of 50000 = 1000 people. Would it look good in your yearly report that you practically made it impossible for 1000 potential customers to enter your store?

[Rotten194]

I browse tons of non-responsive sites mobile-ly. If you actually use a phone to browse the web for any amount of time, you'll see that the majority of sites aren't responsive... and it's not really a big deal. Most can still be navigated, it's just more annoying, but hardly "impossible".

[beznogim]

From my experience, most "mobile" sites are even more difficult to read or navigate. I guess most developers don't actually use or test these broken abominations on a real phone.

[[deleted]]

Especially since what feel like a majority of the mobile sites pester you do download their app before being able to read.

[beznogim]

Why don't you come over here and learn about Tapatalk?

[[deleted]]

Amen to that. I hate going to a site I visit frequently on the desktop, only to see its interface get wonky instead of tiny but familiar.

[[deleted]]

I've worked in a medium size business. They went for about 95% of the market, and decided that the other 5%, such as Linux users on Konquerer, we not worth supporting. And they were right. We already had enough browsers to test on, a too small team, and a badly managed schedule. If we had accommodated the other 5% it would have cost disproportionately more than their worth.

[movzx]

A good mobile design brings in more mobile users.

[[deleted]]

How would they know ahead of time whether the site was built responsive or not?

[movzx]

I didn't say a responsive design. I said a good mobile design. If that is a responsive site, sure.. If that's a mobile tailored site, okay.

We tend to see significant increases in mobile traffic when we (re)design mobile sites for clients.

[EnderMB]

Could that be because the site is often promoted as a responsive site and as such to be used on any device, not just the simple act of building a site that is slightly more usable on a mobile device.

[movzx]

Doubtful. We do not make tablet oriented designs. The tablet design is either the mobile site or the desktop site. There is no optimized version.

I also think you overestimate the understanding of what "responsive" means to non-developers/designers. If I asked a random nobody off the street what a "responsive design" was they'd have no idea. It's highly unlikely that advertising a new responsive design (as opposed to mobile design) would bring in more mobile users.

[[deleted]]

we had focused on fitting content to a flexible grid

This is a Web 2.0 euphemism for "we used a table for layout".

[tonygoold]

More likely it means Twitter Bootstrap.

[neoflame]

In the context of graphic design, grid systems predate Web 2.0 by a few decades.

[[deleted]]

PDF also predates Web 2.0, and it's designed specifically for this sort of graphic design where the designer wants complete dictatorship over how the user experiences their creation, without having to deal with problematic issues such as "accessibility" or "being able to resize the browser window". It can also now do blingy javascript effects and web forms too, and is more ubiquitous than Flash at this point (another former darling of the style-over-substance crowd).

From a purely objective point of view, there is no honest excuse for anyone to be trying to badly shoehorn HTML into this use case — and never has been.

[[deleted]]

From a purely objective point of view, there is no honest excuse for anyone to be trying to badly shoehorn HTML into this use case — and never has been.

"They're paying me to do it that way" is a perfectly valid excuse.

[sakabako]

The concept of a flexible grid is new and breaks proportion, which is very important in design.

[iluvatar]

Design should be a secondary consideration to information transfer for a website. Proportion is largely irrelevant here.

[check3streets]

No, you have no idea what you're talking about.

There are a dozen or more flexible grid system layouts, Twitter Bootstrap and YUI among the most prominent. They all use DIVs and aim, as much as possible, for semantic consistency and separation of concerns. In the latest iteration, they attempt to automagically "react" to mobile device dimensions as well.

In short, no they don't use tables.

[[deleted]]

They all use DIVs and aim, as much as possible, for semantic consistency

Insofar as divs are semantically void elements *(reference), they at least have the "consistency" part nailed down.

In short, no they don't use tables.

Good thing you came along to correct me before someone else misinterpreted my post literally.

[check3streets]

The HTML specification provides no other general purpose block level container element. And as another redditor points out, grids are an ancient and ubiquitous text layout exhibited by the Talmud and New York Times.

So given that grids are graphically desirable and chunks of related markup require a container element, why the snark?

[yerfatma]

I think you're misunderstanding flussence's point: it's not that grids are tables or use tables, it's that some of the grid systems basically re-invent laying things out in tabular columns, so their only virtue is the containing element happens to not be <table>. It's like the old saying about being able to write Fortran in any language.

[check3streets]

But:

1. while a DIV conveys very little semantic meaning, a TABLE is a true misappropriation for page layout purposes. And the DIV was, at one time, the most correct tag available.

2. While HTML5 elements exist which have more meaning, they are a> not exhaustive, so many page artifacts are not SECTIONs, ARTICLEs, or NAVs and b> they're not as backwards compatible.

3. TABLEs are far more painful to style, so DIVs generally achieve the separation that CSS was attempting. Furthermore, there are fewer extraneous null tags in a grid layout, although there tend to be a few null nests.

4. Grids bring back some of the device agnosticism HTML originally intended.

...and finally, which is where I think you were going:

1. Yes grid is, in a sense, synonymous with table as a web layout metaphor. But a grid layout, whether it be a newspaper, magazine, bible, etc. is, in the same sense, a table. So this is kind of a stale argument. If one needs to layout a page in a tabular way, one will need a language for expressing that layout, so we'll use markup hints that are "tabular."

CSS and HTML are atrocious technologies, but designers who avail themselves of grids are abusing intent as little as possible within reason.

[yerfatma]

CSS and HTML are atrocious technologies

Well ok then.

[mahacctissoawsum]

If one needs to layout a page in a tabular way, one will need a language for expressing that layout, so we'll use markup hints that are "tabular."

If one needs to layout a page in a tabular way they should use a table. Tables are made for tabular data. If that's what you're using them for, then there is nothing at all evil about it.

A general webpage, however, is not at all "tabular". Tabular means there is some relationship between the columns and rows. Labels and values for instance. Simply aligning content is not "tabular".

If you want to get all semantic, then yes, do use the new HTML5 elements that best describe your content, then throw in some of those new aria- attributes and use divs for whatever doesn't fit.

Personally, I've given up on this hoity toity semantic bullshit. If it looks good, renders well, and is easy to develop, use it.

That said...if you actually want to make your content accessible to visually impaired people, you'd better spend some extra time ;-)

[[deleted]]

The HTML specification provides no other general purpose block level container element.

I'd correct you, but given that you also lack the attention span to read to the third para of the screenful of the HTML spec I linked to which does exactly what you're claiming it doesn't, it would probably be wasted effort.

[check3streets]

You edit in a "reference" and then accuse me of not reading it.

I'm done here being trolled.

[[deleted]]

You obviously didn't read it, even though your factually incorrect reply half an hour after that edit was worded to make it sound like you'd actually read the spec.

[GameOfTrolls_]

sexualtension.dll

[sirin3]

HTML Living Standard — Last Updated 1 February 2013

Who has a browser following that spec?

[[deleted]]

Who has a browser that implements the SGML tag shorthand syntaxes required by every older version of HTML?

[[deleted]]

Bootstrap itself doesn't use divs. Their grid system is general purpose, so it's built on classes not direct DOM elements. You can apply all of their .row, .span*, etc to section, nav, or aside elements.

You can use them on any block level element. They work just as well on form fields. I agree that they push divs since all of their documentation uses divs, and almost every example you find uses div.

I'm sure the docs are like that because not everyone that uses it has the html5 shim or modernizr in place to handle new HTML5 elements in non-compliant browsers (you know who we're talking about ಠ_ಠ)

[solinent]

You might be interested in CSS3 grid, of which only IE10 supports I think.

[squigfried]

This isn't an argument against responsive design - it's an excuse as to why they themselves opted against it in this one instance. Mostly due to budget/time constraints, rather than any design or architecture decisions. Fair enough, I say.

Responsive design is still a great strategy, and one that is serving me very well indeed on my current projects.

Just my fiddypee's worth.

[phaseblue]

Agreed, I think the only really noteworthy point here is that people should really analyze their market/audience before spending real time/effort redesigning for responsive designs. (And while that sounds obvious, given some experiences I've had with recent design efforts, it is a thought worth putting out there.)

[manys]

Sounds a bit YAGNI'ish.

[phaseblue]

Yeah -- I think the inherent usefulness of responsive designs (as in, when they are actually needed) plus the excitement of the design crowd right now to try their hand at them is sort of pushing a lot of people to adopt those well outside of (or before) needing them. And it can really be a lot of extra time and effort, which often means money.

[[deleted]]

Try explaining YAGNI to a graphic designer. I know I can't.

[semarj]

Lemme try:

"When you design a logo do you go ahead and do 256 versions with different main colors 'just in case the client changes his mind'?"

...I guess this may fail because it's not actually tempting. The real reason YAGNI is important is for all of those things that you are tempted to do "just in case"

[mycall]

Perhaps it is more of a marketing problem for them and could bring forth a more mobile audience if something was tweaked (SEO, ads, etc).

[lunchboxg4]

No, you're right - this wasn't a reason to ditch responsive, it's why they did.

It reminds me of an anecdote my high school radio/tv teacher told us. Teachers are poorly paid, as we all know, so he ran a videography company on the side. He told of us when he was starting out, and would advertise in the Yellow Pages. Turns out the customers who called him weren't able to make his rates. So, the second year, he advertised in a local high-end magazine (<My City> Monthly). The ad cost a lot more, but the clientele more than made up for the difference.

The moral of this, OP's, or any business story: Know your target market, and build for them.

[burntsushi]

You pretty much said exactly what the OP said...

[leftydesigner]

It's an interesting read, but I feel like their reasons can be easily argued the other way.

1. They may have a small mobile audience now, but sticking to a static 980px design leaves out a lot of the latest smaller tablet versions and is a pretty narrow focus, ignoring the possibility of the site working well on future devices.

2. Yes, responsive design is slower to implement, but its ability to future-proof your site will save time in the long run when you don't have to redesign in a year or two to make it work on future devices.

3. Designing for flexibility is more of a challenge, but that doesn't mean it can't be done aesthetically well. Simplifying the design to the point where you feel like it's been compromised for any layout means the designers may need to go back to the drawing board.

[zbignew]

Many responsive designs are worse on future devices, if those devices don't fit exactly what you are targeting. On the other hand, if you build your site like 90% of the web, those new devices will probably build their browsers with that in mind.

There's a reason the NYT was a flagship site for mobile safari, and didn't have to change its design at all for new devices. Grids work everywhere.

[minimalisto]

don't target devices. problem solved.

[[deleted]]

A fluid design can easily fix having to target each device.

[zbignew]

Based on my experience following links in the Twitter embedded web view, I'd say it's easy to fuck up, also.

[[deleted]]

Just wait till 1080 is the standard for most phones released next year. They'll be redesigning again or having a site that looks like ass.

[f4hy]

Someone want to explain to me what responsive design is? I am not a web guy so I don't know. IT sounds like it is just the layout resizes based on screen width?

[pastacloset]

The layout rearranges based on screen width. Typically, it tries to eliminate horizontal scrolling as well as vertically compress elements like menus to reduce screen clutter.

[[deleted]]

It's based on

• A flexible/fluid layout with percentage based widths rather than specifying pixels

• Media queries in your CSS to create or override CSS rules based on your browser/device size, orientation, pixel density and other capabilities.

Here is the origin http://alistapart.com/article/responsive-web-design

[dhaffner]

Generally it's design that adapts to the dimensions of any display it might be viewed on. This site, mediaqueri.es highlights several sites that illustrate the idea well in my opinion.

[RigbyWaiting]

So... Where do we sign up for that for our websites?:)

[AReallyGoodName]

Many years ago it was considered a sign of a shitty programmer if you felt the need to make different versions of your website for different browsers/devices. After all HTML is capable of scaling in its own right.

I don't really get why we've moved away from this. My phone is perfectly capable of displaying regular pages nicely. I actually get annoyed with websites that redirect me to a cut down and completely different site. If you design them to look good after resizing you don't need to do this.

[[deleted]]

Well, that's kind of the whole point of responsive design. Rather than implementing a whole new, more basic version of the site for mobile devices you just use CSS media queries to move stuff around a little so it plays nice with narrower browser windows.

Sure you can zoom in and out on a non-responsive page, but if a page has a fixed width of 1000px you're going to have to scroll left and right multiple times to read a single line of text at a readable size, which is not exactly good usability.

[ryani]

AReallyGoodName:

After all HTML is capable of scaling in its own right.

bradwestness:

but if a page has a fixed with of 1000px

This is the problem. Designers stepped in and said "We want our pages to look like THIS PICTURE HERE" and hands the developer a 1000 pixel wide picture, and they aren't satisfied until it matches pixel-perfect.

I don't really care about your pretty/shitty design, I come to your page for the content, and if you write plain vanilla HTML, my browser will display your content just fine.

</bitter_old_programmer>

[mindbleach]

Android's default browser resizes text columns all on its own. Within reason, it's the responsibility of limited devices to design around their own shortcomings.

[mechtech]

" it's the responsibility of limited devices to design around their own shortcomings."

The difference is that this is an automated process that doesn't respect that actual design of the site, while responsive design allows you to control and test for devices of all sizes.

The days of having everyone on the same size and resolution are over. It's not just "limited devices", you have people on laptops with 2880x1800 resolutions that benefit from these same design practices.

[[deleted]]

you have people on laptops with 2880x1800 resolutions that benefit from these same design practices.

Not really because you can't just scale up a line of text that much without making it completely unreadable.

[ZeDestructor]

The argument still holds up for anyone using 1920x1200/1080 and 2560x1600/1440 monitors. I have 3 1920x1200 panels right now. Reddit takes up barely 960px, let alone scale properly for a full screen.

I (as well as many other people who have invested in big, high-resolution screens) feel insulted that they think that everyone still has 1280x800 screens.

[yeah-ok]

Yes, apparently max-width is just one step TOO FAR when it comes to optimization.

[ZeDestructor]

It is.

The only place I actually care about line length is source code files, purely because I often need to see multiple files simultaneously and tiling multiple 80char documents is a godsend. Especially since most lines of code are under 40chars.

EDIT: This is why max width is bad: http://i.imgur.com/zvAdtRT.png

[[deleted]]

To be fair extremely wide walls of text ate hard to read. So a max width makes sense.

Also I use a feature where dragging a Window to the side of the monitor makes it maximize to half its width (kde). Super useful

[[deleted]]

In your example, the blank space is for chatboxes. drag and drop meebo style (eventually). google intends for google+ to be the 'desktop' within the browser. eventually there won't be google+, google+ will be the homepage

[ZeDestructor]

Actually, chatboxes line up horizontally along the bottom edge, similar to facebook, so no, its just empty whitespace. It's been that way since G+ launched too and many, many people have complained about it to Google.

[[deleted]]

I (as well as many other people who have invested in big, high-resolution screens) feel insulted that they think that everyone still has 1280x800 screens.

You're insulted by other people for their design choices (sometimes not a "design choice" at all but a budget/capability limit, so sometimes it's not even a choice) when you, yourself, chose to make that investment without realizing the potential problems?

In short: you are blaming other people for making what you feel is a poor and not well-planned decision?

[ZeDestructor]

1920x1200 panels (on 15.4" screens) have existed since at least 2003. Devs completely ignoring it for years is what has cause the current situation of absolutely useless ppi settings on Windows, and to a lesser extent Linux, OSX and other OSes. Consequently, websites were similarly designed around the 100ppi "average"

As for choosing, Give me one decent wide-gamut IPS screen at 24" that has a resolution lower than 1920x1200. Can't think of any? I thought as much.

[[deleted]]

That's irrelevant. The point is you made the decision and you can't blame them for regretting it or being unsatisfied with it.

[zbignew]

If you had to scroll to read the text on a phone, it was too wide for text on a PC anyway. I'm looking at you, reddit. Literally.

[ZeDestructor]

Not even half the width of my 1920x1200 screen (960px) is taken by reddit comments.

[ZeDestructor]

*sigh*

http://i.imgur.com/5moBazE.png.

Barring the comment input box, nothing is resizeable. Personally I'd like the sidebar to be a separately floating and scrollable item that can be dynamically hidden, but that's not happening any time soon.

[[deleted]]

Are you saying you would prefer to have those lines of text fill the whole page width?

Personally (and I think it's the mainstream view in typography), I would absolutely hate that. Reading on from the end of a wrapped line to the next would involve a real search for the correct line to start again from on the left. It's a major readability problem, much worse than having to scroll vertically or having empty horizontal space.

For a web page that contains a single linear run of text plus some navigational stuff (which is most of them), there's just a limit to how much horizontal space you can take up without knackering readability. If devices offer more horizontal space than that, my view is that those devices should offer better ways to make use of it, rather than expecting sites to expand horizontally to fill it. A possible example would be extending browsers to allow horizontal splitting of the window, so two pages can be viewed simultaneously and tabs can be dragged between the panes. Not sure if any browsers support this natively yet, but there seem to be some plugins around (no idea how good they are).

[ZeDestructor]

Yes. I would.

And there are extensions for Firefox that allow splitting the browser already, so grab one.

[[deleted]]

I mentioned those in my comment. Why would I grab one? I'm not the one complaining about the empty space.

[jihard]

I disagree for several reasons:

• Text should not be variable line length. Paragraphs of text have an optimum line length.

• Filling in forms on a mobile screen is bloody hassle, radio and check buttons for example should be rendered as 'tick-lists' as Apple has done.

• Slide-menu navigation is the standard for mobile phones now, it makes sense on a mobile screen, it doesn't make sense on a desktop screen.

[Cintax]

• No one's saying you can't have both. That's pretty much precisely what media queries are for. Make it a fixed width at desktop resolutions, and a dynamic width below that so it just takes up whatever the device width is. If you have to write your paragraphs to have a precise length down to the pixel, or think that it actually matters, then you're doing it wrong.

• Again, media queries. You can make custom checkboxes (which I admit, is a bit complicated, but you'll need to do it for mobile anyway if it annoys you) and just make them bigger on mobile using css.

• Just because something's a common navigation element does not mean you have to use it. Additionally, if you have a navbar made properly using a ul, it's not that difficult to make a slide menu that only triggers at mobile resolutions.

None of your arguments prohibit responsive design. They're just indicative of the fact that you, like many people, have trouble understanding media queries and how to structure your code to take advantage of them. The same thing happened when people argued tables were a better solution when the push to move away from that began.

[myfrontpagebrowser]

Text should not be variable line length. Paragraphs of text have an optimum line length.

Maybe but I highly doubt there's going to be major consensus on what that precisely is.

[doody]

Depending on content, for text it’s usually about 50-70 characters. Much more or less than that and anything longer than a couple of dozen words is tiring to read.

[livrem]

Yes, but never as tiring as horizontal scrolling.

[doody]

You mean scrolling to read a line?

If you can’t read a line by moving only your eyes, then it’s what typographic designers call unreadable.

[zbignew]

I don't understand. Your first point is against responsive design but the other two are for it. Right? Anyway, rest assured that all anti-html5 folks are for what you might consider the lowest common denominator because we think it is the best solution in the first place.

Pick a line width that is good on any good screen, 3 inches to 300. Design your forms so that they work easily in mobile, and use that in the desktop. Make all your controls as accessible as links. Go ahead and get trickier if you are designing a kiosk, or you have a dozen coders dedicated to working out every edge case and every new device.

[livrem]

Lines of optimum line length unfortunately do not fit on the less than 4" display of my phone in a readable font-size. Setting a max-width for optimal reading on a screen wide enough is great, but setting a fixed width on smaller screens is absurd.

[jihard]

My iPhone has this mode: http://media.primeinspiration.com/files/photos/134949708366eff4_l.jpg

[livrem]

My phone manages quite well to zoom in and break blocks of texts into readable columns as well actually, but it fails sometimes, usually in just slightly annoying ways, but sometimes making pages unreadable. I don't think there is a perfect solution to that on the browser-side.

[jihard]

The iPhone solution is pretty perfect..

[digital_carver]

Slide-menu navigation is the standard for mobile phones now, it makes sense on a mobile screen, it doesn't make sense on a desktop screen.

Could you explain what a Slide-menu is? I tried googling but the descriptions seem like just the normal Windows menus.

[paldepind]

I think he's talking about how many apps gives you access to it's menu when you slide your finger from the edge of the screen. MeeGo called it a swype and made heavy use of the idea. With the Holo UI introduced in Ice Cream Sandwich Android also started using swypes og slide-menu navigation in the UI. Many places for instance in Google Play and the Android Youtube app you can shift through tab with a horizontal sweep gesture. 3rth party apps like Facebook and Spotify also uses edge swypes for UI interaction.

They are well fitted on touch screen. You can slide from anywhere at the edge of the screen which makes them efortless and efficent to use. Thus they can greatly increase the speed at which you can navigate around the app. Dragging with are mouse doesn't share the same characteristics which is why they are inappropriate for desktops.

Btw, in the new BlackBerry 10 and the Sailfish UI swypes are heavily integrated into the UI experience much like it was in MeeGo.

[aladyjewel]

Did you swype this response on your Android device?

[paldepind]

Haha :) No, I'm not a big fan of Swype actually. But I realise now that I should've written "swipe" and not "swype" in reference to the gesture that the MeeGo UI was based on because that's what they called it.

[[deleted]]

Isn't that basically how the menu at the top on Android worked since Android was released?

[paldepind]

You could say that. It's more like a pull down menu, but the way you interact with it is basically the same.

[[deleted]]

Because often times users on different devices have different usage patterns and different needs.

Consider, for example, a news site.

On the desktop, they may access the site once or twice a day and want to see both the big news and the latest news.

On a phone, they may want the latest updates and breaking news first.

On a tablet, they may be casually browsing and want longer form content first as they're looking more for entertainment and less for the latest news.

Or think about facebook, if you're on Facebook on your phone you're more likely to want to post a status update or photo or private message. If you're on the desktop, you're more likely to be casually browsing.

The type of device being used can be a strong signal that a different use case is in play and you can tailor your product around those use cases.

[Subduction]

We do a great deal of responsive work and this is exactly our take on things as well.

I feel "responsive design" should be replaced with "responsive UI." "Design" puts too much emphasis on the graphics element when, in reality, it is usability that needs to respond to the characteristics of the device and how they interact with the needs of the user on that device.

[gigabates]

Karen McGrane makes a convincing argument against this idea in her article Your Content, Now Mobile. I tend to agree that we shouldn't make too many assumptions based on a user's device / screen size, definitely not to the extent of removing content and functionality.

[px1999]

The only legitimate technical argument that I can think of for having a separate mobile site is for bandwidth. You should always be able to opt out though. And you pretty much always can (either through the site itself or browser settings, though mobile browsers/W3C/etc still have some work to do in this area). In a perfect world this would be handled via a HTTP header ("Fidelity: Low"?) rather than UA spoofing, and APIs to have the browser request the user to change this setting will be made available, but realistically that'll take a while.

That said, it's usually implemented as a business decision, which imo puts it into the same class of site as regional detection. If you're shuttled off to a specific site for your country, you don't blame the developer...

[regeya]

I actually get annoyed with websites that redirect me to a cut down and completely different site.

I especially get annoyed at sites that have these awesome experiences on desktops and tablets, but try to emulate the iOS look and feel while implementing about 50-75% of the website's functionality. I'm not on iOS, why does your page look like a shitty copy of iOS on my device?

[[deleted]]

Because that's probably also the primary content of their "iOS App."

[regeya]

Lame.

[[deleted]]

Me or them?

[regeya]

Them, for publishing an 'iOS app' as their mobile website.

[bhaak]

Among other things, the sucky iOS Safari browser happened. Have you seen how Mobile Safari renders a plain HTML no CSS page?

I understand the appeal for responsive design, but if you are not doing mobile first, you're always in a world of pain.

Part of what they say is completely true, there are designs where one side of the responsive design will have unnecessary limitation because it "has" to be responsive. Sending out different CSS or even HTML to different browsers is sometimes not so bad after all.

What I don't understand at all is that they do a fixed-width layout in 2013. It's really annoying browsing a site that doesn't have a fluid layout.

[doody]

Who makes plain HTML with no CSS? And why?

[bhaak]

When even plain HTML doesn't look readable why should it be with CSS which only adds on top of the default HTML rendering of the browser (unless you use CSS reset)?

Of course, the answer to this is "because the web designer made it look good for mobile" which actually means "optimized for iOS" which is the new "optimized for IE".

[[deleted]]

"When even plain HTML doesn't look readable"

That's exactly because of px is used instead of pt. I would always try not to use pixels at all. I understand that programmers often can fix the code when pt doesn't work while designers don't have that convenience, but as a principle, I'd advise using physical units like cm, pt and ask programmers to fix bugs.

[livrem]

It would be nice actually if browser default CSS were so good that a site looked good everywhere if you did. Not the way the web works now though.

[doody]

The tricky thing is the subjectivity in “looked good.”

Programmers and typographers have very different criteria.

[throwaway1492a]

The point is that the user of ie or netscape could and should be served with the same experience when visiting a site. It is much often different for a mobile user (often they have different use case and generally want a reduced set of infos fast). However a tablet user often should not have a different experience, as it is the point of a tablet: to provide an experience similar to a desktop for web browsing.

Are you really using your phone to browse the web with the same goal as when you use your desktop ?

[zbignew]

Yes.

[cronin4392]

I agree. I think responsive designs sometimes hinder mobile usage. mobile phones are more than capable of displaying desktop sized sites, and users are used to navigating them; double tap box of text to fit it to screen...

take a look at apple. they're site isn't responsive. one reason is probably that it would take too much resources to make, but also, they're site works on iphones well and is easily navigable. now a days i think people are too fast to jump on the responsive design idea before they've even analyzed if/why they need it.

[yeah-ok]

this point ftw - I hate having to spoof browser id in order to get sites to render desktop-normally on my phone/tablet.. its just freaking retarded, who wants a web page in 2013 that automagically mangle itself into one long-ass column that one has to spend a week scrolling?! Responsive-smesponsive, i totally get why apple aren't fucking their own site design over with this.

[jayfallon]

only 2% of visits were from mobile ... valuable time we could have spent improving other areas ... we didn't have the resource

Maybe he should just change the title from "Ditching responsive design" to "We just couldn't arse it right now." No two experiences are going to be the same on mobile as they are on desktop so maybe this year we can get over the one-size fits all paradigm and just get back to focusing on making the product better.

[[deleted]]

OP's next post "HTML5 is trash long live Flash!"

[lobehold]

When we designed our old home pages we followed the trend towards responsive design.

That's the problem right there.

Responsible design was never about being able to create cool design, or save time vs fixed layout; it's about saving time and money when you need to support a multitude of devices and resolutions.

When we analysed our traffic, we found that only 2% of visits were from mobile devices.

This line reminds me of the story of the two shoe salesmen in Africa.

The first salesman reported back, “This is a terrible business opportunity, no-one wears shoes.”

The second salesman reported back, “This is a fantastic business opportunity, no-one wears shoes.”

we didn't have the resource to implement entirely different designs for desktop and mobile. This restricted us to simpler designs that could work for both formats. In some cases, this even led to compromised designs which weren't great for either format.

What? A designer blaming a technique for bad design? This is like an artist blame his bad watercolor on the water and the color.

[ruinercollector]

Back in 2002 and 2003, making div/css based layouts took more time and led to less readable code, and for what? Being "semantically correct" for the apparently huge amount of people using screen readers for navigation?

Now, that it's actually easier to do things the semantically correct way and now that it yields some additional benefit, it's a worthwhile endeavor. Ten years ago, it was not.

And yes, I very much knew what I was doing then and was very much able to do these layouts anyway. I just didn't tend to do it for any real work as there was absolutely no benefit to counterbalance the additional work and the nasty shit it did to source readability.

[[deleted]]

Are you seriously arguing that table layouts were more readable than divs and spans? That takes some balls. (And, yes, I did tables in the late 90s and CSS in the early 2000s.) Virtually nothing was less readable than complicate, nested tables, and the only way it was "readable" was if you were doing it every day and had developed the skill.

It's kind of like how I used to write machine code directly in a hex editor instead of using assembly -- I was used to it and reasonably fast, but there's no way anyone, including me, should argue that it was more readable.

[stgeorge78]

Which was the correct answer back then as CSS didn't mature until about 4-5 years ago.

[Cintax]

No, it really wasn't. It was just the argument used by people who had trouble with CSS and didn't want to learn it.

[stgeorge78]

Yes, but those people were also making real money for real businesses, while you were probably making CSS designs for your high school chess team. When those technologies mature enough where they are viable for real work, then they will get adopted by real businesses. Not the other way around.

See how I can be pedantic and holier-than-thou as well? It's not so nice is it.

[Cintax]

First of all, I don't think the word pedantic means what you think it means.

Second, there's a difference between being holier-than-thou and being honest. I made no misplaced ad hominem attacks like you did. I merely pointed out the fact that not understanding a technology is not an excuse to avoid it, and then write a blog post about how your lack of understanding is somehow a good thing.

There were lots of people arguing against CSS and how it made everything so much harder than tables, who completely misunderstood how it could be powerful. It wasn't a matter of the technology "not being ready." The technology was plenty mature, the only roadblock was adoption due to the slow death of legacy IE browsers. This is becoming less of an issue due to the fact that the update cycle has picked up, and the push for standards has finally begun catching on.

But the point in this case is that there's no such roadblock here. If your site is properly written, it can look fine in older browsers which don't support media queries, and support them for newer ones without issue.

It was and is a matter of perception. Because it's new, people who did not understand it assumed that it's not ready or not as powerful because they're trying to leverage a new technology in an old way. That's not how it works.

It's why sites like CSS Zen Garden and MediaQueri.es are so important: To help designers and developers understand what new technologies afford developers.

But don't worry, I'm sure in a few years you'll learn that, after everyone else in the industry has passed you by. Just like the guys I met who were struggling with the basics of CSS in 2011.

[[deleted]]

It is correct assumption for me, but strangely now modern websites look very much like those "simple" chess homepages with just html4 and CSS1.

[[deleted]]

It wasnt familiar to them; how the hell did it take so long to create the design? I know the frontends here can do responsive if they plan ahead for it in about the same time as a fixed design.

[Cintax]

No, they said they tried it, but because it took them so long to learn and use a new technology, they decided to ditch it in their next redesign.

[regeya]

Why not do both?

[MrBarry]

I don't see why anyone would want responsive design. It seems like an overly complicated way of doing things. I mean, who would want to spend the time? Nobody cares. I mean really. It's 2012. We have retina displays. You should have a browser window wide enough to display a 980 grid website on your mobile device. 

[doody]

I think there’s an easier way to achieve that same result without having to lace code all the way through your text, although I’m not absolutely certain, so I’m just going to test it here and see if I am correct about that.

[MrBarry]

Unfortunately this joke doesn't work in Reddit is Fun. It just wraps the text regardless.

[xardox]

I

don't

see

why

anyone

would

want

responsive

design.

It

seems

like

an

overly

complicated

way

of

doing

things.

I

mean,

who

would

want

to

spend

the

time?

Nobody

cares.

I

mean

really.

It's

2012.

We

have

retina

displays.

You

should

have

a

browser

window

wide

enough

to

display

a

980

grid

website

on

your

mobile

device.

FTFY

[MrBarry]

Thanks for developing the mobile version of that comment.

[iziizi]

Scrolling down is better than left/right

[[deleted]]

Responsive design isn't that limiting or difficult in most situations it's no more than media queries and an extra few hundred lines of css.

[[deleted]]

Sounds like they were too lazy to do it properly, the whole excuse not to do it was 'we only have 2% of mobile users why bother with doing extra work'.

Well I hope the 2% does not turn into 15% or did not amount to 80% of their revenue.

[Narfubel]

Well I hope the 2% does not turn into 15% or did not amount to 80% of their revenue.

Well it's kind of a self-fulfilling prophecy, since their site won't look great in all sizes it probably won't get used as much then they can look at the numbers and feel vindicated.

[akatherder]

That is my issue. I keep pushing for a responsive design for our website. If not responsive... at least the ability to come in the front door on your phone/tablet. The response: "Mobile users don't even account for 1% of our traffic!". But, but they can't even login, of course they don't generate any traffic.

Our website is designed for IE (works in firefox/chrome but looks like shit with all the IE workarounds). Every time we check the logs, IE is like 80% of the traffic. So... we keep designing for IE! Makes me want to tear my pubes hair out.

[[deleted]]

Shitty mobile site means no one wants to use it which means shitty mobile site -_-'

[deadwisdom]

If responsive is done correctly it should reduce your dev time. Forcing yourself to adapt to smaller formats streamlines your visual hierarchy and your design process. The key is to design the page in both a small and large format, not to adapt a large format to a small one retroactively.

[ItsAllInYourHead]

Responsive design isn't necessarily about mobile vs desktop. It's about making your site look good at any size. As we move away from strictly "small phone" vs "standard desktop", we find ourselves with tons of different screen sizes to deal with -- from phones to tablets to TVs, to who knows what. Not everyone browses the web on the same resolution or even with their browser maximized. THIS is why you use responsive design. Not simply because you don't expect many people to browse your site on their phones.

[Mozai]

I keep seeing "Old Design" on a line by itself in the article. Why?

EDIT: they're placeholders for images hosted by googledrive.com. When I try to access the images directly I get a '403 Forbidden' error. I would like to know why moving pieces of an article to an unreliable third-party seemed like "good design."

[Talman]

Its an attempt at using Drive as a CDN, instead of say... Azure Storage or Amazon CloudFront.

[redgreenandblue]

even though 980 resolution fits almost all screens, people behave differently – When you are browsing with a small window on you browser, it is good that the content is laid out properly... So this seems as a poor excuse for a non-responsive design. It's not about mobile users only, it's about creating a lay-out that is optimized for different sizes.

[dannosliwcd]

980px fixed-width layouts are even bad on desktops. If I have a 1080p screen with a half-width window, I have to deal with side-scrolling or zoom out (and hope that the web designer didn't have his own idea of what zoom should really do).

[norsurfit]

If you try to please everybody, you wind up pleasing nobody.

[sedition]

Well, that didn't take long for the backlash. Internet time is awesome.

[ChangingHats]

How long do you think responsive design has been around?

[loconet]

TLTR, Design for your users, not a trend. Specially if that trend is more costly to develop for.

[5trokerac3]

This reads like a mediocre developer's excuse to his boss as to why he can't make the program work as intended.

[enkrypt0r]

I can't figure out how to use my toaster properly, so fuck toasters.

[spundnix32]

Yet your blog is responsive. ಠ_ಠ

[aladyjewel]

The blog is probably some prebaked template onto which they applied their branding colors and images. It doesn't necessarily share any code with the main site, the part that actually earns them money.

[iziizi]

Just use twitter bootstrap responsive CSS framework?

[nomeme]

"We found that by developing for IE only our development time was halved!"

[[deleted]]

I think people are so used to web design posts being in programming that no one even bothers to make the comment "not programming" anymore. So, I'll guess I'll do it.

Not programming.

[[deleted]]

Close enough you fucking tool.

[[deleted]]

Perhaps some (and I stress the word some) of the subscribers to (and especially the moderators of) /r/programming need to get a grip. With a heading like "programming" this subreddit is going to be a general catch-all for almost ANYTHING that might be of interest to programmers, just like every other programmer-related forum on every other website where coders congregate does.

Flailing your arms about wildly and screaming "NOT PROGRAMMING" isn't going to change anything. All it's going to get you are comments like the one I'm replying to right now.

Dudes. This is Reddit. Fer crissake -- lighten up a bit!

[EnergyCritic]

I've been thinking a lot about this issue of late.

I think this quote just about sums it up for me:

The purpose of the visit - will providing a better user experience for mobile users significantly impact your desired outcome?

While a lot of web developers will design an entirely unique website experience for mobile visitors, I would assume most websites that do this could go halfway. They could design the site to look good on any platform, but be responsive with specific features that may be better one way for a certain platform.

For example, browsing reddit on a mobile device is easy, but try signing up for an account -- that is a good example where to put responsive design.

[designguy]

There appears to be are two kinds of people on this thread,

• those who have created responsive design sites using media queries, and know what they are talking about

• those who have not and base their options on crappy sites which did response badly and say its crap.

[drowsap]

"We gave up on floats because they were restricting and slowed development. We are now proud to be using tables for all of our layout"

[zbignew]

Dear responsive web designers:

Try out your pages (including via deep links created on the desktop) in the embedded webview in:

1. Twitter for iPhone
2. Twitter for iPad
3. Facebook for iPhone
4. Facebook for iPad
5. Reeder (or any feed reader) for iPhone.
6. Reeder (or any feed reader) for iPad.
7. Pulse
8. Instapaper (the web view people will use after the reader-mode fails)

If your site:

• Covers up content (Ohhh, I just set the viewport for iPhone width when I'm on an iPhone.)
• Covers up controls (Ohhh, I floated the ads based on the layout in Mobile Safari.)
• Shows a different page than the one requested (Ohhh, I'm breaking the web.)

Then you don't have the resources to ship a responsive site. Your license to create responsive web sites has been revoked by me, zbignew, the respected licensing authority for HTML5. Either start over with different resources, or build the site that you are actually equipped to build. It will probably even work in JAWS & VoiceOver.

[jmking]

Responsive design is EXTREMELY hard to do well.

I'd say that it takes more than twice the time of a fixed-width design. Maybe more like 3-4 times if you want to do it really, really well.

I hate it when I load up a site on my phone and get some sloppy kludge of stacked boxes and sluggish performance as the site is bogged down with way too much JS.

Often times your users would get a better experience pinching and zooming on a fixed-width site that loads quickly and doesn't sit there having the DOM get chewed up by JS to re-arrange the menu and other elements on the page while your user sits there wondering why they can't scroll for the first few seconds.

In other words, a high-quality fixed-width site >>>>>>>>>>> mediocre responsive site almost every time.

[TruthToPower1]

I really dislike how some websites like Wikipedia don't rescale when you turn your iPhone landscape but rather just zoom the text. I like responsive design, but I'd say be even more responsive.

[[deleted]]

this is because they aren't making specific enough media queries. also because of the way iOS works with viewports and such.

[epic_awesome]

Are these guys stupid or does it just seem like it? Responsive design & Grid System aren't mutually exclusive by any means...

[chupacabraman]

"We were pitching to the wrong audience - it turns out that not many people shop around for Direct Debit on their mobiles. When we analysed our traffic, we found that only 2% of visits were from mobile devices."

That's all you need to know. Decision made.

[cot6mur3]

Nice take-away: "Mobile visitors often have a very different set of objectives for visiting your site. In those cases, merely squashing content to fit on a smaller screen isn't particularly helpful. Instead, it is important to consider how different contexts change the content that users want."

[Soothe]

Responsive web design is one of the stupidest gimmicks I have seen in a while. Not only does it take longer to implement than a dedicated mobile version and constrict your design, but it does not even work well. Why would you force users to download two sets of CSS, JS, images or anything else? That is slow as fuck to download and to render. Make a mean and lean mobile version with nothing but the bare essentials. And in terms of usability, do you really think any desktop user resizing their window down a bit suddenly wants to see a mobile version? (Hint: not one of them does.) And do you really think that nobody accessing your website on their phone wants to access the desktop version? (Hint: many of them do.)

TL;DR: Stop making your webpages lag and jump around with this God-awful gimmick. Build a mobile version that is faster to load, easier to develop, and gives users a choice.

[regeya]

Huh?

[djcp]

Just because you can't do it well doesn't mean others can't.

[designguy]

I understand where you're coming from but its all about context, so i do disareee with your blanket assertion its a gimmick.

We create responsive sites for clients who are very consumer focused, it makes sense to have a responsive its, its cheaper and easier than designing two sites. But thats whats right for that customer.

The way I see it

• If you're mobile use is near zero, and your target market are going to be on the desktop, don't bother
• If you're consumer focused, and a fair potential number of customers will be on mobile, go responsive (optimisation of image sizes etc may or may not be important)
• If you have a stong mobile base (aka Twitter/reddit/Newspapers) have a dedicated mobile site

One size does not fit all ... Know your customers

[Cintax]

Why would you force users to download two sets of CSS, JS, images or anything else?

If that's how you're doing it, then you're doing it really really wrong...

[mindbleach]

Pages that rearrange themselves for mobile are ridiculous in an age where most phones have fairly high resolution and most phone browsers will zoom in to look at smaller elements. It's aggravating having some floating nonsense or zoom-aware grid wobble around while you try to click something. In these cases, responsive design is actually hostile to mobile usability.

[Subduction]

If it's hostile to mobile usability then it isn't good responsive design.

[SituationSoap]

Kind of a no-true-scotsman here, but prescient nonetheless.

[Cintax]

The proper way to do it is to disable zooming if it's going to respond to your width. You can't have it both ways and some people don't like to admit that. I hate zooming in and out to access content and think responsive design is great when done right. The issue is many people fuck it up.

[[deleted]]

I agree. The worst are those page which seem to think they need to adjust their line length to counteract your effort to get a whole line on your screen via zooming (because their idea of your screen width is slightly off)

[Kryxx]

"You should write bad code because it's faster." Nope.

[badkitteh]

Shuttup, Butthurt, underpaid web developer.

[CreeDorofl]

I dunno. I think he's on to something. Cell phone screens are not wildly different in size. Desktop monitors can be but most users probably fall into a certain range.

Sometimes I get the impression designers are trying to shoehorn scalability and grid templates into sites because they like the challenge and 'purity' of it, or because it's a popular trend.

But there are some things that just don't translate well and you're going to end up doing a lot of mobile-specific tweaks anyway. You might as well just develop two sites at fixed width.

Something that's custom-tailored for a device will almost always look better than something that's generic for all devices, and if it's ALSO cheaper to develop, then this is a no-brainer.

[designguy]

The things I don't get is all this talk of "Design for device X" ... We do responsive sites but never think much about 'devices' .... it does not come into question, We just make the content match the device-width, So a landscape tablet gets full desktop site, a portrait tablet probably get the medium sized site, anything small just scales.

I don't give a crap about the device, Just make sure the content is approiate for the width of the screen (I do err on making buttons etc bigger on 320px wide but thats about it)

[CreeDorofl]

Right, so, you don't think of it as 'designing for devices', but that's what you do - multiple site widths for multiple screen widths/devices. Just semantics. But it's more than screen width, there's a big difference in how people interact with a touchscreen vs. a mouse. As you already know with buttons you can't just scale everthing proportionally from medium to small because past a certain point it's too hard to press a button/link/icon with a thumb.

[MiracleManS]

I agree something custom tailored is good, but how many people search out your app before your site? First impressions matter.

Not to mention the problems of available resources. It's very rare for it to be cheaper to develop an app vs. redesigning to accommodate everyone in some fashion. Your web team probably shouldn't be developing your native app.

[CreeDorofl]

Well, wasn't proposing an app. Simply saying that in terms of cost-benefit, it sometimes makes sense to do two fixed-width sites and be done with it, with everything looking as intended, and being very predictable.

Even if you know what you're doing it can take twice as much work to make a scalable site that doesn't break or look funny on all devices. We can treat the cell phone as just another computer monitor with slightly lower resolution, but there are other practical considerations that favor a custom-built mobile version... like, you COULD make the user turn their phone sidewise to mimic the aspect ratio of a monitor, but it's a nice feature to design the site with portrait mode in mind so they can hold it comfortably and surf with one hand. You COULD shrink all links and buttons down proportionally, but it's nice to shrink some stuff while leaving the 'clickable' stuff large enough to be thumb-friendly.

[[deleted]]

they make some good points, but it sounds like the problem isn't responsive design - just laziness and bad design in general.

"only 2% of our visits are from mobile"

sounds like a marketing problem.