Cela vous est sans doute déjà arrivé : un beau matin, en vous connectant à l’un de vos sites favoris, vous vous apercevez que ce n’est plus comme avant et vous vous sentez troublé. Vous tâtonnez pour retrouver ce pour quoi vous êtes venus, et même pire, au-delà des problèmes liés à l’ergonomie, vous trouvez le tout vraiment très laid. Et oui… enterrer vos utilisateurs les plus fidèles est un des plus gros risques d’un redesign de votre site internet.

Bien entendu, plus un site comporte de fonctionnalités et de pages plus les risques sont importants. Mais même un site de plus petite envergure, peut se faire descendre par la critique s’il ne tient pas compte des attentes de ses visiteurs. C’est pourquoi nous vous proposons un billet inspiré de ce très bon article du site webdesignerdepot.

La question mérite d’être posée : pourquoi, quand et comment bien redesigner ?

Le guide suivant devrait vous aiguiller sur le droit chemin pour recréer et repenser votre site tout en satisfaisant vos utilisateurs. Et si jamais vous êtes actuellement dans le cas d’une refonte échouée, il n’est pas trop tard ! On pourra tout de même vous donner un coup de pouce.

Faire du neuf avec du vieux, le problème de la refonte

Quand vous décidez qu’une refonte est nécessaire pour votre site internet, il y a énormément de paramètres à prendre en compte, au-delà des simples aspects techniques.

Souvenez-vous que votre site est déjà régulièrement visité, et a sans doute des utilisateurs réguliers. Ces derniers ont des attentes particulières lorsqu’ils visitent votre site. Vous avez besoin d’avoir de bonnes raisons pour changer tel ou tel process/fonction/élément graphique. Vous devez en tenir compte aussi bien au début que tout le long du processus.

Communiquez avec vos utilisateurs actuels
Contrairement à une création ex-nihilo, un redesign de site possède déjà une base utilisateurs.  Faire participer ces derniers dès le début de votre remaniement ne pourra jouer qu’en votre faveur. Après tout, ce sont ces personnes qui utilisent votre site, et qui y sont déjà familières. Bien entendu, vous tomberez toujours sur d’irréductibles internautes, complètement fermé à toutes formes de changements, mais d’autres pourront vous donner un aperçu intéressant de comment ceci pourrait être amélioré, ou bien comment cela aurait besoin d’être modifié.

Il est important de tenir compte de la manière dont les internautes utilisent votre site avant la refonte. La façon dont vous voudriez qu’ils utilisent vos outils n’est pas forcément en accord avec la vraie utilisation qu’ils en font. Prenez cela en compte quand vous redesignez et prenez garde de ne pas briser les habitudes de navigation de vos utilisateurs sans une excellente raison.

Testez à la fois pour les futurs et les anciens utilisateurs
On pourrait croire qu’il faut tester votre nouveau design uniquement sur les futurs utilisateurs pour obtenir les meilleurs résultats. Ne connaissant pas le design, ils ne sont justement pas influencés par l’existant. C’est une bonne stratégie si vous redesignez quelque chose comme une fiche produit sur un site e-commerce (le but ici est d’attirer de nouveaux clients). Mais si vous réaménagez un site entier, vous avez besoin du feedback des gens qui utilisent actuellement votre site. La dernière chose dont vous avez besoin, c’est de faire fuir tous vos utilisateurs.

Vous pouvez par exemple laisser entendre que vous testez un nouveau site. Offrez leur le choix de le tester et soumettez-leur un questionnaire non-intrusif, ou un mécanisme similaire pour recueillir ce qu’ils en ont pensé.

Laissez les utilisateurs changer l’interface selon leurs propres envies
Ce point est particulièrement important pour les sites “outils”. Laisser les utilisateurs switcher entre la nouvelle et l’ancienne interface selon leur convenance est la meilleure façon de se prévenir des plaintes. Les sites de médias sociaux sont surement les meilleurs exemples pour illustrer cette facette (comme le fait Twitter avec la possibilité de retourner sur l’ancienne interface). Laisser-les changer à leur rythme, cela évitera les mauvaises surprises et la frustration.

