Cet article a été publié il y a maintenant 1 année. Il commence a dater, lisez-le en gardant cette information en tête. Certains éléments pourraient être dépréciés au profit d'autres ressources.

Techniques RWD avancées

Cet article présente des technique RWD avancées qui peuvent servir au-delà même de WordPress mais qui s’avèrent très utiles pour nos blogs. Il aborde aussi la question du mobile first.

Dans un précédent billet, je vous demandais ce que vous pensiez du RWD pour les blogs WordPress. La plupart du temps la réponse que j’ai pu avoir en commentaires, sur Twitter et dans ma veille technologique est : OUI !

Maintenant, il y a certaines techniques qui devraient se généraliser bientôt et qui pourraient vous convenir. Comme toujours il s’agit de les utiliser avec parcimonie, suivant les besoins.

La méthode getComputedStyle vs MatchMedia

Kezako?

La différence entre les deux avec mes mots : avec MatchMedia on fait des media queries dans le JavaScript, avec getComputedStyle, on passe l’information au script JS sous la forme d’une condition.

Concrètement avec MatchMedia l’on écrire cela :

Source : http://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html

Avec la méthode getComputedStyle, il s’agit de définir une règle que JavaScript va pouvoir lire dans le CSS :

@media (min-width: 50em) { body:after { content :'largescreen'; display:none;//contenu invisible }

et pour lire cette information depuis le js :

var size = window.getComputedStyle(document.body,':after').getPropertyValue('content'); if (size == 'largescreen') { ... }

Cela vous permet de charger du contenu supplémentaire en fonction de la taille de l’écran par exemple.

Disclaimer

La méthode getComputedStyle n’est pas « proprette », elle nécessite des hacks CSS ce qui pour certains est le mal absolu. Le support sur Opera est inexistant.

Le modèle Flexbox

Je vous renvoie à mon Tumblr.  Mais je rajouterais que ce modèle, qui a un assez bon support mobile, devrait se généraliser. Pourquoi? Parce qu’il permet aussi, via la propriété order, de changer l’ordre de vos boîtes. L’idée étant de réorganiser votre layout suivant le device ou la résolution :

@media (max-width: 768px){ #conteneur { display: flex; } #main { order: 2; /* Lower than the default of 0 */ } #sidebar { order: 1; /* Lower than the default of 0 */ } }

Ici c’est un exemple rapide mais on entrevoit les perspectives UX sur les tablettes et autres appareils mobiles.

Le mobile first?

J’ai eu ce commentaire de @choblab sur mon précédent billet où je posais la question du mobile first :

Est-on « condamné » au mobile first? oui, surtout que réfléchir dès le départ à une version mobile oblige à se concentrer sur l’essentiel et à enlever tout ce qui ne sert à rien

Mon propos n’est pas de discutailler pour savoir si chob a raison. Sûrement d’ailleurs. Mais ce qui était sous-entendu dans ma question et que je n’ai peut-être pas assez bien exprimé est le fait que le mobile first entraîne le mobile first.

Autrement dit, quand je choisis un approche mobile first, je suis « condamné » au mobile first pour toute évolution future. Je me demande donc s’il n’y a pas d’autres approches plus pertinentes en fonction du projet. C’est d’autant plus vrai avec les sites qui évoluent sur WordPress car ils ont tendance à évoluer rapidement. Pour mon petit exemple, il m’arrive souvent de rajouter certaines choses au blog ou de faire évoluer certaines sections.

Compléments

J’ai trouvé un billet très bien rédigé qui fait un tour d’horizon des approches mobiles pour la navigation: il est signé @loriskumo à cette URL: http://t.co/nDySTcT8.

Le blog de InpixelItrust est assez fourni en ressources mobiles également.

Partager sur les réseaux

Commentaires

*Pour un lien utilisez [a href="votre_lien"][/a]
*Pour une citation tilisez [q][/q]
*Pour afficher du code utilisez [php][/php]
Si votre code dépasse les 20 lignes, merci d'utiliser des services gratuits comme pastebin

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *