Forfait - RWD

Comprend : Design de votre site pour respecter les standards du web responsable (RWD), création de la feuille de style, réalisation des images et programmation d'une page PHP ou XHTML contenant tous les styles.

Forfait hébergement web, installation du gestionnaire de contenu et intégration du contenu web en sus.

 

____________________________

Pourquoi un site responsable?

J’ai récemment rencontré des entrepreneurs ayant pour projet de créer un « site Web pour téléphone intelligent ». Cette idée est intéressante, car à première vue, elle offre un outil puissant pour contrecarrer la sédentarité des ordinateurs de bureau. En tant que créateur de sites Web, je pense que ces demandes sont rassurantes, puisqu’elles me permettent d'exposer à ce client une définition claire des problèmes associés au nouveau médium de navigation.



Sur le Web, le contenu change souvent d’une semaine à l’autre, par contre, l’architecture est définie par sa permanence. En tant que webmestre, mon travail revêt un aspect éphémère. Il suffit de me souvenir des sites que j'ai créés au cours des 15 dernières années pour me rendre compte que ceux-ci sont régulièrement modifiés ou remplacés dû aux nouvelles contraintes techniques qui jouent sur la taille des fenêtres, la résolution des écrans, les préférences des utilisateurs, les polices de caractères installées… Ces éléments ne sont qu’une petite partie des imprévus à prendre en considération lors de la mise en ligne d'un site Web. 

 

Notre environnement change, peut-être plus vite qu’on ne le souhaiterait. La navigation mobile devrait surpasser celle des ordinateurs de bureau d’ici trois à cinq ans. Plusieurs consoles de jeux, de lecteur Blueray et même de nouvelles télévisions intelligentes sont maintenant équipées d’une connexion WiFi. On assiste à la multiplication de périphériques : claviers, souris, manettes (comme la Kinect), interfaces tactiles... Pour résumer, nous devons, plus que jamais, gérer un nombre croissant de supports informatiques, de systèmes d’entrée de données et de navigateurs. Ce qui, à coup sûr, changera notre méthodologie de travail.

Dans le monde du Web, le défi est de taille : comment nous adapter et transposer les produits et services que nous proposons afin qu'ils soient les plus durables possible?


Une base flexible


Prenons un exemple de mise en page standard en deux ou trois colonnes que l'on voit régulièrement pour les sites optimisés pour les ordinateurs de bureau. Comment faire pour que ces trois colonnes ne deviennent pas d'une dimension microscopique lorsqu'on visionne le site via un téléphone intelligent? La solution est basée sur un système de grille fluide et flexible qui s'adaptera automatiquement à la largeur de l'écran et son orientation (portrait ou paysage). Pour ce faire, il ne suffit pas de donner des dimensions en pourcentage, mais bien de faire en sorte que les colonnes soient des blocs de contenus qui se placeront un en dessous de l'autre lorsque l'écran sera trop petit pour les placer l'un à côté de l'autre.  

 

Devenir réactif


« Le webdesign responsable » est une nouvelle tendance qui permet de créer des sites Web dont le but principal est d’obtenir une visibilité optimale, peu importe le médium.

 

Découvrir les requêtes de média


Depuis l’arrivée du CSS 2.1, nos feuilles de style ont gagné en popularité sous l’effet de la diversité des types de média. Si vous avez déjà rédigé une feuille de style destinée à l’impression, vous connaissez déjà le concept.

 

Puisque les feuilles de style alternatives ne sont pas utilisées uniquement à l’impression, le CSS fournit une myriade de types de média, chacun prévu pour une famille de périphériques Web. Mais l’implémentation est souvent imparfaite. Il arrive même que
certains médias soient tout bonnement ignorés.

Heureusement, le W3C a intégré une requête de médias (« media queries ») au CSS3, ce qui permet d’améliorer la compatibilité avec les différents types de média. 

En clair, cette nouvelle requête interroge le média pour vérifier si sa résolution horizontale est inférieure ou égale à un format donné (disons 320 pixels pour les petits écrans comme le iPod). Si oui, alors le site s'affichera selon les informations structurales indiquées dans la feuille de style alternative.

De plus, si on ouvre la page contenant cette feuille de style alternative avec un ordinateur de bureau et qu’on réduit la taille de la fenêtre à moins de 320 pixels de large, les éléments vont se repositionner automatiquement les uns au-dessus des autres (ou selon la feuille de style alternative). 

On peut conserver la même approche pour les écrans larges. Pour les résolutions plus importantes, on peut ajouter des colonnes, ce qui rendra notre mise en page plus équilibrée.

Mais ce n’est que le début. À partir des requêtes de média intégrées aux feuilles de style alternatives, on peut jouer sur de multiples facteurs au-delà de la disposition des images ou des colonnes. À titre d'exemple, on peut utiliser des mises en page différentes, chacune dédiée à un éventail de résolutions, en remplaçant un menu (horizontal) contenant un sous-menu par un menu d'icônes dans lequel il sera plus facile d'y naviguer avec un téléphone intelligent.

« Le webdesign responsable » ne se limite pas aux modifications de la mise en page. Les requêtes de média permettent des réajustements incroyablement précis pendant la réorganisation des pages : on peut augmenter la taille de la zone cible, choisir de montrer ou cacher des éléments pouvant améliorer la navigation, modifier graduellement la taille du texte...

 

Quelques informations techniques et utiles


Les requêtes de média sont parfaitement compatibles avec les navigateurs les plus récents, tels Safari 3+, Chrome, Firefox 3.5+, Explorer 9+ et Opera 7+, de même que la plupart des navigateurs pour mobiles (Opera mobile et WebKit par exemple). Les versions plus anciennes de ces navigateurs ne sont pas compatibles avec les requêtes de média.

Un outil que j'utilise régulièrement pour vérifier que mes mises en pages s'ajustent bien sur les téléphones intelligents est l'émulateur Opera que vous pouvez télécharger gratuitement ici : http://fr.opera.com/developer/tools/mobile

Ou consultez cette liste d'émulateurs pour mobiles

 

 

Allons de l’avant


Les grilles fluides, les images flexibles et les requêtes de média sont les trois ingrédients indispensables d’un Web design responsable et durable, mais leur utilisation nécessite l’adoption d’un nouveau mode de pensée. Au lieu de laisser notre contenu de côté pour cause d’incompatibilité ou de configuration spécifique des supports, les requêtes de média nous permettent d’améliorer notre travail pour le publier sur divers supports. Car souvent, le client préfèrera payer un petit supplément pour rendre son site accessible par les téléphones intelligents, plutôt que de commander des applications Apple ou Androïd. Pour ceux qui aimeraient tout de même une petite application personnalisée, voici un outil gratuit et facile d'utilisation pour créer et publier vos applications : http://www.appypie.com

Aujourd’hui plus que jamais, nos créations visent à être exposées sur un maximum de supports. « Le webdesign responsable » nous permet d’aller de l’avant et nous offre enfin un moyen de concevoir des sites qui ont une chance de durer.

 

Texte corrigé par Caro





Vous avez article(s) dans votre panier




Annie - LaGraphiste

Directrice artistique et graphiste depuis 1997, entrepreneure à plein temps depuis 2001, LaGraphiste enr. Annie Mc Clure se définit comme une artiste multidisciplinaire. Amoureuse du design publicitaire et de la programmation de site web, elle fera tout en son pouvoir pour vous assurer un service haut de gamme à des prix compétitifs. 

QR Contact 




Courriel
La publicité c'est dans notre nature. conception design, multimédia, production et buzz marketing