For interactive designers and developers, the mobile revolution is here. Mobile browsers have been around since the '90s, but Apple's launch of the iPhone in 2007 enlightened us to the true potential of handheld mobile devices and became the catalyst for today's mobile explosion. With continuous introductions of more powerful and usable touchscreen phones and tablets stimulating the rapid growth in mobile browsing, companies can no longer afford to ignore the mobile experience associated with their brand.
Inevitably, focus is shifting away from developing native apps for individual devices and platforms, to developing mobile sites and web applications that provide excellent user experiences across all devices and mobile browsers.
This shift is happening for many of the same reasons our desktop software applications are moving to the cloud. An application that works well for everyone, everywhere, and on every platform is a beautiful thing for everyone involved. When a cloud-based application is updated, the change is instantaneous for everyone that uses that application. The same applies to mobile websites. There's no need for a lengthy app approval process, no need to prompt users to download updates and no need to develop for every device and mobile operating system.
As a mobile strategist, I am consulted and regularly advise on all aspects of mobile marketing, with a special emphasis on mobile applications and websites. I have provided mobile guidance to Toyota, Honda, American Airlines, Johnson and Johnson, among many other clients over the last seven years as a full time mobile marketing professional. In this article, I offer my views on some of the most important factors to consider while designing mobile websites.
Mobile users tend to look for mobile sites that address a need (entertainment, productivity, and communication are the most popular). Therefore, it is imperative that design serves to facilitate the underlying functional requirements of the site. Confusing user interface or poor performance will irrevocably damage user trust, rendering even the most beautiful designs moot.
Mobile users have a bewildering number of choices for interactive engagement. Any new mobile site has to compete with 500,000+ iOS apps, 260,000 Android apps, and more than 4 million mobile-optimized websites. Performance is the easiest and best way to stand out. Users have no tolerance for slow performance, but a strong appreciation for mobile sites that get the job done.
Mobile sites must be driven from a simple idea or concept and then execute flawlessly against that concept. So, pick an idea that has real value to potential users and then deliver that value in an easy to understand site. Mobile sites that quickly communicate simple and compelling value to consumers have a much higher success rate than those sites that do not.
Mobile apps are great because they do things that mobile sites can't do. But it doesn't make sense to use them for what a site CAN do. Mobile apps lock development and design into specific ecosystems, require significant redundant development to cross platforms, add a vast amount of management complexity, and involve powerful outside actors in the process (carriers, handset manufacturers, operating system developers, store administration, and others). Mobile sites avoid all of these things and allow for a much faster path to execution. Have a clear understanding of what mobile sites can and can't do and plan accordingly.
Despite the technical challenges of mobile execution, sites still begin and end with designers. Many mobile sites (and apps) clearly have an engineering first approach and they have a very high failure rate. Great technology and development are certainly the foundations of success in mobile but they are not the determinants of success. Design is. Designers should be involved with every stage of development.
While designers need to be involved early, so do developers. Mobile devices are very underpowered compared to traditional computers, so the performance impact of design elements is even more exacerbated on mobile devices. It is important to balance design directions with the realities of what can be executed well on mobile devices.
The user interface should reflect the brand's identity. Most mobile web traffic is destination driven and few mobile sites are discovered through browsing. Brand awareness in the design process increases user recognition, leverages existing user loyalty, and results in enhanced user satisfaction. This would include focusing on visual language, consistent text, brand fonts, and incorporating core functions that are also as closely associated with a brand as possible.
Mobile is inherently more selective than the general public web and the mobile ecosystem is far more fractured. Further, mobile users will visit the mobile website away from their keyboards and out in the real world. Much of that interaction will be driven by the function or content of the mobile site in question. For example, a shopping tool is much more likely to be used in an actual retail environment than a wine review site would be, which is why it's vital that mobile sites be specifically developed to address distinct user profiles and use cases.
The sad truth is that no matter how well a site is implemented, the mobile ecosystem remains unreliable. Carriers, locations, and devices can all have a pronounced effect on mobile web performance. Therefore, it is critical to identify those areas of potential performance degradation (such as data fetching and calculations) and then develop design strategies to minimize the user performance impact of a slowdown. For example, operations that require outside data retrieval, like populating a location specific form, can be broken into step-by-step mini flows as opposed to single step execution. That way each flow is easy to accomplish and the interactions provide time for the website to perform its performance task without appearing to slow down. Load screens are another example. By providing load imagery, such as progress bars and the like, the user is given the impression of performance or progress that can operate independently of the actual performance of the site.
Mobile sites have to perform well, look great, and deliver significant user value on underpowered computers that use tiny screens with limited bandwidth (you know, smartphones). Pulling this off isn't easy and it requires that design and development both inform and guide each other. Design that is unappealing will turn off the most technically efficient site, while great design is largely irrelevant when implemented on a rickety development foundation. The success or failure of mobile websites is most often attributed to how well these two disciplines are balanced.
So there you have it. Use these ten best practices to guide your mobile design efforts and ensure a solid web experience that avoids the common problems that plague many of today's mobile websites.
If you're designing for mobile and haven't checked out Adobe Dreamweaver CS 5.5 yet, take some time to download the trial and start familiarizing yourself with new mobile development features like mobile phone templates, JQuery Mobile Integration and Multiscreen Previews, which give you an at-a-glance look at how your content will display across computers, devices, and tablets. You will also find new support for HTML5 and CSS3, which should now be solidly on every web designer's radar.
Andrew Henderson has been a consultant, strategist, and technologist for the last 12 years. He was the first mobile title holder in the IPG family of agencies and has been a full time mobile professional for the last six years, most recently with JUXT Interactive. He has run major mobile projects with a wide range of fortune and mid market accounts.