0

Mostly I am using bootstrap for my website and I keep it pretty responsive. However some of my pages are hard to adjust with media queries.

I have a size limit 769px for mobile.

Is it a acceptable practice that, lets assume a user visits my website with desktop chrome, and I serve desktop version of it, once user re sizes screen to a mobile size I refresh the page and serve mobile version, if user re sizes back again to a bigger size, I refresh and serve desktop version again.

If this is a mobile browser there is no issue already because they keep with same screen size, also I doubt how often desktop users will re size their screen after initial load. But in case of they re size and if media queries are hard to apply I tend to go this way. And I would like to know if this is a OK or "not acceptable" approach.

  • 1
    I'm confused. What do you mean by refresh? And why is it difficult to serve up media queries? – Majo0od Feb 3 '16 at 15:53
  • Refresh means, once user re sizes browser to a smaller size I refresh whole page and bring mobile version of the content from server and vice versa. like ?mobile=true. It is hard with media queries because there are significant amount of elements are getting adjusted and I use different plugins for two different versions. – Teoman shipahi Feb 3 '16 at 15:57
  • 2
    Seems to me you're trying to find the easier way at the cost of the user's experience. Fix the problem and don't have it go all jittery on the user because "I want the easy way out." – Majo0od Feb 3 '16 at 15:58
  • What I'm trying to say is, serve up the media queries (even though it takes longer) and don't have the user zoom in and out of their phone... That's not a usual mobile pattern. – Majo0od Feb 3 '16 at 16:01
  • 2
    So what happens if they decide to resize the screen while they are in the middle of inputting a form? Does it refresh... And all of their work is lost? That's not a good idea... – Majo0od Feb 3 '16 at 16:05
6

I would not recommend this approach. The whole point of responsive design is to avoid having to create multiple versions of the same page. There are many reasons why refreshing the page on a breakpoint will prove problematic:

  1. Maintainability - you as a developer will have to maintain two separate pages for each page, making sure when you update the desktop version you also update the mobile.
  2. Locus of Control - users want to be in control of the application, they don't want actions they don't expect. A refresh caused by resizing of the page will be unexpected and confusing.
  3. Loss of state context/data - if any of these pages have forms or input and the user starts filling it in, then one of these refreshes take place, it will all be lost. Same with if the user has anything highlighted with their mouse, certain elements toggled open/closed, radios checked, scrolled to a certain point, anything in the current view state will be refreshed and lost.
  4. Data usage (sidepoint) - Not so much a problem since you say it is only going to affect desktop browsers, but there will be a new HTTP request sent out every time the page is reloaded. With modern browsing speed this shouldn't be as much of an issue but if the page is content heavy and the user is on a low bandwidth connection it could become annoying.

Solution

With a bit of creativity most elements can be made responsive, I suggest asking questions on StackOverflow and similar sites to see if there is an existing solution.

However, if there is simply no way the better solution is to simply load both the mobile version AND the desktop version of the difficult elements into the same page and then hide/show them using media queries. This way you can avoid full refreshes.

  • 2
    Let's not forget... If they are submitting a form, then in the middle of them filling it out they want to resize their browser... All of the information is lost... – Majo0od Feb 3 '16 at 16:06
  • 1
    Thanks for detailed explanation. I will go ahead and try to adjust page design again. And thanks @Majo0od for your points as well :) – Teoman shipahi Feb 3 '16 at 16:07
  • You beat me to it with better detail. I will remove my answer. – K7Buoy Feb 3 '16 at 16:08
  • No problem @Teomanshipahi – Majo0od Feb 3 '16 at 16:10
  • 1
    @Majo0od No worries its a good point to reinforce as it would be the most annoying issue to the user by far – DasBeasto Feb 3 '16 at 16:17
0

You can check this article that contains some best practices about responsive design. It mentions rules like context, content reduction, design planning and etc.

Additionally, this website contains open-source Bootstrap templates that can be used off-the-shelf and integrated in your new and existing web pages.

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.