Responsive design, important or not

[itmitică]

The idea of adding more code (and more to download) to make your site "responsive" for mobile devices should be your very first clue that this is a bad solution.

Yeah, like the idea of adding more code to make a fixed layout go fluid or elastic. A bad solution, indeed.

It seems that all your worries regarding MQs are strictly related to the images problem: "I have increasingly huge images and I'm determined to use them, but MQs don't let me". Do you honestly believe MQs are about images?

<hr>

What I don't get is what's with the "" around responsive? And I'm still waiting for your proposals to go around responsive design. Or a demonstrative web site that fulfills this:

Your goal should be to do whatever is necessary to create a great user experience.

I'm asking this: responsive design doesn't qualify as whatever?

Off Topic:

My own worst enemy? I have a number of problems (just like everyone) but limited knowledge and resistance to learn certainly aren't two of them. Perhaps next time you should do a little research about a person before you make an even bigger fool of yourself?

WOW! You have superpowers! You can quote from my deleted posts!!! I'm a big fool indeed and I bow to you sir.

[behati]

I'm not really sure what my opinion on all this "Responsiveness" is but more than once I've bypassed a "mobile friendly" site on my Android phone because the mobile one despite all the fancy fluid grids and whatnot, simply didn't work as well - both in terms of showing content and navigation etc.

With that being said though, I recently started using the Twitter BootStrap CSS framework and though I haven't gotten round to use the @MQs yet I've messed around with their some of their responsive css.

All in all, if a responsive design can really make the experience of visiting and using a website more enjoyable on a tablet/mobile device, then I'm all for it, but I'm not about to remake all my fixed-width sites just to "follow the trend".

[itmitică]

This is what it's called a falacy:

[...] but more than once I've bypassed a "mobile friendly" site on my Android phone because the mobile one despite all the fancy fluid grids and whatnot, simply didn't work as well - both in terms of showing content and navigation etc.

Fluid grids != responsive design

It's like saying "but more than once I've bypassed Denmark airports because on my route, despite it's terminals and all the fancy check-ins and whatnot, simply didn't transit as well - both in terms of showing direction and navigation etc."

Bad experiences or bad sites have no relevance but to them self. You should, for balance, point out the sites that are making a good job too.

I'm sure you can find "desktop friendly" sites to bypass on desktop simply because it didn't work as well - both in terms of showing content and navigation etc. Like a fixed-width site, perhaps?

And what's with all this "responsive design is for tablet/mobile" stuff? Responsive design is not about that, it's about all of them, in one: old mobile, smartphone, tablets, netbooks, notepads, laptops, desktops, with display sizes ranging from 240px to 2400px... and more.

[Spritanium]

Of course responsive design is important, just like fluid-width percentage-based designs were/are still important.

Years ago, web developers had to worry about designing a site that would work just as well on 640x480 as it would on 1024x768...then it got to the point were you could just give your layout a fixed width of 960px and be done with it.

Now we have smartphones, which are traditionally used in portrait mode and have very small screens. Meanwhile, we also have an increasingly large amount of people with 1920x1080 monitors visiting the same sites. It's no longer good enough to have a single, fixed-width design, nor is it good enough to just change all your pixel widths to percentages and have everything be ridiculously wide on large monitors and illegibly skinny on smaller screens.

As web developers, it is our job to make sure as many people as possible can have a positive experience on our sites, without having to fight for it.

Pretty soon more people are going to be using mobile browsers than desktop ones, and while I think there's no better browsing experience than on a desktop, there's no way to fight changing technology...you just have to change with it.

I'm still working on a mobile media query for my portfolio/blog, but once I get it done I can guarantee it won't hurt business.

[itmitică]

I'm still working on a mobile media query for my portfolio/blog, but once I get it done I can guarantee it won't hurt business.

You should also work on a media query for big resolutions too. I can guarantee you it won't hurt business either.

<hr>

There are so many misconceptions about what responsive design is and what media queries do, I believe it's time for a sticky thread, since this subjects appears at least once a week now, in SPF.

