Le Responsive Webdesign, vous en avez déjà entendu parlé si vous vous êtes intéressé au web ces 6 derniers mois. Pour résumer, il s’agit de la conception de sites web adaptatifs. Adaptatifs ? Le site internet conçu selon ce principe s’adapte automatiquement au support sur lequel il est lu. Comment faisait-on avant l’ère du Responsive Webdesign ? Deux problèmes existaient avant que la conception de site internet en responsive webdesign n’apparaisse. Le premier était lié à l’affichage des sites internet sur smartphones. Ceux-ci apparaissaient tels que sur un ordinateur fixe. Outre un problème de lisibilité dû à la taille des écrans des portables, l’ergonomie n’était pas adapté à ce support. Le deuxième problème est lié à la technologie flash. Il est important de se rappeler que les plateformes mobile d’Apple ne prennent pas en charge le format flash : iPhone et iPad ne lisent pas la technologie flash. Avant le responsive webdesign, il était proposé aux sociétés qui souhaitaient avoir un site en flash de créer une deuxième version de site lisible sur mobile.Cette solution est toujours viables, cependant elle peut avoir un coût supérieure et nécessiter plus de temps lors des mises à jour. Tout dépend du développement au niveau de l’administration du site internet. En effet si le site n’a pas été conçu sur une administration unique à la fois pour la version en flash et la version mobile, l’administrateur devra mettre à jour la version de site en flash et à jour la version mobile. Concevoir un site sans penser à cela est idiot me direz vous. Pas forcément. En fonction des fonctionnalités du site et du brief client, la création d’une administration commune (la page x version mobile et version flash sont mise à jour via une seule et unique « page » sous l’admin) peut être trop complexe à mettre en place, ou trop complexe à utiliser par l’administrateur ensuite. Panorama d’écrans utilisé actuellement Quel intérêt pour le Responsive Webdesign ? Comme vous l’aurez compris, les deux première raisons pour concevoir un site en responsive webdesign sont liées à la facilité de mise à jour et de coût. le nombre d’internautes à lire leurs e-mails sur mobile et surfer sur internet via leur mobile est croissant. Il est donc indispensable d’avoir un site et des e-mails lisibles sur ses plateformes. Le responsive webdesign ne se résume pas uniquement à son adaptabilité sur tout support. Il s’agit également d’optimisation des contenus et de leurs mises en page. Ce type de webdesign permet une conception basée sur un système de grille modulable en fonction de la résolution de chaque support utilisé. Pensez aux images et à leurs affichage selon les différents supports La conception selon les principes du responsive webdesign considèrent que les images doivent être adaptables et adaptées au support. Il faut donc les rendre « fluide ». Afin de rendre vos images fluides, un seul style est nécessaire. il faut ajuster le width de vos images à 100% En faisant cela, votre image va s’adapter à tout type de largeur et être une taille égale à 100% de l’espace dans laquelle elle s’affiche. Cela signifie que, si votre fichier image fait 760px de large et que vous l’affichez dans un espace de 1500 px de large, celle-ci va être étirée et donc sa qualité va en être altérée. Pour éviter cela, il faut utiliser des attributs pour lui donner une largeur comprise entre une taille minimum et une taille maximum. Vous pouvez faire pareille pour la hauteur. Cela permet de les rendre fluides. Une navigation du site web pensée pour être adaptable La navigation doit également s’adapter : le menu est à l’horizontal sur tous les supports et passe également à la verticale sur tablettes et smartphones. Cette spécificité est à prendre en compte principalement pour des sites avec beaucoup de pages. En fonction de l’affichage que vous aurez choisi, du graphisme, cela aura un impact sur la manière de l’afficher sur mobile ou tablette, qui sera foncièrement différent de l’affichage sur poste fixe. Pensez bien que les smartphones et tablettes ont un double affichage : verticale et horizontale. De plus, si vous concevez votre site sur un CMS, vous aurez peut être besoin d’ajouter des pages. Le nombre de pages à ajouter au premier niveau du menu sera donc à prendre en compte au moment de la conception également. Le choix de la stratégie de navigation est donc une décision à fort impact, et doit être basée sur le contenu de votre site et son architecture de l’information, avec un certain nombre de considérations de conception. Pour gagner en visibilité et en facilité de navigation dans le site sur les versions Smartphone notamment, il est important de supprimer les rubriques qui ne sont pas utiles. Une inscription à une newsletter n’est pas indispensable, elle est souvent peu pratique du fait de la petite taille du champ. Sur les smartphones, le contenu est organisé en une seule colonne verticale. Si votre site est composé d’une barre latérale avec des outils complémentaires, pensez bien à l’utilité de chacun d’entre eux, et à leur positionnement sur un smartphone. Optimisé pour le référencement naturel, supporté par tous les navigateurs, le responsive webdesign permet donc de faciliter la navigation sur les sites internet. Encore au balbutiement de la discipline, nous risquons devoir émerger des améliorations intéressantes dans l’année ou les deux années à venir. Donnant de plus en plus de liberté à la créativité, et aidant l’internaute à mémoriser ce qu’il voit, via une expérience utilisateur performante.