eManagerSite’s Best Practices For Designing Mobile Websites

March 12th, 2014 by TCC Leave a reply »

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.

Great mobile sites start with function over form

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.

Performance is the new sexy

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.

Simple is as simple does

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.

Don’t build an app when a site will do

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.

Engage the design team early and often

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.

Balance design elements to drive performance

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.

Define brands in the user interface The user interface should reflect the brand’s identity. Most mobile web traffic is destination drivenand 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.

Identify and address core users

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.

Optimize design for perceived performance

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.

Balance design priorities with performance requirements

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.

Want to maximize your website with Mobile Readiness?

Contact us today at
TCC Web Interactive

A Division of the
Computer Company, Inc


(860) 635-0500

(800) 418 2358


Comments are closed.