What does the server-side of Responsive Design involve?

1
votes

When developing a site with a responsive CSS design, your site changes the way information is presented based off the client's screen size. In many cases, smaller screen sizes mean that less information is displayed.

Lets say you have a site designed for the desktop. In your server-side code, you make several database queries and then on the pages you display that information in some form.

Now, lets say your CSS design in responsive and some information is not shown to devices with small screens. Lets say that some of that information is that is not shown is from database queries. What this means is that when a mobile device loads up this page, the server-side code is making unnecessary database calls because the resulting information isn't going to be shown to the end user because of their screen size.

Responsive Design typically uses CSS media queries to determine what information is shown based off of device screen size. What is a good approach to writing effective and efficient server-side code for responsive designs?

3
phpmysqlresponsive-design
You can use javascript to check the windows width, and either ask the user to go to the mobile version like m.example.com, or just redirect - Ibu
If you aren't showing information to users with small screens then you are doing something wrong. They might have to scroll or tap a tab to see it, but the information should be there. - Quentin
@Quentin Then a million MAJOR websites are doing it wrong. Go look at the mobile-optimized version of Amazon's site and compare it to what you see on the desktop... - Jake Wilson
@Ibu I think you misunderstood the question. Go read a bit about Responsive Design. The purpose of it is to maintain one code base, one url for all devices and your site's design conforms to the client's browser size. - Jake Wilson
@Jakobud, no i have understood the question, but the server does not know the size of your screen. you can read the user agent and assume, but, i don't believe its the best choice because user agents are not consistent and can be manipulated. redirecting or suggesting a mobile version would be much easier. And that way you dont have to compute all the data that would be present in the Desktop version. Responsive does not directly influence php and mysql - Ibu

3 Answers

2
votes

Have you considered using AJAX to pass pass data about the screen size back to the server-side php? Then run queries based on the corresponding CSS design. Your problem comes in if you have mobile devices that don't support JavaScript or browsers that disable it. You also have additional maintenance - if you change your CSS to display more or less, your scripts will have to be updated to stay in sync.

In general, I believe that CSS media queries are meant to be used to optimize the display of the content of various sizes but ignore the "losses" of content. This may mean that extra queries/calculations/content are loaded but hidden. The upside to this is that if your user is operating in a browser that is scaled down and then they maximize it, they get a fresh display of the full page. If they don't have the full set of content, though, they won't get to take full advantage of it unless they refresh the page.

I think you need to ask yourself - is the extra build and maintenance effort on your part worth saving some queries on the backend?

1
votes

@jakobud You may want to take a look at the following articles and presentations that discuss ways to combine client-side and server-side feature detection in the context of mobile and/or responsive design.

Adaptation: why responsive design actually begins on the server

Pragmatic responsive design

Detector: Combining browser and feature detection in your web app

0
votes

I found your question early on in my exploration of Responsive Design, as I think you have the same concern I had: if I'm putting all this effort into making the front end adapt to the device the user has, should I be putting just as much effort into serving appropriate material in the first place?

However, my understanding of the Responsive Design movement (if it's appropriate to call it that?) is to provide a default web page that scales sensibly to all devices sizes, by rearranging how it displays.

If your web resource is such that some interactions or information presented in the full fat version on a PC or laptop, become wholly impractical or inappropriate, then maybe it is time to build a mobile version of your site, or a native smartphone app. At that point you may do something server side to detect the browser and redirect from www.example.com to mobile.example.com.