A Case For Responsive Web Apps

By Cory LaViska on July 24, 2014

Have you ever noticed all those people staring into their phones? In public, in the car, in line at the store...they never seem to take their eyes off their phone. What do you think they're looking at?

Woman sitting on stone steps holding a cell phoneThe Mobile Revolution

Whether you like it or not, the mobile revolution is here. You spend so much time, effort, and money trying to get visitors to your website, why not make their experience a pleasant one? (Hint: viewing a website shrunk down to 10% on a phone isn't a pleasant experience.)

By now, you've likely heard of responsive web design. If not, it essentially means that your website will "respond" to your visitors' screen size. Here's an example of Surreal CMS on a desktop browser and the same exact page on a phone.

Screenshot of the Surreal CMS website on a desktop browser and a mobile browser

Through the use of CSS media queries, the website is built to adapt to virtually any screen size. This can drastically improve your visitors' experience — especially the ones glued to their phones.

This method has been applied to tons and tons of websites already. But what about web apps?

Responsive Web Apps

It's disappointing to load a web app on your phone when it was built for a desktop. To be frank, the experience just plain sucks. Some developers argue that building a separate mobile app is too time consuming, usually limited in functionality, or just plain silly.

But you don't need to build a separate app anymore, and I have proof.

When I designed the latest version of Surreal CMS, I started from the ground up with the difficult requirement of making it fully responsive. Every page, every feature — everything. If it worked on a desktop, it should work equally well on a tablet or phone. Whether a user can only click or tap shouldn't prevent them from using the app and it shouldn't make for a bad experience.

That turned out to be quite a challenge, but nothing I couldn't overcome with a bit of perseverance. Granted, the world is still in that awkward native app vs. web app phase. Native apps are sexy. They're faster. They're better. Right?

Sometimes, but the Progressive Web App (PWA) movement is pushing forward fast. And there are even apps that let you develop in HTML, CSS, and JavaScript and let you publish a "native" app. Many offer access to device-specific APIs so you can access cameras, filesystems, etc.

HTML isn't going away, it's just getting started.

That statement might make you think of the time Facebook pulled the plug on HTML5 in favor of a native app, but that was two years ago. Things are getting better. Devices are getting faster. More and more JavaScript APIs are becoming available. Two years ago, I couldn't have built the app I built today.

The fascinating thing about Facebook is that they had a working app based on web technologies that millions of people used successfully. There were some gripes, but things worked pretty well. If they hadn't jumped ship, things would have continued to get better.

The Native App Dilemma

Without turning this into a native app vs. web app argument, let's look at a few important points that you'll want to consider if you're looking to build a native app.

  • Which platforms are you going to target?
  • What devices will be supported?
  • What languages will you need to know to develop your app for those platforms and devices?
  • Does your company have developers with experience in all those languages?

As a 100% bootstrapped company, this is why I chose to build a responsive web app. There was no way I could afford to hire developers for every possible device my users had. By building a web app, I was able to use technologies that I already understood. I was able to build a single version of the app that works on all devices, regardless of platform.

If I tried to build a native app myself, I'd probably still be working on it. And then I'd have to write another. And possibly another.

Efficiency Rules

The resources I saved by building a responsive web app allowed me to accommodate desktops, tablets, and phones much faster than building multiple native apps. I didn't have to worry about hiring new people and bringing them up to speed. I didn't have to buy new hardware and learn new software. I didn't have to design a multitude of different apps, nor keep them all updated as new features get rolled out.

Building a responsive web app wasn't exactly easy, but it was far easier than building multiple native apps.

In hindsight, I made a great decision to stick with web technologies. I started with a responsive framework that was reliable and actively developed. I spent a lot of time tweaking and polishing the interface so it worked great on every screen size. I tested things thoroughly on a number of emulators and physical devices. The result was an app that "just works" on whatever browser you happen to be using. I was even able to use my own app on a Nintendo Wii!

It may not be for everyone, but before you convince yourself that native apps are the only way to go, reconsider what you can achieve with a web app. You might be surprised at what you can do with HTML, CSS, and JavaScript these days.