How we did it: On-demand toggle of responsive web design on mavention.nl and mavention.com

The 'desktop version' link displayed on 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

There are different ways to ensure for proper user experience across the different devices. One of them is responsive web design where the same HTML markup is sent to every devices and using CSS and optionally JavaScript the user experience is optimized for the capabilities and properties of the particular device.

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.

Always on

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.

The ‘desktop version’ link displayed on mavention.com

As soon as you click the link the page is reloaded with responsive web design disabled.

Desktop version of mavention.com loaded for a mobile device

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.

The rwd CSS class highlighted in the source of mavention.com

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.

Summary

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.

Comments

comments powered by Disqus