if (screen.width <= 699 && !sessionStorage.getItem("redirecting")) {
document.location = "./m/index.html";}In pseudocode this says: "If the visitor's device [not browser window, so if you're using a desktop browser with a freakishly tiny window for some insane reason, you don't get redirected) is less than 700 pixels wide, send them to our mobile site."
But there's another element, the sessionStorage bit. That's because, on the mobile site, every link back to our full website looks something like this:
<a href="http://www.chesapeake.edu/library/" onclick="sessionStorage.setItem('redirecting','1')">Full site</a>
That says: "if a user clicks back to the main site, store a little note for the duration of the browsing session*." Then, on the main website, the redirect script checks for the presence of this note &, if it's present, doesn't redirect. Thus we avoid a redirect loop wherein mobile users can never return to the full site.
What's Good
- Relies on feature detection (e.g. screen width) and not user agent sniffing. Vastly reduces maintenance.
- K.I.S.S.: I honestly didn't think I could find something so simple that worked.
- Support for session storage is widespread. I saw some other scripts that use cookies as a backup, but literally 0% of our mobile site's traffic is coming from browsers without sessionStorage.
Aw, Snap!
- Some browsers/devices might fall through the cracks
- JavaScript redirects have disadvantages. A) JavaScript has to be on (minor concern these days, & someone surfing a jQuery Mobile site without JS won't have a pleasant experience anyways) & B) ideally this would happen on the server side, since I'm asking the user to begin downloading a page only to immediately move them away from it.
*Not at all clear at what point sessionStorage expires, but it's more temporary than localStorage. If the browser closes, sessionStorage is wiped out, for sure, but who closes mobile browsers? I'm hoping that sS expires every hour or so but haven't tested yet.
No comments:
Post a Comment