Creating Mobile Version of your Site

Despite the obvious explosion of the mobile market some website owners feel like very few, if any users will decide to browse their site using a mobile device. Well it is time to wake up and realize that there never has been a better time to ensure your site is mobile friendly. A quick look at some stats will show you how important this has become.

  • According to Apple mobile web usage increased over 140% in 2009
  • Experts predict that there will be 1.1 Billion smart phones in use by 2013
  • New forms of mobile devices are entering the market every month (iPad, eBook readers, PDA’s, etc...)

Mobile Web Design

Designing for mobile devices is tricky. There are countless different devices capable of browsing the web, all with different technological capabilities, browser software, resolution and screen sizes. Because of this we have to give up some control and sophistication and accept that our primary goal is to make the sites simple and usable not pretty and exciting.

Screen Size & Resolution

Different phones and operating systems run at different resolutions. An article published by PhoneArea.com recorded that half of all the smartphone traffic worldwide was done on an iPhone. Android based phones had grown to 11%, Blackberry had a declining 7% and Symbian OS (Nokia) accounted for 25% but was also declining.

Much like in traditional web design you typically want to design for the most common denominator. These days on the web you are looking to design a site with in the 1024 x 768 window. When it comes to mobile over 75% of the phones display a screen resolution of 240x320 pixels or more.

Based on this you can take two approaches. One is to try and stay with in this window to ensure an optimal experience for the largest possible audience. Alternatively you could make your mobile site fluid (meaning that the design scales with the window) and let the browser figure out how wide it should be.

Browser Capabilities

Another common mobile design challenge is the differing technological support of phones. Currently very few devices support the flash platform and almost none of them do a great job working with javascript either. For these reasons it makes sense to try and keep your sites as simple as possible. Sticking to clean XHTML and CSS is the best way to go.

Even if the browsers don’t support CSS (which some don’t) they can still render HTML and the site will be usable.

Common Browsers

  • Mobile Safari (iPhone, iPad, iPod Touch)
  • Mobile Chrome / Android Browser (Android)
  • Opera Moble (Smartphone compatible)
  • Blackberry Browser (Blackberry’s with varying levels of support)

These browser behave a lot like full browsers, often only missing a few capabilities such as Flash or Javascript. However this doesn’t mean that you should be aware of the users experience if they are using them. Keep in mind that on mobile devices you are not going to be able to take advantage of OnClick or :hover capabilities, so even if the users is accessing your site on an iPad you will still want to make sure the site is usable.

  • Constrained Browsers
  • Opera Mini
  • Blackberry Browser (depending on the generation of the Blackberry)

These browsers try and simplify the website as much as possible automatically before displaying it to the user. This can be good and bad. It might mean that you have less to worry about when a user accesses your site, however it also means you have less control. Being that it is automated you can be sure that it is not going to present the perfect solution.

Text Browsers

Many mobile browsers are incapable of rendering graphics or complex layouts. Again there are varying levels of capabilities with text based browsers. Some of them have basic CSS support where others strip out all styling and can only render HTML or WAP-HTML.

Planning & Approach

There are many different ways you can go about making your site mobile friendly. Each of them can work perfectly well and which one you should use is entirely dependent on the situation. The best way to approach this is to understand the pros and cons of each technique and then develop a plan as to which avenue best fits your use case.

1.Altering the Design but Keeping the Content The Same

The first and most obvious method is to alter how the design looks to better fit a mobile browser while keeping the content and site structure entirely the same. Typically people will simplify the navigation, remove unnecessary design elements and shrink the overall design to better fit in a smaller window.

This not only will save the users bandwidth (which many pay for by the megabyte), but it will also make accessing the content much easier. This is of course what they are on your site for in the first place, not to see your cool looking design in super small scale.

Example Sites

2.Tweaking Both Design & Content

While altering the design will make your site mobile “friendly” it ignores a very important fact about mobile web users. Typically people accessing your site on a mobile device are doing so for very different reasons than they would if they were at a desktop.

Think of the common situation, a user needs to find some information, is unable to access a computer and doesn’t feel that it is worth waiting. While what type of information they are looking for is going to change depending on the situation it wouldn’t take too much insight to come up with a clear plan of how you can alter both the design and what content the site shows to better fit the users needs.

A common example might be IMDB.com (internet movie database), if someone is looking up the site on their mobile device chances are they really want to look up some important details. The chance that they care about the news desk, what is coming out on DVD etc... is pretty slim.

IMDB.com would benefit from a “search centric” mobile version of their homepage.

3.Completely Different Mobile Site

Sometimes users will be accessing your site from a mobile device so much, or their needs will be so different than a traditional site that it makes sense to develop a completely new version of your site for mobile users. This frees you from all constraints and allows you to create the most optimal mobile experience possible.

Sites such as Twitter and Facebook are both good examples. Both sites have a high frequency of mobile users and the goals and actions of the mobile users are going to be significantly different than computer users.

