{"id":2131,"date":"2012-03-20T07:05:05","date_gmt":"2012-03-20T06:05:05","guid":{"rendered":"http:\/\/flaven.fr\/?p=2131"},"modified":"2013-09-24T05:38:49","modified_gmt":"2013-09-24T03:38:49","slug":"responsive-web-design-webdesign-ipad-iphone-web-tablettes-le-webdesign-a-360-degres","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2012\/03\/responsive-web-design-webdesign-ipad-iphone-web-tablettes-le-webdesign-a-360-degres\/","title":{"rendered":"Responsive Web Design, Webdesign, iPad, iPhone, Web, Tablettes &#8211;  Le Webdesign \u00e0 360 degr\u00e9s"},"content":{"rendered":"\n<p><!--  Responsive Web Design, Webdesign, iPad, iPhone, Web, Tablettes -  Le Webdesign \u00e0 360 degr\u00e9s --><br \/>\n<!--  Ethan Marcotte, Dave Shea, Molly Holzschlag CSS3, CSS, HTML, Responsive WebDesign, Responsive Web Design, Tablette, iPad, iPhone, SVG, CMS, Th\u00e8me, webdesign, Web, Mobiles, Tablettes --><\/p>\n<p>C&#8217;est chaud sur le front du Webdesign, encore un mot-cl\u00e9 qui fait du buzz, on ne parle plus que <code>Responsive Webdesign<\/code>. C&#8217;est une \u00e9tape suppl\u00e9mentaire dans l&#8217;usage de la CSS dans le Webdesign, mouvement initi\u00e9 avec <code>CSS Zen Garden: The Beauty in CSS Design<\/code> par Dave Shea et Molly Holzschlag (<a title=\"Responsive Web Design, Webdesign, iPad, iPhone, Web, Tablettes - Le Webdesign \u00e0 360 degr\u00e9s\" class=\"bigpic\" href=\"http:\/\/www.csszengarden.com\/\" target=\"_blank\">www.csszengarden.com<\/a>).<!--more--><\/p>\n<h4>Une d\u00e9finition par Responsive Web Design<\/h4>\n<p>Que signifie le <code>Responsive Web Design<\/code>, il s&#8217;agit dans la pratique d&#8217;utiliser des grilles fluides, des images au format SVG dans le but d&#8217;afficher une page web de mani\u00e8re optimal quelque soit l&#8217;environnement, notamment le Web, le Mobile et les Tablettes. Ce terme <code>Responsive Web Design<\/code> a \u00e9t\u00e9 forg\u00e9 par Ethan Marcotte.<\/p>\n<h4>De quoi parle-t-on ?<\/h4>\n<p>L&#8217;essentiel <code>Responsive Web Design<\/code> consiste \u00e0 prendre en compte diff\u00e9rentes r\u00e9solutions contingentes que l&#8217;on peut r\u00e9sumer ainsi :  <\/p>\n<ul>\n<li>Smartphone (320px)<\/li>\n<li>Tablet (768px)<\/li>\n<li>Netbook (1024px)<\/li>\n<li>Desktop (1600px)<\/li>\n<\/ul>\n<p><b>L&#8217;ensemble de l&#8217;int\u00e9gration du WebDesign se fera ensuite essentiellement ensuite en HTML5, CSS3. Certains graphistes proposent d&#8217;utiliser des graphismes au format SVG, afin de b\u00e9n\u00e9ficier d&#8217;un format souvent lisible directement dans les navigateurs &#8220;modernes&#8221;.<\/b><\/p>\n<h2>En savoir plus<\/h2>\n<ul>\n<li>Responsive Web Design: 50 Examples and Best Practices On wordpress<br \/>\n\t<a href=\"http:\/\/designmodo.com\/responsive-design-examples\/\" target=\"_blank\">http:\/\/designmodo.com\/responsive-design-examples\/<\/a><\/li>\n<li>Media Queries<br \/>\n\t<a href=\"http:\/\/mediaqueri.es\/\" target=\"_blank\">http:\/\/mediaqueri.es\/<\/a><\/li>\n<li>320 and Up<br \/>\n\t<a href=\"http:\/\/stuffandnonsense.co.uk\/projects\/320andup\/\" target=\"_blank\">http:\/\/stuffandnonsense.co.uk\/projects\/320andup\/<\/a><\/li>\n<li>Unstoppable Robot Ninja, le site de Ethan Marcotte<br \/>\n\t<a href=\"http:\/\/unstoppablerobotninja.com\/\" target=\"_blank\">http:\/\/unstoppablerobotninja.com\/<\/a><\/li>\n<li>Responsive Design: The Beginning of a New Era<br \/>\n\t<a href=\"http:\/\/www.joshuasortino.com\/journal\/responsive-design-the-beginning-of-a-new-era\" target=\"_blank\">http:\/\/www.joshuasortino.com\/journal\/responsive-design-the-beginning-of-a-new-era<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>C&#8217;est chaud sur le front du Webdesign, encore un mot-cl\u00e9 qui fait du buzz, on ne parle plus que Responsive Webdesign. C&#8217;est une \u00e9tape suppl\u00e9mentaire&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2012\/03\/responsive-web-design-webdesign-ipad-iphone-web-tablettes-le-webdesign-a-360-degres\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Responsive Web Design, Webdesign, iPad, iPhone, Web, Tablettes &#8211;  Le Webdesign \u00e0 360 degr\u00e9s<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9403,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Le Webdesign \u00e0 360 degr\u00e9s couvre le responsive design pour iPad, iPhone, et tablettes. Utilisez des grilles fluides et SVG pour des pages web optimales.","bf_ai_og_title":"Webdesign \u00e0 360 degr\u00e9s","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3444,3445,3450,3451,3435,3452],"tags":[2221,209,424,425,303,426,249,427,428,429,430,431,34,432,126,2182,2198],"class_list":["post-2131","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-databases","category-seo-web-marketing","category-ux-product-design","category-web-design-front-end","category-web-development","category-wordpress-cms","tag-cms","tag-css","tag-dave-shea","tag-ethan-marcotte","tag-html","tag-ipad","tag-iphone","tag-mobiles","tag-molly-holzschlag-css3","tag-responsive-web-design","tag-responsive-webdesign","tag-svg","tag-tablette","tag-tablettes","tag-theme","tag-web","tag-webdesign-responsive-agile"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-yn","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/03\/wp_site_responsive_design_plugins_b_n_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/2131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=2131"}],"version-history":[{"count":1,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/2131\/revisions"}],"predecessor-version":[{"id":9404,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/2131\/revisions\/9404"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9403"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=2131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=2131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=2131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}