{"id":1806,"date":"2013-07-23T19:00:21","date_gmt":"2013-07-23T17:00:21","guid":{"rendered":"http:\/\/blog.fabianpiau.com\/?p=1806"},"modified":"2020-05-25T16:34:46","modified_gmt":"2020-05-25T15:34:46","slug":"doing-responsive-web-design-yes-but-easily","status":"publish","type":"post","link":"https:\/\/blog.fabianpiau.com\/fr\/2013\/07\/23\/doing-responsive-web-design-yes-but-easily\/","title":{"rendered":"Faire du Responsive Web Design: oui, mais simplement!"},"content":{"rendered":"

 <\/span>English version available<\/strong><\/a><\/p>\n

Il n’y a pas si longtemps, je vous parlais du \u00ab\u00a0Mobile theme\u00a0\u00bb<\/a> inclus dans l’extension Jetpack pour que votre blog WordPress soit accessible de mani\u00e8re lisible et adapt\u00e9e sur les appareils mobiles.<\/p>\n

Je ne reviens pas sur mes dires \u00e0 propos de ce th\u00e8me mobile, car il fonctionne tr\u00e8s bien et chaque nouvelle version du plugin Jetpack apporte son lot d’am\u00e9liorations. Surtout, il a un avantage certain: une configuration quasi proche du n\u00e9ant, il suffit d’un clic pour activer le th\u00e8me, on peut difficilement faire mieux. Oui, mais… si un peu de d\u00e9veloppement ne vous fait pas peur, il y a encore mieux!<\/p>\n

Je parle du Responsive Web Design<\/a> (conception de sites web adaptatifs), en plus c’est tr\u00e8s tendance en ce moment, et ce n’est pas qu’une mode passag\u00e8re. Gr\u00e2ce au Responsive Web Design, le site reste le m\u00eame pour toutes les plateformes et s’adapte automatiquement \u00e0 la taille de l’\u00e9cran. L’identit\u00e9 de votre site reste la m\u00eame (th\u00e8me, images, couleurs…) et cela vous \u00e9vite de faire de la gestion de multi-versions: une version desktop, mobile, tablette… La gestion du site est donc simplifi\u00e9e et la maintenance facilit\u00e9e.<\/p>\n

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

Avant, les tailles d’\u00e9cran \u00e9taient peu nombreuses (une bonne vieille r\u00e9solution 1024 x 768 ou, pour les plus chanceux, une r\u00e9solution 1280 x 1024), c’\u00e9tait le temps des \u00e9crans 17 et 19 pouces \u00e0 tube cathodique (a\u00efe, mes yeux, \u00e7a pique… Bon ok je<\/strike> \u00e7a commence \u00e0 dater). Aujourd’hui, il y a des centaines de tailles diff\u00e9rentes, Internet est partout que ce soit sur la t\u00e9l\u00e9vision, dans votre voiture ou m\u00eame dans votre frigo (bon l\u00e0 je vois un peu trop loin, mais le tout-connect\u00e9 n’est peut-\u00eatre pas si loin). Bref, il n’est plus envisageable de travailler sur des r\u00e9solutions fixes au cas par cas.<\/p>\n

Bien s\u00fbr dans le cas d’une application sp\u00e9cifique, il y a des arguments contre le Responsive Design. Une application web aura des performances plus lentes compar\u00e9e \u00e0 une application native, mais ce n’est pas l’objet de cet article. Cet article met le focus sur les sites web, disons grand public (site d’un journal, site marchand…), qui veulent se rendre accessibles sur mobile et veulent \u00e9viter des versions mobiles d\u00e9di\u00e9es (les fameuses URL commen\u00e7ant par \u00ab\u00a0m\u00a0\u00bb). Par exemple m.facebook.com<\/a>, m.linkedin.com<\/a> ou encore m.lequipe.fr<\/a> qui vont disparaitre t\u00f4t ou tard.<\/p>\n


<\/p>\n

Testez vous-m\u00eame<\/h4>\n

Vous pouvez d\u00e8s maintenant modifier la taille de la fen\u00eatre de votre navigateur, vous verrez que ce blog s’adaptera automatiquement en cons\u00e9quence (si vous voyez des bogues ou des id\u00e9es d’am\u00e9lioration, je suis preneur!).<\/p>\n

\"CarmaBlog<\/a>

CarmaBlog en 1024 x 768<\/p><\/div>\n

\"CarmaBlog<\/a>

CarmaBlog en 400 x 768<\/p><\/div>\n


<\/p>\n

Vous l’aurez sans doute remarqu\u00e9, voici les impacts lorsque la taille de la fen\u00eatre diminue:<\/p>\n