THE MOBILE WEB DESIGN PROCESS
“The Times They Are a-Changin” – the title of an album and a song by BoB Dylan is a good description of the current state of affairs in the Web and Mobile world. The web is more complicated than ever: a plethora of devices combined with multiple browsing and usage contexts for websites and web applications. The variety of contexts results in a variety of possible choices and decisions on how to put yourself, i.e., your company, venture or solution, into the picture. Indeed, the question is not so much about “if” but rather about “how” and “when” – as my fellow co-worker stated it in one of his blog posts” “Paths to your mobile application development – web, hybrid or native?.” To quote Bob Dylan again: “then you better start swimmin’ or you’ll sink like a stone.” So what can we do to end up doing the former rather than the latter? I had an impression that Jason Vanlue came up with a recipe in his presentation “Mobile Web Design Process.” With his contribution at hand, we are more likely to swim, not only when designing for mobile, but also when trying to grasp the current state of the web. A key factor in the mobile web design process is to keep focused on the general idea that stands behind your product. At any time during the process, you should be able to clearly answer the following questions (depending on what you are building):
- What is the solution offered by your application?
- What is your web site all about?
- What idea or message do you want to communicate to your customers / users?
Jason Vanlue has shared a few tips on how to follow the key principles of mobile web design. Here are the key points of the design process:
- get to know your users – in order to “do the right thing” and plan efficiently, you need to learn a lot about your users. There are a lot questions you should ask yourself on this stage of design process, i.e,. What are your users needs? What is their background? Are they experienced web users or not? And so on.
- research typical user behaviour – take into consideration their habits and expectations. The best way to do so, is to observe them while they are actually using their favorite applications. You can thus create an interface that is familiar to them and make them feel at home. Users research should always be conducted in the context of the main use cases of your application (i.e., reading / playing / purchasing).
- define the context of use
- environment – on the train / on the couch / in the car,
- continuity – an app may be intended for use on different devices and in different environments. The designer needs to keep experience expectations in a specified context.
- “start designing from the content out, rather than from the canvas in” – Mark Boulton
- use real data – real text and real figures,
- element placement on the touchscreens can be considered on two levels:
- visual level – depends mostly on the content type
- tactile level – describes how user input and gestures affect the content displayed on the screen
- bear in mind that no matter how you approach prototyping – whether you use Photoshop or just pen and paper, you will eventually end up doing it with HTML5 and CSS3.
- focus on visual design – it is all about user experience and a catchy interface. You do have to be consistent and creating an app style guide might help you to achieve this.
- proceed to the final part – build your application prototype and do it by leveraging HTML5 and CSS3 since those are currently the best tools for the job. Why is that? Because while targeting many devices with different screen resolutions you have to:
- keep responsive design principles in mind:
- build your default style first,
- set the breakpoints starting from smallest screens, going through medium sized screens and finally coming to the largest screens; you have already defined the screen types in the context phase. Then identify breakpoints – resolutions where your default style stops looking good, or users would have to scroll horizontally.
- you can define your default style by one of the extremes:
- the most targeted context or
- the most complex context.
- keep responsive design principles in mind:
After some users have played with what you built, ask them for feedback. Based on the feedback received, go through the design loop at least once again. By going through design process more than once, you get the most out of the approach described by Jason Vanlue. If the topic is of interest to you and you feel like delving into more details, Jason prepared and published a series of screencasts covering all the technical details of the design process described in his presentation.
HOW BUSINESS CAN BENEFIT MOST FROM HTML5 AND HYBRID MOBILE APPS
Paul Houghton and Kimmo Puputti from Futurice shared their experiences in building cross platform mobile applications, and they made it quite clear that HTML5 may not just be one of the options, but rather – a general direction for mobile development. Getting onto a variety of platforms is sometimes too expensive for a business. Paul Houghton and Kimmo Puputti noted that it may sometimes be reasonable to try and reduce the costs by setting lower expectations and using cross platform technologies, such as:
- responsive websites – when an optimized website is obviously sufficient,
- web apps – applications that will work on any browser or
- hybrid apps – web apps packaged using Phonegap and distributed as regular native applications.
When working on cross platform solutions, first of all, they recommend to keep the design simple and put a lot of effort into UX design – colors, shapes, the flow – it is all about the emotions conjured thereby. Since each platform adopts a slightly different UX convention, your application may look and feel different from platform to platform. Paul and Kimmo recommend to maintain separate guides for each platform. The guide should cover such issues as:
- integration (device integration),
- user expectations,
- animation and graphic performance.
Paul and Kimmo provide us with a bunch of useful tips for organizing the development process:
- set clear goals – know what you want (you will optimize each platform for the goals adopted),
- do not underestimate the customer’s role in the success of the project,
- pick one mobile platform as the leading one,
- set a reasonable schedule – remember HTML5 is still a new land,
- keep core competencies in-house (you can read more about the point in the Selleo Outsourcing Guide),
- have a designer who specializes specifically in mobile,
- talk to the team – communicate the business goals and promptly remove obstacles,
- perform tests on mobile devices instead of testing on simulators,
- eliminate unknown internal or external dependencies – they may easily kill your project, so identify and tackle them as soon as possible.
Judging from our own Selleo experience, we are ready to confirm that cross platform development can bring significant savings for the business. One of our clients, for example, needs to maintain separate code bases in order to support different platforms – a web interface, a client for MS Windows, written in .NET and application for Windows CE. Selleo built a simple but powerful web application that works on any mobile or desktop platform, which makes the maintenance and new feature development much easier and thus cheaper as well. A full case study can be found in our portfolio. It does not obviously mean that web technologies should always be adopted for implementation; they are sometimes unable to meet the requirements of specific mobile solutions to be developed.
I was very subjective as regards the selection of topics for the article. Many technology conferences often focus exclusively on technology. I appreciated the fact that Rails Way Conf and Webinale Berlin managed to broaden the typical scope and include such aspects as business perspective or soft skills. I tried to focus on these aspects in my account.