Optimizing my early retirement simulator for mobile users [EN/FR]

Who still uses a computer to search the Internet? Nobody uses a computer anymore. Everyone browses from a phone…

Well, obviously, that’s a bit of an exaggeration. But it’s true that today, more than 55% of users browse the web via a smartphone. So, if you’re developing a web application, you have no choice but to make it 100% responsive.

That’s precisely what I did with my early retirement simulator with Hive. It has been online for almost two weeks, but it still wasn’t optimized for mobile. So, I took the time to take care of it:

I don’t know how you’ll view this image, but as you can see, all the elements align correctly one after the other. The interface is spacious, the user understands what’s happening at a glance, and nothing overlaps. In short, it’s optimized for mobile navigation.

And yet, initially, I had this:

Let’s just say there was a lot of work to be done.

When developing a web tool, you should do the opposite of what I did: start with the mobile version. It’s much easier to adapt the design to larger screens later rather than the other way around.

By the way, all of this is possible thanks to CSS media queries, which allow you to apply specific styles based on screen size.

Here’s how it works:

@media (condition) {
    /* CSS styles applied if the condition is met */
}

It’s quite intuitive. For example, to apply a style only if the screen is 600 pixels wide or less, you write:

@media (max-width: 600px) {
    /* CSS styles applied if the condition is met */
}

In this case, as soon as the screen width is less than or equal to 600px, the CSS rules inside will be applied.

Here are some useful options with media queries:

• max-width: Applies styles up to a given width.
• min-width: Applies styles starting from a given width.
• max-height / min-height: Same principle, but for height.
• orientation: landscape: When the user is in landscape mode.
• orientation: portrait: When the user is in portrait mode.
• min-resolution: 2dppx: Applies a rule specifically for high-resolution screens (Retina). (I’ve never used it, but it can be useful.)

You can also combine multiple conditions using the keywords and, or, and not.

For example:

@media (min-width: 600px) and (max-width: 1024px) {
    /* Styles applied if the width is between 600px and 1024px */
}

Or even:

@media not screen and (max-width: 800px) {
    /* Styles applied unless the width is less than 800px */
}

In short, the possibilities are endless.

If you want to write clean code and avoid struggling later, as I mentioned earlier, the best approach is to adopt mobile-first:

1. Start with the mobile design
2. Then, use min-width to gradually adapt to larger screens
   • Tablets -> 768px
   • Computers -> 1200px

In my code, I have a mix of both approaches. That’s unfortunate because it makes maintenance harder.

By the way, the most complicated part to adapt was the table:

If I had to redo this project, I would go directly with a mobile-first approach. It would have saved me a lot of back and forth, and my code would be easier to maintain. It’s not a big tool, so I could do it. But I also need to focus on developing LexiStep.

---

Version Française

---

Qui utilise encore un ordinateur pour faire des recherches sur Internet ? Plus personne n’utilise d’ordinateur, tout le monde navigue depuis un téléphone…

Bon, évidemment, c'est un peu exagéré. Mais il est vrai qu’aujourd’hui, plus de 55 % des utilisateurs naviguent sur le web via un smartphone. Ainsi, si vous développez une application web, vous n’avez pas d’autre choix que de la rendre 100% responsive.

C’est précisément ce que j’ai fait avec mon simulateur de retraite anticipée avec Hive. Il est en ligne depuis presque deux semaines, mais il n’était toujours pas optimisé pour mobile. J’ai donc pris le temps de m’en occuper :

Je ne sais pas comment vous allez visualiser cette image, mais comme vous pouvez le voir, tous les éléments s’alignent correctement les uns après les autres. L’interface est aérée, l’utilisateur comprend ce qu’il se passe d’un coup d’œil, et rien ne se chevauche. Bref, c’est optimisé pour une navigation mobile.

Et pourtant, au départ, j’avais ça :

Autant dire qu’il y avait un sacré boulo* à faire.

Lorsqu’on développe un outil web, il faut faire l’inverse de ce que j’ai fait : commencer par la version mobile. C’est beaucoup plus simple d’adapter ensuite le design aux écrans plus larges, plutôt que l’inverse.

D'ailleurs, tout ça est possible grâce aux media queries en CSS, qui permettent d’appliquer des styles spécifiques selon la taille de l’écran.

Voici comment cela fonctionne :

@media (condition) {
    /* Styles CSS appliqués si la condition est remplie */
}

C’est assez intuitif. Par exemple, pour appliquer un style uniquement si l’écran fait 600 pixels de large ou moins, on écrit :

@media (max-width: 600px) {
    /* Styles CSS appliqués si la condition est remplie */
}

Dans ce cas, dès que la largeur de l’écran est inférieure ou égale à 600px, les règles CSS à l’intérieur seront appliquées.

Voici quelques options utiles avec les media queries :

• max-width : Applique les styles jusqu’à une largeur donnée.
• min-width : Applique les styles à partir d’une largeur donnée.
• max-height / min-height : Même principe, mais pour la hauteur.
• orientation: landscape : Lorsque l’utilisateur est en mode paysage.
• orientation: portrait : Lorsque l’utilisateur est en mode portrait.
• min-resolution: 2dppx : Applique une règle spécifique aux écrans haute résolution (Retina). (Je ne l’ai jamais utilisé, mais ça peut être utile.)

On peut aussi combiner plusieurs conditions grâce aux mots-clés and, or et not.

Par exemple :

@media (min-width: 600px) and (max-width: 1024px) {
    /* Styles appliqués si la largeur est entre 600px et 1024px */
}

Ou encore :

@media not screen and (max-width: 800px) {
    /* Styles appliqués sauf si la largeur est inférieure à 800px */
}

Bref, les possibilités sont infinies.

Si vous voulez coder proprement et éviter de galérer plus tard, comme je le disais un peu plus haut, la meilleure approche consiste à adopter le mobile-first :

1. Commencer par le design mobile
2. Puis, utiliser min-width pour adapter progressivement aux écrans plus grands
   • Tablettes -> 768px
   • Ordinateurs -> 1200px

Dans mon code, j’ai un mélange des deux approches. C’est dommage, car c’est plus difficile à maintenir.

D’ailleurs, le plus compliqué à adapter était le tableau :

Si je devais refaire ce projet, je partirais directement sur une approche mobile-first. Ça m’aurait évité pas mal d’allers-retours et mon code serait plus facile à maintenir. Ce n'est pas un gros outil, donc je pourrais le faire. Mais il faut aussi que je me concentre sur le développement de LexiStep.

---

Pictures are screenshots that I took. The English translation was done using DeepL's API.