The Right Mobile Approach for Your Project
Should you build your next mobile project as a Mobile Website, Responsive Website, Hybrid App or Native App?
You have a killer idea. You know you need it to be accessible from mobile devices — after all, Mobile is a big deal. According to a January 2014 report by Pew Internet Project, over 97% of adults in the age range of 18–49 have a smart phone. In August 2014, Shopify announced that half of the traffic on the sites built on their platform came from mobile devices.
But maybe you want a website too. Your friend told you you need to build an app for the App Store. Your colleague said you should build a responsive website. Your boss — eek! — said it needs to be a mobile website. What do you do?
There are four approaches to making your app accessible on mobile devices:
1. Mobile Website
2. Responsive Web Design
3. Hybrid App
4. Native App
At philosophie, I am constantly asked by prospects and clients what is the best approach for their project. I have tried to distill these insights into the following post. I’ll start with a brief overview and then below drill deeper into each particular option. After reading this, I hope you will know what’s best for your product.
What’s Your Highest Priority
Although any mobile approach can be costly if you do not reign in constraints, native applications are the most expensive to develop. If you have not proved your product/market fit, and your concept does not rely on things only possible with native applications, it would be prudent to choose from either Mobile Web, Responsive Web or Hybrid.
Here are some general tips based on key factors:
Cost to Develop: Native applications are the most expensive to develop. While all of the above mobile approaches can end up being costly if you do not reign in constraints, native apps are the most expensive. If you have not proven your product/market fit and your concept does not rely on things only possible with native applications, it would be prudent to choose a different approach.
Multi-Device Accessibility: Developing native applications across multiple platforms is extremely expensive. Philosophie recommends starting on a single platform, but if you truly want to be device agnostic you should consider a responsive or hybrid app approach.
Speed: Native applications provide the fastest speed (performance in the app). iOS actually slows down Webview in apps (e.g. apps that are built in Cordova), so hybrid apps could run slower than even a website. On the web, mobile websites tend to be the best performance wise, although can be slowed down by redirects (with ‘m.’ websites).
User Experience: If overall user experience and the polish of animation is of upmost importance to your mobile strategy, than native applications are the way to go. However, realize that many users, while appreciative, of the extra polish, just want something that can accomplish their goals quickly and with as little frustration as possible. While you as the creator of the idea might desire this extra level of snapiness, it may not be necessary.
Offline Availability: Even though HTML5 technologies are making this more of a reality on responsive and mobile websites with `LocalStorage`, to get an experience that can work offline, your best bet is with a native or hybrid application. In these cases, the entire app is downloaded to the user’s mobile device, so they can browse without needing a live internet connection. Remember if the application requires to hit an external server via API to send or receive additional information, it will still need an internet connection. Games and subway map apps, often take advantage of the offline capability of native/hybrid apps.
Availability Across Devices: You don’t only care about your app looking good across Android, iOS, etc, but you also need people to be able to view it on the web or tablets. Maybe you think more people will actually browse your site on their desktops and not as a mobile experience. In these cases, a responsive web based experience is the best bet.
Apps Targeting the Developing World: The developing world represents a very large business opportunity. More and more people have purchased smartphones in the recent years. Still the internet connections are not as strong and they often have pay as they go internet. In these cases, bandwidth and speed are critical and native apps are risky as the wide range of smartphones (mostly Android), make it challenging to develop. In these cases, mobile web is a great place to start.
Cost to Maintain: Maintaining multiple codebases for different platforms of native apps can be costly. And remember, as platforms upgrade to new operating systems (iOS 6 -> 7 -> 8), there will be development effort to get it working properly. Similarly, a mobile web approach requires two separate codebases, one for the desktop and one for the mobile experience, which means functionality changes require an update to both codebases. Hybrid apps and responsive apps are the easiest to maintain, although still have their fair share of challenges.
Mobile Websites
Mobile websites are designed exclusively for mobile devices using existing web technologies — HTML, CSS and JavaScript. For the purpose of this discussion, we are separating mobile websites from responsive websites. In this case, if a user accesses the site from a mobile device, it will redirect to the same page on a ‘m.’ or ‘mobile.’ subdomain.
The mobile web solution results in the lowest file size for mobile users. It is fantastic where speed is paramount and an application that lives on the Apple App Store or Google Play Store is unnecessary. Mobile websites can also be added to a user’s home screen to more closely replicate an app experience.
Pros / Cons
Pros
• Super lightweight for mobile users, which is great for projects where bandwidth is a concern and also means faster!
• Crafted exclusively for mobile often results in a better mobile experience
• Accessible over the web (does not require an app download)
Cons
• Multiple codebases (mobile & normal web)
• Can result in weird behavior when sharing links (if a web viewer opens a mobile link, it often doesn’t redirect)
• Difficult to maintain and perfect across devices
• Not possible (or as easy) to leverage some native device functionalities
Responsive Web Design
Responsive web design is a technique that serves different pieces of CSS (Cascading Style Sheets) based on the size of the screen that the user is on. Responsive web design is a super hot trend on the web right now. In typical internet buzz-wordiness, it sounds difficult and crazy to do. Here’s a tip: responsive web design is mostly a design (and front-end) challenge, not a technical challenge. To get responsive websites to work well across devices and orientations can take a significant amount of time as different screen sizes make designs look slightly different. To get the highest quality results requires a lot of guess and check.
Responsive web design is a great approach when you want to target a lot of devices. If performance and snappy animations are super important, responsive is not the ideal approach.
Pros / Cons
Pros
• Single codebase for all devices
• Displays on laptops, desktops, tablets and mobile devices for limited cost compared to building all separately
• Shorter development timeline
• Accessible over the web (does not require an app download)
Cons
• Larger file sizes on mobile devices means slower load time and more bandwidth used
• Time consuming to perfect across devices, and can run into oddities, such as forms on overlays
• Not possible (or as easy) to leverage some native functionalities
Hybrid App
A hybrid application is made of pages created in HTML, CSS and JavaScript. These pages are then put into a native application “wrapper” so that the app can be downloaded through an app store. The leading providers of these wrappers are Apache’s Cordova, Appcelerator, or Trigger.io. Hybrid applications can build on some native libraries, such as location and camera, with more libraries becoming available every month. Since they are created with standard front-end development technologies, they tend to be faster and less expensive to execute than a native application.
Hybrid applications tend to not have the polish of a native application. It is very challenging to replicate the smoothness and snapiness of native animations. Native applications can draw on a lot of animations that they get “for free” through the application SDK, whether it is Swift, Objective-C or Android. CSS3 and JavaScript replicas tend to be less polished.
There is a new framework called Ionic that makes the development of hybrid applications faster to develop. There are still numerous challenges and oddities that make hybrid applications much harder to develop then one would think.
Pros / Cons
Pros
• Easy way to get a “native” application
• Easier to leverage existing front-end work compared to a native app
• Shorter development timeline
• Lower cost than native development
• Single codebase for Android / iOS
Cons
• Less polished animations
• Can fall into the trap of not utilizing hardware, and thus UX, differences between Android and iOS devices
• More challenging to leverage native APIs
• Software has a lot of oddities that can increase development time and cost
Native App
The crème de la crème of mobile applications is the native application. These applications are built using the native technologies, for iOS that means Swift (or Objective-C) and for Android, that means developing on the Android SDK, which is Java based. By developing apps natively, we can take advantage of a number of things baked into these technologies, APIs that give us access to hundreds of different things. It also makes developing animations seamless.
To develop an Android application and an iOS app requires a lot of repeat work as the languages are completely separate. We often recommend to clients to start with just a single app, iterate and then build out the second app after you have gained insights from your users. Native apps are generally the most expensive to produce, but result in the highest level of polish. There are also some APIs on the device that cannot be accessed by anything but native applications and others that are significantly easier to access natively.
Pros / Cons
Pros
• The best overall experience. Native apps provide an extra level of polish and crispness of animations
• Leverage native APIs for more powerful apps
• App Store marketing power (if a successful app)
• Easier to access with no internet connection
Cons
• Cost and time to develop are the highest
• App Store restrictions, especially Apple
• Needle in the haystack, there are a ton of apps, how will you be discovered?
The best mobile approach for your project will depend on weighing these pros and cons carefully. If you have a project that you would like to explore with philosophie, we’re always happy to help guide you to the best decision based on your needs and where you are in the project lifecycle.
