5 Mobile-Related Concepts You Should Know by @djstomp

Mobile development is pretty hot. Not surprising, given the unique possibilities of mobile apps and the enormous amounts of mobile devices sold worldwide. While talking about apps it can be confusing to hear new terms being coined again. Let’s discuss 5 concepts related to mobile that you should be aware of.

In this post I’m going to talk about responsive design, adaptive design, web apps, mobile apps, native apps and hybrid apps. Mind boggling already? No worries, you’ll see that it is all related and there are subtile, yet sometimes important differences. I will not get into too much detail avoiding a purely semantic discussion.

A mobile device has two significant technical properties: relatively small screensize and limited computing power, compared to desktop computers or laptops. So to offer a good user experience you should be able to respect the characteristics of mobile devices.

The webbasics

Let me start with a general web-jargon primer.

HTML, CSS and JavaScript
HTML is the web markup language, it defines the content elements within the webpage and helps the browser (and search engines) to determine these specific elements. As you may not totally be aware of, the internet is also utilized by visually impaired visitors. The markup language is crucial to so called screenreaders which helps to navigate your blind audience through the website. The same applies to search engines which need to be aware of the content and context of a webpage. Markup tags comprises for example paragraphs, links, tables, headings and also images, audio and video.

CSS refers to the styling methods in order to define the looks and layout of a webpage. With CSS you can control the appearance of any single element on a webpage. You’re able to position it everywhere on the page, hide or show elements and totally edit the styling. In CSS3, the newest specifications, several new features including animations and transitions are introduced.

JavaScript is a programming language which is able to perform different tasks. Because it can generate and manipulate HTML and CSS in real-time you can use it to create animations, transformations, etc. With an AJAX implementation you’re able to simulate desktop program behaviour, because the page doesn’t need to be reloaded after an action.

Clientside vs Serverside
CSS and JavaScript are typically clientside (this means that they are active in your browser), often embedded in HTML, and can change the website without a new request to the server. For example an image slider, animations or dynamic forms.

serverside scripting is as the name indicates done on the webserver. With a serverside language like PHP, .NET, Java, etc., you can generate clientside code dynamically. Once the code is executed on the serverside (i.e. the webpage is served), the serverside actions have finished, until the next request from your browser.

Let’s assume that you already have a website which is designed for laptop and desktop use. If you want to make it mobile friendly you have two choices:

1 Adaptive design

This is roughly spoken more of a serverside approach. Before the website loads the server, which executes the code, is able to detect the visitor’s device and loads a fully adapted webtemplate into the mobile device’s browser. This way the website is optimized (regarding both loading speed and screen dimensions) for the given device. For example you can load different functionality for viewing on an iPad or an iPhone. One of the advantages is that you don’t have to load redundant code or large images, so generally speaking pages will load fast. A disadvantage may be that you have to design a few templates for a set of common devices (for example iPhone, iPad, etc.) to adapt to those devices.

2 Responsive design

Responsive design is a clientside technique. This means that the adaptation of the website happens dynamically in your browser. So you basically build one website which ‘responses’ to the dimensions and characteristics of the device. The advantage of this technique is that you’ll only have to build the template once and then make it ‘fluid’, meaning that it automatically scales with the device. So in general this might be a quicker and cheaper solution.

A disadvantage may be that redundant code and larger images can negatively influence performance. Because the website code will be fully loaded into the browser before the frontend code determines how to resize the page, it is not optimized for performance on mobile devices in terms of loading speed.

3 Mobile web app

A mobile web app bridges a regular website and touch-enabled devices, it utilizes the touch centered navigation feel within the website experience. To take a shortcut, mostly the technology behind this is either based on adaptive or responsive design. Often frontend techniques (JavaScript and CSS) are heavily used to create the touch screen experience. As a matter of fact a mobile webapp is an implementation of responsive or adaptive design. With the current state of HTML5 (a new version of HTML) offline availability is possible through the HTML5 cacheing facilities. The data is stored in the browser so you don’t need to have internet connection all the time.

4 Native app

A native app is a platform specific application that resides on the mobile device and can access all device features like, camera, accelerometer and contact list. It excels in speed and user experience. Generally all data resides on the device itself, utilizing a database for lightning fast data access. Also native apps are able to receive push notifications, making it interesting for real-time communication.

Because of the specific expertise, developing native apps is far more expensive than developing web apps. You’ll have to build a native app for every platform (i.e. iOS, Android, Blackberry, etc.). Other disadvantage is that you have to install in from an appstore. This involves several steps and as opposed to simply browsing to a web URL it is rather timeconsuming. In the development process of native apps one has to take into account the appstore approval process, that can take up to several weeks.

5 Hybrid app

If you want the best of both worlds, then a hybrid app enters the game. Combining the power of responsive/adaptive webdesign and the rich device functionalty of native apps. Practically you’ll have a web app, embedded within a native framework, where you only add features not possible with web apps. This comprises camera, compass, accelerometer, contact list, etc. When developing hybrid apps your investments will be lower than pure native apps because you can reuse the web app and add the remainder device specific features.

So there are some subtle differences between the 5 mobile concepts. Responsive design is promising, because it enables you to serve a wide range of devices with minimum effort, and within a relatively turnaround. Hybrid apps can be a cost effective solution to benefit from both native functionality like push notifications and camera access and the development flexibility that responsive and adaptive design offer. It all depends on your budget, needs and available time.