{"id":490,"date":"2015-02-16T11:37:05","date_gmt":"2015-02-16T11:37:05","guid":{"rendered":"http:\/\/www.newave.be\/blog\/?p=490"},"modified":"2015-09-28T11:15:36","modified_gmt":"2015-09-28T11:15:36","slug":"tutoriel-sur-le-responsive-web-design-rwd","status":"publish","type":"post","link":"http:\/\/www.newave.be\/blog\/2015\/02\/tutoriel-sur-le-responsive-web-design-rwd\/","title":{"rendered":"Tutoriel sur le Responsive Web Design (RWD)"},"content":{"rendered":"

\"Responsive<\/a><\/p>\n

Comme vous l’avez s\u00fbrement constat\u00e9 \u00e0 travers les m\u00e9dias, dans les transports en commun ou tout simplement sur les lieux publics, de plus en plus de gens utilisent leur t\u00e9l\u00e9phone, notamment pour naviguer sur leurs sites favoris.<\/p>\n

Un \u00e9cran d’ordinateur n’ayant pas la m\u00eame taille que celui d’un smartphone, il faut que le site web parcouru par l’utilisateur s’adapte lui-m\u00eame pour pr\u00e9senter son contenu de mani\u00e8re \u00e0 \u00eatre le plus ergonomique possible. Nous allons voir dans ce tuto comment le faire en quelques \u00e9tapes.<\/p>\n

<\/p>\n

Quelques r\u00e8gles indispensables :<\/h2>\n

Tout d’abord, il est important de cerner les contenus \u00ab\u00a0indispensables\u00a0\u00bb du site, ceux qu’il sera impossibles de cacher quand l’utilisateur naviguera via un t\u00e9l\u00e9phone. Pour cela, je vous conseille de d\u00e9couper votre site en diff\u00e9rents blocs. Par exemple, un bloc pour le logo, un autre pour le menu, un autre encore pour les articles, etc. Une fois cette \u00e9tape r\u00e9alis\u00e9e, vous allez pouvoir s\u00e9lectionner ceux qui appara\u00eetront sur le mobile plus facilement. Pensez \u00e0 garder le menu mais \u00e9vitez de l’afficher horizontalement. Il sera plus facile pour l’utilisateur de naviguer via un menu vertical avec des boutons bien visibles. Ne changez pas l’organisation g\u00e9n\u00e9rale du site. Un utilisateur perturb\u00e9 est souvent synonyme d’utilisateur perdu. Les images sont superflues sur mobiles dans la plupart des cas.<\/p>\n

Cr\u00e9er un design adaptatif:<\/h2>\n

Ensuite je vous conseille de garder un webdesign global pour ne pas perturber les utilisateurs selon l’appareil utilis\u00e9 pour parcourir le site. En effet, il y a de plus en plus de types d’\u00e9crans dont la taille varie \u00e0 chaque fois. Ainsi, vous modifierez l\u00e9g\u00e8rement le design pour que ce soit le plus ergonomique possible.<\/p>\n

La r\u00e9alisation :<\/h2>\n

Une fois que ces deux \u00e9tapes ont \u00e9t\u00e9 effectu\u00e9es, vous allez pouvoir commencer \u00e0 coder votre site.<\/p>\n

N’ayez crainte, on parle souvent, \u00e0 tord, du responsive web design comme quelque chose de tr\u00e8s complexe qui n\u00e9cessite des heures d’apprentissage. En r\u00e9alit\u00e9 si vous suivez ces quelques r\u00e8gles, vous obtiendrez rapidement un r\u00e9sultat satisfaisant.<\/p>\n

Pour d\u00e9marrer, codez la version la plus grande de votre site. Utilisez de pr\u00e9f\u00e9rence des tailles en pixels.<\/p>\n

D\u00e8s que vous \u00eates satisfait de la version dite \u00ab\u00a0desktop\u00a0\u00bb, dirigez-vous vers le code des versions mobiles.<\/p>\n

N’utilisez pas une feuille de style qui remplacera la principale si le site est parcouru sur mobile. Privil\u00e9giez plut\u00f4t les m\u00e9dias queries plac\u00e9s dans une feuille \u00e0 part ou dans votre feuille principale.<\/p>\n

Ces m\u00e9dias queries (ou requ\u00eate de m\u00e9dia) se pr\u00e9sentent sous cette forme :<\/p>\n

@media (max-width: 900px){<\/span><\/strong><\/p>\n

\u00a0\u00a0 \u00a0img{<\/span><\/strong>
\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0display: none;<\/span><\/strong>
\n\u00a0\u00a0 \u00a0}<\/span><\/strong>
\n}<\/span><\/strong><\/p>\n

Les r\u00e8gles CSS qui se trouveront dans les {} ne s’effectueront que si la taille de l’\u00e9cran est inf\u00e9rieure ou \u00e9gale \u00e0 la taille choisie dans (max-width: px). Dans le cas pr\u00e9sent, lorsque l’\u00e9cran aura une taille de 900px ou moins, les images recevront la r\u00e8gle CSS \u00ab\u00a0display: none\u00a0\u00bb.<\/p>\n

Dans votre header, n’oubliez pas d’ajouter cette ligne :<\/p>\n

<meta name= \u00ab\u00a0viewport\u00a0\u00bb content= \u00ab\u00a0width=device-width\u00a0\u00bb><\/strong><\/span><\/p>\n

En effet, les appareils mobiles ont tendance \u00e0 afficher la version desktop en compressant tout le contenu sur un \u00e9cran beaucoup plus petit. Ce qui la rend illisible. Gr\u00e2ce \u00e0 la r\u00e8gle ci-dessus, votre site sur smartphone aura une version plus adapt\u00e9e.<\/p>\n

Utilisez des valeurs relatives pour vos dimensionnements pour les versions plus petites.<\/p>\n

Fonctionnez petit \u00e0 petit. R\u00e9duisez chaque bloc un \u00e0 un.<\/p>\n

Une fois que vous avez termin\u00e9 votre code, vous pouvez tester votre site de diff\u00e9rentes mani\u00e8res.<\/p>\n

    \n
  1. La plus rapide : Redimensionnez votre fen\u00eatre de navigateur desktop comme vous le souhaitez pour voir les diff\u00e9rentes \u00e9tapes de redimensionnements en temps r\u00e9el.<\/li>\n
  2. Tester directement sur votre smartphone.<\/li>\n
  3. Utilisez la \u00ab\u00a0vue adaptive\u00a0\u00bb dans l’inspecteur d’\u00e9l\u00e9ment de votre navigateur. Je vous conseille d’utiliser Google Chrome pour cette \u00e9tape. En effet, ce dernier propose un \u00e9mulateur (Device mode) de la plupart des smartphones connus pour visualiser votre site.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    Comme vous l’avez s\u00fbrement constat\u00e9 \u00e0 travers les m\u00e9dias, dans les transports en commun ou tout simplement sur les lieux publics, de plus en plus de gens utilisent leur t\u00e9l\u00e9phone, notamment pour naviguer sur leurs sites favoris. Un \u00e9cran d’ordinateur n’ayant pas la m\u00eame taille que celui d’un smartphone, il faut que le site web […]<\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[],"_links":{"self":[{"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/posts\/490"}],"collection":[{"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/comments?post=490"}],"version-history":[{"count":36,"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/posts\/490\/revisions"}],"predecessor-version":[{"id":650,"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/posts\/490\/revisions\/650"}],"wp:attachment":[{"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/media?parent=490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/categories?post=490"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/tags?post=490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}