In this new wave of technology, you can't do it all yourself, you have to form alliances.

Mobile Websites

March 17, 2011

Mobile vs Desktop: How are people browsing your site?


When considering internet trends, it is best to consider both global and local patterns. There are many sources to evaluate global trends, perhaps the most current and relevant source for considering mobile web usage can be found in an 87 page document authored by Morgan Stanley. Luckily, the friendly folk over at Smashing Magazine have published some cliff notes so we can get right to the juicy parts. We will be referencing these cliff notes as our source for global trends, and demonstrating how Google Analytics, when used effectively, can provide ample information regarding your local trends.

Global Trends
I'll start by quoting an interesting statistic found on Mashable - "The average iPhone user only spends 45% of his on-device time making voice calls." Place this fact next to the trend line demonstrating exponential growth within the mobile phone market, and some interesting conclusion can be drawn. One conclusion which Morgan Stanley drew is that desktop internet use will be overtaken by the mobile web before the year 2015. Think about that statement, within four years it has been predicted that more than 50% of internet traffic will be originated from mobile devices. While the implications of that statement extend far beyond the question of "do I need a mobile ready website for my business", it certainly provides a clear answer for businesses with diverse and/or progressive audiences.

Local Trends
While it is important to understand current global trends, perhaps the most valuable information can be drawn from the local ones. The key to being able to gather such information is having a user tracking system in place, and to have had one in place long enough to develop statistically valuable trends, Level8 uses three months as a minimum for trend analysis. Perhaps the most popular user tracking platform, and the one which is used by Level8 is Google Analytics. To determine mobile usage though Google Analytics is easy, after logging into your account, navigate to the the following location: "Visitors / Mobile / Mobile Devices", as is shown in figure 1. The data shown demonstrates overall mobile usage, which when placed against overall usage can be displayed as a percentage of a whole. To see the mobile usage placed against the overall data, return to "Visitor / Overview", and select "Advanced Segments / Mobile Traffic" in the upper left. This graphic (figure 2) portrays your mobile usage in contrast to your overall usage.

Figure 1:

Figure 2:

Mobile Specific Vs Adaptive Websites

If you've established that there is value in creating a mobile ready version of your website, the next question is how are you going to accomplish that goal? The two common options are either to create a new website specifically developed for mobile devices, or to repurpose your current web site for mobile users. While it may seem intuitive that repurposing your current website is going to be the quicker/cheaper option, it often isn't the case as most designs don't translate from desktop to mobile screens very well and as a result this process can require significantly more effort. Typically our recommendation is to start fresh, build an interface that is going to be mobile specific, and avoid the mess of trying to repurpose your current website.

Mobile Specific Sites
If a user comes to your domain name and you have built a mobile specific site, they will automatically be moved to a set of files built for mobile devices. This set of files will have a unique interface designed for easy access via a touch screen, a reduced set of content, and images scaled for quick access over slower networks. Designing specifically for mobile devices allows for interfaces to be reimagined and optimized specifically for the unique needs of the platform.

A site built specifically for mobile devices should consider the following concerns:

Concern: Screen sizes are small and inconsistent.
Solution: Build a structure based on 100% of screen width, while keeping graphics below 350px in width.

Concern: Slower connection speeds.
Solution: Assuming slower connection speeds is the safe play with mobile. Building sites that are light and responsive should always be a goal, but becomes more important for these devices. The solution is to keep things simple, keep images small, and limit your use of client side scripts.

Concern: UI design requirements.
Solution: Ultimately, testing your designs in the environment they will be delivered on is the most important step, but some other general rules should be considered. Keep your navigation simple, keep your buttons big, and keep your knowledge current because many features change as mobile devices continue to adapt (ex. form field interactions).

Concern: Where to position your mobile content.
Solution: There are a few different options which are used, you can create a sub domain (ex., create a new domain (ex., or create sub directories within your current domain (ex. Because the big guys in this game tend to set user behavior, it is often best to follow the leader, with Google, Facebook, and Bing, all using the m.domain standard, it seems logical to stay consistent with your approach.

Adapting Your Content
Sometimes it does makes more sense to reuse your current website structure, tweaking it to fit the needs of mobile users. If you can demonstrate a lack of demand by mobile, and/or your website already performs reasonably well on mobile platforms, then it may make sense to do a few small tweaks to better adapt your website for mobile users until you can prove a stronger ROI. To do so, a style sheet specific to mobile users should be built. Much like the process performed to adapt web content for users when they print a page, the CSS document created should look to simplify the content and in the process optimize the displayed content to the device. The most important part of implementing this new style sheet is to remember that the "media" attribute should be set to "handheld." An alternative method is to check the max width of the screen and deliver different content based on that number. Ideally, the style sheet setup for handheld devices will provide alternative formatting for structures which appear awkward on mobile devices, but often developers just get real comfortable with the parameter "display: none" and hide chunks of content to prevent them from cluttering the screen. It's worth noting however, that even though data might might not be displayed, it is still being loaded.

Mobile style sheet integration method 1:
<link rel="stylesheet" href="/css/handheld.css" type="text/css" media="handheld" />

Mobile style sheet integration method 2:
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="/css/core.css" />


Trends are pointing towards mobile devices being the dominate platform for internet viewing, whether or not now is the time to create a mobile ready site for your business appears to be question worth asking.