Il y a quelques années, les appareils mobiles tels que les cellulaires et les tablettes occupaient une mince place au sein de la société. Aujourd’hui, ce n’est certainement plus le cas! Regardez autour de vous, les gens ont les yeux rivés sur leur iPhone ou leur Galaxy Tab. C’est maintenant si facile d’obtenir l’information recherchée sur son appareil portable de choix. En quoi ça a rapport à votre site web vous demandez-vous? Et bien si la majorité des gens effectuent des recherches sur des petits écrans, votre site web se doit de s’adapter parfaitement à ceux-ci!
Qu’est-ce que le «Responsive Design»?
Le «Responsive Design», communément appelé design adaptatif dans la langue de Molière, est une technique visant à rendre un site web adapté à tout type d’appareil et de résolution. Un site web adaptatif est un site qui a une structure fluide sous forme de blocs qui s’emboitent un par-dessus l’autre quand la taille de l’écran diminue, de sorte d’avoir une vue verticale du site. Imaginez que vous avez 4 photos sur votre site web qui présentent vos réalisations. Sur un ordinateur, les photos vont être disposées une à côté de l’autre. Toutefois, sur un cellulaire, disposer les 4 photos une à côté de l’autre ne serait pas du tout optimal puisque le tout serait beaucoup trop petit. La solution? Les disposer une par dessus l’autre!
Voici une liste de quelques techniques que nous utilisons pour réaliser un design responsive :
- Création des «Media Queries», qui permettent entre autres d’appliquer des règles de style spécifiques à une ou plusieurs résolutions. Par exemple, si vous avez une barre latérale («Sidebar» pour les intimes) sur votre site web et que vous ne voulez point l’afficher sur les cellulaires et les petites tablettes, une Media Query entre en jeu.
- Utilisation des unités relatives telles que les pourcentages et les «EM». En bref, ça fait en sorte que le texte et les images ont un format relatif par rapport à la largeur de l’écran, dans le but que rien ne déborde à l’horizontal. Après tout, quoi de pire que de devoir naviguer à l’horizontal sur un cellulaire?
- Nous redimensionnons et recadrons au besoin les images afin qu’elles soient mieux adaptées. Par exemple, vous voulez publier une image prise sur le long mais vous voulez qu’elle soit bien visible sur un cellulaire utilisé à la verticale. La solution? Nous pouvons recadrer votre image afin d’en conserver que la partie importante. Quoi faire si vous voulez conserver l’image en entier? Aucun problème! Nous allons simplement faire en sorte qu’elle respecte la largeur maximale de l’écran utilisé.
Quoi faire si mon site web n’est pas adaptatif?
Premièrement, vous devez déterminer si votre site web est présentement adaptatif ou pas. Voici un outil vous permettant d’avoir la réponse :
Si l’analyse vous retourne le message «Non adaptée aux mobiles», ça veut dire que votre site web n’est pas responsive. Si c’est le cas, pas de panique! Notre équipe est là pour vous assister. Ce qu’il est important à savoir, c’est qu’un site web doit être pensé adaptatif dès le début de sa création. Chaque élément de votre site doit avoir sa place unique et ergonomique, peu importe la résolution de l’écran de l’utilisateur. Ceci dit, si votre site web n’est pas adaptatif, nous allons devoir concevoir une toute nouvelle structure fluide dans laquelle votre contenu sera intégré de façon minutieuse!
Quels sont les coûts d’une refonte en responsive?
En fait, étant donné que nous devons repenser la structure de votre site web de A à Z, les coûts sont sensiblement les mêmes que pour une nouvelle conception. Toutefois, étant donné que vous avez déjà en ligne tout votre contenu, nous allons économiser du temps et comme on dit, du temps c’est de l’argent!
Nous offrons gratuitement à tous une analyse détaillée de la compatibilité mobile de votre site web avec nos recommandations et solutions.
Laisser une réponse