The differences between responsive design, mobile-first design and native apps in plain language
A customer recently asked what the difference was between responsive design, mobile-first design and native apps.
Let’s start by reviewing what they have in common: All three are intended to work well on at least some mobile devices. Responsive design and mobile first design are not mutually exclusive and are often used together.
Websites vs native apps
Websites designed to be responsive and/or designed using the mobile-first philosophy require a web browser (Chrome, Safari, Firefox, Edge) running on a device in order to display their content. To display a webpage, the browser program “requests” the page components (text, images, code, etc.) from the web server where they are stored, assembles the components into a webpage and displays it on the device.
Like mobile browsers, native apps are software programs that “live” (hence the term “native”) on the mobile devices on which they are designed to work.
Responsive design vs mobile-first design
Responsive designs are intended to work on screens of all sizes and will change on the fly so that they make the best use of the screen employed. These changes often include deleting some images, rearranging content displayed in multiple columns into one column, and converting button-based menus to dropdowns, among many other things.
Responsive websites are frequently designed for optimal viewing on a larger screen with the added capability of adjusting to work on smaller ones. Sometimes “extra” information is displayed on a website designed for large screens because there is room for it but not necessarily because it is important to the goals of the website. Superfluous content is less of a problem when displayed on a large screen.
Conversely, because mobile-first designs are initially designed to work on small screens, designers are forced to determine what information is most critical and how to display it effectively on a small screen. This tends to yield highly relevant sites that focus on what’s important. Designers may add content to pages as the screen grows larger, but should guard against allowing it to detract from websites’ goals.
Functionality and HTML5
Why do all three variations exist? The answer is functionality and user experience. Mobile devices have hardware elements including cameras, lights, gyroscopes, GPS and Bluetooth that designers love to make use of. Mobile apps propagated and quickly gained favor because they could make use of devices’ special capabilities whereas websites largely couldn’t.
Although web browsers could “serve” pages on mobile devices, it was practically impossible to incorporate device-specific hardware capabilities into those sites. This limitation has been partially addressed with the release of the current version of HTML, HTML5. With HTML5 came new ways to access device-specific functionality, like geolocation, thereby blurring the lines between what a webpage and a native app were capable of, although apps remained more robust in terms of what they could do.
Which is best for me?
As you probably suspect, the answer is “It depends.”
A native app is only viable on the device that it was designed for. For example, an app might be developed only for Apple devices and not be available for Android devices. Often multiple versions of apps are needed to ensure availability to a majority of mobile users. And if you want to make it available to desktop users, a web-based app or website is necessary.
Responsive websites are more ubiquitous and can provide a good user experience on virtually all devices. They are also significantly less expensive than native apps to develop and maintain. Remember, with apps you need a separate program for each mobile operating system plus a responsive website for the systems that you won’t have an app for. That approach is a lot more expensive than one responsive website by itself.
The optimal solution for your business will depend on your budget, your audience, the devices they will be using, and the functionality required.