This approach isn’t limited to large scale social networks either. Even small businesses can benefit from this approach. Consider any local service provider, if someone is looking at their site from a mobile phone chances are they are looking for contact information. To provide them with a mobile specific site that has phone, fax and directions would greatly increase a users experience. You can always give them the option to navigate to the full site afterward.

Now it is important that if you do have a mobile specific version of your site, you want to give users the option to switch back to a standard version of the sit. Especially if you are automatically redirecting mobile browsers to said version.

Mobile Usability

Even “usable” version of mobile browsers such as Safari can be tricky and difficult to use. Let’s face it, there is a lot working against a mobile web user. The screen is small, the keys are small, the software is still in it’s infancy...

Doing everything you can to make your mobile site as usable as possible is what is going to really bring a notable return on your investment. There are some key ways to make your mobile site usable and the most effective ones are:

  1. Simplifying your site
  2. Have a high quality search function
  3. Make the navigation extremely accessible

1. Simplify

The first step to any mobile site should be simplifying. I recommend a simple audit of the entire site, using the following method:

  1. Determine which user tasks are likely to apply to mobile
  2. Remove any content that doesn’t apply to your list of tasks
  3. Remove any graphics or styling that doesn’t assist in the tasks or branding
  4. Turn complex multi-column layouts into one simple column

2. Search

Having a high quality search function is another great way to maximize usability. It is difficult to click, and navigate through multiple pages. Rather than making a user hunt around, you can simply let them search for what they are looking for.

3. Navigation

Many mobile web designers will place the navigation as the very first thing on the top of the page. This way it can’t be missed and is one of the easiest elements to access. Remember unless you have a one page mobile specific site chances are the user is not going to find what they are looking for on the first page.

Methods of Making Mobile Specific Sites

Anyone can build a mobile version of their site, but unless you find some way to get mobile users to it you really haven’t accomplished much. Not unlike everything else in web design there is more than one way to skin a cat.

1. Mobile Specific Styling

If you are simply changing the design and hiding unnecessary content then a mobile style sheet might be the best approach. A mobile style sheet is like any other style sheet, only it is only activated when a browser acknowledges that it is a mobile device.

The sheet can then completely change the layout, hide unnecessary elements (through display:none) and improve the overall experience for the user.

There are two approaches to using mobile specific style sheets, by including a mobile specific stylesheet in your HTML or by importing mobile specific rules through an existing style sheet.

Creating a Handheld Media Stylesheets

The first technique simply requires you add a media=”handheld” attribute to your stylesheet mark-up, for example:

You can then add any amount of simplification or mobile styling into that mobile.css stylesheet, perhaps changing the width, hiding a third column or moving the navigation to the top of the page.


    #pageWidth { width: auto; }
    #columnThree { display: none; }
    #mainNavigation { position: absolute; top: 0; left: 0; }

The @media Include

If you are including a mobile specific styling through an existing stylesheet you would use the following code:


     @media handheld { /* rules for handheld devices */ }

OR


     @import "handheld.css" handheld;

When to Use Which Method

It seems like one could use either technique depending on their personal preference. However you should know that some mobile devices will not load a stylesheet that is defined as media=”handheld” but will still pay attention to the @media handheld { } styling.

These are often fully capable browsers such as Opera Mobile / Mini, Safari, etc... So if you are looking to optimize for these devices through a stylesheet it is important to know that doing a media=”handheld” HTML link will not work.

2. Mobile Device Detection

A more sophisticated method would be to detect the user agent of the browser and decide send mobile users to a specific version of the site that is better suited towards their set of tasks and specific design needs.

The user agent in reference to the web is simply the software that someone is using to browse the site. So you can use a script that identifies mobile user agents and forward them to a new address accordingly.

The benefit here is that you can completely customize the user experience for mobile specific situations. Not only in layout (which can be done through a stylesheet) but also in content and information architecture.

The trick is that you need to ensure that your method of detecting and redirecting different user agents is up to date, if a new browser enters the market it might be ignored by your out dated script all together.

Luckily there are some great plug-ins and existing scripts available to do this for you. If you are interested in taking this approach I recommend you look into one of the following resources:

Mobile Detection Scripts

3. Mobile Specific URLS

For heavy trafficked mobile sites it can make sense to build a site specifically around mobile use. While you may also want to employ the user agent detection method above, it often makes sense to promote the mobile site separately to encourage more mobile users to try accessing the site.

Common examples of this would be Facebook, Twitter and Bank of America. All three sites actively promoted their mobile specific site as a way to encourage users to try using the site through their mobile device. All three sites also employe the detect and forward concept illustrated earlier.

The Bottom Line

There are so many different variables in mobile web design that you are unlikely to find a perfect solution for everyone. Because of this you will end up making the best design choices by really understanding your target audience.

The better you understand what technology they are using, what content they want and when they are trying to access it you can tailor the mobile experience to that situation. If you don’t understand these key points you are just guessing and could even be making the experience worse.

Ultimately the growth of the mobile market is so dramatic that you should be thinking about (if not implementing) a mobile web strategy right now.

 

(Source / Credit: http://stylizedweb.com/2011/01/26/creating-a-mobile-version-of-your-site/ )