Menu
03/07 2013

Mobile Web sites; a new way

I've been building Web sites professionally for over 7 years now and in that time the Landscape of getting a site from the flat graphic state, to a state where users can interact with it have changed dramatically. Working without a script, piecing together client expectation over new technologies is an everyday balancing act where Professional Front End Developers always try to do the right thing but also want to wow their audiences. That audience is not their boss, their co-workers or even the client; when all is said and done and everyone has forgiven each other, the user is the only one we want to impress.

It just works

Sometimes the smallest detail makes the biggest impression. I've been amazed at the amount of times I've spent days working on a particular feature such as a complicated ajax form where the client hasn't batted an eyelid (that said what would the reaction be if it was a traditional old clunky one), only to fall at my feet when I show them a hover and fade rollover that took a couple of hours. I realized this many years ago and shifted my focus onto the details of a Web site, the things that users will notice in their everyday interaction with a site and identifying whether it is worth investing large amounts of time on creating a particular interaction or behavior. Mobile adds a new level to this and I have been looking for a way to keep these interactions going for both. Using the traditional 'responsive' approach wasn't really enough.

The new way

I have developed a few different methods to provide mobile devices with not just a different design but different behaviours too. There is no getting away from the issue surrounding cut down versions of content, which many sites require. Sometimes you just have detect the device via server side rules to make sure the mobile version is snappy and quick to load, especially when considering the slower connections a lot of devices still have to handle. 4G is not yet commonplace.

Method 1: DIV Detection

By placing a div with a unique class (or ID) of say #ismob or something similar somehwere in the markup, you can target this with Media Queries to be display:inline; or display:none;. This then allows you to have a conditional call in your Javascript to set a variable of a similar name, executing the javascript or jQuery you want to use for that particular device. This will allow you to use, say, a different slideshow but use the same content within that slideshow, giving the user a different and suitable experience for the information you need to show.

The HTML

  

The CSS

  
#ismob{
  display:none;
}

@media screen and ( max-device-width: 320px ), screen and ( max-device-width: 480px ){
  #ismob{
    display:inline;
  }
}

The Javascript

  
//jQuery required
if ($('#ismob').is(':visible')) {
  isMob = true;
}
if (!isMob) {
  initfunc();
} else {
  initmobilefunc();
}

Method 2: Device Detection

There is no way around it, developers have tried and tested every orifice when it comes to device detection but using the method above in cojunction with actual server side device detection is, in my view, a good way to keep your site running smoothly but supporting mobile devices still should device detection go down in some way. I tend just to use device detection to cut out pieces of irrelevant or unnecessary content on the mobile according to designs I'm given to build or for sites I design and build myself, either entirely or to provide more suitable content in it's place. I fall more on the side of reducing the need for this and reusing the same content for both, but the reality is that sometimes you have no choice.

Here it is, are you ready?

Da php

  
$mobdetect = false;
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
$mobdetect = true;

This $mobdetect php variable can then go on to be used in a template to show or hide different things depending on what it returns. Use it in a thoughtful way and even if the device sniffing fails, the div detection method will still keep things relatively sane.

As technology advances and we can handle the mobile marketplace more effectively, I am sure new methods will emerge but these methods work well together to help you create some really powerful front ends with an enormous amount of flexibility.

One Response to Mobile Web sites; a new way

  1. […] main issue was not apparent from any mobile device itself. As I explained in a previous post, it is possible to hide and show an extra element with Media Queries and then detect that from the […]

Leave a Reply

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

This article is in the php category. Here are some other related articles also in this category.