Mobility is not a trend; it is the here and now. In 2015 if you are just now considering a mobile website or a mobile application, you are already behind. Denial and sticking your head in the sand will only bury you like the anachronistic businesses who failed to adapt and change with technology like Blockbuster, Kodak, or Sears. There is hope for you! You are reading this blog which means you are willing to educate yourself. The first step is understanding the opportunity! Yes, I said opportunity, not problem.
Face the facts! Currently, there are approximately 15 billion connected devices of which 9 billion personal computers. Gartner predicts that there will be over 25 billion connected devices by 2020. This myriad of connected devices has given a rise to a new buzz phrase called The Internet of Things (IoT). What’s the opportunity? Access to billions of people! You just have to earn their attention and engage them. Access to information and productivity anytime, anywhere, with any device is what today's market demands.
There are five approaches to engaging customers with mobile experience you must understand when trying to achieve success in today's mobile market:
- Responsive Design
- Adaptive Design
- Mobile Site
- Native App
- Hybrid/Combination Approach
So which mobile approaches is best for your business? Like most things, the answer is “It depends.” At the core understanding, your customer and your market are a given. You absolutely must have a website. These things are simply the table stakes. When a designing a website you must design for mobile first, otherwise you are just wasting your money.
A comScore report in 2014 stated that smartphone and tablets account for 60% of all online traffic and that 51% of the online traffic is driven by mobile applications. The numbers vary, but the average attention span in 2015 with 8.25 seconds and 17% of typical web page views last less than 4 seconds. So you have 4-8 seconds to capture attention and achieve engagement with a customer. Why do you want to achieve engagement? You want the person using the site to buy a product, call you, read your message, share your content, use your tool, or take some action. Because mobile rendering is slower your site must be highly optimized for mobile. This is why mobile first is required. Let’s examine each mobile approach.
A Deeper Look at Your Options for Mobile
Responsive Design
Responsive Web Design was a term first coined in 2010 by Ethan Marcotte in a web article on A List Apart. He defined that a responsive web design will fluidly change and respond to fit any screen or device size. A typical website designed to be responsive utilizes standard web technologies such as HTML 5, Cascading Style Sheets (CSS), Media Queries, and a Javascript framework to “respond” and size the layout, images, content, and navigation to the screen size of the device that it is being viewed. The website designer has to divide the design into “set points” or “breakpoints” that define the general size and layout of typical devices: Desktop, Tablet, and Smartphone. Because these devices can often rotate from portrait to landscape, the designer must account for these changes in shape and size as well. Notice that I say “general size.” The set points are a one size fits all for each size, but the key point is that responsive frameworks use a grid layout that fluidly responds and morphs to meet the device size. These fluid responses require that the designer code and implement strategies for different types of content to respond. It is important to note that responsive design is viewed on the “client side.” The term "client side" means that the entire page is delivered to the browser (the client), and then the JavaScript and CSS running in the browser changes how the page appears, conforming to the dimensions of the browser window.
Some companies may want their website to respond to large screens or possibly screens that might be in a car. These would require additional set points, requiring the designer to account for the layout and how the site will morph when viewed on a particular device. It is important to note that this increases the complexity of the design and layout. In the past, you would have accounted for one size a desktop. Now you have to have three or more general mobile layouts. While a JavaScript framework does the work of making the site respond, the designer has the daunting task of figuring out how the layout should respond. They also have to keep user experience optimized for the device size, while ensuring your message is clear and concise, and most importantly facilitates engagement.
Cost & Disadvantages
While your capital costs for creating the site increase, you achieve a better experience for your customers that can facilitate more reach and engagement. Your operations and maintenance costs are less than other approaches because you only have to maintain one set of content. Additionally, your site is more future-proof or future-ready as new devices within the same general screen sizes as your set points are released. However, you are not protected from browser or standards changes. Overall Responsive Design is the best bang for the buck.
Advantages
The advantage of responsive design is that you have one website and one set of content to maintain that provides a consistent user experience on all types of devices. Having one website means you have a single domain that exposes single canonical URL to the search engines. Bing, Google, Yahoo, and other search engines see this as the preferred way of providing a mobile site. This method of mobile design a best practice and keeps your site from having complicated redirects that could hinder indexing your site's content and preserves link equity. However, one drawback is that because a single page is used for multiple devices you may have to compromise on your calls to action options. This design method can also make pages more complicated when entering content.
Adaptive Design
Adaptive Design is a term first coined by Aaron Gustafson. Adaptive Design is similar to Responsive Design in that the website designer has to divide the design into “set points” that define the general size and layout of typical devices. The main difference is that adaptive design is that it is “server-side”. With adaptive design, the web server detects the type of device the user is using before it creates and sends the page to the browser. Once detected it loads a version of the page that is then optimized for the dimensions and native features of the device and then sends that page to the browser.
The big advantage of adaptive design is that it allows you to create a more mobile-centric experience because you can utilize the built-in features of the user's device. Options such as accessing location, touch interface, interacting with the camera, or rich interaction such as interacting with Cortana on a Windows Phone are all options with adaptive design. Additionally, by serving up a page optimized for a specific device you only have to implement the code necessary for that device, thus reducing download times, and improving the user experience.
Cost & Disadvantages
Using adaptive design will increase both capital cost to build the site as well as operations & maintenance costs. Each update has to be carefully planned to be responsive reducing some of your agility.
Advantages
Adaptive design is best for when you are starting from scratch and where you want the richest mobile experience for your audience delivered through a browser while taking advantage of native device specific features. The key point here is that you have access to device functions available through the browser. There are many features of a device that are only available through using a native application, and we will discuss these later.
Mobile Website
Essentially, a
Mobile Website is a copy of your website built for mobile clients. Typically, the site is detected by the server and then you are redirected to that website URL which usually looks like this
m.yoursite.com. The mobile version is a "one size fits all" where the content, navigation and layout is designed to work on smaller mobile devices.
Cost & Disadvantages
Perhaps the biggest drawback of the mobile site approach is that you have two sites to maintain. Two sites means you will incur additional capital costs to build the site, but more importantly the operations and maintenance costs also increase.
The mobile site approach impacts your agility in delivering content because you have to create it twice. Even if you use a content management system, (which you should by default) it does make management easier; you still end up maintaining two websites. All content has to be formatted and designed by hand each time you publish a new page for each site.
From a search engine perspective, you effectively hurt your organic search traffic because you weaken your domain authority by having two separate websites. While search engines do not penalize you for taking this approach, the very configuration has an impact on your search results. Additionally, mobile links do not count when shared for your primary domain.
Advantages
Mobile sites are good when you already have a large site with a lot of content and re-working the site for a responsive framework is cost prohibited.
Native App
A Native Application is an application built for a specific mobile operating system and device or devices. It does not run in a browser. A separate version of the application is created to target a particular mobile operating system, computer chip set, and hardware of that device. The creator of the application must support it on the various platforms and devices that they target, so this is a significant commitment to the technology.
When choosing to build a native mobile application you must define your audience and what devices they use. Right now the major operating system providers for mobile applications are Apple - iOS, Google - Android, and Microsoft – Windows Mobile. Blackberry still exists. It’s not dead yet, but hospice is calling. Within these mobile operating system providers, there are multiple versions of their OS and hundreds of thousands of hardware devices that include smartphone and tablet platforms.
Cost & Disadvantages
Native applications require the largest capital investment as they are expensive to build and they are costly to maintain. Capital costs and operations and maintenance costs to design, build, test, deploy, and support native applications increase with each device and OS you support. Each of the major mobile device players has a store where you must to "pay to play" per say, and your application must meet each store's certification requirements.
Advantages
Building a native application can be worth the cost to develop them, because when designed correctly, they provide the best user experience. Native applications can do this because they interact at the hardware level, and the application itself is tailored to that device's feature set.
As an analogy, it is fun to drive a car on a computer simulation; however, nothing provides the same experience as being behind the wheel. The same thing is true with flying a fighter. A simulator can provide a near realistic experience, but nothing compares to going Mach 2 with your hair on fire. Ask the guys on Top Gear or the Pilots at the Navy or Air Force Fighter Weapons School.
In many cases such as engaging with consumers, a native application is orthodox. It is the minimum requirement for entry into many markets these days. However, the cost versus the benefit must be weighed.
Hybrid / Combination Approach
There is no one size fits all. Many companies that are looking to engage mobile visitors now take a Hybrid Approach. Their website may be a combination of responsive and adaptive or they may have a mobile site for a portion of their site.
In some cases, people are leveraging the responsive or adaptive code on their website to render a hybrid native application to re-use elements of their website. This method of mobile development provides a native application experience with an embedded browser control in the application to render the HTML code. However, this often comes with a degraded user experience.
Cost & Disadvantages
The Hybrid / Combination Approach is a mixed bag when it comes to the cost element. The increased complexity of this approach can add to your cost of maintaining and updating this technology. However, your initial capital costs to develop and implement can be lower because you leverage the code in your website as part of this method. For example, you may implement a native application and used elements of your responsive design from your website in your user interface.
Advantages
Many companies realized that both a mobile website and a native application are a cost of doing business and opting to provide both experiences for their audiences.
Can You Achieve Engagement and Reach Business Nirvana?
Can you achieve engagement and reach business nirvana or will you stick your head in the sand and lose your piece of the pie? If you reach just 1% of the 15 billion devices out there, you have the potential to engage 150 million customers. The real question is: Can you afford not to?
No matter what you do, act now! Educate yourself and seek help from a mobility expert. Your business could transcend into a much more profitable state.