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:

1. Native - Built using Xamarin (for Android in Visual Studio), Android Studio, Swift (iOS), or Objective-C (iOS).
2. Hybrid - Built with HTML, CSS, and JavaScript, these web technologies are combined into a specific OS shell (either Android or iOS) and packaged up as a native application. It gives the best of both worlds: speed of a native apps using familiar web technologies.
3. 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?

Responsive Web

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.

It's almost the equivalent of writing a Java application. The exception is you are using HTML, CSS, and/or JavaScript. "Write once, Deploy everywhere."

The deciding factor here would be which CSS framework you decide to use on a project.

The popular CSS frameworks like Bootstrap, Foundation, and Skeleton are excellent for building responsive websites.

Mastering one CSS framework will make your life a lot easier when viewing your website on various devices.

Single-Page Applications (SPAs)

JavaScript is the key component for these types of websites.

These are the Angular, React, Ember, Aurelia, and other JavaScript Frameworks to build single-page websites. With the latest ES6, I've even seen jQuery perform single-page functionality.

The idea is JavaScript is considered a first-class citizen. You can have a full website running JavaScript while the JavaScript loads HTML templates and uses Web API calls to populate those templates...all on one page.

Everything is done through JavaScript.

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.

You add a manifest, setup a JavaScript Service Worker, and design your layout to preload images in the background. This is how you start building your PWA.

PWAs are becoming so popular, Google, Apple, and Microsoft are starting to accept PWAs as native apps in their App Stores.

Forbes even comments on why progressive web apps will eventually replace native mobile apps.

Accelerated Mobile Pages (AMP)

AMP Pages were created by Google and are considered to be mobile pages distilled down to their bare essentials using Google's JavaScript and HTML-specific tags. I've mentioned these before in my series of Creating AMP pages using ASP .NET MVC.

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?

Conclusion

I wanted this to be a thought-provoking post.

If we want to build a PWA, does it have to be a SPA? Do we have to use a JavaScript framework for it to be a PWA?

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.