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.
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”.
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.
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).
@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:
[QUOTE=itmitică;5115506]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.[/QUOTE]
[QUOTE=itmitică;5115843]
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.[/QUOTE]
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
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.
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.
@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!
You should listen to the gaggle of “gurus” singing the praises of “responsive” design, just for a minute, and fix it!
… 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.
[QUOTE=itmitică;5119542]@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!
[/quote]
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”.
As I said, it works for mobiles just fine. In this country, “mobiles” means mobile phones, not tablets.
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.
This thread is starting to look like the juvenile mess we sometimes see on IMDB boards, with pointless point scoring, personal attacks, vitriolic responses and other annoyances, which is a real shame.
Anyway, going back to the original topic and the reason this thread even exists. I’m some of you would be aware of this - in a recent article, Jakob Nielsen states:
> “Good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two sites, and cross linking to make it all work.”
Based on usability testing of hundreds of sites, he recommends:
- build a separate mobile optimised site
- cut features, cut content and enlarge interface elements
- redirect mobile users to your mobile site
- offer a clear link from your mobile site to your desktop site
Nielsen has been criticised by some designers, that’s true. But a lot of what he says is based on research using real people and I have absolutely no reasons to doubt his insight.
His study confirms that mobile users are only interested in relevant data and getting that data quickly. If mobile is important to your business, then you must optimise for speed and for exactly what your users want to do. And “responsive design” doesn’t solve these problems. A well designed mobile website does.
Let me be perfectly, crystal clear: it doesn’t. In this country, iPhone means mobile phone. I gave you proof for mobile phones first. I mentioned tablets later, to show you those are out of the question also.
After our chat, you’ve sneakingly gone
- from this: http://i1054.photobucket.com/albums/s490/itmitica/lutrov3-iphone-bad.jpg
- to this: http://i1054.photobucket.com/albums/s490/itmitica/lutrov6-still-bad-1.jpg
Not much of an improvement since the menu is now TOTALLY MISSING and, on mobile, I have nowhere to go from the landing page. Unless you consider the still-broken-for-mobile original home page.
I don’t see how this is helping your users in any way. Remember your first post?
And this first post of yours in this thread, pretty much qualifies as a “juvenile mess we sometimes see on IMDB boards, with pointless point scoring, personal attacks, vitriolic responses and other annoyances”, with those big caps “DO/DON’T CARE” that triggered the response in the first place, along with some other ones like these:
<hr>
Anyway, going back to the original topic and the reason this thread even exists. You still don’t get these:
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.
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.
While you believe the sole purpose of responsive design is as an alternative to building mobile websites, none of the authors you quote makes the same confusion. And I’ve repeatedly stated, responsive design is for desktops (big screen, high resolutions, whatever) too!!!
What the last author does though, is he’s trying to sell. And this should be your very first clue that it’s fishy. This, and the fact that he even goes as far as recommending a third variant for a website: for tablets. Big BIG question marks!!!
Nevermind the fact that he, like Ethan Markotte, he never opposes the responsive web design with mobile web sites!!!
Was someone asking if there was something new? Well. There’s something new.
I kept hearing people talk about responsive images, but this time with a <picture> tag.
There is no <picture> tag, Neo. Instead, please welcome our new srcsset overlords.
So when’s the party?
Not going to stick. Not with (enough) authors anyway.
The problems is not HTML, the problem is not CSS, so why make it?
Width 100% for images is the right way to go with responsive. The problem is with raster graphics.
Solution: browsers should have better DSP algorithms in place for raster graphics resizing up and down… or a better compression algorithm for raster images be available at server sides.
Newest browsers would have this added feature/engine. Older browsers would display uglier, but would still display. The images remain the same.
THE END.
EDIT: Why not an alternative engine to the better DSP above, to transform raster to vector? Take a JPEG and make it a SVG. This could be an option for the user in the browser, something like “smoother, scalable graphics” as, I guess, it would impose on the device performance.
Why I’m not trusting the solution of srcset? Because it takes whatever the author may do wrong about images and willingly put’s it in the browser’s backyard, in the markup, of all places. And because it’s full of cryptic w’s and nx’s, that the authors would gladly stay away from as to not be accused of industrial espionage.
EDIT EDIT: Anyway, the images problem is a false problem, to begin with. The simple SVG solution, which should be the obvious choice, will never be viable since no author or graphic artist would gladly give up hard worked and well payed graphics and graphics effects for the others to easily steal and reuse. That’s where multiple-versions-of-the-same-image root problem stands. So don’t try and fix it, it’s fixed already. It’s just not “economically viable”.
No, the problem is file size and sh*tty internets. If it were just a display/design issue, yes, letting images scale themselves within their containers would be the Obvious Best Answer.
I was reading some IRC logs where jpeg2000 and a hypothetical “bandwidth MQ” is discussed… interesting (http://krijnhoetmer.nl/irc-logs/whatwg/20120515#l-1849).
Even if the image is content, that doesn’t necessarily mean we want to add to the DOM. Would be nicer to simply have vectors as an image option in browsers, but right now SVG==markup. And if there’s automatic conversion, that means robots-writing-markup. We all know a popular robot who tries to write markup.
This is one of the strongest arguments against srcset. The spec-writers have countered that one of the other strong proposals, <picture>, was “too much markup”.
Maybe they over-estimate how much new syntax we’re capable of learning correctly, lawlz.
That and we don’t yet have camera that take vector photos yet (I stole that from someone else).
Economics (what people pay for bandwidth and batteries) seems to be the root of the “responsive images” problem.
I suppose even if hardware vastly improved (better compression and as you mentioned easier/quicker decompression and rendering… and then improved battery technology to deal with more CPU and GPU use), there’s still latency, bandwidth and lack of state problems (someone may start out on a decent network, go through a tunnel, come out in a crappy network… should the device keep track of that? The browser? The server? Server shouldn’t, in my opinion).
OK.
The problem is with raster graphics resize, which, for some, warrants big/different images for the same purpose.
<hr>
One other thing I find to be questionable, is, how, all of the sudden, responsive images are stars, but the sprites issue is still being overlooked. I mean, for me, sprites are far more important, and I’d expect something to be done for this first.
Nevermind the fact that responsive images, as we’ve seen in this thread too, have hijacked the responsive web design concept, being the core of responsive for some, making it an argument against going responsive.
And, if you account for one of the most common browsing technique, zooming, you realize why even having different images for the same purpose will fail and why, in some cases, CSS3 graphics solution are desirable.
Zooming, dpi, css pixels, resolution and the like were also mentioned in the discussion. For example, if the mobile user zooms in… should there be another request for a higher-rez version? etc…
Why is there a party after the public execution?
Since it looks like that specific example are presentational images, so they don’t even belong in the HTML in the first place 
Did you read what I wrote? Again, just for you: In this country, “mobiles” means mobile phones, not tablets. The iPhone IS a mobile phone. So are all the other mobile phones. So what were you trying to say?
The result you got below is CORRECT, assuming you used a mobile phone:
If you got something else (like you suggest), then I can only conclude you were using some other device (or a different configuration maybe) the first time around. As for you having “nowhere to go from the mobile landing page”, that’s not correct either. Maybe you were in a big hurry?