Il est par contre important d’imposer une deadline pour effectuer ce switch. Faites-vous bien comprendre des utilisateurs : ils doivent assimiler qu’ils peuvent changer autant de fois qu’ils le veulent tant que la deadline n’est pas atteinte, mais qu’après, la nouvelle version s’appliquera à tout le monde. Cela évitera à quelques trainards de rester indéfiniment sur l’ancien site.

Facilitez l’envoi de feedback après la refonte
Il existe pléthore d’outils pour collecter les impressions des utilisateurs. Utilisez-les et trouvez ce que vos visiteurs aiment ou n’aiment pas. Ensuite, assurez-vous de relever tout ce qui est soulevé par plus d’une poignée de visiteurs. Rappelez-vous : pour chaque visiteur qui exprime un besoin ou un souci, il pourrait y en avoir des dizaines qui ressentent la même chose sans rien dire.

Exprimez clairement vos raisons
Il est important d’énoncer à vos utilisateurs quelles raisons vous ont poussé à la refonte. Beaucoup d’internautes qui ne sont pas familiarisés avec les aspects techniques liés au fonctionnement, pensent que la refonte existe pour des raisons purement esthétiques. Faites-leur savoir quelles fonctionnalités vous comptez ajouter ou bien ce que les améliorations d’interface utilisateur vont apporter. Un billet de blog, expliquant votre plan de redesign peut être un bon moyen d’ouvrir le dialogue.

Proposez un tutoriel expliquant les changements majeurs
Si vous changez le fonctionnement de votre site ou si vous procédez à des modifications drastiques des éléments des pages, cela serait une bonne idée d’offrir une vidéo, un schéma, ou n’importe quel autre support faisant le tour des nouvelles caractéristiques du site. Cela aidera les utilisateurs à s’adapter plus rapidement aux nouveautés et de ne pas se sentir perdus. De plus, cela donnera l’impression que vous vous souciez d’eux, et que vous voulez que leur expérience soit aussi bonne que possible.

Que faire si votre refonte a déjà échoué ?

Donc, vous venez de mettre en ligne votre design retravaillé, malheureusement à part des plaintes, rien de bon ne ressort, aussi bien de la part des anciens utilisateurs que des nouveaux venus.
Que devez-vous faire ? Devez-vous retourner sur l’ancienne version ?
Que faire si ce n’est pas une option, ou que vous avez investi des milliers d’euros et des mois dans le nouveau site ?

Tout est question de contrôle
La première chose que vous devez faire est de reconnaître que votre refonte n’a pas répondu aux attentes des internautes. Faites savoir aux gens que vous entendez leurs revendications et que vous vous souciez de leurs préoccupations. Que vous le fassiez grâce à Twitter, votre blog, ou tout autre support, dépend essentiellement de l’endroit depuis lequel vous pouvez atteindre le plus grand nombre de vos utilisateurs.

Identifier et traiter les plaintes
Cibler les plaintes spécifiques si vous le pouvez. Si tout le monde se plaint de combien telle ou telle fonction est difficile à trouver, répondez-y immédiatement. Il existe plusieurs façons de le faire : vous pouvez simplement poster sur votre blog ou envoyer un courriel contenant toutes les informations utiles. Vous pouvez également re-procéder à un changement dans l’ergonomie, l’arborescence ou le design pour rendre cette fonction plus facile d’accès. Si c’est vraiment un gros problème, faire un changement est probablement la meilleure solution.

N’ayez pas peur de revenir en arrière
S’il y a des plaintes énormes, ou si vous constatez une baisse de trafic fulgurante, n’ayez pas peur de downgrader tout ou partie de votre site. Du moins jusqu’à ce que des correctifs puissent être appliqués. Si le succès de votre site souffre à cause de la refonte, il n’y a aucun sens à continuer sur cette voie. Il est préférable de faire marche arrière en reconnaissant l’insatisfaction de vos visiteurs  (et donc montrer que vous placez l’expérience utilisateur avant tout) plutôt que d’insister aveuglément.

Surveillez attentivement

Chaque fois que vous lancez un nouveau design, il est important de suivre attentivement tout ce qui « entre » et « émane » de votre site.

Voici les points principaux à ne pas laisser de côté :

