Responsive server side web design

Question

I have been studying Responsive Web Design recently. Although there are many methods and practices that fall under the concept of "responsive web design", in essence, the core element of RWD is CSS3 media queries. Thus, RWD is basically a client-side strategy.

But with low-resolution layouts, you often just have to delete entire sections of HTML. For example, a layout in 3 columns might require you to become 1 or 2 columns at lower resolutions, which means that you basically hide whole DIV at lower resolutions. The problem that I see here is that you still need to SEND the same amount of HTML code to the low resolution device, even if it will never be displayed. In other words, you send the same 3-column HTML code to a hi-Res screen and a low resolution mobile phone, but it really is a complete waste of bandwidth every time you send it to a low resolution mobile phone.

Question: How correct am I in my understanding here, or does RWD also include server methods?

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

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

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

Are there any methods that use server-side strategies to implement the RWDs ever used in practice?

Answer 1

In general, responsive development - if done correctly - should not have redundant or duplicate data in the markup. Similarly, content displayed on one screen width will also be displayed with a different width only in a different way.

I like the idea of ​​making an AJAX call based on the size of the screen when loading the page, but this is not exactly the idea of ​​a flexible design, and it actually takes more time to load the page (for the visitor). also means that the page layout will not change when resizing the browser window (for example, switching the orientation to the tablet). If you do not offer a new AJAX call at this point, in this case you will send much more traffic than a single-page load, and adding more load to your server.

Answer 2

You largely answer your question ...

The time it takes to create an ajax call when resizing a window is much longer than just once, and just use css.

And the basic idea of ​​responsive design is not hiding your content. When you hide your content, you have a lot of problems, such as search engines that display your content, but when a guy visits your site on his tablet, the content does not appear.

Edit:

Just to understand, when I talk about content, I’m talking about what is important on your pages, such as adsense or other things that don’t really matter to the visitor, that should be hidden without problems.

There is a ton of server-side technology, one good example is Adaptive Images , which send low-resolution images to lower devices, but you can do this with client-side technology.

Edit2:

I almost forgot that

Not to mention that onresize fire fires once for each resize. In other words, if you go from 1000x1000 to 950x1000, it will fire 50 times - 50 AJAX calls. @ Sébastien Renauld

Answer 3

Why would you hide extra columns on your mobile phone? Removing information is never a good idea that will make visitors not like the mobile version of your site.

Columns in a website are usually created using roaming html elements. Delete the specified floats using a media query and voila! Now the information is in one column.

If this one column turns out to be too high, you might want to add add-ons to show / hide information, but that concerns the fact that I would like to remove content for mobile sites.

Answer 4

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

In this article, Chris Coyer talks about using client methods to check the current screen width, then store it in a cookie for server-side use - then refresh the page. I do not fully endorse the method, but it may be useful to you.

You might want to explore the detection of JavaScript functions, or even sniff UA, although you frowned at it.

Answer 5

You do not need to delete / hide columns at lower resolutions. The trick would be to lower below each other in low resolution, and then align them in higher resolution columns. For instance:

 <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*/ }