1. Responsive design aims to help a developer to provide a fairly good experience for users visiting a site, no matter the device they use: a small mobile device or a huge touchscreen, a little netbook or a desktop on a 55” Full HD TV. A thing way past fixed-widths and even past elastic and fluid layouts.

2. Responsive design makes use of Media Queries to accommodate these various display sizes.

3. A MQ is better than browser sniffing to provide for a mobi version of your site, since browser sniffing relies on Javascript. And even if you provide a mobi version for your site, that mobi part and that desktop part will also have to be responsive designed too.

4. Media Queries don't provide the developer with control over what resources are downloaded since MQs are not Conditional Comments.

5. What MQs do (like any query) is simply providing the developers with means to interrogate media properties and serve to the browser a set of CSS rules associated with those properties, as a response (notice, CSS code, not resources!).

6. If the CSS rules a developer puts in a media query are broken and useless, it doesn't mean MQs are broken and useless, it means the developer who wrote those CSS rules is broken and useless. (Just kidding! Both the CSS code and the developer have a chance at being fix.)

[lutrov]

It's not enough just to have a "responsive" design. User goals are different with mobile devices compared to desktop computers. Not only should the layout be different for a smartphone, but the specifics of the content itself should be different too. Think about what people use a smartphone for on the web. Think about a much smaller screen area. Do you really want to present exactly the same content as you do for desktop devices?

As a consumer, I don't care whether your site is "responsive". I don't go to your site to admire your design, I purely go there because of your content. I want a site optimised for speed. I want text that I can read without zooming, "pinching" or much scrolling. I want less text. I only want to get stuff done on your site and then move on to more important things in their life.

Oh, and if I were interviewing someone for a web development job and if they mentioned that browser sniffing relies on Javascript, they wouldn't get the job because I know that real browser sniffing is done on the server.

[lutrov]

The fundamental issue "responsive" design doesn't address elegantly is that you can't design for a mobile experience without understanding what your mobile users want. We don't need yet another study which shows that desktop users have different needs and goals to smartphone users.

[ralph.m]

you can't design for a mobile experience without understanding what your mobile users want. We don't need yet another study which shows that desktop users have different needs and goals to smartphone users.

Personally, I don't like to get different content on my mobile. I'd rather the content be efficient and easy to find no matter what the platform, and dektop design tends to forget this. There are suggestions that people are trending away from 'mobile content' ... though I guess it depends on what kind of content/functionality the site is meant to deliver. These links are interesting:

http://www.slideshare.net/stephenhay...-content-first
http://www.the-haystack.com/2011/01/...no-mobile-web/
http://www.slideshare.net/yiibu/the-...e-with-context
http://www.slideshare.net/yiibu/beyo...bilewebbyyiibu

[itmitică]

As a consumer, I don't care whether your site is "responsive". I don't go to your site to admire your design, I purely go there because of your content. I want a site optimised for speed. I want text that I can read without zooming, "pinching" or much scrolling. I want less text. I only want to get stuff done on your site and then move on to more important things in their life.

Oh, and if I were interviewing someone for a web development job and if they mentioned that browser sniffing relies on Javascript, they wouldn't get the job because I know that real browser sniffing is done on the server.

Oh, and if I were testing a company looking for web dev professionals for a project and if they mentioned that browser sniffing is done on the server, they certainly wouldn't get the contract because I know that *real* browser sniffing is done with Javascript and it's called feature detection.

Even more, if they'd tell me I shouldn't care if my site isn't responsive, I shouldn't care about design, I would recommend they seek another line of business.

[itmitică]

The fundamental issue "responsive" design doesn't address elegantly is that you can't design for a mobile experience without understanding what your mobile users want. We don't need yet another study which shows that desktop users have different needs and goals to smartphone users.

I believe responsive design would certainly help you and your site with some fundamental issues on mobile.

And I'm not just talking out of my ass. It's kind of hard for users to

get stuff done on your site and then move on to more important things in their life.

