{"id":404,"date":"2011-10-21T09:33:47","date_gmt":"2011-10-21T08:33:47","guid":{"rendered":"http:\/\/www.degraphiks.com\/blog\/?p=404"},"modified":"2011-11-29T10:12:02","modified_gmt":"2011-11-29T09:12:02","slug":"pensez-mobile","status":"publish","type":"post","link":"http:\/\/degraphiks.com\/blog\/pensez-mobile\/","title":{"rendered":"Pensez mobile !"},"content":{"rendered":"<p>\u00c7a fait d\u00e9j\u00e0 quelques temps que les t\u00e9nors en parlent ; mais la ten\u00addance est l\u00e0, les uti\u00adli\u00adsa\u00adteurs sur\u00adfant sur leur smart\u00adphones sont de plus en plus nom\u00adbreux. La faute aux navi\u00adga\u00adteurs uti\u00adli\u00ads\u00e9s dans ces pla\u00adte\u00adformes qui sont de plus en plus per\u00adfor\u00admants. Il faut donc abso\u00adlu\u00adment les prendre en consi\u00add\u00e9\u00adra\u00adtion dans la concep\u00adtion de sites qui sont&nbsp;sus\u00adcep\u00adtibles&nbsp;d\u2019\u00eatre mas\u00adsi\u00adve\u00adment uti\u00adli\u00ads\u00e9s via des pla\u00adte\u00adformes mobiles.<\/p>\n<p>Dans cette optique, <a title=\"Le site du monsieur\" href=\"http:\/\/paulirish.com\/\">Paul Irish<\/a> \u00e0 bien syn\u00adth\u00e9\u00adti\u00ads\u00e9 la d\u00e9marche <a href=\"https:\/\/plus.google.com\/113127438179392830442\/posts\/3ZeYxcNa1kL\">dans un post sur Google+<\/a>. Je vous en livre ici une tra\u00adduc\u00adtion faites par votre ser\u00advi\u00adteur (donc \u00e0 prendre avec les r\u00e9serve d\u2019u\u00adsage,&nbsp;hum).<\/p>\n<ul>\n<li>Pen\u00adser mobile en pre\u00admier : com\u00admen\u00adcez par la r\u00e9so\u00adlu\u00adtion la plus faible<\/li>\n<li>Gar\u00addez en m\u00e9moire que beau\u00adcoup de mobiles ont une r\u00e9so\u00adlu\u00adtion inf\u00e9\u00adrieure \u00e0&nbsp;320px<\/li>\n<li>L\u2019ab\u00adsence de media-query est la pre\u00admi\u00e8re media-query (<a title=\"Sa page sur Google+\" href=\"https:\/\/plus.google.com\/106488504689809263842\">Bryan Sie\u00adger<\/a>)<\/li>\n<li>Lais\u00adser la grille fluide faire le plus gros du tra\u00advail. Ne cher\u00adchez pas \u00e0 faire autant de mq qu\u2019il y a de pixels \u00e0 l\u2019\u00e9cran\u2026<\/li>\n<li>Uti\u00adli\u00adsez plu\u00adt\u00f4t min-width que max-width (tou\u00adjours dans l\u2019op\u00adtique mobile en premier)<\/li>\n<li>Soyez \u00e9co\u00adnomes en m\u00e9dias, com\u00admen\u00adcez par de petites images, et changez-les pour des r\u00e9so\u00adlu\u00adtion plus impor\u00adtantes, cf. <a href=\" http:\/\/www.cloudfour.com\/responsive-imgs-part-2\/\" target=\"_blank\">http:\/\/www.cloudfour.com\/responsive-imgs-part-2\/<\/a><\/li>\n<li>Ne jouez pas trop avec le DOM. La vitesse doit \u00eatre votre objec\u00adtif prin\u00adci\u00adpal et (trop) mani\u00adpu\u00adler les choses avec JS risque de plom\u00adber vos temps de r\u00e9ponses.<\/li>\n<li>Ne faites pas 100 gali\u00adpettes pour ten\u00adter d\u2019a\u00adm\u00e9\u00adlio\u00adrer un tas de merde. Votre desi\u00adgn doit \u00eatre suf\u00adfi\u00adsam\u00adment intel\u00adli\u00adgent pour gran\u00addir sans avoir \u00e0 faire des ver\u00adsions alter\u00adna\u00adtives du&nbsp;site.<\/li>\n<li>Ne mas\u00adquez pas de conte\u00adnu pour les mobiles, tout autant que les autres ils aiment avoir acc\u00e8s \u00e0 l\u2019info.<\/li>\n<li>Gar\u00addez les zones d\u2019ac\u00adtion grandes, conce\u00advez pour les m\u00e9thodes de sai\u00adsie mobile car les uti\u00adli\u00adsa\u00adteur de navi\u00adga\u00adteur de bureau pour\u00adront aus\u00adsi en pro\u00adfi\u00adter. Uti\u00adli\u00adsez les pro\u00adpri\u00e9\u00adt\u00e9s des for\u00admu\u00adlaires du HTML5&nbsp;plu\u00adt\u00f4t&nbsp;que des arti\u00adfices&nbsp;JS.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u00c7a fait d\u00e9j\u00e0 quelques temps que les t\u00e9nors en parlent ; mais la ten\u00addance est l\u00e0, les uti\u00adli\u00adsa\u00adteurs sur\u00adfant sur leur smart\u00adphones sont de plus en plus nom\u00adbreux. La faute aux navi\u00adga\u00adteurs uti\u00adli\u00ads\u00e9s dans ces pla\u00adte\u00adformes qui sont de plus en plus per\u00adfor\u00admants. Il faut donc abso\u00adlu\u00adment les prendre en consi\u00add\u00e9\u00adra\u00adtion dans la concep\u00adtion&nbsp;de&nbsp;[\u2026]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wp_typography_post_enhancements_disabled":false,"jetpack_post_was_ever_published":false,"footnotes":""},"categories":[118,2,62,7],"tags":[72,17,81,79,80],"class_list":["post-404","post","type-post","status-publish","format-standard","hentry","category-developpement","category-informatique","category-iphone","category-web","tag-css","tag-design","tag-media-query","tag-mobile","tag-smartphone"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2W6XU-6w","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/posts\/404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/comments?post=404"}],"version-history":[{"count":6,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/posts\/404\/revisions"}],"predecessor-version":[{"id":426,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/posts\/404\/revisions\/426"}],"wp:attachment":[{"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/media?parent=404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/categories?post=404"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/tags?post=404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}