{"id":4923,"date":"2015-12-07T15:05:05","date_gmt":"2015-12-07T14:05:05","guid":{"rendered":"https:\/\/academy.visiplus.com\/blog\/?p=4923"},"modified":"2016-08-23T15:49:13","modified_gmt":"2016-08-23T14:49:13","slug":"top-10-des-erreurs-responsive-web-design-a-eviter","status":"publish","type":"post","link":"https:\/\/academy.visiplus.com\/blog\/mobile-web\/top-10-des-erreurs-responsive-web-design-a-eviter-2015-12-07","title":{"rendered":"Top 10 des erreurs Responsive Web Design \u00e0 \u00e9viter"},"content":{"rendered":"

De nos jours, il est impensable de proposer un site web dont la navigation n\u2019est pas adapt\u00e9e \u00e0 d\u2019autres appareils que l\u2019ordinateur. C\u2019est pourquoi VISIPLUS revient sur les 10 principales erreurs commises en mati\u00e8re de compatibilit\u00e9 mobile.<\/p>\n

Il ne s\u2019agit pas simplement de mise en page, le Responsive Web Design (ou RWD) est une m\u00e9thode technique de conception \u00e0 part enti\u00e8re. Remettant en question les proc\u00e9d\u00e9s de conception des sites traditionnels, cette nouvelle approche du site internet adapt\u00e9 aux mobiles est encore parfois confuse. Mais comment fournir aux utilisateurs une exp\u00e9rience uniforme sur tous les appareils\u00a0? \u00c9l\u00e9ments de r\u00e9ponse dans notre Top 10 des erreurs \u00e0 \u00e9viter lors de la cr\u00e9ation d\u2019un site web en Responsive Web Design.<\/a><\/p>\n

    \n
  1. Ne pas s\u2019adapter au comportement des internautes :<\/strong> Une grande majorit\u00e9 des concepteurs de sites Web ont tendance \u00e0 ignorer l’importance de la compr\u00e9hension du comportement de l’utilisateur dans le processus de conception de leur site RWD. Pourtant, il est essentiel de savoir quels rubriques, onglets\u2026 vont \u00eatre le plus utilis\u00e9s par les visiteurs et pourquoi, dans le but de d\u00e9finir et r\u00e9ussir sa strat\u00e9gie mobile.<\/li>\n
  2. Concevoir son site pour ordinateur sans penser \u00e0 sa version mobile :<\/strong> Trop nombreux sont les web designer et d\u00e9veloppeurs \u00e0 croire que le processus de cr\u00e9ation d\u2019un site passe d\u2019abord par sa r\u00e9alisation pour ordinateur de bureau sans penser aux mobinautes. Un \u00e9tat d\u2019esprit obsol\u00e8te laissant place au concept \u00ab\u00a0mobile first\u00a0\u00bb, c\u2019est-\u00e0-dire, concevoir un site en pensant en priorit\u00e9 \u00e0 sa version mobile et en adaptant progressivement celui-ci pour les \u00e9crans plus larges. Une mani\u00e8re de proc\u00e9d\u00e9 mettant en exergue de nouvelles techniques de d\u00e9veloppement,\u00a0mais aussi de conception de sa strat\u00e9gie en ligne.<\/li>\n
  3. Se concentrer sur les dispositifs plut\u00f4t que sur la taille des \u00e9crans :<\/strong> Smartphones Android ou iOS, tablettes, ordinateur de bureau, TV\u00a0\u2026 Il existe aujourd\u2019hui une large gamme d’appareils sur lesquels un site internet doit s\u2019adapter. Pour autant, il est impossible de cibler chaque p\u00e9riph\u00e9rique individuellement. C\u2019est pourquoi il vaut mieux se concentrer sur la taille des \u00e9crans. Micro, petit, moyen, large ou encore extra-large\u00a0: utiliser la taille de l\u2019\u00e9cran plut\u00f4t que sur le mod\u00e8le de l\u2019appareil pour une conception adapt\u00e9e est plus que jamais indiqu\u00e9 afin de gagner en efficacit\u00e9 et en usabilit\u00e9 aupr\u00e8s des utilisateurs.<\/li>\n
  4. Poser les \u00ab points d\u2019arr\u00eat \u00bb en fonction des dimensions des p\u00e9riph\u00e9riques connus :<\/strong> Pour chaque nouvel appareil sur le march\u00e9, c\u2019est de nouvelles tailles d’\u00e9cran et de nouvelles contraintes \u00e0 prendre en compte dans le processus de conception. Garder en t\u00eate l\u2019exp\u00e9rience client devient alors primordial afin d\u2019adapter efficacement le site web. De m\u00eame, penser \u00ab\u00a0mobile first\u00a0\u00bb est plus que jamais appropri\u00e9. En effet, en commen\u00e7ant par la construction du site pour un mobile, les points d\u2019arr\u00eat de largeur d\u2019\u00e9cran sont introduits selon les besoins de conception et non en fonctions des dimensions des p\u00e9riph\u00e9riques connus. Ainsi \u00e9volutif, le site s\u2019adapte \u00e0 toutes les tailles d\u2019\u00e9crans, aussi bien ceux disponibles aujourd’hui que ceux \u00e0 pr\u00e9voir dans le futur.\"Content-is-like-water-1980\"<\/li>\n
  5. Penser uniquement \u00ab petit\u00a0\u00bb :\u00a0<\/strong> Penser mobile ne veut pas forc\u00e9ment dire penser petit\u00a0! Et pour cause, si le RWD concerne entre autres les smartphones et autres petits p\u00e9riph\u00e9riques, il ne faut pas faire l\u2019impasse sur les possibilit\u00e9s offertes par de grands \u00e9crans. Qui dit plus d\u2019espaces, dit r\u00e9organisation des contenus, optimisation des images, mise \u00e0 l’\u00e9chelle des tailles de police\u2026 Il faut offrir aux grands \u00e9crans le m\u00eame niveau d’attention qu\u2019aux petits supports.<\/li>\n
  6. Cacher les contenus :<\/strong> Les petits \u00e9crans, c\u2019est aussi de grandes contraintes! Pour ce faciliter le travail, de nombreux concepteurs de sites Web d\u00e9cident alors de cacher ou de supprimer certain contenu. Un tort sachant que les utilisateurs de mobiles et tablettes veulent, eux aussi, en savoir plus sur les produits et services commerciaux propos\u00e9s. Cacher ses contenus sur mobiles s\u2019apparente alors \u00e0 une punition envers les mobinautes.<\/li>\n
  7. Afficher trop de contenu :<\/strong> S\u2019il est pr\u00e9judiciable de cacher des contenus, abuser d\u2019eux peut \u00e9galement \u00eatre nuisible\u00a0! En effet, afficher trop de contenu engendre un chargement plus long des pages sur la version mobile du site. R\u00e9sultat\u00a0: les mobinautes s\u2019en vont\u00a0! Si le site web original peut accueillir une multitude d\u2019informations, sa version responsive se doit alors d\u2019\u00eatre all\u00e9g\u00e9e ou, en d\u2019autres termes, plus accessible et digeste pour ses utilisateurs.<\/li>\n
  8. Des images inadapt\u00e9es :<\/strong> Le probl\u00e8me r\u00e9current lorsqu\u2019il s\u2019agit d\u2019adapter son site version mobile reste les images\u00a0! Effectivement, avec un seul balisage par image pour les sites responsive, c\u2019est un v\u00e9ritable d\u00e9fi d\u2019afficher de beaux visuels sur les \u00e9crans de type R\u00e9tina comme sur de vieux smartphone ne supportant que de la basse-d\u00e9finition. Heureusement, il existe des solutions <\/b>pour l’optimisation d’image dynamique dans diff\u00e9rentes tailles et r\u00e9solutions. L’une d’elle\u00a0: Adaptive Images<\/a>.\"Adaptive<\/li>\n
  9. Un chargement de page trop lent :<\/strong> Trop de contenu, images trop lourdes et inadapt\u00e9es\u2026 Nombreuses sont les raisons qui expliqueront un chargement de page trop long\u00a0! Pour \u00e9viter ce probl\u00e8me, il est essentiel d\u2019organiser son site (avec des onglets notamment) et de le concevoir en utilisant seulement les ressources n\u00e9cessaires. A ce propos, \u00a0Google conseille d\u2019utiliser son outil Google Page Speed Insights<\/a>\u00a0pour d\u00e9tecter et corriger tous les probl\u00e8mes qui peuvent impacter n\u00e9gativement la vitesse de chargement d\u2019un site sur mobile.<\/li>\n
  10. Ne pas anticiper le \u00ab\u00a0cloaking\u00a0\u00bb :<\/strong> Nous vous l\u2019annoncions il y a peu\u00a0: Google d\u00e9clare la guerre aux r\u00e9seaux d\u2019affiliation mobiles douteux.<\/a> Pour ne pas \u00eatre p\u00e9nalis\u00e9 par les moteurs de recherche, penser \u00e0 bien g\u00e9rer les redirections entre le site mobile et le site principal.<\/li>\n<\/ol>\n

    Vous d\u00e9sirez adapter votre site web aux diff\u00e9rents types de terminaux mais vous ne pouvez r\u00e9pondre aux probl\u00e9matiques et contraintes ergonomiques qui en d\u00e9coulent ? La solution : la formation responsive web design !\u00a0<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    De nos jours, il est impensable de proposer un site web dont la navigation n\u2019est pas adapt\u00e9e \u00e0 d\u2019autres appareils que l\u2019ordinateur. C\u2019est pourquoi VISIPLUS revient sur les 10 principales erreurs commises en mati\u00e8re de…<\/p>\n","protected":false},"author":5,"featured_media":4935,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[315,149],"tags":[],"class_list":["post-4923","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-responsive-web-design-mobile-1","category-mobile-web"],"_links":{"self":[{"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/posts\/4923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/comments?post=4923"}],"version-history":[{"count":19,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/posts\/4923\/revisions"}],"predecessor-version":[{"id":7531,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/posts\/4923\/revisions\/7531"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/media\/4935"}],"wp:attachment":[{"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/media?parent=4923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/categories?post=4923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/tags?post=4923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}