http://i1054.photobucket.com/albums/...ca/lutrov1.png
http://i1054.photobucket.com/albums/...ca/lutrov2.png
http://i1054.photobucket.com/albums/...ca/lutrov3.png
http://i1054.photobucket.com/albums/...ndroidw800.png
http://i1054.photobucket.com/albums/...ndroidw600.png

[Spritanium]

All content of a page should be accessible on all devices; the only difference should be the order in which it's presented. For example, something that would normally be a sidebar can be pushed to the bottom since it's less important than the main content of the page.

[Stomme poes]

It's not enough just to have a "responsive" design. User goals are different with mobile devices compared to desktop computers. Not only should the layout be different for a smartphone, but the specifics of the content itself should be different too. Think about what people use a smartphone for on the web. Think about a much smaller screen area. Do you really want to present exactly the same content as you do for desktop devices?

As a consumer, I don't care whether your site is "responsive". I don't go to your site to admire your design, I purely go there because of your content. I want a site optimised for speed. I want text that I can read without zooming, "pinching" or much scrolling. I want less text. I only want to get stuff done on your site and then move on to more important things in their life.

Sometimes this is true. Other times, you hear lots of (non-developer) people looking for the link to the "desktop version" because they believe they are getting cheated out of content on the mobile-friendly version, as Ralph mentioned. Of the links he posted, the Yiibu one about "context" is a very good set of slides exploring this idea. Of course it changes depending on if you're concentrating on wealthy Westerners with iThings or hitting a more varied worldwide audience.

Sometimes when you go to an airline page on your mobile, you just want to know if your flight is on time.

But you may also be on your mobile sitting on the couch, ordering tickets or checking times and prices for a friend sitting next to you.

You might be sitting at the kitchen table with your mobile, doing your paperwork and checking your investments, and deciding to check the latest Investor's news of the airline, so you can correlate it with a recent change in their stock price.


Especially as more and more people use their mobiles for regular internetting, instead of going over to the computer sitting elsewhere (look, we all know people are lazy... they invented remote controls and next thing you know, you can't even buy a TV with any buttons on it except ON. I no longer have a TV, so luckily I don't have to deal with that kind of design crap anymore), you have to assume less and less that there's a "mobile context" to what people are doing and looking for.


I think it's possible the next big thing regarding mobiles (and tv's and whatever else), instead of responsively changing the design... it may become quite common soon for sites to go back to Ye Olden Landing pages, with links *asking* the user for their context: want quickie light pages? Click. Want in-depth "desktoppy" stuff? Click. Responsive content, except the responsiveness can't be passive like we try with MQ's. We have to ask people what they want, because when we guess or assume (and then get it wrong) we create frustration and hair-pulling. Ask me about that, I'm an expert hair-puller. I get frustrated so easily at stupid things, they could study my brain to find out everything about people getting frustrated and wouldn't have to study anyone else ever again. Prolly why I have such strong interest in accessibility.

One current issue with sites that have separate mobile pages is the screwing up of search engines and finding the data you want... this was recently mentioned in a "separate mobile pages suck balls" post on .net magazine in response to Jakob Nielsen's study results where he advises separate mobile sites.

[Stevie D]

Personally, I don't like to get different content on my mobile. I'd rather the content be efficient and easy to find no matter what the platform, and dektop design tends to forget this.

In theory, I would say the same, but ... in practice? I'm not so sure. Part of the problem can be the massive amount of non-content that gets hurled at the main site. This page, for example, weighs in at a hefty 110KB just in the HTML, not counting any external files such as images, scripts or stylesheets. That includes an awful lot of "non-essential" material such as hidden content, rollovers, scripts and so on, that are great on a PC and help the site to run smoothly and efficiently, but just cause my phone to roll its eyes at me and say "You want me to do what...?" – then it takes 5 minutes to load the page or crashes. Neither of which is a good outcome. A slimmed down version that didn't have all that extra cruft would be brilliant for mobile use, but would unnecessarily restrict the functionality for desktop use.

[lalog00]

