Photo by Rafal Jedrzejek on Unsplash

Mobile First — Just How?

Christian Muehle
Apr 27 · 7 min read

Ok, I admit “Mobile first” is kind of a buzzword nowadays, but it’s one of the few buzzwords that don’t lack the complete technical background or original meaning behind it. How do you enter the world of “mobile” development?
Let me try to provide you an overview…

First things first

  • Describing a system and UI/UX architecture designed to focus on mobile usage pattern and viewport sizes
  • Doesn’t have to be a native App, it can be applied to web solution as well
  • Depending on the project, can come along with “offline first”, allowing data to be stored on the device (again, works for web and apps)
  • Mobile first doesn’t exclude desktop usage, scaling and responsiveness are key factors of this concept

Ok, you got me… another buzzword has sneaked into the above list: “Offline first”. The idea is that you design your application to be used without any connection, depending on your application it might contain all features or a subset.

One last thing I want to point out before we compare different options, is that designing an application for mobile first usage can still include desktop, smartwatch, TV and even your car (that would be referred, too, as “Multiexperience”).
I will promise to stop with the buzzword bingo from here on :)

Choose your path

Photo by Caleb Jones on Unsplash

You have more or less two paths to choose from (with some shortcuts between them), both will get you to your goal. For now, let’s go with the following options:

  • Web-based technologies, your toolset will be HTML/JS/TypeScript/CSS
  • “Native” solutions, you can choose from a wide range of languages like C#, Dart, Kotlin, Swift etc.

So, what’s the right path for me?

Photo by Brendan Church on Unsplash

Native App

  • Facilitate the hardware access you got alongside the performance you can get out of it
  • No worries about storage limits
  • Vendor lock in for the stores, you need to follow the rules
  • Higher maintenance if you have to keep two code basis

Please note: You can go with frameworks that allow you to have the same code base on multiple platforms, this includes native apps, websites and good old desktop applications (that would move you in the direction of multiexperience)

Web-based solution

  • One code base for a wide range of devices
  • Limited resources and offline/on device storage
  • Look and feel (UI and UX) are not like native and pixel perfect layouts require substantial amount of work
  • If wished offline first and even a “local installation” is possible

As I mentioned for the native frameworks, there are web-based solutions that can be compiled to be a “native” app. You can use HTML/JS/CSS to build the UI and business code. This framework also offers access to the device hardware. As any other app they will be again shipped by the store and all related rules and regulations apply.

Spotlight on Native frameworks

Photo by Dayne Topkin on Unsplash

Before somebody complains about the usage of the term “Native frameworks”, I use this to divide solutions that are rendered in a web-view or browser from the ones running a full app. I tried to keep the overview as short as possible. Of course, there are more options, I just picked platforms that I either have experience with or are well-known solutions.

By Christian Mühle, overview “native” mobile platforms

How to choose the right candidate?

  1. Do you already have experience with one of the used technologies?
  2. How big is your team? Can you afford to maintain multiple code bases?
  3. What platforms do you really need?
  4. Do you need to hire? .NET developers can be found “easier” than for example Dart developers
  5. Are you planning a “pixel perfect” UI/is your UI very different from the default controls?
  6. Are there any critical 3rd party components you must use (like AWS/Azure etc.) integration that might not be available on a given framework?

The above list could go on, with questions about how you plan to test or how to integrate the new project into existing workflows etc.

Move it to the web

Photo by HalGatewood.com on Unsplash

You decided to go with a web-based solution — great! Now you have to find one out of many (many, means actually a day by day growing pool of options). The table below shows an overview about possible option that are well-known players and can get you quickly to your goal.

By Christian Mühle, overview “web” mobile platforms

Like the native frameworks you should choose the best fit for your current situation. Think about the complexity your application will have later.

  • Do you have a lot of user interaction or do you preset content (like a blog)?
  • What would be the concept for your page, multiple pages or single page application?
  • Are you planning to follow a design concept like Material from Google and reuse existing UI components?

One note: I’m aware that in the above list Bulma is not directly comparable to the other options as its “just” a CSS file. Sometimes this is all you need based on your project. Keep in mind, the framework is a tool to help you to get to your goal as easy as possible. Maintaining a single CSS file compared to a “huge” framework is more straightforward.

Conclusion

The golden rule is to see it as a tool to solve your need and ensure that it will not end up in sleepless nights trying to maintain a bleeding edge code monster. Try to keep it simple and small.

In case you want to start collecting your own information about frameworks and technologies used around the industry’s, below is a list of resources you can use:

I hope I could help somebody with this to take a step further, any feedback is very much welcome.

Geek Culture

Proud to geek out. Follow to join our +500K monthly readers.

Thanks to Anupam Chugh and The Startup

Christian Muehle

Written by

Software developer in the marine industry — Technical writer and Flutter enthusiast — Happy user of Apache CouchDB and big fan of the .NET Framework

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Christian Muehle

Written by

Software developer in the marine industry — Technical writer and Flutter enthusiast — Happy user of Apache CouchDB and big fan of the .NET Framework

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store