Responsive design with a view full site link
A warranted preface on media queries and responsive design
Does a responsive design with a view full site link really make sense? As developers (and UI/UX designers) shouldn’t we be using the media queries to present information in a pleasant and effective manner for each and and every screen size? If you subscribe to the philosophy of ‘responsive design’, than yes. And I think those in support of the responsive approach, in general, assimilate. Take a look at Mashable, Disney and the Boston Globe. All big sites. All utilizing a resposive design . All do NOT provide a “View full site” link.
So what’s up? Is it bad practice to do so? I thinks that’s up for debate. Personally I think if the responsive design is properly executed, than the “view the full site” is redundant and adds clutter and additional complexity to an already cramped viewport. With that being said, there are exceptions to almost every rule and other times, these decisions are out of your control. So…
Get your CSS in order
It’s common practice to put responsive CSS at the bottom of your style sheet. We’re going to load apply the responsive CSS conditionally. You should have something like this between the head tags:
[html]
<link href="http://yoursite.com/css/style.css" rel="stylesheet" media="all" type="text/css" />
<link href="http://yoursite.com/css/responsive.css" rel="stylesheet" media="all" type="text/css" />
[/html]
Add link to “view full site”
Nothing fancy here.
[html]
<div class="fullSite">View Full Site</div>
[/html]
I absolutely positioned it at the top of every page. You can, of course, put it wherever you see fit.
[css]
.fullSite{
position:absolute;
width:100%;
top:0;
text-align:center;
padding: 10px 0;
display:none;
}
[/css]
Display none? huh? Yes! Use a media query to show when needed.
Remove responsive design, change viewport and store prefs in HTML5 storage
We have three ‘things’ to tackle here. Prevent responsive CSS from being applied. Chances are you have some specific viewport content settings. We need to make sure this doesn’t interupt our ju-ju and play games with us by setting zoom, disabling zoom etc.. Also, if the user wants to view the full site, typically they want this to persist through the whole session. It would be a total PITA if they had to click the “view full site” link on every page. Enter HTML5 Storage.
[javascript]
// Get the resposive stylesheet
var responsiveCss = $(‘link[href*=responsive]’);
// And the meta viewport tag
viewport = $(‘meta[name*="viewport"]’);
// Attach event handler
// On click, add a key value pair ‘fullSite:true’ to the sessionStorage object
$(‘.fullSite’).on(‘click’, function() {
sessionStorage.fullSite = "true";
// Change the meta viewport tag content attribute value
viewport.prop(‘content’, ‘width=device-width’);
// Remove responsive stylesheet
responsiveCss.remove();
});
// Then on subsequent session page loads,
// we test the object for the fullSite key value pair
if (sessionStorage.fullSite == "true") {
viewport.prop(‘content’, ‘width=device-width’);
responsiveCss.remove();
}
[/javascript]
So, get the responsive style sheet and the meta viewport tag. Attach an event handler to the the “view full site” link (div). On click, we push a key value pair (fullSite:true) into the HTML5 sessionStorage. Lastly, we remove the responsive CSS style sheet from the DOM which will also remove the ‘display:block’ from .fullSite – thus hiding. On subsequent page loads the if statement will execute, remove the the responsive stylesheet and change the meta viewport tag.