{"id":2295,"date":"2012-11-07T08:04:06","date_gmt":"2012-11-07T07:04:06","guid":{"rendered":"http:\/\/flaven.fr\/?p=2295"},"modified":"2013-09-24T05:24:28","modified_gmt":"2013-09-24T03:24:28","slug":"responsive-wordpress-ipad-iphone-web-tablettes-faire-de-votre-site-sous-wordpress-un-site-responsive","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2012\/11\/responsive-wordpress-ipad-iphone-web-tablettes-faire-de-votre-site-sous-wordpress-un-site-responsive\/","title":{"rendered":"Responsive, WordPress, iPad, iPhone, Web, Tablettes &#8211; Faire de votre site sous WordPress, un site Responsive"},"content":{"rendered":"<p><!-- #Responsive, #WordPress, #iPad, #iPhone, #Tablettes, #android, #SoLoMo, faire de votre site sous WordPress, un site Responsive --><\/p>\n<p><!--  Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre site sous WordPress, un site Responsive   --><br \/>\n<!--  CSS3, CSS, HTML5, Responsive, Responsive, Plugins, WebDesign, Tablette, iPad, iPhone, SVG, CMS, Th\u00e8me, webdesign, Web, Mobiles, Tablettes, WordPress, mobile, mobile web, mobile internet, wireless, pda, iphone, android, webkit, wap, dotMobi, theme, blackberry, admob, mobile adsense, qr-code, device, switcher, cellular, palm, nokia --><\/p>\n<p>Commen\u00e7ons ce qui sonne aujourd&#8217;hui comme une \u00e9vidence, l&#8217;\u00e9mergence de la mobilit\u00e9 avec son cort\u00e8ge de probl\u00e9matiques en terme de Webdesign, de &#8220;content delivery&#8221; et de d\u00e9veloppement sonne le glas d&#8217;une certain Web. <!--more--> Pour paraphraser le mot du G\u00e9n\u00e9ral de Gaulle, &#8220;Le web de papa est mort&#8221;, plus concr\u00e8tement encore, le concept de site Web est mort, c&#8217;est \u00e0 dire une cr\u00e9ation uniquement disponible pour une plate-forme et pour un certain nombre d&#8217;usages. Aujourd&#8217;hui, offrir une seule exp\u00e9rience Web ne suffit plus, c&#8217;est m\u00eame une erreur strat\u00e9gique majeure. Un professionnel du Web qu&#8217;il soit graphiste, d\u00e9veloppeur ou du marketing doit privil\u00e9gier l&#8217;exp\u00e9rience mobile et sociale dans ces cr\u00e9ations au-de-l\u00e0 de toute autre consid\u00e9ration. <\/p>\n<p><!-- En Volap\u00fck 2.0, il existe un adage bien connu qui dit \"Who Ain't the Today SoLoMo, Be the Tomorrow MalLoSol NoLoSo\", qu'on pourrait traduire \"Qui n'est pas le SoloMo aujourd'hui, Sera le Cornichon Ne-Sais-Pas de demain\". --><\/p>\n<p>En Volap\u00fck 2.0, faire du resposnive, c&#8217;est se prendre au &#8220;Mo&#8221; du SoLoMo.<\/p>\n<p>Plus prosa\u00efquement, si vous \u00eates un professionnel du web, vous pourrez aussi vous vendre plus cher en int\u00e9grant les mot-cl\u00e9s du moment : Responsive Design, HTML5, jQuery, Swiping, Tapping, Pinching, Tablettes, iPhone, iPad, Android, Galaxy, Mobile&#8230;etc.<\/p>\n<p>Le b\u00e9n\u00e9fice sera sans doute imm\u00e9diat, en offrant \u00e0 peu de frais une strat\u00e9gie &#8220;multi&#8221; : multi-plateformes, multi-usages, multi-canals&#8230; etc.<\/p>\n<p>Tout le monde sera content \u00e0 commencer par votre client, qui n&#8217;est ni un #geonpi, ni un #bolos et vous passerez \u00e0 ses yeux pour la r\u00e9incarnation 2.0 du magnanime &#8220;King SoLoMo&#8221;.<\/p>\n<p>Plus concr\u00e8tement, si vous poss\u00e9dez un site sous un WordPress, on va voir comment facilement rendre \u00e9ligible votre site ou le site de votre client \u00e0 ces nouvelles interfaces et #UX<\/p>\n<p>Pour information, les pratiques sont les m\u00eames quelque soit votre CMS (Drupal, Joomla, SilverStripe&#8230; que sais-je encore) voir m\u00eame un d\u00e9veloppement sur mesure, il s&#8217;agit juste d&#8217;int\u00e9grer les usages combin\u00e9s aux plate-formes, la fameuse #UX dans vos recommandations graphiques, techniques. C&#8217;est simple, non ?<\/p>\n<p>Sous WordPress, il existe l\u00e0 encore deux approches possibles, le choix corn\u00e9lien entre Plugin ou Th\u00e8me ? A cette question, il est certain que le th\u00e8me est la solution la plus avantageuse \u00e0 long terme, le plugin la solution la plus rapide et \u00e0 court terme.<\/p>\n<h2>Forger son propre th\u00e8me &#8220;Responsive&#8221;<\/h2>\n<p>On va voir gr\u00e2ce \u00e0 l&#8217;observation d&#8217;un th\u00e8me responsive basique, les bases de ce qu&#8217;il faut faire pour obtenir un  th\u00e8me &#8220;Responsive&#8221;.<\/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><i>Source : <a href=\"http:\/\/social.hecube.net\/blog\/2012\/03\/20\/responsive-web-design-webdesign-ipad-iphone-web-tablettes-le-webdesign-a-360-degres\/\" target=\"_blank\">http:\/\/social.hecube.net\/blog\/2012\/03\/20\/responsive-web-design-webdesign-ipad-iphone-web-tablettes-le-webdesign-a-360-degres\/<\/a><\/i><\/p>\n<h4>Comment faire son th\u00e8me &#8220;responsive&#8221;<\/h4>\n<p>Il est tout \u00e0 fait possible de comprendre les principes &#8220;responsive&#8221; applicables \u00e0 votre th\u00e8me WordPress. Bien sur, cela suppose que votre th\u00e8me n&#8217;utilise pas de flash et repose essentiellement sur jQuery et sur de l&#8217;HTML5, ce la vous sera plus facile. <\/p>\n<p>Il suffit de regarder comment est construit le th\u00e8me <code>responsive-twentyten<\/code> notamment la css <code>phone_style.css<\/code><\/p>\n<p><b>On a parcouru Responsive TwentyTen, qui est en fait un plugin o\u00f9 du moins s&#8217;installe comme tel. Ce n&#8217;est pas une th\u00e8me qui sera disponible dans l&#8217;espace habituel d\u00e9volu aux th\u00e8mes sous WP.<\/b><\/p>\n<p><b>Extrait de la css <code>phone_style.css<\/code><\/b><\/p>\n<pre lang=\"css\">\r\n\t\/* landscape *\/\r\n\t@media screen and (min-width: 321px) {\r\n\t  #wrapper {\r\n\t\tbackground-color: #ffDD00;\r\n\t    margin: 0 auto;\r\n\t    width: 90%;\r\n\t    width: 400px;\r\n\t    overflow: auto;\r\n\t  }\r\n\t\r\n\t\r\n\t\r\n\t\/* portrait *\/\r\n\t@media screen and (max-width: 320px) {\r\n\t  #wrapper {\r\n\t\t\/*background-color: #ff0000;*\/\r\n\t    margin: 0 auto;\r\n\t    width: 300px;\r\n\t    overflow: auto;\r\n\t  }\r\n<\/pre>\n<p>Il suffit de refaire la m\u00eame chose pour l&#8217;iPad dans un autre fichier CSS nomm\u00e9 <code>tablet_style.css<\/code><\/p>\n<p><b>Extrait de la css <code>tablet_style.css<\/code><\/b><\/p>\n<pre lang=\"css\">\r\n\t\/* landscape *\/\r\n\t@media screen and (min-width: 668px) {\r\n\t  #wrapper {\r\n\t    margin: 0 auto;\r\n\t    width: 90%;\r\n\t    \/*width: 400px;*\/\r\n\t   width:668px;\r\n\t    overflow: auto;\r\n\t  }\r\n\t\r\n\t\r\n\t\r\n\t\r\n\t\/* portrait *\/\r\n\t@media screen and (max-width: 668px) {\r\n\t  #wrapper {\r\n\t    margin: 0 auto;\r\n\t    width:668px;\r\n\t    overflow: auto;\r\n\t  }\r\n<\/pre>\n<h4>Modifier le fichier du plugin<\/h4>\n<p>Il suffit de rajouter une fonction qui fera la travail de conversion de votre th\u00e8me lorsque un iPad ou une tablette va se pr\u00e9senter devant votre site. <b>On a donc ajouter une fonction quasi-identique dans le fichier <code>responsive-twentyten.php<\/code> pour rendre notre theme compatible avec l&#8217;affichage sur une tablette.<\/b><\/p>\n<pre lang=\"php\" escaped=\"true\">\r\n\t\/* For iPhone *\/\r\n\tfunction iphone_add_css_and_js() {\r\n\t  echo '&lt;link rel=\"stylesheet\" href=\"' . get_bloginfo('wpurl') .'\/wp-content\/plugins\/responsive-twentyten\/css\/style.css\" media=\"screen and (min-device-width: 481px)\" type=\"text\/css\" \/&gt;\r\n\t    &lt;link type=\"text\/css\" rel=\"stylesheet\" media=\"only screen and (max-device-width: 480px)\" href=\"' . get_bloginfo('wpurl') .'\/wp-content\/plugins\/responsive-twentyten\/css\/phone_style.css\" \/&gt;\r\n\t    &lt;meta name=\"viewport\" content=\"width=device-width, minimum-scale=1.0, \r\n\t maximum-scale=1.0\"&gt;';\r\n\t}\r\n\r\n\tadd_action('wp_head', 'iphone_add_css_and_js');\r\n\r\n\r\n\t\/* For iPad *\/\r\n\tfunction ipad_add_css_and_js() {\r\n\t  echo '&lt;link rel=\"stylesheet\" href=\"' . get_bloginfo('wpurl') .'\/wp-content\/plugins\/responsive-twentyten\/css\/style.css\" media=\"screen and (min-device-width: 768px)\" type=\"text\/css\" \/&gt;\r\n\t    &lt;link type=\"text\/css\" rel=\"stylesheet\" media=\"only screen and (max-device-width: 768px)\" href=\"' . get_bloginfo('wpurl') .'\/wp-content\/plugins\/responsive-twentyten\/css\/tablet_style.css\" \/&gt;\r\n\t    &lt;meta name=\"viewport\" content=\"width=device-width, minimum-scale=1.0, \r\n\t maximum-scale=1.0\"&gt;';\r\n\t}\r\n\r\n\tadd_action('wp_head', 'ipad_add_css_and_js');\r\n\t\r\n<\/pre>\n<p>Les autres th\u00e8mes responsive sont nombreux, ils r\u00e9pondent au doux nom de ari, constellation, dark-dream_1.0.2, respo&#8230; bref il y a des th\u00e8mes payants, des th\u00e8mes gratuits. Il est toujours difficile de jauger de la qualit\u00e9 du d\u00e9veloppement d&#8217;un th\u00e8me notamment si la prise en main de l&#8217;administration du th\u00e8me n&#8217;est pas document\u00e9e quant au graphisme, vous l&#8217;avez g\u00e9n\u00e9ralement sous les yeux !!! Il reste n\u00e9anmoins \u00e0 s&#8217;assurer que le th\u00e8me est bien &#8220;responsive&#8221; en le testant sur iPhone ou sur iPad. Parmi, certains th\u00e8mes annonc\u00e9s comme &#8220;responsive&#8221;, nous avons d\u00e9couvert que certains ne l&#8217;\u00e9taient pas&#8230; C&#8217;est ballot !<\/p>\n<p><b>Affichage \u00e0 l&#8217;aide de th\u00e8me <code>responsive-twentyten<\/code> activ\u00e9 comme un plugin<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/iphone_wordpress_responsive_theme_1.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"714\" height=\"367\" \/><\/p>\n<p><b>Affichage \u00e0 l&#8217;aide de th\u00e8me <code>responsive-twentyten<\/code> activ\u00e9 comme un plugin<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/iphone_wordpress_responsive_theme_2.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"367\" height=\"714\" \/><\/p>\n<p><b>Affichage \u00e0 l&#8217;aide de th\u00e8me <code>responsive-twentyten<\/code> activ\u00e9 comme un plugin<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/ipad_wordpress_responsive_theme_1.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"465\" height=\"595\" \/><\/p>\n<p><i>Source : <a href=\"http:\/\/wordpress.org\/extend\/plugins\/responsive-twentyten\/\" target=\"_blank\">http:\/\/wordpress.org\/extend\/plugins\/responsive-twentyten\/<\/a><\/i><\/p>\n<h2>Les plugins<\/h2>\n<p>Il vous reste \u00e0 d\u00e9faut de concocter votre site la\t possibilit\u00e9 d&#8217;utiliser des plugins existants. On a fait un choix rapide parmi les nombreux qui pullulent pour WP.<\/p>\n<h4>1. WordPress Mobile Pack<\/h4>\n<p>Le plugin <code>WordPress Mobile Pack<\/code> est plugin tr\u00e8s avanc\u00e9. C&#8217;est m\u00eame une boite \u00e0 outils compl\u00e8te pour rendre totalement votre site WP avec un affichage sur tablette et mobile avec un panel d&#8217;aminstration est assez avanc\u00e9 : un mobile switcher, des th\u00e8mes, la possibilit\u00e9 de tirer profit des widgets de WP.<\/p>\n<p><i>Source : <a href=\"http:\/\/wordpress.org\/extend\/plugins\/wordpress-mobile-pack\/\" target=\"_blank\">http:\/\/wordpress.org\/extend\/plugins\/wordpress-mobile-pack\/<\/a><\/i><\/p>\n<p><b>L&#8217;administration de WordPress Mobile Pack<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/backend_wordpress_mobile_pack_1.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>L&#8217;administration de WordPress Mobile Pack<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/backend_wordpress_mobile_pack_2.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>Le rendu sous le simulateur iPhone<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/iphone_wordpress_mobile_pack_1.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"367\" height=\"713\" \/><\/p>\n<p><b>Le rendu sous le simulateur iPhone<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/iphone_wordpress_mobile_pack_2.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"367\" height=\"713\" \/><\/p>\n<p><b>Le rendu sous le simulateur iPhone<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/iphone_wordpress_mobile_pack_3.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"367\" height=\"713\" \/><\/p>\n<p><b>Le rendu sous le simulateur iPad<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/ipad_wordpress_mobile_pack_1.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"468\" height=\"595\" \/><\/p>\n<p><b>Le rendu sous le simulateur iPad<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/ipad_wordpress_mobile_pack_2.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"468\" height=\"595\" \/><\/p>\n<p><b>Le rendu sous le simulateur iPad<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/ipad_wordpress_mobile_pack_3.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"468\" height=\"595\" \/><\/p>\n<h4>2. WP Mobile Detector<\/h4>\n<p>C&#8217;est un plugin qui vient avec son lot de th\u00e8mes mobiles. Les th\u00e8mes sont d&#8217;une qualit\u00e9 in\u00e9gale et m\u00eame sont parfois assez moches, on a choisi un th\u00e8me jaune canari du meilleur effet, mais cela au moins le m\u00e9rite de vous offrir le choix. Les th\u00e8mes se nomment :  anakin-mobile, bluesteel-mobile, mojo-mobile&#8230;etc.<\/p>\n<p><i>Source : <a href=\"http:\/\/wordpress.org\/extend\/plugins\/wp-mobile-detector\/\" target=\"_blank\">http:\/\/wordpress.org\/extend\/plugins\/wp-mobile-detector\/<\/a><\/i><\/p>\n<p><b>L&#8217;administration de WP Mobile Detector<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/backend_wp_mobile_detector_1.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>L&#8217;administration de WP Mobile Detector<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/backend_wp_mobile_detector_2.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>L&#8217;administration de WP Mobile Detector<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/backend_wp_mobile_detector_3.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>Le rendu sous le simulateur iPhone<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/iphone_wp_mobile_detector_1.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"367\" height=\"713\" \/><\/p>\n<p><b>Le rendu sous le simulateur iPhone<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/iphone_wp_mobile_detector_2.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"367\" height=\"713\" \/><\/p>\n<p><b>Le rendu sous le simulateur iPhone<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/iphone_wp_mobile_detector_3.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"367\" height=\"713\" \/><\/p>\n<p><b>Le rendu sous le simulateur iPad<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/ipad_wp_mobile_detector_1.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"468\" height=\"595\" \/><\/p>\n<p><b>Le rendu sous le simulateur iPad<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/ipad_wp_mobile_detector_2.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"468\" height=\"595\" \/><\/p>\n<p><b>Le rendu sous le simulateur iPad<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/ipad_wp_mobile_detector_3.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"468\" height=\"595\" \/><\/p>\n<h4>3. WPtouch<\/h4>\n<p>Sans doute pour l&#8217;iPhone et pour un plugin gratuit, le plus avanc\u00e9 et le plus \u00e9l\u00e9gant des plugins en terme graphique mais autant, le dire tout de suite, le rendu ne fonctionne pas sur iPad.<\/p>\n<p><i>Source : <a href=\"http:\/\/wordpress.org\/extend\/plugins\/wptouch\/\" target=\"_blank\">http:\/\/wordpress.org\/extend\/plugins\/wptouch\/<\/a><\/i><\/p>\n<p><b>Le rendu sous le simulateur iPhone<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/iphone_wp_touch_1.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"367\" height=\"713\" \/><\/p>\n<p><b>Le rendu sous le simulateur iPhone<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/iphone_wp_touch_2.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"367\" height=\"713\" \/><\/p>\n<p><b>Le rendu sous le simulateur iPhone<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/iphone_wp_touch_3.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"367\" height=\"713\" \/><\/p>\n<p><b>Le rendu sous le simulateur iPhone<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/iphone_wp_touch_4.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"367\" height=\"713\" \/><\/p>\n<p><b>Le rendu sous le simulateur iPhone<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/iphone_wp_touch_1.jpg\" alt=\"Responsive, WordPress, iPad, iPhone, Web, Tablettes - Faire de votre sous WordPress, un site Responsive\" width=\"367\" height=\"713\" \/><\/p>\n<h4>4. Respond.js<\/h4>\n<p>On n&#8217;est plus \u00e0 proprement parler dans un plugin, &#8220;plug and play&#8221;. C&#8217;est une v\u00e9ritable biblioth\u00e8que, optimis\u00e9 en poids et en performance, notamment pour l&#8217;affichage des m\u00e9dias en CSS3 pour internet explorer (IE), ambitieux !<\/p>\n<p><i>Source : <a href=\"http:\/\/wordpress.org\/extend\/plugins\/respondjs\/\" target=\"_blank\">http:\/\/wordpress.org\/extend\/plugins\/respondjs\/<\/a><\/i><\/p>\n<h2>En savoir plus<\/h2>\n<ul>\n<li>WordPress Plugins to Help Make Your Site Responsive<br \/>\n\t<a href=\"http:\/\/speckyboy.com\/2012\/02\/08\/wordpress-plugins-to-help-make-your-site-responsive\/\" target=\"_blank\">http:\/\/speckyboy.com\/2012\/02\/08\/wordpress-plugins-to-help-make-your-site-responsive\/<\/a><\/li>\n<li>Responsive Design and Mobile Plugins for WordPress<br \/>\n\t<a href=\"http:\/\/www.likoma.com\/responsive-design-and-mobile-plugins-for-wordpress\/\" target=\"_blank\">http:\/\/www.likoma.com\/responsive-design-and-mobile-plugins-for-wordpress\/<\/a><\/li>\n<li>10 Responsive WordPress Plugins to Complement Your Theme<br \/>\n\t<a href=\"http:\/\/wpmu.org\/10-responsive-wordpress-plugins-to-complement-your-theme\/\" target=\"_blank\">http:\/\/wpmu.org\/10-responsive-wordpress-plugins-to-complement-your-theme\/<\/a><\/li>\n<li>40+ Free Responsive WordPress Themes<br \/>\n\t<a href=\"http:\/\/www.hongkiat.com\/blog\/free-responsive-wordpress-themes\/\" target=\"_blank\">http:\/\/www.hongkiat.com\/blog\/free-responsive-wordpress-themes\/<\/a><\/li>\n<li>Create A Responsive, Mobile-First WordPress Theme<br \/>\n\t<a href=\"http:\/\/wp.smashingmagazine.com\/2012\/06\/28\/create-responsive-mobile-first-wordpress-theme\/\" target=\"_blank\">http:\/\/wp.smashingmagazine.com\/2012\/06\/28\/create-responsive-mobile-first-wordpress-theme\/<\/a><\/li>\n<li>Sketching: the Visual Thinking Power Tool<br \/>\n\t<a href=\"http:\/\/www.alistapart.com\/articles\/sketching-the-visual-thinking-power-tool\/\" target=\"_blank\">http:\/\/www.alistapart.com\/articles\/sketching-the-visual-thinking-power-tool\/<\/a><\/li>\n<li>Best Responsive WordPress Themes<br \/>\n\t<a href=\"http:\/\/www.premiumwp.com\/best-responsive-wordpress-themes\/\" target=\"_blank\">http:\/\/www.premiumwp.com\/best-responsive-wordpress-themes\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Commen\u00e7ons ce qui sonne aujourd&#8217;hui comme une \u00e9vidence, l&#8217;\u00e9mergence de la mobilit\u00e9 avec son cort\u00e8ge de probl\u00e9matiques en terme de Webdesign, de &#8220;content delivery&#8221; et&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2012\/11\/responsive-wordpress-ipad-iphone-web-tablettes-faire-de-votre-site-sous-wordpress-un-site-responsive\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Responsive, WordPress, iPad, iPhone, Web, Tablettes &#8211; Faire de votre site sous WordPress, un site Responsive<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9387,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Rendre votre site WordPress responsive pour iPad, iPhone et tablettes avec des outils sp\u00e9cifiques pour une exp\u00e9rience utilisateur optimale.","bf_ai_og_title":"Responsive WordPress: iPad, iPhone","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":[3454,3442,3444,3445,3447,3448,3449,3450,3451,3435,3452],"tags":[484,2238,258,485,2221,209,2245,487,488,2185,426,249,31,489,490,491,427,492,493,494,495,496,497,431,498,34,432,126,499,2182,2198,500,501,2223],"class_list":["post-2295","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-journalism-writing","category-mobile-devices","category-programming-databases","category-seo-web-marketing","category-technology-trends","category-tools-productivity","category-tutorials-how-to","category-ux-product-design","category-web-design-front-end","category-web-development","category-wordpress-cms","tag-admob","tag-android","tag-blackberry","tag-cellular","tag-cms","tag-css","tag-css3","tag-device","tag-dotmobi","tag-html5","tag-ipad","tag-iphone","tag-mobile","tag-mobile-adsense","tag-mobile-internet","tag-mobile-web","tag-mobiles","tag-nokia","tag-palm","tag-pda","tag-plugins","tag-qr-code","tag-responsive","tag-svg","tag-switcher","tag-tablette","tag-tablettes","tag-theme","tag-wap","tag-web","tag-webdesign-responsive-agile","tag-webkit","tag-wireless","tag-wordpress"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-B1","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/11\/wp_site_responsive_design_plugins_b_n_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/2295","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=2295"}],"version-history":[{"count":1,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/2295\/revisions"}],"predecessor-version":[{"id":9388,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/2295\/revisions\/9388"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9387"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=2295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=2295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=2295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}