How we did it: On-demand toggle of responsive web design on mavention.nl and mavention.com
Last week we released on-demand toggle of responsive web design on mavention.nl and mavention.com.
Mobile is here
More and more mobile devices are used to browse websites. According to different researches it is only a matter of time before more mobile devices than desktop computers will be used on the Internet.
Although mobile devices gain more and more capability parity with desktop computers there are some big differences that influence the overall user experience when browsing the same website on a smartphone or a desktop computer. Smartphones have for example smaller screens, are touch enabled and can use slower Internet connections.
Responsive web design
The great benefit of using responsive web design, above other mobile optimization strategies, is that it shortens the process of building your website, simplifies the content management process and requires less effort to ensure for search engine optimization. Additionally, since responsive web design is supported by native browser capabilities, there is no requirement of custom development using server-side technologies.
Responsive web design works based on media queries. Depending on the size of the browser window specific CSS rules are applied changing the user experience of your website. All of this happens automatically. On one hand it’s great because it doesn’t require you to do anything. What if however you don’t want responsive web design to be applied in some scenarios?
There are many valid scenarios to think about for which you might want to disable responsive web design. It could be that you’re trying to assist someone when navigating the website or that your visitor is simply more familiar with the desktop experience and is incidentally visiting the website using a mobile device.
Disabling responsive web design
Last week we released the ability to disable responsive web design on mavention.com and mavention.nl. Normally the option is hidden but it appears in the right-upper corner of the browser window as soon as the responsive web design is triggered.
As soon as you click the link the page is reloaded with responsive web design disabled.
Once you choose to disable responsive web design, your decision is persisted for the duration of the session so that you don’t need to keep disabling on every page.
How we did it
The mechanism behind disabling responsive web design on mavention.com and mavention.nl is easy and comes down to including a CSS class (called rwd) on the starting HTML tag.
If the class is there, responsive web design is enabled otherwise it isn’t. We chose this approach because it has minimal impact on the markup of our website, allows us to keep the markup and user experience separated and allows us to benefit of the media queries being included within one and the same CSS file as opposite to having separate CSS files for separate media queries.
To control whether the rwd CSS class should be included in the HTML tag or not, we extended the standard SPHtmlTag control. In the RenderAttributes method we decide if the CSS class should be rendered by checking the value of the Page.Request array. This allows us to have a single call for checking both query string parameters and cookies: where the query string parameter is used on the initial switch, cookie is used on subsequent requests. Based on the outcome of this check we add the rwd CSS class to the Attributes arrays if responsive web design hasn’t been disabled or we skip it if the visitor chose to use the desktop experience instead.
Responsive web design is a great way for optimizing web sites for mobile devices. Its biggest benefits lie in its simplicity from the content management and maintenance perspective. Although it delivers optimized user experience for mobile devices, there are scenarios when your visitors might prefer to use the full desktop experience. In such cases it is useful to provide an ability to disable responsive web design on your website.