Which Mobile Web Technology Do I Choose?
Mobile web technology is becoming more confusing as developers continue to build websites. Today, we discuss the various types and which one is right for you.
Everyone is trying to create something on mobile.
It's the hot new thing since everyone has a mobile device in their pockets and the trend five years ago was to create native mobile apps.
Now the trend is to create mobile websites that load extremely fast.
In Google's Think With Google back in February of this year, they explain why websites must load in less than three seconds, but only a little over half (53%) of mobile websites on the Internet can perform in less than 3 seconds.
I'm thinking this pertains to their AMP initiative and the PWA movement (don't worry, I'll get into these terms later).
There are a number of mobile terms which can be overwhelming, but mobile technologies generally fall into one of the following categories:
- Native - Built using Xamarin (for Android in Visual Studio), Android Studio, Swift (iOS), or Objective-C (iOS).
- Responsive Web - These sites are becoming more popular with new web technologies to make the websites more engaging with their audience.
While each of these could be a post unto itself, I will be focusing on the Responsive Web for today's post.
Different Types of Websites
Websites are evolving past their old functionality. They are becoming more than just desktop websites. They are becoming faster, providing more value, more engagement, and becoming more "sticky" with micro-interactions.
Nobody wants to wait for their websites to load.
It's three seconds or death.
But can you deliver a fully-functional mobile site in mere seconds? It would require the speed of a native application.
How could you achieve this?
The responsive web is defined as a "liquid, flexible, fluid, or elastic" web layout that renders a certain way no matter what device you are using or how it's positioned.
The deciding factor here would be which CSS framework you decide to use on a project.
Mastering one CSS framework will make your life a lot easier when viewing your website on various devices.
Single-Page Applications (SPAs)
Progressive Web Apps (PWA)
Progressive Web Apps is the latest trend for websites.
If you have an existing responsive website, it's easy to convert it into a PWA.
Forbes even comments on why progressive web apps will eventually replace native mobile apps.
Accelerated Mobile Pages (AMP)
These pages contain the bare essentials of content when Google "spiders" your site. If you have the right content, you may even have your content included in the Search Results carousel.
I feel like AMP pages were the beginning specs of what a PWA was meant to become. However, you can have a web page that is AMP-compliant and contain PWA functionality so they can work together.
Can't We All Just Get Along?
Now we come to the crux of this post where I want to ask my audience a question or two.
With all of these web technologies, can we combine any of them to make our lives easier?
For example, if I'm building a PWA, can I use a framework or library like Angular or React? Will it have everything I need to meet the requirements for a PWA? Will it be responsive?
With SPAs, I can use a framework or library like Angular or React, but how does that work for PWAs or AMP pages?
I wanted this to be a thought-provoking post.
If so, how do we implement AMP pages in our site?
I've had a number of these questions rattling around in my brain over the past year and I'm starting to dig more into this particular issue for my mobile-heavy readers.
Did you have any problems creating a PWA? How about a Responsive SPA PWA with AMP pages? Ok...How about just AMP pages? Post your comments below and let's discuss.