Quoi de mieux pour redéfinir l’image de son entreprise que de lancer un tout nouveau site Web ? Avec le récent lancement de notre nouvelle gamme de produits VPS, nos atours doivent représenter nos dessous. Funio.com ne se ressemble plus !
Nous uniformisons graduellement toutes nos interfaces à ce nouveau look. Prochainement, ce sera le tour de notre Hub Client, notre infolettre, notre blogue et nos lettres de bienvenue. Notre site est désormais plus convivial, plus clair et franchement plus agréable à regarder !
Si vous voulez comparer à l’ancien site, cliquez ici.
Les dessous du design
Nous pouvons contempler le nouveau site Web Funio.com afin d’apprécier sa qualité graphique et son ergonomie, mais ce qui se trouve derrière le site est tout aussi important, sinon plus. Quand nous avons déterminé nos besoins pour notre nouveau site Web, nous savions déjà que nous devions avoir un design attrayant qui correspond à notre identité. Ensuite, nous avons identifié 3 priorités :
- Rapidité de chargement/navigation
- Accessibilité mobile
- Multiplateforme
Un site Web rapide
Étant donné que nous utilisons déjà des serveurs très performants, nous devions nous concentrer sur les composantes du site pour optimiser sa vitesse de chargement. Première décision importante : créer un site statique. Quelle est la différence entre un site statique et un site dynamique ?
- Dynamique : Votre fureteur Web demande le site au serveur qui interprète la demande selon certains paramètres (par exemple, si un utilisateur est connecté), pour retourner un contenu adapté à ces conditions. Les sites PHP sont des sites dynamiques.
- Statique : Votre fureteur Web demande le site au serveur et reçoit immédiatement le contenu du site sans prendre de paramètre en considération. Il retourne donc toujours le même contenu. N’ayant pas d’intermédiaire, le contenu du site est renvoyé plus rapidement à l’utilisateur.
Ensuite, pour nous aider, nous devions trouver une plateforme pour gérer dynamiquement notre contenu statique. Nous avons opté pour Middleman, une application qui permet de créer un site Web statique, mais qui contient tous les raccourcis et les outils modernes du développement Web.
Dans le cadre d’optimisation du site, nous avons utilisé une police de caractères pour remplacer les icônes qui se trouvent un peu partout sur le site Web, réduisant ainsi la quantité d’éléments chargés sur la page. Par exemple, ces icônes utilisées pour notre page VPS sont une police de caractères.
Nous planifions effectuer quelques optimisations supplémentaires très bientôt, dont faire l’utilisation de « sprites » et modifier la taille des images chargées en se basant sur la grandeur du navigateur qui charge la page.
Site multiplateforme & mobile
De nos jours, il est primordial d’avoir un site Web qui peut être consulté facilement sur les mobiles. Nous avons opté pour le design adaptatif, la méthode la plus recommandée par les professionnels sur Web.
Un site Web adaptatif utilise une technique qui demande uniquement une base de code pour toutes les plateformes (Web, mobile, tablette). Le contenu de la page s’adapte à la largeur de l’écran en utilisant des points d’interruption prédéfinis. Pour nous aider, nous avons utilisé des librairies performantes déjà optimisées pour différentes plateformes, dont Bootstrap et Sass (CSS).
Nous avons encore quelques optimisations à effectuer pour que notre site soit plus convivial sur tous les mobiles. Néanmoins, le site répond très bien sur tous les appareils au moment où je rédige ces lignes.
Commentaires
Voici quelques-uns des commentaires de l’équipe Funio lorsqu’ils ont vu le résultat final de notre nouveau site Web.
- Woah ! Malade.
- Vraiment un beau travail, les gars. Vraiment.
- C’est notre site à nous ça ?
- Tu es sûr que le CTA à cet endroit va bien fonctionner ?
- Oh, wow ! J’ai réellement l’impression que notre site nous représente pour vrai maintenant.
- Nous faisons partie des ligues majeures depuis bien longtemps. Avec un site comme ça, on l’affiche d’aplomb.
- Super ! On s’attaque à quoi maintenant ?
Nous aimerions connaître vos commentaires. Contactez-nous en utilisant la section d’assistance de votre Hub Client, ou parlez à notre équipe via LiveChat !
