How often does this happen to you ? You are on the go, you need to check out a web site of a public administration or a company because you need information only available from them directly. You use your mobile phone to browse the site as this is what you have with you, only to discover that the site in question is a mobile version and has only a partial copy of the information available on the desktop site. In some cases you could switch back to the desktop version if it’s possible, but when it’s not you end up cursing whoever’s smart idea it was to do a separate mobile version.
I don’t know about you, but this has happened to me a lot recently, sometimes even on the most surprising sites. I had once booked this fancy five star hotel for my wedding anniversary, and of course I expected the web site to be Flash only (as most hotel web sites still are), but I was pleasantly surprised to see that they had gone to the trouble of providing a mobile version. Unfortunately the mobile version contained only parts of the information I needed, and I was pretty sure that the Flash-only desktop version would include it. In this case of course I couldn’t use Flash on my mobile device so I ended up frustrated and also a little disappointed.
Even though I’m very tempted, I won’t make a big argument on why using Flash to build a web site is now wrong, because I think that by now most people know that it should be avoided despite the high quality renderings that you can achieve with it. HTML5 and it’s related tooling has progressed enough so that it is possible to make dynamically animated sites using HTML5 that have nothing to envy a Flash version.
So you might be wondering what is the best way to design mobile content delivery ? Well in short: don’t put less content on your mobile site, simply present it differently. What needs to be redesigned is the overall mobile user experience, meaning mostly how the navigation, the presentation, user input and even how the size of data transmitted will differ from the desktop version. We will now quickly look deeper in the changes that must be made on these different elements.
The first thing you will need to redesign is how a user will navigate in the site. In some cases the navigation layout can simply be slightly modified to adjust it to a mobile device, but you should remember to think about all the different types of navigation elements you may have on your pages. Usually the left side menu will have to be redesigned to be either at the top or at the bottom of the mobile page, or even maybe hidden by default and visible only when the user taps a button to display it (some layout frameworks such as Twitter Bootstrap will even do this out of the box for you!).
Another idea might be to add content abstracts that are only used in the mobile site navigation in order to reduce the amount of text being loaded, but then still make the full content accessible in a separate page request.
Presentation & site functionality
On a desktop site you have plenty of screen real estate, and usually the user will never have to scroll horizontally because the content’s width will fit in the browser window. The same must be achieved for the mobile device, so you must redesign the presentation to make sure it will eliminate the need to scroll in both directions as much as possible. Today using HTML5 and CSS 3 it is relatively easy (using CSS media queries for example), to modify the presentation of an HTML page so that it looks and feels nice on different devices or screen sizes. Fortunately mobile devices are quite good at integrating the latest HTML technologies so this makes it possible to use them even if they have only recently been standardized.
Site functionality should stay available on the mobile version, and this is especially important for ecommerce sites. There is nothing more frustrating for a potential buyer to have filtering or search functionalities that are only available on the desktop site. In some cases it is even worse, filtering may be available but the amount of categories (or subcategories) might have been reduced because of screen real estate or some other obscure reason. This really shouldn't happen because it will prevent users from accessing the content or products they are interested in, and where or on what device they are shouldn't matter. Every roadblock they will encounter will cost you their trust and this could have devastating effects. Unfortunately this is still a widespread problem but it must be remedied quickly since a lot of users are now researching and even buying directly from their smartphones or tablets.
One element that must not be overlooked when building a mobile site is to remember user input must be completely revised to make the mobile experience acceptable. The first rule is the most important and also often forgotten: mobile users don't use a mouse. They cannot right-click, they cannot double-click, and they cannot hover over screen elements. A lot of website menus out there are still based on hovering, meaning that they highlight or open up when the mouse cursor goes over them, but this is not possible using touch input. So the mobile version must not use such input technologies and instead focus on making the touch experience as seamless as possible. Another important point is that touch targets must be big enough to fit a finger, which also means that they must be separated in such a way to make it easy to click on one and not another.
Another rule to also remember for mobile user input is that all input must be minimized to a strict minimum, using the modern HTML technologies that mobile devices support. For example it is possible to insert hints in HTML text input to indicate that the expected content must be an email address. This will have the effect of bypassing automated input helpers such as the auto capitalization of the first letter, or even modify the keyboard to switch to an email input format. Drop-down lists should also be preferred to text input as much as possible, or at least autocompletion should make it easier for mobile users to quickly get the desired results without having to tap much.
Although these recommendations might seem logical, they are often not fully implemented, and this is a shame because they are not complex to integrate and can go a long way to make the mobile user experience a pleasant one.
Transmitted data optimization
Although with the latest generation of mobile devices network speeds can sometimes be higher than what most people have as a home broadband connection, it is still a good idea to optimize the data being sent through the network to improve the user experience. One reason for this might be that the user might be in a moving train and his network speed might vary greatly, so making sure that the data is optimized to be minimal is always a good practice.
However this must not mean that less content should be globally available on the site, but simply that it should be delivered and optimized for the mobile experience. This means that videos and images could be available in multiple sizes and compression ratios, that long content could be split into multiple pages, or that maybe lazy-loading could be intelligently integrated to deliver results quickly, while continuing to load the page as the user browses it.
Can CMS/WCM software help ?
As we went through all the different ways to keep the same content available across channels while still optimizing the mobile web experience, it might be interesting to see if the current crop of CMS/WCM systems out there can actually help with this problem. A software solution that makes it easy to repurpose content for multiple devices (or channels) and doesn't require re-creating manually a copy of a website specifically aimed at a mobile device will definitely help. In such a system things could be as simple as deactivating a few page elements and using CSS media queries to make sure that everything renders cleanly on a smartphone or a tablet. Also some solutions might even integrate media capabilities making it possible to automatically render different views of the same content elements adapted to the capabilities of whatever device is currently requesting the content. Choosing a software product that natively supports mobile renderings can go a long way in delivering a good mobile user experience quickly and efficiently.
So if there is one message to get out of this blog entry: remember to always put all your content on your mobile site versions, your users will thank you for that. And who knows, maybe the desktop will die in a few years, so your mobile strategy should not be an afterthought :)
#mediaqueries #css3 #mobile #ContentManagement #design #CMS #WCM #bootstrap