{"id":713,"date":"2014-12-06T23:54:24","date_gmt":"2014-12-06T21:54:24","guid":{"rendered":"http:\/\/blog.sylabe.org\/?p=713"},"modified":"2016-03-29T19:00:56","modified_gmt":"2016-03-29T17:00:56","slug":"le-responsive-design-en-pratique","status":"publish","type":"post","link":"http:\/\/blog.sylabe.org\/?p=713","title":{"rendered":"Le responsive design en pratique"},"content":{"rendered":"<p style=\"text-align: justify;\">Ca m&rsquo;aura pris une bonne journ\u00e9e de travail, mais le r\u00e9sultat est plaisant.<\/p>\n<p style=\"text-align: justify;\">Voici donc une page de test comme proposition de mise en page pour que <a title=\"Projet sylabe\" href=\"http:\/\/www.sylabe.org\" target=\"_blank\">sylabe<\/a> soit <em>responsive design<\/em>. Ici avec une r\u00e9solution classique de <strong>1280&#215;800<\/strong> pixels (moins les bordures du navigateur) :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-714 aligncenter\" alt=\"Test_Responsive_Design_1280x800_2014-12-06_21.54.33\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_1280x800_2014-12-06_21.54.331-600x341.png\" width=\"600\" height=\"341\" \/><\/p>\n<p style=\"text-align: justify;\">Au passage, il y a une nouvelle ic\u00f4ne :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-727 aligncenter\" alt=\"imodify\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/imodify1.png\" width=\"64\" height=\"64\" \/><\/p>\n<p style=\"text-align: justify;\">La page de test peut \u00eatre essay\u00e9e \u00e0 l&rsquo;adresse de l&rsquo;objet :<br \/>\n<a title=\"74f04e3eb506525d282e764ca23b98022d446a94a55a3b78c106049dd5060811\" href=\"http:\/\/stephane.nebule.fr\/o\/539b0aaacf258f1190e33524b368ca9685b9cccb933ed2ec2021acee4fa83705\" target=\"_blank\">539b0aaacf258f1190e33524b368ca9685b9cccb933ed2ec2021acee4fa83705<\/a><\/p>\n<p style=\"text-align: justify;\">Il y a pas mal de captures d&rsquo;\u00e9crans pour montrer l&rsquo;adaptation de la page \u00e0 des r\u00e9solutions d&rsquo;\u00e9cran parfois assez&#8230; r\u00e9duites. Malheureusement, Fierfox ne me permet pas de descendre en dessous de 300 pixels en largeur pour atteindre les 240 pixels de certains t\u00e9l\u00e9phones. Mais \u00e0 priori, \u00e7a ne passe pas \u00e0 une si petite r\u00e9solution.<\/p>\n<p style=\"text-align: justify;\">\u00c9videmment, du 1024&#215;768 sur un t\u00e9l\u00e9phone ne seront pas aussi lisible que sur un \u00e9cran 15 pouces de PC&#8230;<br \/>\nEt il est illusoire d&rsquo;esp\u00e9rer analyser les liens des objets sur de petites r\u00e9solutions&#8230;<\/p>\n<p><!--more--><\/p>\n<p>La page en d\u00e9sactivant les menus :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-715 aligncenter\" alt=\"Test_Responsive_Design_sans-menu_2014-12-06_22.17.01\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_sans-menu_2014-12-06_22.17.011-600x354.png\" width=\"600\" height=\"354\" srcset=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_sans-menu_2014-12-06_22.17.011-600x354.png 600w, \/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_sans-menu_2014-12-06_22.17.011-1024x604.png 1024w, \/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_sans-menu_2014-12-06_22.17.011.png 1200w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>La page avec le menu de droite \u00e0 grande r\u00e9solution :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-717 aligncenter\" alt=\"Test_Responsive_Design_menu-droite_2014-12-06_22.16.28\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_menu-droite_2014-12-06_22.16.281-600x354.png\" width=\"600\" height=\"354\" srcset=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_menu-droite_2014-12-06_22.16.281-600x354.png 600w, \/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_menu-droite_2014-12-06_22.16.281-1024x604.png 1024w, \/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_menu-droite_2014-12-06_22.16.281.png 1200w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>La page avec le menu de droite \u00e0 petite r\u00e9solution :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-718 aligncenter\" alt=\"Test_Responsive_Design_menu-droite-petit_2014-12-06_22.23.35\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_menu-droite-petit_2014-12-06_22.23.351-600x393.png\" width=\"600\" height=\"393\" srcset=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_menu-droite-petit_2014-12-06_22.23.351-600x393.png 600w, \/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_menu-droite-petit_2014-12-06_22.23.351.png 624w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>La page avec le menu de gauche \u00e0 grande r\u00e9solution :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-719 aligncenter\" alt=\"Test_Responsive_Design_menu-gauche-normal_2014-12-06_22.17.22\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_menu-gauche-normal_2014-12-06_22.17.221-600x354.png\" width=\"600\" height=\"354\" srcset=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_menu-gauche-normal_2014-12-06_22.17.221-600x354.png 600w, \/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_menu-gauche-normal_2014-12-06_22.17.221-1024x604.png 1024w, \/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_menu-gauche-normal_2014-12-06_22.17.221.png 1200w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>La page avec le menu de gauche \u00e0 moyenne r\u00e9solution :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-720 aligncenter\" alt=\"Test_Responsive_Design_menu-gauche-reduit_2014-12-06_22.18.07\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_menu-gauche-reduit_2014-12-06_22.18.071-600x354.png\" width=\"600\" height=\"354\" \/><\/p>\n<p>La page avec le menu de gauche \u00e0 petite r\u00e9solution :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-721 aligncenter\" alt=\"Test_Responsive_Design_menu-gauche-petit_2014-12-06_22.24.11\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_menu-gauche-petit_2014-12-06_22.24.111-600x393.png\" width=\"600\" height=\"393\" srcset=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_menu-gauche-petit_2014-12-06_22.24.111-600x393.png 600w, \/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_menu-gauche-petit_2014-12-06_22.24.111.png 624w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>1920&#215;1080 :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-722 aligncenter\" alt=\"Test_Responsive_Design_1920x1080_2014-12-06_21.58.08\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_1920x1080_2014-12-06_21.58.081-600x308.png\" width=\"600\" height=\"308\" srcset=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_1920x1080_2014-12-06_21.58.081-600x308.png 600w, \/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_1920x1080_2014-12-06_21.58.081-1024x526.png 1024w, \/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_1920x1080_2014-12-06_21.58.081.png 1920w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>1152&#215;864 :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-724 aligncenter\" alt=\"Test_Responsive_Design_1152x864_2014-12-06_21.59.26\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_1152x864_2014-12-06_21.59.261-600x413.png\" width=\"600\" height=\"413\" srcset=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_1152x864_2014-12-06_21.59.261-600x413.png 600w, \/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_1152x864_2014-12-06_21.59.261-1024x705.png 1024w, \/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_1152x864_2014-12-06_21.59.261.png 1152w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>1024&#215;768 :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-725 aligncenter\" alt=\"Test_Responsive_Design_1024x768_2014-12-06_21.49.55\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_1024x768_2014-12-06_21.49.551-600x408.png\" width=\"600\" height=\"408\" srcset=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_1024x768_2014-12-06_21.49.551-600x408.png 600w, \/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_1024x768_2014-12-06_21.49.551.png 1024w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>800&#215;480 :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-726 aligncenter\" alt=\"Test_Responsive_Design_800x480_2014-12-06_22.13.57\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_800x480_2014-12-06_22.13.571-600x313.png\" width=\"600\" height=\"313\" srcset=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_800x480_2014-12-06_22.13.571-600x313.png 600w, \/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_800x480_2014-12-06_22.13.571.png 784w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>480&#215;800 :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-728 aligncenter\" alt=\"Test_Responsive_Design_480x800_2014-12-06_22.05.52\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_480x800_2014-12-06_22.05.521-395x600.png\" width=\"395\" height=\"600\" srcset=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_480x800_2014-12-06_22.05.521-395x600.png 395w, \/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_480x800_2014-12-06_22.05.521.png 480w\" sizes=\"(max-width: 395px) 100vw, 395px\" \/><\/p>\n<p>480&#215;360 :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-729 aligncenter\" alt=\"Test_Responsive_Design_480x360_2014-12-06_22.03.08\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_480x360_2014-12-06_22.03.081.png\" width=\"464\" height=\"289\" \/><\/p>\n<p>480&#215;320 :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-730 aligncenter\" alt=\"Test_Responsive_Design_480x320_2014-12-06_22.15.12\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_480x320_2014-12-06_22.15.121.png\" width=\"464\" height=\"249\" \/><\/p>\n<p>360&#215;640 :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-731 aligncenter\" alt=\"Test_Responsive_Design_360x640_2014-12-06_22.09.25\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_360x640_2014-12-06_22.09.251.png\" width=\"344\" height=\"569\" \/><\/p>\n<p>320&#215;640 :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-732 aligncenter\" alt=\"Test_Responsive_Design_320x640_2014-12-06_22.10.23\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_320x640_2014-12-06_22.10.231.png\" width=\"304\" height=\"569\" \/><\/p>\n<p>320&#215;320 :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-733 aligncenter\" alt=\"Test_Responsive_Design_320x320_2014-12-06_22.11.23\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_320x320_2014-12-06_22.11.231.png\" width=\"304\" height=\"249\" \/><\/p>\n<p>320&#215;240 :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-734 aligncenter\" alt=\"Test_Responsive_Design_320x240_2014-12-06_22.12.02\" src=\"\/wp-content\/uploads\/sylabe\/2014\/12\/Test_Responsive_Design_320x240_2014-12-06_22.12.021.png\" width=\"304\" height=\"169\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ca m&rsquo;aura pris une bonne journ\u00e9e de travail, mais le r\u00e9sultat est plaisant. Voici donc une page de test comme proposition de mise en page pour que sylabe soit responsive design. Ici avec une r\u00e9solution classique de 1280&#215;800 pixels (moins les bordures du navigateur) : Au passage, il y a une nouvelle ic\u00f4ne : La &hellip; <a href=\"http:\/\/blog.sylabe.org\/?p=713\" class=\"more-link\">Continuer la lecture de <span class=\"screen-reader-text\">Le responsive design en pratique<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[39,7,20,30],"tags":[],"_links":{"self":[{"href":"http:\/\/blog.sylabe.org\/index.php?rest_route=\/wp\/v2\/posts\/713"}],"collection":[{"href":"http:\/\/blog.sylabe.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.sylabe.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.sylabe.org\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.sylabe.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=713"}],"version-history":[{"count":1,"href":"http:\/\/blog.sylabe.org\/index.php?rest_route=\/wp\/v2\/posts\/713\/revisions"}],"predecessor-version":[{"id":1126,"href":"http:\/\/blog.sylabe.org\/index.php?rest_route=\/wp\/v2\/posts\/713\/revisions\/1126"}],"wp:attachment":[{"href":"http:\/\/blog.sylabe.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.sylabe.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=713"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.sylabe.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}