• Définissez des objectifs pour les différentes fonctions/pages de votre site (cette page doit avoir X taux de conversion, ne doit pas avoir un taux de rebond supérieur à X %, etc.) et assurez-vous régulièrement que le flux de visiteurs ne chute pas brutalement.
• Les différents outils d’analyse (Google Analytics pour n’en citer qu’un) peuvent vous aider dans ces tâches. Suite à l’analyse, ils permettent d’effectuer des changements proactifs sur votre site, anticipant ce que les visiteurs pourront éventuellement vous reprocher.
• Assurez-vous en permanence de recueillir les informations d’analyse de base pour vous donnez des repères sur l’évolution de ces données.
• Également surveillez le ton des messages postés sur les médias sociaux au sujet de votre restructuration. Si vous voyez beaucoup de plaintes, ou même beaucoup de confusion, il faut être proactif et ne pas hésiter à engager la conversation.
• Laisser couler est le meilleur moyen de provoquer un « bad buzz ». Il est important d’informer au mieux vos utilisateurs pour qu’ils sachent que les changements effectués sont fait en leur faveur et pas dans un but indéfini.

Co-écrit avec Nicolas Bayard.

Au cours de la chaîne de création d’un site internet (ou d’un projet web plus généralement) le webdesigner est amené à interagir avec d’autres métiers. Pour une fluidité dans les échanges, il est important de tenir compte des contraintes des autres intervenants qui vont utiliser votre travail.

Ceci nous amène à notre problématique : comment faciliter le workflow en tant que webdesigner ? À quels niveaux chacune de mes décisions va impacter la chaîne de création d’un site internet ?

Nous nous attarderons principalement sur les interactions avec le référenceur et l’intégrateur (celles avec les autres métiers étant plus réduites, voire inexistantes).

Prise en compte des collaborateurs

Vous remarquerez que souvent nous débordons du cadre du design pur et dur, cela reste pertinent avec le fait que le workflow d’un projet web constitue un ensemble, divisé en multiples interactions. Si le designer interagit avec d’autres personnes, la réciproque est aussi vraie. Certains des points abordés serviront donc également à d’autres rôles.

Interactions avec le référencement

Bien que le design n’impacte pas beaucoup le référencement, il est souvent amené à structurer l’information et à créer une navigation ergonomique. Dans ces cas précis, le designer doit faire attention à ne pas créer de points bloquants pour l’accessibilité et la navigation des internautes ainsi que des moteurs de recherche sur le site.

Cela peut passer par plusieurs aspects :

• L’utilisation de Splash Page (page d’accueil d’un site ne présentant qu’une image ou une animation Flash et un lien d’entrée sur un site Web).  La Splash Page possède un certain nombre d’inconvénients :
  • elle retarde d’une page l’accès à l’information pour les visiteurs, leur proposant une page parfois pauvre en contenu.
  • elle offre également une page d’accueil difficile à référencer pour les moteurs de recherche, car elle ne contient pas ou peu de contenu référençable. Dans le pire des cas, le lien d’entrée est incrusté dans le Flash et il est donc impossible pour les robots de suivre le lien.
  • enfin, si l’image est de grand format ou si l’introduction en Flash est complexe, la page risque d’être longue à charger.

• L’utilisation abusive d’Ajax dans l’interface. Beaucoup d’ergonomes et de développeurs essayent d’impressionner les internautes en utilisant massivement cette technologie pour fluidifier la navigation, mais c’est souvent une erreur, car le contenu Ajax (chargé dynamiquement donc) ne peut pas être lu, donc indexé par les moteurs de recherche. Pour pallier à ce problème il faudrait idéalement créer une alternative à ce contenu, doublant le travail de l’intégrateur.

• L’utilisation de Flash : de la même manière, par souci d’esthétisme ou de navigation, du Flash est parfois implémenté dans la page. Les moteurs de recherche ne pouvant pas lire cette technologie, il est déconseillé d’en abuser, et le cas échéant, créer une alternative (encore une fois, double travail à effectuer).

Interactions avec l’intégrateur

Sans nul doute, c’est envers l’intégrateur que le designer a le plus de responsabilités. En effet, c’est en grande partie du graphisme que va dépendre la charge d’intégration. Bien entendu, le but n’est pas de restreindre son imagination sous prétexte que l’intégrateur aura plus de travail, le principal étant de répondre aux objectifs du site. Cependant, amis designers, gardez en tête que :