I personally don't take the time to design 2 different versions of my website, one desktop and one mobile, as it would also become a maintenance nightmare. Some people are talking about media queries slowing down your website, but you can use a server-side aproach, it is google code mobile detect:
http://code.google.com/p/php-mobile-detect/

I'm still not suggesting to redirect to a mobile version website when mobile is detected, but you can take out resource intensive elements such as videos, CSS3 animations and javascripts that enhace your desktop version but that would slow down and clutter in a mobile environment.

[itmitică]

Although the developer is Romanian like me and I'd love to be supportive, browser sniffing at server side it's not reliable.

Solutions existed since long. Here's a simpler one, that's covers more than just PHP: http://detectmobilebrowsers.com/

<hr>

And, while browser sniffing at client side (feature detection) is reliable now, once the adoption of -webkit in browsers like Opera became rule, this too will be a bad idea.

<hr>

What's left? What we always had: good design.

Though the ideal would be a mobile-first approach (to keep the overhead for such devices as small as possible), this is a pipe dream for now. If you take pains to ensure your initial markup is as clean as possible and your images are optimised, then you are doing best by all your recipients. The few lines of code for your media queries (that’s really all it takes) are a negligible additional download.

http://blog.mailchimp.com/mailchimp-and-media-queries/

The above says it all.

<hr>

Why content optimization is best? Simply because you can't predict either the device capabilities, be it mobile or desktop, or the connection parameters: speed, bandwidth. A mobile could be latest smartphone over uncapped 4G and a desktop could be a PIII/256PAM with a USB dongle, on a monthly 100Mb plan, at 57.6 kbit/s.

And this is to say, again, don't blame MQs that they don't optimize for you the garbage you put in your web page!!! MQs means CSS code and if some people are talking about media queries slowing down your website, I say to them to look at the CSS code and see what's wrong with it.

Responsive design works and it's the best idea. But is guaranteed some still try to hammer in nails using electronic microscopes.

[ralph.m]

In theory, I would say the same, but ... in practice? I'm not so sure. Part of the problem can be the massive amount of non-content that gets hurled at the main site.

Yes, totally agree there. But as I've said above, I'd argue that it's also time to get rid of "the massive amount of non-content that gets hurled at the main site". That's the main problem with web design today.

[lutrov]

If we disregard the gaggle of "gurus" singing the praises of "responsive" design, just for a minute, it's worth noting that Ethan Marcotte, the author of "Responsive Web Design" makes it crystal clear that, "most importantly, responsive web design isn't intended to serve as a replacement for mobile web sites".

http://abookapart.com/products/responsive-web-design

It's up to the designer to determine whether "responsive" design is useful for their specific target market or not. My own website, for instance, gets less than 1% traffic from mobile devices. Until my own target market start using smartphones to a much more significant degree I'm not in any rush to make any changes to my current design.

[Stomme poes]

My own website, for instance, gets less than 1% traffic from mobile devices. Until my own target market start using smartphones to a much more significant degree I'm not in any rush to make any changes to my current design.

Conversely, a site who does not work on mobiles is unlikely to get much of an increase in mobile visitors (though I suppose you could see those first-land bounces for indications of trends).

[itmitică]

@lutrov
"most importantly, responsive web design isn't intended to serve as a replacement for mobile web sites"

Let me give you the success formula for the phrase you quote above:

responsive web design == layout
mobile web sites == content (alternative content, that is)
i.e. 
responsive web design != mobile web sites

What he says.

<hr>

You're reading this wrong, like this: "most importantly, responsive web design isn't intended to serve as a replacement for mobile web sites layout".

What Ethan Marcotte means is for you to always keep in mind the separation between presentation (responsive design == CSS code) and content (mobile web sites == alternative content).

Allow me to verbose that for you:
- he says that responsive design (and MQs) is CSS code regarding *layout*
- he says that if one chooses to serve alternative *content* for mobile users, one should understand the separation between content and presentation, and one should not rely on CSS to control that type of separate content: mobile web sites

One point I was trying to make more than once in this thread:

