Responsive, WordPress, iPad, iPhone, Web, Tablettes – Faire de votre site sous WordPress, un site Responsive
Commençons ce qui sonne aujourd’hui comme une évidence, l’émergence de la mobilité avec son cortège de problématiques en terme de Webdesign, de “content delivery” et de développement sonne le glas d’une certain Web. Pour paraphraser le mot du Général de Gaulle, “Le web de papa est mort”, plus concrètement encore, le concept de site Web est mort, c’est à dire une création uniquement disponible pour une plate-forme et pour un certain nombre d’usages. Aujourd’hui, offrir une seule expérience Web ne suffit plus, c’est même une erreur stratégique majeure. Un professionnel du Web qu’il soit graphiste, développeur ou du marketing doit privilégier l’expérience mobile et sociale dans ces créations au-de-là de toute autre considération.
En Volapük 2.0, faire du resposnive, c’est se prendre au “Mo” du SoLoMo.
Plus prosaïquement, si vous êtes un professionnel du web, vous pourrez aussi vous vendre plus cher en intégrant les mot-clés du moment : Responsive Design, HTML5, jQuery, Swiping, Tapping, Pinching, Tablettes, iPhone, iPad, Android, Galaxy, Mobile…etc.
Le bénéfice sera sans doute immédiat, en offrant à peu de frais une stratégie “multi” : multi-plateformes, multi-usages, multi-canals… etc.
Tout le monde sera content à commencer par votre client, qui n’est ni un #geonpi, ni un #bolos et vous passerez à ses yeux pour la réincarnation 2.0 du magnanime “King SoLoMo”.
Plus concrètement, si vous possédez un site sous un WordPress, on va voir comment facilement rendre éligible votre site ou le site de votre client à ces nouvelles interfaces et #UX
Pour information, les pratiques sont les mêmes quelque soit votre CMS (Drupal, Joomla, SilverStripe… que sais-je encore) voir même un développement sur mesure, il s’agit juste d’intégrer les usages combinés aux plate-formes, la fameuse #UX dans vos recommandations graphiques, techniques. C’est simple, non ?
Sous WordPress, il existe là encore deux approches possibles, le choix cornélien entre Plugin ou Thème ? A cette question, il est certain que le thème est la solution la plus avantageuse à long terme, le plugin la solution la plus rapide et à court terme.
Forger son propre thème “Responsive”
On va voir grâce à l’observation d’un thème responsive basique, les bases de ce qu’il faut faire pour obtenir un thème “Responsive”.
De quoi parle-t-on ?
L’essentiel Responsive Web Design consiste à prendre en compte différentes résolutions contingentes que l’on peut résumer ainsi :
- Smartphone (320px)
- Tablet (768px)
- Netbook (1024px)
- Desktop (1600px)
Comment faire son thème “responsive”
Il est tout à fait possible de comprendre les principes “responsive” applicables à votre thème WordPress. Bien sur, cela suppose que votre thème n’utilise pas de flash et repose essentiellement sur jQuery et sur de l’HTML5, ce la vous sera plus facile.
Il suffit de regarder comment est construit le thème responsive-twentyten notamment la css phone_style.css
On a parcouru Responsive TwentyTen, qui est en fait un plugin où du moins s’installe comme tel. Ce n’est pas une thème qui sera disponible dans l’espace habituel dévolu aux thèmes sous WP.
Extrait de la css phone_style.css
/* landscape */ @media screen and (min-width: 321px) { #wrapper { background-color: #ffDD00; margin: 0 auto; width: 90%; width: 400px; overflow: auto; } /* portrait */ @media screen and (max-width: 320px) { #wrapper { /*background-color: #ff0000;*/ margin: 0 auto; width: 300px; overflow: auto; } |
Il suffit de refaire la même chose pour l’iPad dans un autre fichier CSS nommé tablet_style.css
Extrait de la css tablet_style.css
/* landscape */ @media screen and (min-width: 668px) { #wrapper { margin: 0 auto; width: 90%; /*width: 400px;*/ width:668px; overflow: auto; } /* portrait */ @media screen and (max-width: 668px) { #wrapper { margin: 0 auto; width:668px; overflow: auto; } |
Modifier le fichier du plugin
Il suffit de rajouter une fonction qui fera la travail de conversion de votre thème lorsque un iPad ou une tablette va se présenter devant votre site. On a donc ajouter une fonction quasi-identique dans le fichier responsive-twentyten.php pour rendre notre theme compatible avec l’affichage sur une tablette.
/* For iPhone */ function iphone_add_css_and_js() { echo '<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" /> <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" /> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">'; } add_action('wp_head', 'iphone_add_css_and_js'); /* For iPad */ function ipad_add_css_and_js() { echo '<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" /> <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" /> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">'; } add_action('wp_head', 'ipad_add_css_and_js'); |
Les autres thèmes responsive sont nombreux, ils répondent au doux nom de ari, constellation, dark-dream_1.0.2, respo… bref il y a des thèmes payants, des thèmes gratuits. Il est toujours difficile de jauger de la qualité du développement d’un thème notamment si la prise en main de l’administration du thème n’est pas documentée quant au graphisme, vous l’avez généralement sous les yeux !!! Il reste néanmoins à s’assurer que le thème est bien “responsive” en le testant sur iPhone ou sur iPad. Parmi, certains thèmes annoncés comme “responsive”, nous avons découvert que certains ne l’étaient pas… C’est ballot !
Affichage à l’aide de thème responsive-twentyten activé comme un plugin
Affichage à l’aide de thème responsive-twentyten activé comme un plugin
Affichage à l’aide de thème responsive-twentyten activé comme un plugin
Source : http://wordpress.org/extend/plugins/responsive-twentyten/
Les plugins
Il vous reste à défaut de concocter votre site la possibilité d’utiliser des plugins existants. On a fait un choix rapide parmi les nombreux qui pullulent pour WP.
1. WordPress Mobile Pack
Le plugin WordPress Mobile Pack est plugin très avancé. C’est même une boite à outils complète pour rendre totalement votre site WP avec un affichage sur tablette et mobile avec un panel d’aminstration est assez avancé : un mobile switcher, des thèmes, la possibilité de tirer profit des widgets de WP.
Source : http://wordpress.org/extend/plugins/wordpress-mobile-pack/
L’administration de WordPress Mobile Pack
L’administration de WordPress Mobile Pack
Le rendu sous le simulateur iPhone
Le rendu sous le simulateur iPhone
Le rendu sous le simulateur iPhone
Le rendu sous le simulateur iPad
Le rendu sous le simulateur iPad
Le rendu sous le simulateur iPad
2. WP Mobile Detector
C’est un plugin qui vient avec son lot de thèmes mobiles. Les thèmes sont d’une qualité inégale et même sont parfois assez moches, on a choisi un thème jaune canari du meilleur effet, mais cela au moins le mérite de vous offrir le choix. Les thèmes se nomment : anakin-mobile, bluesteel-mobile, mojo-mobile…etc.
Source : http://wordpress.org/extend/plugins/wp-mobile-detector/
L’administration de WP Mobile Detector
L’administration de WP Mobile Detector
L’administration de WP Mobile Detector
Le rendu sous le simulateur iPhone
Le rendu sous le simulateur iPhone
Le rendu sous le simulateur iPhone
Le rendu sous le simulateur iPad
Le rendu sous le simulateur iPad
Le rendu sous le simulateur iPad
3. WPtouch
Sans doute pour l’iPhone et pour un plugin gratuit, le plus avancé et le plus élégant des plugins en terme graphique mais autant, le dire tout de suite, le rendu ne fonctionne pas sur iPad.
Source : http://wordpress.org/extend/plugins/wptouch/
Le rendu sous le simulateur iPhone
Le rendu sous le simulateur iPhone
Le rendu sous le simulateur iPhone
Le rendu sous le simulateur iPhone
Le rendu sous le simulateur iPhone
4. Respond.js
On n’est plus à proprement parler dans un plugin, “plug and play”. C’est une véritable bibliothèque, optimisé en poids et en performance, notamment pour l’affichage des médias en CSS3 pour internet explorer (IE), ambitieux !
Source : http://wordpress.org/extend/plugins/respondjs/
En savoir plus
- WordPress Plugins to Help Make Your Site Responsive
http://speckyboy.com/2012/02/08/wordpress-plugins-to-help-make-your-site-responsive/ - Responsive Design and Mobile Plugins for WordPress
http://www.likoma.com/responsive-design-and-mobile-plugins-for-wordpress/ - 10 Responsive WordPress Plugins to Complement Your Theme
http://wpmu.org/10-responsive-wordpress-plugins-to-complement-your-theme/ - 40+ Free Responsive WordPress Themes
http://www.hongkiat.com/blog/free-responsive-wordpress-themes/ - Create A Responsive, Mobile-First WordPress Theme
http://wp.smashingmagazine.com/2012/06/28/create-responsive-mobile-first-wordpress-theme/ - Sketching: the Visual Thinking Power Tool
http://www.alistapart.com/articles/sketching-the-visual-thinking-power-tool/ - Best Responsive WordPress Themes
http://www.premiumwp.com/best-responsive-wordpress-themes/