• Vous vous devez d’être le plus minutieux possible ! Pas question de maquetter seulement deux pages et de se dire que le reste se déclinera aisément tout seul. Les meilleurs sites sont pensés et dessinés du header de la page d’accueil jusqu’au footer de la plus profonde des pages. Ce souci du détail vous vaudra les louanges des intégrateurs. En effet, le designer fournit souvent la maquette de la page d’accueil et des grandes entrées, mais rarement des pages plus profondes. Il ne faudra pas s’étonner si l’intégrateur comble par lui-même ces « blancs ». Il est donc important d’avoir un design poussé et validé avant de commencer l’intégration. Il est plus facile de retoucher un détail sur Photoshop plutôt que bidouiller « on the fly » pendant la phase de développement.

• Vous devez prendre en compte la charge de temps qui vous est attribuée ! Si vous êtes face à des deadlines assez courtes, ne vous lancez pas dans un webdesign et/ou une navigation trop sophistiqués. La création peut s’avérer très chronophage, et ainsi retarder un planning (pensez au chef de projet, avez-vous déjà essayé de tout décaler sur un Gantt ?). Au bout de la chaîne, ce sont souvent les intégrateurs/développeurs qui trinquent, en devant intégrer et/ou développer vos chefs-d’œuvre en un temps record afin de ne pas cumuler toujours plus de retard. La créativité à outrance joue souvent contre un planning serré. De plus, la simplicité et la sobriété peuvent être tout aussi importantes (pour ne prendre qu’Apple en exemple).

• Soulevons également le problème des typographies. Il est en effet souvent plus sympathique pour un designer d’utiliser des typographies exotiques afin de donner du relief à sa page et de titiller notre rétine en changeant de l’habituel Arial. Seulement voilà, même s’il existe actuellement beaucoup de techniques pour utiliser d’autres polices (font-face, cufont.js, etc.) que les typos web, aucune n’est parfaite, et cela causera toujours des soucis d’intégration selon la configuration et le navigateur de l’internaute. Et là encore on ne parle pas du temps supplémentaire que prendra l’intégrateur : pensez donc à voir avec lui si la police de votre choix est intégrable.

Enfin, voilà quelques détails souvent mis à la trappe mais primordiaux pour que le travail soit fait proprement et pour éviter toutes confusions et aller/retours inutiles :

• évitez d’être trop farfelu ou extravagant pour le design d’un site hyper dynamique qui contiendra de nombreuses pages différentes (site de e-commerce, site immobilier…). Le but de ces sites étant avant tout de convertir, le design ne doit pas prendre le dessus sur le produit. D’autant que le temps de chargement de ce genre de site est un critère déterminant.

• faites attention aux effets difficiles à intégrer et  à rendre cross browser (ombres portées, dégradés, coins arrondis, etc.)

• lorsque vous dessinez des boutons, faites bien attention à fournir à chaque fois les trois états possibles (normal, hover et active). En effet, cela n’incombe pas à l’intégrateur de deviner comment vous auriez dessiné les états manquants.

• triez et nommez vos calques ! Cela fait perdre du temps à l’intégrateur de se plonger dans le découpage d’une maquette où rien n’est nommé et où aucun calque n’est rangé.

Ces listes de conseils sont bien entendu non exhaustives et visent seulement à vous faire comprendre la synergie qu’il existe entre chaque membre d’un projet web.

Conseil ultime : apprenez le CSS !

Voila le point essentiel qui adoucira le passage de votre travail à celui de l’intégrateur. En effet, si vous n’êtes pas familiarisé à coder vos propres design, vous ne pouvez pas comprendre toutes les contraintes s’attachant à ce langage. Apprendre à intégrer changera votre façon d’aborder un design car vous aurez une meilleure compréhension de ce qui est possible ou complexe à réaliser pour l’intégrateur. De cette manière, la transition entre le design et le code se fera plus aisément. De plus, vous serez plus proches et pourrez mieux répondre aux attentes de l’intégrateur, maintenant que vous parlez tous deux le même langage. C’est un point crucial, vous donnant plus de valeur ajoutée et qui fera facilement la différence entre deux designers lors d’un projet web.

Nous finirons cette partie en insistant sur l’importance d’avoir une vision globale d’un projet et de son équipe. C’est en pensant un site internet comme une chaîne où chaque ressource est complémentaire qu’on en fait un lieu plus accessible, attractif et mieux conçu.

