The 5 Approaches to Mobile Design
Oct 06, 2016
If you’ve built or are in the process of planning or building your current site, you’ve no doubt heard the term “mobile-friendly”. If you’re like most, that term sounds good in your plan but provides no specific definition for designers and developers. To bring more context to the term, we’ve created this blog which includes 5 design approaches that could be considered mobile-friendly.
The “Original” Mobile-Friendly Site
The original mobile friendly site is one that is not specifically designed for mobile but is usable with the mobile browser’s scaling features and the use of pinch and zoom functions. Although not ideal, the site would still be navigable and forms would be usable.
This approach should be leveraged only when you have a non-responsive legacy site that is currently still meeting your business needs and your analytics show very little need for a mobile presence.
An adaptive site design will uphold the branding, color and font styles of its companion desktop website but is a different website on a different URL domain. At first glance, the site may look similar to the desktop version but, in fact, it was specifically designed for mobile devices. What this means is that there are two domains and (at least) two sets of pages, templates and images. This also means there is twice the management for content and SEO managers.
This approach should be leveraged when your content requires a more intricate and specific design for mobile- and, possibly, unique functionality.
Unique mobile site
A unique mobile site is also a site that is specifically designed for mobile devices that is uniquely designed and developed. It may or may not have a desktop counterpart. The site may be a streamlined version of a desktop version with different content, a different navigation set and/or a different user path to conversion. And, while this method may represent an entire site, it may also be defined as a single landing page or a microsite.
This approach should be leveraged when your mobile site requires a wholly unique experience, brand or content visualization.
Responsive web design is a flexible and fluid approach to mobile web design. The chief goal of a responsive design strategy is to build a site that will work on any device in any orientation. While content and navigation sets can vary somewhat from desktop to mobile, typically speaking, all images, pages, and templates are the same for every device and will reshape or resize accordingly. For business owners, content editors, and SEO managers, responsive design is an optimal approach for long-term simplification and brings context to your mobile approach within the larger context of your digital products.
This approach, both the most popular and cost effective (due to its lack of unique design and development needs), should be leveraged when your content can easily translate back and forth without sacrificing functional and experience goals and end user needs.
A mobile application (“app”) is a type of software designed to run on a mobile phone or tablet device. Mobile applications frequently serve to provide users with similar services to those accessed on PCs.
If your users have very specific and discreet needs on a regular basis and address these on their mobile deviecs, then an app may be the right choice for you. If you are trying to reach a broad audience across multiple platforms, then you may want to stick with one of the other mobile web approaches above. Or, perhaps you need both. If you do decide you need an app, remember that you will use native development code and kits from Apple, Android and the like to build your mobile app, and users will download your app from varying app stores.
This approach should be leveraged when you have unique features and functionality that are highly and frequently reusable by end users. As well, this approach will provide a cleaner, smoother, quicker interaction with is ideal for frequently used software.
Consult with an Expert
If your still not sure where to begin – or even if you are—