And what's with all this "responsive design is for tablet/mobile" stuff? Responsive design is not about that, it's about all of them, in one: old mobile, smartphone, tablets, netbooks, notepads, laptops, desktops, with display sizes ranging from 240px to 2400px... and more.

MQs aren't for degrading. MQs are a complete solution.

The first thing you need to understand: responsive design it's not to conditionally control resource download. Media queries are not conditional comments. Like the name says, they are queries.

<hr>

So, it has nothing to do with serving lesser content or different version of the same page.

So, a media query doesn't manipulate resources, it only asks for some CSS code. The CSS code and its mechanisms are responsible for that. What this means? It means that if I put garbage CSS code in a media query, I'm left with garbage CSS code, not with garbage media query.

The reason you build a m.* version has nothing to do with media queries or responsive design, it has to do with resources.

But even if you build a m.* version of your site, it still has to have to be based on MQs, simply because mobile nowadays comes from 240px up to 1200px wide.

<hr>

This kind of misconceptions and half understandings are the reason people misunderstand responsive design and MQs.

Yeah, you believing layout techniques like responsive design and CSS code interrogations like media queries have anything to do with you controlling what content you choose to serve, including alternative mobile web sites, this equals misconceptions and half understandings.


<hr>


About you not wanting to "change" things in design. I'll go out on a limb and say it's about time you *fix* this thing in your design: #page { max-width: 988px;}. You forget that your site needs to look good on higher resolutions, above 1200px. But

Instead of taking the control, as a developer, you hand over the problem to the browser or the user. You expect somebody else to do the media queries for you.

Off Topic:


And I don't mean "fix it" as in Oscar Rogers' SNL "Fix It!"

Seth Meyers: It’s been a rough week on Wall Street. Today alone, the Dow plunged 678 points, closing below 9,000. Here to talk more in-depth about the economic crisis is Weekend Update’s new financial expert, Oscar Rogers.

Oscar Rogers: Hello, Seth, Amy.

Seth Meyers: Hi, Oscar. Good to see you, thanks for coming. Now, we all know that our current economic situation has left every American fearful of what’s in store. Oscar, do you see any light at the end of the tunnel?

Oscar Rogers: Well, Seth, there was a light, but it’s broken! And somebody needs to crawl down to the end of that tunnel and FIX IT!

Seth Meyers: Okay, well, that doesn’t sound very promising.

Oscar Rogers: It’s not! These people need to FIX IT! I’ve been a financial consultant for 16 years, and I’ve never seen it this out of control! They need to clamp it down and FIX IT! When I wake up tomorrow morning, it better be FIXED!

Seth Meyers: But how do we go about fixing it, specifically?

Oscar Rogers: Take it one step at a time. Identify the problem. FIX IT! Identify another problem. FIX IT! Repeat as necessary until it is all FIXED!!

Seth Meyers: Uh -- you keep saying "fix it", but how?

Oscar Rogers: FIX IT!

Seth Meyers: Fix what?

Oscar Rogers: IT! It needs to be FIXED! NOW!!

Seth Meyers: Any, uh -- any final words? Although, I think I know what they’re gonna be.

Oscar Rogers: Oh, yeah? Well, what do you think I’m gonna say, Seth?

Seth Meyers: I don’t know , probably "fix"…

Oscar Rogers: FIX IT! FIX IT! FIX IT!

Seth Meyers: Oscar Rogers, everyone.

[lutrov]

Conversely, a site who does not work on mobiles is unlikely to get much of an increase in mobile visitors (though I suppose you could see those first-land bounces for indications of trends).

Oh, it works for mobiles just fine. It's just not optimised for them. And when I said traffic, I meant unique visitors, which is not a figure I see increasing BECAUSE I've optimised for mobiles.

[itmitică]

Oh, it works for mobiles just fine.

@lutrov
Let me make it crystal clear for you: it doesn't. The fact that you can't use the menu (even on a tablet) should be your very first clue that it doesn't!

http://i1054.photobucket.com/albums/...idw600-bad.jpg

You should listen to the gaggle of "gurus" singing the praises of "responsive" design, just for a minute, and fix it!

[deathshadow60]