Co-écrit avec Nicolas Bayard

Facilité par l’émergence de nouvelles technologies favorisant la création de sites possédant une réelle identité graphique recherchée (HTML5/CSS3, Flash, Jquery…), le webdesign est devenu un outil de marketing efficace et  financièrement accessible.

A la base un outil de mise en forme simple visant à rendre un site « beau » et « agréable », le webdesign est désormais un outil puissant stimulant encore plus la concurrence : il faut avoir un design attirant et original à la « mode », tout en affichant une image de marque forte. Ainsi la majorité des entreprises ont changé leurs stratégies et adoptent une identité graphique recherchée en phase avec leur cible, ainsi que le message à véhiculer pour transformer le visiteur en acheteur.

Ce dossier n’est pas destiné à justifier l’utilisation d’un bon design (inévitable de nos jours), il s’agit plutôt de mettre en exergue les démarches à faire tant vis à vis du client que de l’internaute pour (re)proposer un webdesign adapté à un domaine d’activité.

Nous garderons aussi à l’esprit que le webdesign n’est pas qu’une façade colorée : c’est une activité en synergie avec d’autres métiers liés au web, et il y a donc des habitudes à prendre pour faciliter le workflow.

Gestion du client et prise en compte de l’internaute

Lorsque nous sommes face à une demande de webdesign, il s’agit souvent de proposer une orientation graphique qui plaît au client sans réellement prendre en compte l’internaute. Et si celui-ci est considéré, c’est bien souvent les goûts du client et du designer qui ont plus de poids que l’opinion de l’internaute.

Sensibiliser  et bien comprendre le client

Le client n’a pas forcément les mêmes connaissances que nous, son expérience est différente de la nôtre et il ne sait pas toujours vraiment ce qu’il veut. Il est de notre ressort de définir quel serait la meilleure façon de designer le site sans pour autant ignorer son opinion : si vous voulez faire mouche plus facilement avec vos premières propositions, il peut être très utile de rédiger un brief créatif à l’intention de votre client pour mieux cerner ses propres goûts et faire parfois apparaître de nouvelles problématiques qui ne s’étaient pas posées auparavant.

Ce brief permet de sonder l’esprit du client en posant des questions très simples :

• Quelles philosophie ou valeurs associez-vous à votre concept ?
• Quel est l’objectif (autre que faire des bénéfices) affiché par votre site ?
• Comment décririez-vous votre site en 3 idées ? En 3 adjectifs ? en 3 verbes ?
• A qui parle-t-on ?
• Quel est selon vous votre cœur de cible ?
• Quel serait l’objectif principal, en une phrase, d’un internaute qui utiliserait votre site ?
• Qu’attend en premier un individu, en une phrase, qui utilisera votre site ?
• Quels sont les points faibles, et les points forts de votre site?
• En quelques mots, en quoi votre site se distingue-t-il de ses concurrents ?

Bien entendu le client est toujours roi, mais même si une proposition de webdesign remplit les objectifs donnés et correspond au besoin, il faut garder à l’esprit que c’est le point de vue de l’utilisateur final qui déterminera si un projet web est un échec ou une réussite. C’est pour cela qu’il faut anticiper la réaction de l’internaute dès le moment où il arrive sur le site et sensibiliser le client sur l’importance de la prise en compte du futur utilisateur.

Il faut donc, dans un premier temps, faire comprendre au client que ce sont les goûts de l’internaute qui priment sur ses propres caprices : comment générer du trafic et augmenter les ventes si le visiteur ne s’identifie pas au site, ou pire, le trouve tout simplement laid ?

La rédaction d’un dossier d’étude vous aidera beaucoup dans cette démarche, outre prouver au client par a + b que votre choix est meilleur qu’un autre, il lui permettra aussi de prendre du recul sur son projet et favorisera l’émergence de nouvelles idées (tant au sein de l’équipe de création que du client).

Un dossier d’étude de webdesign classique se construit généralement par des analyses  graphiques et ergonomiques, suivies de recommandations. Pour avoir des bases plus solides, vous pouvez également aller au delà du simple benchmark graphique et analyser la direction artistique prise par vos concurrents pour satisfaire la cible, c’est à dire comment répondre graphiquement à une problématique donnée.

Analyser les gouts de l’internaute

