Home > Web > Mobile web guidelines

Mobile web guidelines


Mobile web principles

Some time ago I wrote an article about mobile web and what choices you have to create a mobile web presence for your company. Few days ago I gave a presentation to the students in Polytechnics about the same subject. The presentation was focused more on healthy mobile web development principles, which will also be the subject of the present article.
But first of all, why you must care about mobile web?3.7 billion unique mobile phone users, 1.2 billion mobile Internet users vs 1.4 billion classic (desktop, laptop, netbook) users in 2010, and most probably surpassing in 2011, 600 million phones sold yearly worldwide. This industry all together surpasses worldwide in revenues any other IT or entertainment industry.
Not convinced yet? Then maybe you should skip the rest of the article.
OK, so you want to dip your fingers in mobile web. Good. Let’s start first understand it.

Definitions

What is a mobile phone? If we use Wikipedia as reference a mobile phone is a device that enables you to make mobile telephone calls (… move around freely rather than stay fixed in one location …) across a wide geographic area.. Nothing more. No web, no applications. Just voice calls.

Then there are featured phones, mobile phones augmented by the manufacturer with different applications like a web browser, games and even productivity suites.

And in the late years, the smartphone. But what is a smartphone? To tell you frankly it is pretty hard to define it. More computing power or more memory? About CPU frequency or RAM size would you consider a phone to be “smart”? Complex operating system? How would you define an OS to be complex? But there is a more widely accepted definition and I will adhere to it as being the most appropriate one: a smartphone is a mobile phone on which you can (download and) install applications. And if you think a little bit, it makes sense. Nobody is born smart. But you learn and you become smart. Same way a phone, offers a new feature, by installing an application. It “learns” a new software, it becomes “smart”.
And now you have a website. Do you need to build another one for mobile? Yes and no.

Differences

Why yes? Simply because mobiles have different characteristics. We have different hardware capabilities: smaller screen sizes, resolutions, various input devices (touchscreen, trackball, smaller or no keyboard), lower capacity battery. If some of these are somehow downsides, we also have advantages: camera, GPS, newer upcoming technologies like NFC(Near Field Communication).

We also have software differences: different OSes, browsers and in many more flavors than on desktop, different tools to leverage hardware capabilities: QR codes reader, mapping applications.

When it comes to connectivity, a mobile has a smaller bandwidth and most probably higher costs per bit. But on the other hand, the user is 24/7 online (yes, it is the only device that connects us even in our sleep). Moreover, on the mobile you have a wide range of communication channels: SMS, email, web, social networks, voice, LBS, SEM. You can even expect that the classic channels (print ads, radio, TV) are closer to the user.

We don’t have to miss one important aspect: the mobile is the only device that has an integrated payment method. Either it is by SMS, integrated credit card (mostly on Asia) or NFC.

These are the technical terms, but the mobile is the most personal device and we need to take a look at its social impact. A phone is not simply a device, in many cases is the door to the user social network or it is a mobile entertainment center. In some cases, it is a fashion statement. The most expensive phone is an 8 million USD iPhone 4 and there is a 100 USD iPhone application that does nothing. Compare this with the most expensive laptop.

Another important aspect to consider when developing a mobile website or application is the user behavior. You will watch to a presentation on mobile, but most probably you will create it on desktop. You will use a software application on mobile, but you will develop it on desktop. As a rule of thumb you can compare a 30 minutes task on desktop with a 30 seconds task on mobile. That’s why you will hear about “task oriented websites”. The concept means that you will include in your site only relevant tasks to its interest and environment(physical or virtual). It would not make any sense to create a mobile website to download drivers. A mobile website for a versioning control system will offer little value, but if you reduce it to a tracking/statistics section can make its way to the user pocket.

Something that is easily ignored is the technological awareness. A phone is upgraded every 18 months, opposed to a laptop/desktop that is upgraded every 42 months. As a consequence, the technological advancement curve is much more steep and you have to keep in mind that not all the users are keeping the pace. So it could be that they are not fully aware of their phone potential.

