It’s great that media queries allow us to adapt the layout of our sites to the users’ viewport size, a.k.a. Responsive Web Design. However, some argue that doing so comes with a (slight) risk of confusing some people that don’t expect viewport width to make the layout change as drastically as media queries allow.
While I don’t think this affects a large number of people, it’s quite possible that people who do not know what responsive web design is (i.e. the vast majority of people) can be confused by a site looking radically different on their computer that on their tablet or smartphone. Bruce Lawson mentions an example of this in Turning off responsive web design, and I’ve heard other similar stories.
A colleague mentioned another case when a responsive layout is not always ideal – client support. Support issues from clients often mention layout issues or change requests. If you get a support email referring to the desktop layout while away from your desktop computer you may not be able to see the same thing on your tablet or smartphone, so you’ll have to postpone responding. Sure, it’s an edge case, but one in which being able to turn off the responsive layout would be useful.
Despite having the feeling that it wouldn’t benefit a large number of people, implementing a switch to toggle a website’s responsiveness on and off isn’t really a lot of work. So in a couple of projects I have done that, and thought I’d share how. The approach is pretty similar to what Adrian Roselli describes in Letting Mobile Users See Desktop View of RWD Site. It’s not very complicated, and neither is it revolutionary, but as with most things there are different ways of getting there.
Posted in CSS.
Copyright © Roger Johansson