Dans ce dossier, il est d’usage de faire quelques recherches sur la cible, mais celles-ci sont trop souvent centrées sur la tranche d’âge concernée et le type d’internautes (homme, femme, étudiant, cadre…).

Avant toute proposition de webdesign, il est donc préférable d’accompagner votre dossier d’un « profil idéal d’utilisateur » pour justifier vos choix d’orientation graphique.

L’objectif est de dresser un profil psychologique de l’internaute en utilisant des questions simples permettant de mieux cadrer sa personnalité et ses goûts. Soyez inventifs, communiquez sur votre image de marque, posez des questions inattendues et montrez que vous vous intéressez à leurs opinions ! Vous pouvez par exemple leur demander de décrire votre nouveau site en trois adjectifs, de lui associer une ou plusieurs couleurs, qu’est-ce que l’internaute attend du service qui va lui être proposé, qu’est ce qu’il aime (ou n’aime pas) voir et lire sur le site, et quels types de fonctionnalités il préfère voir mis en avant sur le site ? C’est en quelque sorte un brief créatif à l’intention de vos futurs visiteurs.

Le designer doit bien comprendre qui est la cible que désire viser le client et quels sont les besoins réels de l’internaute. Cela permettra au designer de savoir sur quels éléments il devra le plus se concentrer et ceux qu’il devra éviter. On évitera par exemple une identité graphique trop chargée et trop poussée quand c’est le profil même de l’utilisateur qui construit le contenu d’une page (c’est le cas de Facebook ainsi que LinkedIn).

Comme outil d’analyse, n’hésitez pas à proposer au client le lancement de sondages sur les réseaux sociaux afin de déterminer ce qu’attend l’internaute ou bien le lancement d’une version béta pour avoir des retours avant le lancement de la version finale.

Une fois les goûts de l’utilisateur cernés, le designer doit prendre en compte le contenu du site par rapport au message à faire passer à l’internaute : quel est l’intérêt de réaliser un webdesign hyper créatif et très à la mode si l’utilisateur ne trouve même pas ce qu’il est venu chercher ?

Il est ainsi très important de bien hiérarchiser l’information et mettre en exergue les éléments les plus importants aux yeux du visiteur pour l’encourager à explorer le reste du site. Même si ce point est plus apparenté à de l’ergonomie que du design pur, prendre en compte l’accessibilité et la navigation du site lorsque l’on réalise un webdesign évitera plus tard de perdre bêtement un visiteur ayant éprouvé des difficultés à naviguer. Essayez donc d’enrichir le site d’éléments de navigation intuitifs et évitez de surcharger la page d’une pléthore d’éléments graphiques qui ne feront qu’agacer l’internaute.

Au final, en analysant simplement ce qu’aiment voir et lire les internautes et en sensibilisant le client sur l’importance de diriger ses efforts vers l’expérience l’utilisateur, on peut plus facilement proposer des orientations graphiques originales qui rempliront les objectifs initiaux.

Rendez-vous la semaine prochaine pour la deuxième partie du dossier !

Ce dossier s’articulera sur trois parties  :

Partie I : Gestion du client et prise en compte de l’internaute
Partie II : Le webdesign : un travail d’équipe
Partie III : Faire du neuf avec du vieux, le problème de la refonte

Co-écrit avec Geoffrey Mathern

Le design du site s’adapte à l’écran du périphérique utilisé. Tout cela à partir d’une url unique.

Donc fini les sous-domaine inutile m.exemple.com ou bien encore http://www.synerghetic.net/mobile/

Une url unique permet de résoudre les problèmes de référencements liés à la duplication du contenu sur des sous-domaine.

Je vais à présent revenir sur des points plus techniques abordés lors de ma conférence au pôle mobile de Synerg’heTIC.

Media queries

Les medias queries sont des techniques utilisées en CSS3. Elles permettent de définir une feuille de style en fonction de certaines propriétés du navigateur. Pour faire du responsive design nous allons utiliser la propriété max-width, qui permet d’appliquer une taille maximale d’écran, jusqu’où les feuilles de style seront appliquées.

@media screen and (max-width:480px){
    /*code */
}

Ici, on pourra par exemple modifier les différents blocs de note site pour leur appliquer une largeur relative à taille de notre écran.

