There’s been a lot of discussion in the marketplace over how organizations can best implement a mobile solution to meet their needs. The source of this confusion is the simple fact that there is no one “right way” to develop a mobile site. At BrandExtract, we help clients find an optimal approach depending on their audience, business requirements and, of course, budget.
Let’s review some real world examples of mobile implementations that illustrate the different approaches available to an organization. I’ve scoured the web to find ideal examples of each.
JustMobile
In a nutshell, this is just your desktop optimized website on a mobile device. We go to some lengths to make sure that everything in our design will work on a mobile device. Some examples of things that will not work are Flash which is not supported on iOS devices and navigation elements that depend on a hover state (aka mouseover).
The principal advantage to JustMobile is cost, there really is none. Sure we have to make some decisions at wire framing and design time to accomodate this but it does not effect the time to produce or the bottom line on your website. On the downside we may make some compromises for the dektop user and the mobile user will have an experience that is less than ideal. There will be lots of panning, pinch zooming and scrolling while they look for the information they need.
Some example of JustMobile sites are:
TrueMobile
Since we use SAM, our own content management system, to build and maintain websites we are able to offer a desktop and mobile optimized experience without having to manage two separate web sites. This makes it practical to build and maintain a “true” mobile experience without breaking the bank. Changes are made to the desktop site in SAM and whenever those changes are published SAM automatically publishes those changes to the mobile site as well.
The site architecture and content of the mobile site is a 1-to-1 mirror of the desktop site. It is of course possible to deviate from this 1-to-1 relationship but doing so may affect development costs. To keep TrueMobile cost effective while supporting as many platforms as possible, we leverage existing mobile templates/frameworks. Currently we use the jQuery Mobile framework. Some examples of mobile sites using this framework are:
As an added bonus, since SAM maintains a 1-to-1 relationship on the site architecture we are also able to use URL rewrites on the web server to serve up the correct format at the primary URL regardless of what device the user is on. In other words, we do not redirect users to a different URL for the mobile site (like the examples above). The server parses the request header from the client and serves up the version of that page that is ideal for that device. Every hit, click-through, and inbound link counts toward your primary URL and there is no dilution of your domain’s power.
PureMobile
This is a full-blown, customized, and non-compromised mobile experience. It is a completely separate entity from a user’s and administrator’s perspective. Note that SAM will allow you to share content between separate sites. You will need to explicitly place that content on both sites, but edits to the content are automatically replicated. Obviously this can give your users the ultimate experience when visiting your site, but it does significantly increase costs since all IA, design and programming is essentially done twice (or more if you are targeting multiple devices).
It also means that your website must be tested on a much larger range of devices. While this is a common approach for mobile websites we feel it is usually not the best choice for our clients. It makes sense for web applications, but not for sites that exist primarily for marketing and lead conversion.
Our jQuery Mobile examples above could also be examples for PureMobile sites done without the benefit of SAM, but a more appropriate example would be a sophisticated web application like Google Mail.
But Wait, There’s More!
There is a fourth option for a mobile experience. The contemporary trend is toward responsive web design. This is a single HTML file (per page) that uses different resources depending on the size of the user’s browser window. We don’t really care what device the user is on. In many ways it is the best of everything: A single web site with 1-to-1 content at a single URL that provides optimized experiences for all browsers and devices.
It can be more costly to produce in the beginning (multiple IA’s, architecture, design and supporting assets) and the templates themselves are far more challenging to develop but the end product is something that is easy to maintain, optimized for each and every device and will serve you and your visitors well.
One of the highest profile responsive web sites is The Boston Globe (to be clear, we DID NOT build this web site):
Visit this site and scale the browser window down. Notice at first the columns are liquid, they scale to fill the window. But as you go further the design changes to a two column grid. The third column gets stacked beneath the first two. Scale down further… the masthead changes to look better in the space given. It doesn’t just scale, it uses different graphic assets in different positions.
Keep going and you will ultimately reach the mobile optimized web site. All this without refreshing the page or going to a different URL. This is mostly handled with CSS media queries and the occasional bit of javascript.
Looking Forward
Regardless of what method is right for your web site there is one thing we can state with absolute certainty… Mobile is important!
Your mobile audience already exists wether you know it or not. One of our larger clients saw staggering growth in iPhone traffic alone during the first half of 2011 with iPhone visitors nearly doubling. This site sees thousands of unique visitors every day, so the change was statistically significant. Check out this infographic from The Next Web.
This trend is not limited to a particular web site, audience or demographic, it is a global trend that crosses all socio-economic boundaries. Don’t get left behind.
Loading...
