Server-side Responsive Web Design

Question

I've been researching Responsive Web Design lately. While there are many techniques and practices that fall under the umbrella of "Responsive Web Design", essentially the main pillar of RWD seems to be CSS3 media queries. So, RWD is basically a client side strategy.

But with low-resolution layouts, you often have to simply remove entire sections of HTML. For example, a 3 column layout may need to become a 1 or 2 column layout on lower resolutions, meaning that you're basically hiding entire DIVs at lower resolutions. The problem I see here is that you still need to actually SEND the same amount of HTML code to a low-res device, even though it will never be displayed. In other words, you're sending the same 3-columns worth of HTML to a hi-res screen and a low-res mobile phone, but it's really a complete waste of bandwidth every time you send it to the low-res mobile phone.

Question: Am I correct in my understanding here, or does RWD also incorporate server-side techniques?

For example, suppose you have a skeletal HTML page like:

<div id = "main-content">
  <!-- content goes here -->
</div>

And onload (or onresize), the client browser detects the screen resolution and makes an AJAX request that fills in main-content with the appropriate HTML for that resolution.

Are techniques like this that utilize server-side strategies to implement RWD ever used in practice?

Answer 1

You don't have to remove/hide columns in lower resolutions. The trick would be to stack then underneath each other in low res, then align them in columns in higher res. For example:

<div class="one">Column One</div>
<div class="two">Column Two</div>
<div class="three">Column Three</div>

.one, .two, .three {
blah blah blah, whatever needs to be here.
}

then add CSS:

@media only screen and (min-width: 600px) {
float: left; /* screens larger than 600px wide will throw them into columns via float*/
}

Answer 2

You pretty much answer your on question...

The time you will need to make a ajax call when the window is resized is much more longer then just give the whole html page once and use css instead.

And the main idea of responsive design is not hide your content. When you hide your content, you got a lot of troubles, like search engines that will show up your content but when a guy visit your website on his tablet the content doesn't show up.

Edit:

Just to make clear when I talk about content, I am talking about what is important on your page stuffs like a "adsense" or other things that doesn't really matter to the visitor should be hide at no problem at all.

About server-side technique there is a bunch out there, one good example is Adaptive Images that send images on lower resolution to lower devices, but you can do that with client side technique too.

Edit2:

I almost forgot that

Not to mention that onresize fires once for every single change in dimensions. In other words, if you go from 1000x1000 to 950x1000, it'll fire 50 times - 50 AJAX calls. @Sébastien Renauld

Answer 3

http://css-tricks.com/make-client-side-data-available-server-side/

In this article Chris Coyier talks about using clientside methods to check the current width of the screen, then save it to a cookie for use server side - then refresh the page. I don't entirely approve of the method, but perhaps it could be useful to you.

You may want to look into JavaScript feature detection or even UA sniffing, though its frowned upon.

Answer 4

Why would you hide additional columns on mobile? Removing information is never a good idea, that'll only make visitors dislike the mobile version of your site.

Columns on a web site are usually created with floated html elements. Remove said floats with a media query and voila! The information is now all in one column.

If that one column ends up being far too tall you may want to consider adding toggles for showing/hiding the information, but that's as far as I'd go about removing content for mobile sites.

Answer 5

In general, responsive development - if done correctly - should not have any redundant or repeated data in the markup. Likewise, content displayed at one screen width will also be displayed at another width, just in a different way.

I love the idea of making an AJAX call based on screen dimensions at page-load, but that's not really the idea of responsive design, and would actually take longer for the page to load (for the visitor).. It would also mean that the page layout wouldn't adapt when the browser window dimensions are changed (for example: switching orientation on a tablet). Unless you propose a new AJAX call at that point, in which case you'll be sending a lot more traffic than a single responsive page-load, and putting more load on your server too.