Developing mobile web

Taking into account all these differences should I care about mobile? Definitely. Should I develop another site? No.
Following just a few principles, you will have a clean website, that can easily adapt for desktop and mobile. Without the hassle of maintaining several websites.

Content-layout separation
This principle has made its way into many software development design patterns and architectures: MVC, three tier architecture, etc. Extended to web development, this will allow faster development, cost effective maintenance, easy re-branding, improved collaboration between web developers, designers and content editors.
One web
Content layout separation allows us to have only one website and to optimize the presentation of the same content for desktop, netbooks, featured phones, smartphones, printing etc. W3C is militating for this as one of the primary objectives in web development.
Semantic CSS
Considering that you used the content layout separation, usually the link between is done with CSS classes. Semantic CSS is about how to name these classes. You should choose names relevant for the content and not the layout. So a name like bigfont will most probably become irrelevant when you will decide to change the layout or optimize for different devices; but sectionTitle will not lose its meaning over time. I will come back with a detailed article on this matter.
Progressive enhancements
This term sounds very complicated and futuristic, but it is not rocket science. It is not a framework or a new technology to learn and use. It is only a change of mindset. Mainly this applies to JavaScript and you have to keep in mind that some features that you’re going to use in your scripts could not be implemented on some devices/browsers.

To better understand the concept let’s take an example. Let’s say that you’re going to use geolocation on your website.

		navigator.geolocation.getCurrentPosition(locationHandler);
	

The above could be one option. But what happens if the user browser does not support geolocation. Your website will break and offer a poor user experience.
By simply adding an if you’re out of the trouble.

		if (navigator.geolocation)
			navigator.geolocation.getCurrentPosition(locationHandler);
	

You can even have some fail-over mechanism implemented on else branch. As I said nothing complicated, only a mindset change. Develop for the highest end browsers/devices, but think of all.

The same can be applied to CSS. If you want to implement CSS gradients you will have to do something like

		background-color: #00ff00;
		background-image: url(bg.jpg);
		background-image: url(bg.jpg), -moz-linear-gradient(90deg, #00ff00, #0000ff);
		background-image: url(bg.jpg), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00ff00), to(#0000ff));
	

This way you will be able to have a green to blue CSS gradient on both Mozilla and WebKit and just a plain green background on older browsers. Also if you have an image that one will be there as well. The browsers without CSS gradient support will just ignore the last two lines.

Liquid layout
With so many screen sizes and resolution, two possible orientations, it is nearly impossible to optimize your website for a given size. That’s why you will have to use liquid layout and your website will honor every resolution and expand through the entire viewing area. This way you will also take advantage of the full display, which is also critical on mobile.
Detection and adaptation
So far you developed your website, thinking to all the mobile users. But a user who paid over $500 on his phone wants to take advantage of it. So you will have to detect high end devices and offer extended features for them. This can be done on the client side through progressive enhancements or server side. About the latter subject I wrote another article in the past. And remember that the 80/20 rule applies here as well. 20% of the users generates 80% of the traffic. You don’t want to lose the big amount of traffic, but you also don’t want to lose a big amount of users.
Performance
This is a very sensitive topic on both desktop and mobile. On mobiles you can refer to page performance in terms of response time, cost, number of dependent resource.
Mobile guidelines
There are also very specific mobile guidelines, like no flash, order of preferred format images is JPEG, GIF, PNG, but I will not enter into details. You can find them at W3C Mobile Best Practices. You can even use automatic validators for your code like W3C mobileOK or mobiReady

This article will be a starting point for the mobile web developer and it will help you setting the right approach, when it comes to this new highly expanding field, mobile web.

Categories: Web
  1. September 7, 2011 at 12:33 pm

    Really interesting post mate, I think over time mobile best practices are going to have to adapt with the current trend of more and more powerful mobiles.

    Thanks for your post Adrian, good read.

  1. September 18, 2012 at 7:06 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: