Caleb Olojo
Caleb's Blog

Caleb's Blog

Mobile-first development: MFD

Mobile-first development: MFD

Caleb Olojo's photo
Caleb Olojo
·Jul 9, 2021·

4 min read

Don't mind the article title. I just came up with anything that came across my mind, and since it resonates with what I'm trying to at least discuss here, I'd leave it that way and I'd also keep improving this article by adding or removing things that I feel should, or shouldn't be in it in the future.

One more thing, this piece isn't like a tutorial or a guide. Take it as though it is an opinion on web practices that have been on for a while now. No, scratch that, these practices have been on, almost since the inception of building for the web and on the web.

The process

Yes, the need to always create the mobile device version of app (web/hybrid) designs isn't something new, product designers, UI designers, and developers would need to have discussions on the use-cases and scenarios of the product they're trying to build, they'd have the demographics of the users too.

The UI design team would then go on to start creating the designs for this product, and as you've guessed right, priority is placed on the mobile version of these designs [most times], since research has shown that the majority of users visiting a webpage/web-app do that via their mobile phones.

They'd (the UI designers) go on to create the mobile and desktop version of the product, then the engineering (comprising of Frontend developers, Backend developers, and DevOps Folks, just to mention a few) team commences their implementation of the application.

The Frontend Engineer(s) is expected to implement both versions of the design provided, which would, in turn, make the developer think in multiple scenarios, sometimes these variations in design for different platforms (i.e. the devices) can have an effect on how the logic of the app is being managed.

A decoy

Having to write code for different use-cases, sometimes can be very tiring. What if there is a way to write code or make the implementation in such a way that it'd be adaptable on any device.

I came across this npm package that helps in detecting the type of device that anyone is visiting or viewing your website/web-app from, and renders the UI based on the conditional logic that would've been provided by you.

The package works for React and VueJs. The link to the package above is for ReactJs alone, here's the link to the VueJs package on npm. You can decide to build for a specific device or multiple devices such that the UI adapts to the device width when it is in view. It also has a cross-browser compatibility feature, so you don't end writing too many styles for different browsers.

An example is a process of adding prefixes to the property names of selectors in CSS so that these styles can be applied or function perfectly in these browsers

.element {
-moz-animation: animation-name, 0.4s ease-in;
-webkit-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
}

A conditional logic has to be established to detect if the user is viewing the app from a mobile or desktop device. Say for example:

// index.js

import React from "react"
import App from "./app"
import { isMobile } from "react-device-detect"

// Browser or desktop component placeholder, so the user 
// doesn't just get a blank screen when they're on a desktop
// device.
export default function BrowserComponent({ info }) {
    return (
       <h1>{info}</h1>
    )
}

React.render(
 {isMobile ? (
   <App />
 ) : (
   <BrowserComponent info="Please view this page on a mobile phone" />
 ) }, 
 document.querySelector("#root")
)

With this logic available in the application, One can decide to just have styles for different mobile device breakpoints by wrapping all the CSS styles in the media rule.

@media only screen (min-width: 0px) and (max-width: 320px) {
  // the styles in this rule will be applied to 
 // devices with widths from 0px to 320px (extra small screen device width)
}

The format of the media query above is quite different from what most folks make use of, but do not fret! I wrote something about setting width ranges when writing these rules. Take a look at it and knock yourself out.

Conclusion

Although there are other ideas on how to accomplish this feature. This article just focuses on how to make mobile implementations of the UIs of Apps. Take a look at this article that explains the concept behind adaptive and responsive design maybe it'd ring a bell.

Thank you for reading. Feel free to share the ideas on what works best for you in the comments section.

 
Share this