Aimy Steadman Online Marketing

When trying to creating my organization’s mobile website, I tried desperately hard to avoid the following user experience:

Standards for mobile website user experience are far from established. Everyone has a different idea for how they want users to experience their content on their phone web browsers. Some people want the style sheet for their entire websites to change for mobile users, and some have completely separate mobile websites with pared-down navigation.

At the Food Bank we chose to have a simpler website for our mobile users with quick-and-easy access to some of our most visited content.

However, since there’s nothing more frustrating than being denied content simply because you’re on your phone, I wanted to make sure users had the option to choose to browse the full site in case they were not able to access information they wanted to.

I also wanted to do almost all of this in CSS or JQuery to make it simple to implement across our gigantic website. I created some original cookie-setting code using the JQuery cookie plugin and used screen-resolution as my primary mobile browser detection tool. Here’s the code. Hope this helps you out!

Include JQuery and the JQuery plugins:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.yourwebsite.com/jquery-cookie-plugin.js"></script>

Check for mobile-level screen resolutions:

<script type="text/javascript">
if(screen.width < 600){

Look for an existing cookie. If there is none, ask the user if they want to view the mobile website or not using the “confirm” function. If they click “OK,” it sets the cookie value as “1” (mobile preference) and forwards them to the mobile website. If they click “Cancel” it sets cookie preference as “2” (full-site preference). The cookie is set to expire in ten days.

if( $.cookie('view') == null ) 
{ 
function confirmation() 
    {
    var answer = confirm("View our mobile website?")
    if (answer){
        var now=new Date();
        var expiresDate=new Date();
        expiresDate.setDate(now.getDate() + 10);
        $.cookie("view", 1, { expires : expiresDate});
        window.location = "http://www.yourwebsite.com/mobile/";
    }
    else{
        $.cookie("view", 2, { expires : expiresDate });
    }
    }
confirmation();
}

If they already have the cookie set as value 1 when they first visit a webpage, it forwards to our mobile website.

if( $.cookie('view') == 1 ) 
{
    window.location = "http://www.yourwebsite.com/mobile/";
}
}
</script>

All together now:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.yourwebsite.com/jquery-cookie-plugin.js"></script>
<script type="text/javascript">
if(screen.width < 600){
if( $.cookie('view') == null ) 
{ 
function confirmation() 
    {
    var answer = confirm("View our mobile website?")
    if (answer){
        var now=new Date();
        var expiresDate=new Date();
        expiresDate.setDate(now.getDate() + 10);
        $.cookie("view", 1, { expires : expiresDate});
        window.location = "http://www.yourwebsite.com/mobile/";
    }
    else{
        $.cookie("view", 2, { expires : expiresDate });
    }
    }
confirmation();
}
if( $.cookie('view') == 1 ) 
{
    window.location = "http://www.yourwebsite.com/mobile/";
}
}
</script>

On our actual mobile website, we also have a “Full site” link at the bottom that simply erases the cookie.

function boom()
	{	
             deleteCookie('view');
	}

<a href="http://www.yourwebsite.com/" onClick="boom()">Full Site</a>

Special thanks to Brandon Wiley for helping me with this.