26
Jun
2012

Responsive is Neat, but Where is the Full Version?

posted Tuesday, June 26th 2012 at 10:12 AM by

Responsive web design is a really exciting solution to display issues across multiple screen sizes. Which is great! It provides a framework to easily maintain content and layouts between both mobile and desktop versions of a website. But a responsive design is not without a few concerns.

Some users want to see the full site rather than be forced to use a mobile version.

  1. If the visitor to your site is used to the full desktop layout and your responsive mobile site has a radically different layout, it will throw them off. They'll have to re-learn how to navigate the mobile version.
  2. For sites that have different content between mobile and desktop versions, mobile users will feel left out if there is no way to access the same content that's on the regular version of the site.
  3. Mobile bandwidth and screens are better than ever. Some users may prefer to browse the full site on their mobile device.

How does this affect responsive designs?

With responsive layouts, its not as much of an issue because the content and layout are generally the same for the desktop and mobile versions, only scaled up or down. But if you find that your users fall into any of the three categories above, you're going to want to provide them a way to get to the full version of the site. One of the solutions that's used for mobile only sites is the 'Switch to Desktop Version' button. Basically that just cookied the user and sent them to the URL for the full site. Something very similar can be done for responsive designs, here are the nuts and bolts of it:

Give 'em the Full Experience!

Add your stylesheets. Make sure to include id attributes for them.



The default stylesheet should include CSS to hide the buttons by default.

#escapeMobile, #returnMobile
{
	display: none;
}

And the responsive stylesheet should inlclude the CSS needed to show the buttons only for mobile devices

@media  screen and (min-device-width : 320px) and (max-device-width : 800px)
{
	#escapeMobile, #returnMobile
	{
		display: block;
	}
}

On the page itself we'll add two click-able 'switch button' areas for the users to switch between each stylesheet.

Switch to Mobile Version.
Switch to the Desktop Version.

The last thing we'll need is some javascript and jquery to switch between CSS stylesheets.

$(document).ready(function () {
	//sends users to the full version
	$('#escapeMobile').bind('click', function() {
		setCookie("escapeMobile","true",7);
		$('#responsiveStyle').remove();
		$('#returnMobile').css('display', 'block');
	});
	
	//the user decided they want to switch back to the mobile site
	//remove the cookie and reload the page again as mobile
	$('#returnMobile').bind('click', function() {
		setCookie("escapeMobile","false",7);
		location.reload();
	});
	
	//remember a users preference, and give them the full site if they want it
	if(getCookie("escapeMobile") == "true") {
		$('#responsiveStyle').remove();
		$('#returnMobile').css('display', 'block');
	}
});

//functions to handle cookies
function setCookie(c_name,value,exdays) {
	var exdate=new Date();
	exdate.setDate(exdate.getDate() + exdays);
	var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
	document.cookie=c_name + "=" + c_value;
}

function gettCookie(c_name) {
	var i,x,y,ARRcookies=document.cookie.split(";");
	for (i=0;i<ARRcookies.length;i++) {
		x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
		y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
		//x=x.replace(/^\s+|\s+$/g,"");
		if (x==c_name) {
    			return unescape(y);
	    	}
	}
}

The code above will hide the 'switch buttons' for desktop users. Mobile users will initially have a link to click that will give them a cookie and remove the responsive styles for mobile. If the user returns while they still have the cookie, they'll still have the desktop version. Of course, if a mobile user decides they want to switch back to the responsive style, the cookie will also give them the option to switch back by clicking another link.

Final Thoughts

Don't force mobile designs on your users. Those visitors on mobile devices will appreciate the ability to choose their own display method, so give 'em what they want!

Share This:

Tags:

Comments:

View (0) Comments Post a Comment
  • Replying to Adam Konieska on Responsive is Neat, but Where is the Full Version?