8

I'm currently developing a responsive website with CSS media queries. It would be much easier if the server returned a different HTML/CSS for each viewport.
I was wondering why couldn't the client include its viewport information when requesting an HTML file. This behavior is already common for returning websites in the correct language using the Accept-Language header.

  • You could send it via JavaScript and then sideload a CSS file. I think the problem is, that the resolution can change... – Knerd Mar 25 '14 at 17:42
  • That's not RWD. Those HTML/CSS won't gives you any responsive effect unless you refresh the page. – Mahdi Mar 25 '14 at 18:03
  • Resolution, font styles, font sizes, browser type, screen size, these are all mutable from device to device, you're asking a web 1.0 type question, either move to something dynamic like ASP, PHP, adding Javascript, etc. or be happy with the media selector that html gives you. – Jeff Langemeier Mar 25 '14 at 18:08
  • 1
    What if software without any image displaying ability at all asks for your html instead of a browser? Such as a screen reader? Or a terminal-based browser? – Jack Dec 21 '16 at 7:47
18

In short, that was not how the Wild Wild Web was designed to work.

The original design was simply that the HTML gave the browser hints about the document. Which bits to emphasise, where to go to get image files. Decisions about the font (as well as what size) was the job of the browser and local configuration settings.

Yes, I know the world has moved on, and now web designers expect to control every pixel our eyes get to see. In the bygone past, that was the desktop theme's job to do that.

  • 3
    I would say that even today it should be the device's job. Set up couple different minimal CSS sets and let the devices handle it from there. – Jeff Langemeier Mar 25 '14 at 18:04
  • @JeffLangemeier Totally agree. Even tho this answer is correct in essence, however it's not talking about RWD at all. – Mahdi Mar 25 '14 at 18:06
  • 1
    Maybe time to redesign a new web format which completely separates content from design :) – eliocs Mar 25 '14 at 18:12
  • @Mahdi I don't really feel like the question was about RWD in essence anyway, it was a person trying to reinvent the wheel and wondering why the HTML spec doesn't have <arbitrary personal need>. – Jeff Langemeier Mar 25 '14 at 18:13
  • @eliocs there is, it's called html and CSS. HTML is the structure, and CSS is the design. Or if you want total content separation from your design, go to a dynamic system like PHP, django in python, etc... – Jeff Langemeier Mar 25 '14 at 18:16
8

I think you haven't totally got the idea of Responsive Web Design. Serving different HTML/CSS/JS based on the client's web-browser has been there for a while and I'm pretty sure there are still some websites still doing that -- a very clear example is the old-school way of serving a mobile-friendly theme for a website.

What you're missing, in my opinion, is that in your scenario if the user changes the view-port from portrait to landscape, then you won't get any responsive answer, unless you refresh the page. Same action is require if you resize the web-browser window or change the default zoom. Also an element in a page could be responsive to other elements as well. So, if you hide the sidebar on the right, for example, the main content will response to the change. These won't be possible in your way, again, unless you refresh the page.

Also HTTP requests are not just designed to server the whole web page. In many cases you're sending request to send/receive plain data, files, images, etc. which they don't need to carry on the view-port meta information and the overhead in a scale like Internet will be a lot I guess.

  • The overhead would be useful serving images too, imagine you returned smaller resolution images for mobile devices. I agree that viewport changes once the page has been loaded is big flaw on my consideration. – eliocs Mar 25 '14 at 18:11
  • @eliocs You're right, for the images actually that's an important thing. Thanks for the correction. – Mahdi Mar 25 '14 at 18:12
  • I don't think that this is directly the problem which responsive design tries to solve. In most cases, the goal of this is to ensure that the smallest amount of resources necessary for the first render is provided. You would still provide responsive design on top of this. Having the information in the request doesn't prohibit responsive design. For instance, you may be using HTTP2 to get the right images for srcset in the first response. You can't do this unless you have viewport size information, but you can still use srcset to keep things responsive. – monokrome Mar 15 at 19:57
2

Are you sure you're doing responsive design? Responsive design is technically the combination of fluid design and media queries.

Fluid design solves 90% of the viewport issue for you, if you are smart about how you lay things out. Media queries get you the other 10% by changing grid characteristics based on current dimensions.

If you're trying to do only fluid (percentages everywhere, relative sizing on everything, nothing specified in pixels, etc.) you run into the problem of what to do when the viewport is dramatically different in size (like a desktop landscape view vs. a mobile portrait view). Some things simply don't fit when you go from 2048px to 640px. When you try to do only media queries, you end up with dozens and dozens of media query breaks, and you're basically micromanaging your CSS classes in that case. Neither approach is adequate for RWD -- you have to combine the two to get everything.

My advice: create three or four different "nominal resolutions and orientations" -- like Desktop landscape, iPad portrait and landscape, iPhone portrait and landscape -- and treat them as your wireframes to work from. Then set up your media queries for those breaks. Then work really hard to stick to those few breaks, using fluid layouts to accomplish it -- most likely with a CSS grid of some kind (there are dozens of them prebuilt for you, or you can roll your own).

1

This will not work for the simple reason that the user may resize the browser window without a page reload.

Responsive design means the layout changes dynamically in response to different viewport sizes and other factors. So if the design is fixed on the server side based on viewport size at the time of request, it would not be responsive if the window is resized by the user. This is why media queries are evaluated on the client side.

0

If you have a dynamic website that fetches the content, a code like this will do the trick (in ES6):

var headers = new Headers();
    headers.set('window-w', window.innerWidth);  // or $('html').width()  with jQuery
    headers.set('window-h', window.innerHeight); // or $('html').height() with jQuery
fetch(url, {'credentials': 'include', 'headers': headers})
.then(function(response) {
    ...

Note: 'credentials' is for session cookie

Then you can read those headers server-side with for example (in PHP):

$headers = getallheaders();
if (isset($headers['window-w']) and isset($headers['window-h'])) {
    $window_w = 1 * $headers['window-w'];
    $window_h = 1 * $headers['window-h'];
    if ($window_w * $window_h > 0) {
        ...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.