It's no secret that mobile web browsing is explosively popular – and that it's forcing us, as designers and developers, to re-think how users interact with our web sites. Mobile web traffic has increased 69% in North America over the past two years, and now accounts for more than 10% of web surfing worldwide. What's more, most mobile users expect to have just as zippy and convenient an experience on the mobile web that they do on their desktops, which poses a big challenge for designers of modern, mobile-ready sites.
The push for mobile is even bigger for clients in the retail sector: half of all local searches take place on a mobile device. That means that if a client or customer is trying to find your client's store, product or office location and they're not greeted with an easy-to-use mobile experience, they may head elsewhere or, at the very least, have a frustrating experience with your brand. And mobile's not just for those who are on the go: 86% of mobile internet users surf on their mobile devices while watching TV, which means mobile and tablets are quickly replacing desktops and laptops for leisurely web browsing.
We won't even get into the predictions for future growth – needless to say, mobile and tablet browsing are here to stay and growing fast. That's why I've compiled four options for addressing the mobile needs of every project – from a simple mobile “splash page” to an in-depth native mobile application. By recommending the right mobile solution for each of your clients, you can help them future-proof their sites and provide a valuable service to visitors who engage with them through a mobile or tablet device.
Mobile Splash Page or Mini-site
For many clients, a mobile mini-site is an excellent, resource-effective solution to bring their sites into the mobile world. Easily added to an existing site or as part of a larger redesign, mobile mini-sites allow us to get the key facts about a client in front of mobile users without burdening them with long load time or forcing them to squint through tiny text when viewing the desktop version of the site on their phone.
Most mobile mini-sites include a home page and few interior pages, presenting just enough information to give visitors a glimpse at the organization and a way to call, e-mail or visit the client's office or location in person. They can be custom-designed or use one of many simple, proven templates (with custom colors schemes, logos and photos) to streamline the design process. And for clients who just need the bare minimum mobile presence, a mobile splash page gets the job done – that's just a mobile mini-site made up of only one page. If visitors decide to dig deeper, they'll have access to a link that allows them to view the full site and bypass the mobile mini-site.
Separate Mobile Design
For clients who want more of their content to be optimized for mobile devices, we can deliver a separate mobile design, which will include most or all of the content of the original site. This is a bigger project than a mini-site from both a design and development standpoint, but, like the mini-site, can be easily added on to an existing project or baked in to an overall redesign. In this approach, we'll design and develop an entirely new set of page templates to house the site's existing content, and dynamically serve the mobile-optimized templates when we detect that a user is on the mobile device.
The amazing convenience of this method, when coupled with a high-quality content management system like ExpressionEngine or Wordpress, is that it allows the client to manage all their content in one place and have those updates immediately reflected on both the desktop and mobile versions of the site. In essence, we're serving up the same content with a different presentation, allowing us to minimize the resources required for content management while delivering a unique experience tailored specifically to mobile users.
This is also a great option for sites that have a large catalog of content, such as publications or “knowledge center” sites, because it allows for users to share links to individual articles and have the presentation of that article customized depending on whether they click that link on a mobile or desktop device – increasing readership and ensuring a positive experience with every exposure to the brand.
Responsive Mobile Design
The next step up the ladder is building a “responsive” mobile site, which means that rather than building a separate set of templates for the desktop and mobile versions, you're building one set of templates that dynamically re-organizes itself based on the size of the visitor's browser. When you're viewing a responsively designed site, you can even see this in action by resizing your browser window – the page's elements will move around as your window gets smaller, and you'll eventually have a “mobile-sized” page in a very small browser window.
This is the favored approach among the higher-end design and development community because it incorporates relatively new advancements in web coding. And for what it's worth, it's also trendy and cool.
The process for building a responsive design is considerably more involved than building a desktop site (or building a separate desktop and mobile site). Rather than conceiving of two related but separate designs as in a separate mobile template project, the designer and developer must consider how each element on the page will be re-positioned and re-designed as the screen gets smaller, and there are generally between three and six variations designed for each page of the site. This means not only more design work, but also more back-and-forth between the designer and developer during the design process. This often leads to a wonderful final product, but those extra design and development considerations also require more time and resources to be put into the project. It also makes it difficult or impossible to “add” responsive design to a site after the fact – it really needs to be part of the original design rather than something that gets added post-launch.
Like many parts of the design and development work we do, the choice between separate mobile templates and responsive design is all about helping the client find the right balance – and that's a conversation we'll have early on when we embark on our next mobile project together.
The final category of mobile development is the big kahuna: native mobile apps. As opposed to a mobile-optimized web site, apps are separate software programs that are downloaded to your phone or tablet and appear on your home screen. They're really a different category of programming from regular web sites, but because many organizations can benefit from integrating their products or services into a native app, the idea of building “an app for that” often comes up during larger branding or design projects.
Apps can be incredibly valuable as a complement to a web site that provides a vast catalog of articles or resources – for example, a publication like The Washington Post or a resource like the Internet Movie Database. It gives users who access the service frequently the opportunity to spend a few minutes downloading the app in exchange for a smoother user experience compared to a mobile-optimized site. (Even compared to the best mobile-optimized sites, a well-designed app is generally faster and easier to use.) Apps are also integral to many businesses that run web-based applications – think Facebook, Twitter, Gmail, or the countless other web-based applications we use every day. They can be cumbersome via the mobile browser, but are much smoother and more feature-rich when accessed via an app.
There's also an opportunity to build apps that complement, rather than directly duplicate, your client's products or services. For example, a personal finance writer might build a “Negotiate It” app that helps his readers reduce their bank fees and get a deal on their cable subscription. These types of apps may have no direct tie to the client's web site itself, but they expand the brand by offering a useful tool or a fun experience within the mobile environment. With this category of apps, the designer or branding team has the freedom to let their imaginations run wild.
While apps have been an incredibly valuable innovation, building one is also generally a big project, which means it's not right for every client or at every stage of an organization's growth. Apps require a big investment of design, development and marketing resources to really be successful, and also need to be maintained across multiple platforms (Apple's iOS and Google's Android, at a minimum) and navigate the sometimes cumbersome process of getting added to or featured in the app stores.
In short, an app can be an amazing boost for a client, but it's not a project to dive into without a clear vision and the proper expectations in terms of the time and resources you'll need to make the app a success.
It's never to soon to start planning mobile solutions for your next design or branding project. Get ahead of the curve by presenting a mobile site with your next proposal, or fill an existing need by delivering high-quality mobile services for a current project. Whether you have a quick question or are embarking on a big new project, please don't hesitate to get in touch – I'm always ready to lend a hand!