{"id":393,"date":"2011-10-30T13:56:08","date_gmt":"2011-10-30T13:56:08","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=393"},"modified":"2011-10-30T13:56:16","modified_gmt":"2011-10-30T13:56:16","slug":"optimizing-site-mobile-devices","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/optimizing-site-mobile-devices\/","title":{"rendered":"Beyond optimizing your site for mobile devices"},"content":{"rendered":"

Optimizing your website for mobile devices is a great start to improving user retention on mobile devices, but are you forcing users into a mobile experience that they weren't expecting?<\/p>\n

Sure, it's common practice, generally in the website footer, to allow a user to switch back to the desktop version of a site, but a frequent user of your site will quickly become annoyed at the need to choose the desktop version each time they load your site on a mobile device, if that is their preference.<\/p>\n

By combining 3 scopes, request<\/strong>, session<\/strong> and cookies<\/strong>, you can create a robust solution for detecting the presence of a mobile browser and storing a user's preference. To break this process down into steps, which could be performed in a conditional if\/then\/else statement:<\/p>\n

    \n
  1. Request. Check the query string for the presence of a preference variable, which indicates that the user wishes to switch to either the mobile or desktop version of the site. This is traditionally done with a link in the footer of a site, i.e.\n

    \t\t<a href="?browser=mobile">Mobile<\/a>
    \n\t\t<a href="?browser=desktop">Desktop<\/a><\/code><\/p>\n

    \t\tIf this variable is present in the query string, store the preference in the session and cookie scopes.
    \n\t\t <\/li>\n

  2. Check the session scope for the presence of the preference variable.<\/li>\n
  3. Check the cookie scope for the presence of the preference variable.<\/li>\n
  4. Perform a user agent detection to determine if the user is on a mobile device.<\/li>\n
  5. If all else fails, assume the user is viewing the site in a desktop browser.<\/li>\n<\/ol>\n

    For many of us, seeing a code example is more helpful in illustrating a process, so here's a quick PHP example:<\/p>\n

    if (isset($_REQUEST['browser'])) {
    \n\t    if ($_REQUEST['browser'] == 'desktop' || $_REQUEST['browser'] == 'mobile') {
    \n\t        $browser = $_REQUEST['browser'];
    \n\t        $_SESSION['browser'] = $_REQUEST['browser'];
    \n\t        $_COOKIE['browser'] = $_REQUEST['browser'];
    \n\t    }
    \n\t}
    \n\telseif (isset($_SESSION['browser']))
    \n\t    $browser = $_SESSION['browser'];
    \n\telseif (isset($_COOKIE['browser']))
    \n\t    $browser = $_COOKIE['browser'];
    \n\telseif ( \/\/ mobile detection logic goes here)
    \n\t{
    \n\t    $browser = 'mobile';
    \n\t    $_SESSION['browser'] = 'mobile';
    \n\t}
    \n\telse
    \n\t    $browser = 'desktop';
    \n\t<\/code><\/p>\n

    You can now safely assume that the $browser<\/em> variable will contain the users most desired preference between the desktop and mobile version of your site.<\/p>\n

    As a bonus, here's a useful PHP script that will determine the presence of a mobile browser<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Optimizing your website for mobile devices is a great start to improving user retention on mobile devices, but are you forcing users into a mobile…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[132,16],"tags":[134],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/393"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=393"}],"version-history":[{"count":6,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/393\/revisions"}],"predecessor-version":[{"id":399,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/393\/revisions\/399"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}