Maybe you read this post on a mobile phone. If this is the case, you surely understand the interest of being present or at least readable on these small mobile terminals.
If you think that accessing the Internet from a mobile phone is one more gadget in digital disruption 1 , then you should reread this 2010 article: Eric Schmidt: Mobile Is The Future, And There’s No Such Thing As Communication Overload – TechCrunch, 12/04/2010 .
The former boss of Google has had a hollow nose because if mobile phone usage is very common in the metro corridor, the United Nations recently made a report that goes in the same direction: the growth of mobile in Africa is Increased from 1% in 2000 to 54% in 2012.
Being present on the mobile Internet is no longer accessory. In 2016, the real issue should be “website or application?” . We will see together how to make this choice.
Luke Wroblewski proposes a computer graphic that can be summarized quite simply:
- The Web serves to reach the audience;
- The application serves to provide a rich experience;
- Both are strategic.
In the diagram above, Wroblewski contrasts the rich use of applications (left) with the ease of access of the Web (right).
According to the platform, one does not achieve the same goal. Given the price of developments, it is better not to be mistaken.
If we hit more people on Android than on iOS, we touch even more with a web application.
If it’s easier to get paid with a native application than with a web application, iPhone users report more than Android users.
IA, a software publisher for phones and tablets made the observation . They have changed strategy: the application for Android has become free, but it will buy some features if you want to use it thoroughly.
The idea is really to reach as many people as possible while being profitable.
So what are the possible choices when you want to be present on mobile?
The vital minimum is to apply certain principles of Responsive Design 2 to make your website accessible from a mobile.
NB: The MDN article on Responsive Design was archived at the end of 2015, proof of the obsolescence of the term.
It is essential to take into account the different screen sizes. It will be necessary to adapt the elements of the Website using percentages to define their sizes. You should also avoid loading a high-resolution image if it is displayed on a small, low-resolution screen – also to alleviate the user’s bandwidth.
But if you need more interactivity with the user, you may need to find another solution. For example, it is easy and quick to write with a physical keyboard on a fixed computer, but it is difficult to take a picture of its environment; And vice versa with a mobile phone.
Another possibility to be present on mobile is the development of a native application. But a native application is very expensive . And if it should be deployed on the two main stores ( Play Store and App Store ), it will have to be expanded twice. Although the default choice since 2007, besides investment, there are many limitations:
- Two different languages for Android and iOS ;
- Authorization of blinds in publications;
- Heavy maintenance.
Precompiled Native Applications
To address the need to develop two applications – even three, including a Windows Phone development – some vendors offer solutions to fulfill the maxim “Write Once, Run Everywhere” ( Write Once, Run everywhere 3 ). This is the case for React Native or NativeScript .
But if one can actually write a single code, it will still have to do with the specificities of SDKs to build graphical interfaces. And it’s not always simple.
Plugins developed in the target SDK language (Java for Android and Objective-C / Swift for iOS) allow hybrid applications to communicate with the rest of the device (access to files, devices, camera, GPS chip, etc.).
But it will always be necessary to go through the blinds and their validations sometimes obscure and often peremptory.
Progressive Web Apps
Called Progressive Web App an application that correctly uses the latest HTML5 and mobile specifications. Web developers, under the guise of a slight upgrade, will find themselves on familiar ground.
They will use the Services Workers to cover offline use, allow for notifications, and update the application in the background.
The user will not install the application on his phone, but the application will cache what it needs to function. This caching also avoids downloading the “App Shell” , the set of graphic elements that will form the interface of the application.
With Web Animations , applications can offer animations in 60 FPS 4 . These animations allow the user to have the same graphic experience as a native application by deporting all these calculations to a graphics processor now present on the vast majority of mobile terminals.
The presence of a Manifest allows to accompany the user beyond his first visit. It offers a progressive experience to users who visit the Web App several times: the manifest defines an icon and a splash screen and allows the user to add this Web App to its application launcher.
To learn more, please visit our article , the Google file or the Mozilla Developer Network .
HTML5 allows us to use most of the features of a mobile device (GPS, Camera, bluetooth, etc.).
As mentioned above, the publication of a native application on a blind can be a difficult step. With a PWA, this is an unnecessary step, users who visit your site will not need to accept permissions, download your application. And there are already sites that replace blinds to reference PWA applications like https://pwa.rocks/ .
Here are for example the permissions required for a simple application of flashlight:
The other advantage of the Progressive Web App is its development cost which will be closer to a Web App Responsive than two native applications.
Dan Dascalescu summarizes very well the situation of the PWA against the native applications :
It’s not “PWA vs. Native “, but rather” PWA vs. [Web + native + native] “.
Integrating the mobile world
There is no right answer to the question “what should I do to integrate the mobile world?” . The only correct answer to this kind of question is:
Depending on your needs, we can help you define the best strategy, always according to the KISS principle .
Why not start by asking yourself some questions (click on the image to see it in large):
1 : It’s always interesting the buzz words in a blog post.
2 : This one too is a buzz word that I wanted to use, even if it falls into disuse.
3 : It sounds better in English, except the acronym.
4 : 60 FPS means there are 60 pictures painted in a second, it’s really smooth .
[Illustration: matthew venn CC by-sa ]
An error, a question, a remark, do not hesitate : @ticabri or directly by a pull-request .