View Full Site Link for Responsive Web Design

42 Replies

Update: June 2013

I’ve placed the code on Github in the hopes that the implementation of this code will be a bit more clear. Also hoping that others can help me improve the code as my device arsenal is quite limited.

Responsive View Full Site on Github

Update: May 2013

QuirksMode has a handy page for browser compatibility for viewports. It looks like this technique is still not supported on Windows Phone 7 or 8 Firefox Mobile.

I’ve been tinkering a lot lately with responsive web design. The designers and developers I talk to about it absolutely love the concept and the possibilities, however I’ve found when speaking to others outside the industry about it, I’ve been met with both positive and negative feelings. Several people I’ve spoken to have asked me, “That’s cool, but what if I want to view the full site?”

I searched to see if anyone had developed anything like that yet, but I couldn’t find anything (my apologies if someone has already done a write up similar to this post!). After messing around with a few options, including adding in extra styling and switching stylesheets, I wondered if I could just modify the viewport meta tag. To my surprise, my initial test worked out extremely well.

Using jQuery, we can switch out the content of the viewport meta tag that sets the width of the viewport to the width of the device with the default viewport width. You can read more about how the iPhone handles the viewport meta tag. I also set a variable which has the target width of our website, though it’s currently static and I’m sure there’s some further exploration needed here.

var targetWidth = 980; 

$('#view-full').bind('click', function(){ 
$('meta[name="viewport"]').attr('content', 'width=' + targetWidth);
});

So far, I haven’t been able to find any cons. I haven’t tested this on Android or an iPad yet, but the latest version of iOS 5 on my iPhone seems to handle this fairly well. Update: No reported issues on Android or any iOS devices so far!

Be sure to check out the demo on your mobile device. Note: the demo has been updated to include new functionality, see the update below!

I’m still hesitant to think it’s this easy. I hope to start some good discussion below!

Part 2 Update: Saving User Preferences

Matt (see comment below) had the great idea of being able to persist the user’s choice if they clicked the button to “view full site.” We can do this fairly easily thanks to HTML5 Local Storage and a bit of Javascript.

Check out the updated demo to view the new bit of Javascript we’ve added.

In a nutshell, we can store a value in Local Storage that checks to see whether or not our viewport should be configured for responsive design. If not, it will change the viewport to the width we’ve specified.

I am by no means an advanced Javascript-er, so I may have over complicated the code. If you have any suggestions for improvement, please feel free to comment! I won’t be offended ;) .

