Responsive design approach

Question

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.

Answer 1

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.

Answer 2

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.