Responsive design is a buzzword. The underlying idea is not new, however. It simply means to make your design flexible and allow people the best possible viewing experience, regardless of the device they use, at least to my understanding.

Elastic, hybrid, and fluid layouts have been implemented for almost a decade. The only somewhat "new-ish" thing are @media-queries, a method you can use to make your design even more flexible for smaller devices, such as smartphones.

... and what they do is nothing new; before it was something you could do with CSS a few years ago was being called "McSwitchy" and used Javascript. It's the same dance, just a different tune.

As mentioned several times in this thread, it's just the next evolutionary step -- it's CSS giving us a control we probably should have had all along -- and in many ways COULD have had if user agents obeyed the normal MEDIA attribute values 'properly' -- the laugh being they've got media queries working and STILL don't bother obeying PRINT or HANDHELD properly if at all -- one of the few things in CSS3 that reeks of HTML 5 and a lot of the 'new' features. Stuff they're implementing in browsers when they don't even have the old "recommendation" specifications complete yet! Yes Mozilla, I'm looking at you! -- yeah that open source gets things fixed and working so much quicker

In reality what's being called "responsive design" is something that we should have been doing all along -- the PURPOSE of HTML is to deliver content in a device neutral manner. The PURPOSE of CSS is to tailor that delivery to certain target devices and user agent capabilities; if all you're doing is vomiting up a crappy fixed width with px metric fonts and design elements that cannot adjust to fit or be rearranged as such -- you're doing it all wrong; see 99% of the garbage vomitied up by people who draw a goofy picture of a website in their flavor of the week paint program, instead of having the content dictate the layout. Even if their goof-assed pretty picture is the most beautiful thing in the world, if it falls flat on it's face from an accessibility standpoint, what in blazes good is it?

The basic ideas behind "responsive design" is just the next step in what we are supposed to be doing when writing websites; anyone who's been practicing semantic markup, separation of presentation from content, using the MEDIA attribute for the CSS 2 targets, and designing fluid or semi-fluid layouts will look at this 'new' methodology and go "Oh, ok! That's easy."

While if you've been crapping out fixed widths, using px metrics on everything, still not grasping what semantics even means, vomiting up HTML 3.2 and slapping either a 4 tranny or 5 lip-service on it, and in general have your head wedged up 1997's backside, well... the entire topic may as well be written in an alien language.

[deathshadow60]

@lutrov
Let me make it crystal clear for you: it doesn't. The fact that you can't use the menu (even on a tablet) should be your very first clue that it doesn't!

It's pretty well known that Mitica and I agree on little to nothing... and I have to say...

Lutrov, seriously, get a min width and media queries on that mess; while at it clean out the markup -- maybe use heading tags in a proper/navigable order, get rid of the massive mess of multiple CSS files for nothing other than delaying the page load for no reason, get rid of all the endless pointless wrapping DIV you have for nothing, STOP abusing the title attribute for keyword stuffing, bother actually building VALID forms, and get rid of the massive fist in the face text that makes me think "scam" and automatically want to navigate away from the page.

Gah, lemme guess, six months ago this was a 4 tranny document? The 5 lip-service, endless div for nothing, and broken forms just scream "I skipped over STRICT".

[lutrov]

You should listen to the gaggle of "gurus" singing the praises of "responsive" design, just for a minute, and fix it!

As I said, it works for mobiles just fine. In this country, "mobiles" means mobile phones, not tablets.

[lutrov]

Gah, lemme guess, six months ago this was a 4 tranny document? The 5 lip-service, endless div for nothing, and broken forms just scream "I skipped over STRICT".

I have absolutely no idea what most of that means, especially the question. I assume you're NOT talking about the contact form because that's NOT broken. I also assume you're NOT talking about the subscribe form or the search form on the home page because they're NOT broken either. Which form do you think is broken?

But as I've stated somewhere above, when my target market actually starts using tablet devices, I'll definitely look into optimising my site to accommodate them as well. If I optimised it now, I'd be addressing much less that 1% of visitors needs, and that doesn't sit well with my priorities.