42 thoughts on “View Full Site Link for Responsive Web Design”

  1. Chris Cox

    Interesting technique, but I think it’s caused by people’s unfamiliarity with responsive design, especially the mobile-first philosophy.

    If done properly, your answer should be: “You don’t, because it’s the same site. There’s nothing on the desktop-optimised layout that you don’t see on your mobile, but better formatted for its screen.”

    Reply ↓
  3. Mark Progano

    There are really two sides for usefulness, either you want to give the option or you didn’t optimize your website well enough. (I know you know).. The point of RWD (& Mobile First) is to give access to all features on any screen resolution. Clearly this wouldn’t be needed for such but at the same time sometime we just need to serve to our customer/clients needs, and they could want it. It a proof of concept and its pretty awesome. Well done.

    Reply ↓
  4. Ian Moffitt

    Imagine the horrible possibilities you could accomplish by combining user agent detection and this to force devices to view only specific breakpoints while still enabling pinch zooming! It’s horrible, I know.

    Reply ↓
  5. Justin Avery

    I applaude your out of the box thinking on this one. Most of the comments are true about missing the point of responsive design, but you’re right that it’s something that is worth mentioning to clients that there’s something to be done while you bring them around to fully understanding all of the benefits.

    Unfortunately with emerging techniques people are very ‘stuck in there ways’.

    Reply ↓
    1. Chris Morata Post author

      Thanks Justin! What I’d really like to do is attach some analytics tracking clicks on the button to find out how many people are using it. My hope is not that many :)

      Reply ↓
      1. Justin Avery

        Although it would be impractical and annoying for the user, it would be great to present the user with an option to go with either the mobile specific or the full responsive site and check the number of clicks based on that.

        The difficult bit, aside from that just being annoying, would be to present the options in a descriptive yet non-biased way to ensure users are not influenced in either way.

        Mobile: Faster load with mobile specific information
        Responsive: Full site content with slower load time

        If you were going to go this far you could also put in 4 options and have:
        Mobile Always – Responsive Always
        Mobile this time only – Responsive this time only

        From that you would also want check the number of people that chose one particular option and then changed back to the other version before completing an action.

        Reply ↓
        1. Chris Morata Post author

          Interesting, but I think at that point you’re giving the user too many options. How do you tell the user what features are included with the mobile site to help with their choice? I think the point of having the responsive site is to present all the features of the site optimized for their viewport, whatever it is.

          Reply ↓
  6. Gunnar Lium

    One thing it does solve nicely is, “Hey, I’m viewing this cool site on my mobile phone, wonder what it looks like on a desktop?”.

    On desktops, we can resize to see mobile versions, but you can’t really do it the other way round. I do, in fact, often visit sites not to accomplish whatever the site wants me to accomplish, but rather to have a look around and get inspired.

    Reply ↓
  7. Matt

    I suppose you’d want some way to persist their choice on all pages of the site. It would be extremely annoying if on each load it reset to mobile if you wanted full.

    Reply ↓
    1. Chris Morata Post author

      That’s true, I hadn’t even thought of that yet. I would think you could store it in localStorage and check for the value on page load. I’ll work on updating the article with a solution.

      Reply ↓
  8. Hilary

    I had a client request a ‘view full version’ link on their one-url mobile solution, didn’t realise I had a problem until they requested it and, this technique SAVED me. Sometimes even if we don’t agree we must give the client what they want without being too compromised.. thank you.

    Reply ↓
  9. Chris

    Thanks for this, I’ve been looking around for a while if anyone’s done this. I noticed in the updated code, it mentions “Modernizr” for the local storage. Is it necessary to have Modernizr (http://modernizr.com) to use this snippet?

    Reply ↓
    1. Chris Morata Post author

      I think it depends which mediums you’re supporting. I’ve actually been meaning to remove it for this specific demo as I don’t think I really utilized it properly. Using Modernizr would allow you to provide a fallback for local storage (cookies) if it wasn’t supported. So to answer your question, I don’t think it’s 100% necessary to have, it just depends how much support you’re wanting to provide.

      Reply ↓
      1. Chris

        Thanks for the response Chris. If you could provide a demo code without Modernizr, that would be appreciated. My javascript isn’t too good. I’m using Drupal as my CMS and the theme I use (Omega) doesn’t allow the use of Modernizr with its current setup which is why I was wondering if it was dependent on this.

        Reply ↓
          1. Chris Hartman

            It’s not clear to how to achieve this besides the javascript part. What should the HTML/CSS code be to make it work with the javascript in the demo?

            Thanks!

  11. Dane Henas

    I’ve been desperately looking for a solution to this since many clients want a”view full site” button, and no amount of idealistic talk about “it’s optimized for mobile” will convince them otherwise.

    But, is there any way to get rid of the black box with the code for the desktop computer viewers? Can the black bar be hidden at a range of say, 800 to 1300 pixels wide? How would I change that?

    Reply ↓
      1. Dane Henas

        Sorry–I mistook your displaying of the javascript on the demo page as being part of the functionality of the page—silly me. This is a very valuable function –could you possibly be more specific about how to implement it? Maybe a step by step tutoria or a link to a sample page with all the css and js? think I’ve got it, but I’m still confused about which css files and js file need to be on the page for it to work.

        Reply ↓
  12. Sean Ockert

    I like this idea and, despite what others have said about not being true to the responsive design ethos, I think it is good for managing user expectations, like the ones mentioned in this article: http://www.elezea.com/2012/09/responsive-design-expectations. Early, stand-alone mobile sites have created a conception that mobile sites offer less content than their desktop version. If someone has previously accessed the site from their desktop they might feel more comfortable using the full version on their mobile or comforted that they’re not missing anything by seeing the mobile optimized version. I’ve done that with AirAsia.com – it’s probably more prevalent with ecommerce sites.

    I was wondering about loading background images, if they’re defined in a max-width media query, when you switch to the full view do they load? Do you think it would be better to force a page reload? Or will the CSS will still be parsed before the viewport is changed via JS? Hmm

    Reply ↓
    1. Chris Morata Post author

      Sean, thanks for the comment. As far as background images go, you should have to reload the page. The CSS in media queries is only parsed once the media query is true, so your background images would download then.

      Also, I always run into issues when using max-width media queries, I find my workflow runs much smoother when using min-width media queries. Check out this article I wrote for some elaboration on that: http://creativeandcode.com/tips-for-writing-responsive-css/

      Reply ↓
  13. Kevin Kennedy

    Is this supposed to me maintained across page reloads? Loading the demo up on iPhone switches layouts as expected, but resets to the mobile view after a reload.

    This page is cited in several discussions about this issue, but I’m confused about why the demo doesn’t work as I would expect it to.

    Reply ↓
    1. Chris Morata Post author

      Sorry to hear about the issues you’re having. I wrote this article before the Galaxy Tab 2 came out and I don’t have one to test on. Maybe it has an issue with jQuery’s “click” event? Feel free to explore further and if you come up with a fix let me know and I will update the demo.

      Reply ↓
  17. Steve

    A step by step implementation would be awesome if you find the time to write one up. Still can’t get it working! :(

    Reply ↓

  18. Pingback: Letting Mobile Users See Desktop View of RWD Site | Algonquin Studios Blog

  20. Adam

    Hey Chris, hate to be the bearer of bad news. When testing this on a Chrome for Android, Firefox for Android, and Opera Mini for Android on my Galaxy S3 I could not get either demo to working correctly. It works fine in the stock Android browser through.

    Frustrating to say the least, seems like a bug with how the other browsers are responding to dynamically updating the viewport width.

    Reply ↓
  21. Bogdan

    Sadly, android isn’t the only platform that has trouble with this script. I have tried it with IE on a windows phone 8 with no result.

    Cross browser and device compatibility is sadly a big issue to a problem that shouldn’t exist in the first place if it werren’t for our dear and beloved clients. If it could be fixed (either of the two problems above, wink wink, nudge nudge) we would be eternally grateful!

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>