@media screen and (max-width:480px){
    div{ width:90%;}
}

jQuery mobile

Certains associent directement responsive design avec les media queries. Mais je rappelle que le principe est d’adapter le site en fonction de l’appareil utilisé.

On peut donc utiliser un framework tel que jquery mobile pour réaliser note site. On peut l’utiliser exclusivement pour l’affichage sur iPhone et Android comme dans l’exemple suivant en PHP :

if ( strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'Android') )
{
      //On charge jQuery mobile
}

Voici deux exemples de site en responsive design :

• Avec les media queries : Cuisine kawaii le livre
• Avec jQuery Mobile (sur iPhone et Android) : Développeur web mobile

Apple : des contraintes salvatrices

Le premier type de contrainte auquel va se confronter l’ergonome/designer sera celui de l’ergonomie imposée par la plateforme. Particulièrement dans le cas d’iOS, le célèbre système d’exploitation mobile d’Apple. En effet Apple impose certaines règles ergonomiques sur la plupart des applications. Les ressources en ligne d’Apple indiquent que l’ergonomie d’une application doit reprendre les usages ergonomiques de la plateforme. Il faut entendre par là qu’il est nécessaire d’utiliser le système de navigation de l’OS comme l’arborescence horizontale ou encore le système de tri par onglets.

Apple autorise bien évidemment une alternative à ce type d’ergonomie, mais celle-ci requiert davantage d’efforts de la part des développeurs. Ce type de design se base sur la métaphore. L’application doit donc se baser sur des éléments visuels présents dans « le monde réel » et reproduire une mécanique d’interaction proche de ce qu’il se ferait dans la vraie vie. Ce choix se fera en fonction de la manière dont est piloté le projet, selon les coûts, la qualité ou les délais.

Android : une liberté à maitriser

Pour la plateforme Android les problématiques sont différentes. Le designer aura une marge de manœuvre bien plus importante au niveau de son interface. Toutefois il devra obligatoirement prendre en compte les contraintes des résolutions multiples dès le début de la conception. En effet la multiplicité des terminaux Android engendre un nombre de résolutions conséquent. Lors de la conception il faudra donc prendre en considération la résolution des écrans des terminaux, leur densité (nombre de pixels par rapport à la surface de l’écran) mais aussi le ratio de l’écran (panoramique ou non).

Ces paramètres influencent l’équipe entière et ne doivent jamais être perdus de vue. Dans les kits de développement fournis par Google il existe une technologie nommée 9-patch qui permet de simplifier cette gestion de résolution via une gestion avancée des fichiers PNG.

Voici donc les premières contraintes auxquelles les designers orientés mobilité devront se confronter. Certains choix graphiques devront être réfléchis avec prudence car ils seront les facteurs déterminants du bon déroulement d’un projet mobile.

Nous rentrerons, au cours d’un prochain billet, dans les détails opérationnels de cette problématique. En attendant, bons tests et n’oubliez pas : soyons mobiles !

« A LeWeb on parle du web, à ParisWeb on fait le web »

Voici ce qu’on peut lire sur twitter, et c’est sans doute la raison pour laquelle les places partent en seulement deux mois (170€ en early bird et 340€ plein tarif). Vu la qualité de l’organisation (buffet, vidéos, langage des signes, vélotypie…) du programme et surtout des participants, c’est un bon rapport qualité/prix.

Le contenu des conférences est un savant mélange entre accéssibilité, conception, webdesign et technique. Les bénévoles du staff ParisWeb effectuent une sélection parmi les intervenants et leurs propositions. Certains intervenants viennent du W3C, Yahoo!, Mozilla ou Adobe… Pourtant il était très facile d’échanger avec eux.

La qualité de certaines interventions était très, très bonne, faisant peut être de l’ombre aux autres présentations. Je regrette aussi certains présentations trop « constat », proposant plus un état des lieux que des solutions techniques à mettre en place. Je regrette aussi que Monsieur Accessibilité d’Adobe, Matt May, n’ait pas parlé sa langue natale (l’anglais) dans son discours soulevant l’adaptation des contenus aux différents supports, la mobilité, l’accessibilité aux nouvelles technologies.

ParisWeb a lieu sur le campus de « Big Blue » à Bois-Colombes. IBM possède de grands bâtiments sombres à l’allure austère. C’est moins sexy que les open space de Microsoft France ou Google, mais le bâtiment qui nous a accueilli, l’IBM Forum, est idéal pour les conférences.

