ConFoo: Think Mobile First, Build Later
This is what Karl Dubost proposed during his presentation at ConFoo on March 11th. With an increasingly large share of the population browsing the web from a mobile device (13% in Quebec in 2010 with a strong increase compared to 2009 [1]), the design of a mobile version of a website should be strongly considered when designing or redesigning it.
Yet the reality is that browsing the web on mobile today can be a far from pleasant experience. How can this be improved? Let’s see which are the avenues to favor as well as those to avoid.
THINK ABOUT YOUR USERS HOLISTICALLY
We must first get rid of the idea that mobile equals portable gadget. The mobile web is a means of accessing the web that is not necessarily linked to a specific physical object. Multimedia installations or televisions can potentially be assimilated to mobile devices. It is therefore essential to analyze your market so as not to put unnecessary barriers to certain users. The mobile web is extremely varied in the world, it would be a mistake to believe that it resembles the North American reality everywhere else. As Karl Dubost pointed out, mobile is not just about the device, but more about the experience, the context.
WHAT DO WE DO THEN?
Nothing The first and easiest option is to do nothing at all. Obviously, this “solution” is not desirable either for the users or for the designers. The user experience is mediocre at best (pinch-to-zoom, excessive scrolling, etc.) and mobile users will simply abandon the site.
Liquid and semi-liquid layout This is the rearrangement of blocks of information according to the size of the window. Already better, but there is room for improvement.
Different domain names One strategy used by many is to keep the same database by simplifying the content and offering it under a different domain name. Examples are nytimes.com which redirects to mobile.nytimes.com and guardian.co.uk which redirects to m.guardian.co.uk .
BUT HOW DO YOU PROPERLY RECOGNIZE A MOBILE USER?
User-agent sniffing This is a technique for presenting different content depending on the client accessing the website, the browser in our case. The problem is the myriad of possibilities and the technical challenge that this presents. Even with a regularly updated list, it is more than likely that a detected client will not be recognized. The world of mobile is in turmoil and this solution proves to be unviable in the long term. If the user is not recognised, give him the best user experience and not the worst suggested Karl Dubost.
Don't forget to always put a link between your two versions of the website, a link pointing to the current page of course!
PURE AND SIMPLE HTML
Why not use the good old tools of HTML and CSS? In its new version, CSS offers media queries that allow the application of different style rules according to specific properties such as the current width or height. This allows the automatic reorganization of the presentation on different devices. It is a solution that makes it possible to approach an ideal situation, even if it is not perfect. Test it yourself at http://mediaqueri.es/ . Very convincing!
THINKING ABOUT MOBILE STRATEGIES
The golden rule is to think about the user. Maybe he will be in a situation where he will have to handle his mobile with one hand in a dimly lit room..? Whatever the situation, the design should be minimal and focus on the content, the reason why the user came to your site.
Changing the paradigm does not happen overnight, it is a slow and sometimes painful process. Karl Dubost was pointing out that the experience on some sites ‒ even on a desktop computer ‒ was better with the mobile design and I have to agree with him. His suggestion is that the development process should start with a minimal, high usability release and then move to a more fleshed out design as needed. What do you think? Will you adhere to this principle?
For more tools and techniques for developing your mobile sites, check out the presentation slides here .
.jpg)