Toutes les conférences sont mises en ligne sur dailymotion, vous pouvez voir celles de 2009 actuellement, et les vidéos de 2010 arrivent sous peu. Je tiens aussi à féliciter le staff pour avoir mis en place la vélotypie, la traduction en langage des signes et en français pour toutes les conférences.

Voici une liste des conférences 2010 qui nous ont intéressé (et où nous étions présents):

Jeudi :

• Internautes sous surveillance: retour de la réalité pour un web meilleure par Amélie Boucher
• Le javascript server side, faire un point par Quentin Adam
• Let’s interface – how to make people excited about tech as we are Chris Heilmann (Yahoo! Developer Network)
• HTML5 et le web de demain par Robin Berjon, Dominique Hazael-Massieux et François Daoust (W3C)
• CSS3/Photoshop : quel avenir pour le métier de web designer ? par Francis Chouquet

Vendredi :

• La typographie comme outil de design par David Rault
• La macrotypographie de la page Web par Anne-Sophie Fradier
• HTML5 et ses amis : Nouvelles APIs par Paul Rouget (Mozilla)
• Le web, un métier de valeur par Eric Daspet

Le débat du vendredi soir fût aussi l’occasion de soulever le manque de formations spécialisées qui « forment autre chose que des dev PHP » (regardez du côté de HETIC pour une école spécialisée internet et pluri-compétente). D’après les retours des participants, des thèmes plus « Back-end » seraient aussi appréciés. Pour ma part, je pense que la mobilité et la performance devrait avoir plus de place lors d’une conférence web.

Si vous ne pouvez attendre la mise en ligne des vidéos, regardez donc ces slides:

Let’s-interface, Chris Heilmann

Le web un métier de valeur, Eric Daspet

Méthode Daisy : les CSS feuille à feuille, Romy Duhem Verdière

L’accessibilité dans une chaîne de production Web, Vincent François et Denis Boudreau

Éviter les erreurs les plus fréquentes en accessibilité du Web, Denis Boudreau

http://www.slideshare.net/activeside/ux-methodeparis-web

CSS3 vs Photoshop, quel avenir pour le métier de webdesigner ?

La typographie comme outil de design (ppt 15Mo)

HTML5 et le web de demain – W3C

Liens :

La chaîne dailymotion de ParisWeb où sont retransmises toutes les présentations.

Les photos de la conférence ParisWeb 2010

L’équipe bénévole de ParisWeb

#parisweb sur twitter

Identité Logo du site image nest, permettant l’hébergement d’images.

Webdesign Trouvez des os sur the Scruffs

Showreel Reel de l’agence américaine Buck.

Concept Tentez votre chance sur BootB (diffuseur de briefs de grande marque)

Webzine Nouveau numéro du magazine Woosta

Identité Logo Subatomic

Webdesign Présentation de la nouvelle imprimante All-in-one Canon Pixma

Showreel Une démonstration très réussie de la Creative Suite 3 d’Adobe.

Concept Et si vous deviez choisir UN seul mot pour définir votre site ?

Webzine Le huitième numéro de Blanket Magazine

Identité
Logo For Girls Sake du designer Joram Oudenaarde

Webdesign
Portfolio du designer brésilien Caio Caldas

Showreel
Showreel du studio grec Nomint créé en novembre 2006 par Yannis Konstantinidis et Christos Lefakis

Concept
Participez au concours de Maggi et dessinez la nouvelle boîte Kub Or

Webzine
Le treizième numéro de NewWebPick entièrement consacré à la french connection. On y retrouve de nombreux artistes de feu Made in Strator (souvenirs, souvenirs…)

Identité
Logo du site ThinkOnce

Webdesign
Le site des voitures hybrides d’Honda : Problem Playground

Showreel
Showreel du directeur artistique, motion designer et illustrateur Timo Boese aka Lowerground. Je suis hyper fan de la musique composée par David Kamp (j’ai cru reconnaître l’agence tout risque et k2000, mais je crois que j’ai rêvé !)

Concept
Site de la British Heart Foundation pour une alimentation saine : Food for thought

Webzine
340 pages de créativité, c’est le numéro 11 du magazine Bak