Il m’en aura fallu du temps. Presque deux ans après l’article précurseur d’Ethan Marcotte et dix mois après en avoir parlé sur ce blog, celui-ci est enfin compatible avec tous vos devices, qu’ils soient grands ou petits. Adieu le plugin WordPress tout pourri (que j’avais déjà abandonné il y a un petit temps), bonjour la modernité !
C’est vrai que le nouveau design n’était pas ultra compliqué à adapter mais il a quand même fallu un peu ruser pour certains aspects. Pour résumer rapidement, j’y suis principalement allé à coups de max-width et de width:100%. J’ai finalement assez peu fait usage des media queries, qui ont été utilisées principalement pour réduire la taille du texte sur petit écran. Je me suis servi de FitText.js pour le titre principal et de cette technique très futée pour les vidéos.
Je n’ai pas testé toutes les pages, donc si vous voyez un truc pas net qui dépasse sur les côtés, faites le moi savoir. Dans l’ensemble, ça devrait aller mais j’ai eu une sale tendance à utiliser des embeds louches par le passé et ils doivent sûrement être peu esthétiques sur l’écran de votre téléphone. Je vous promets aussi de me débarrasser du reCAPTCHA dès que je trouve une solution alternative satisfaisante.
Et tant qu’on est là à parler de responsive Web design, je vous invite aussi à consulter storify.com sur votre smartphone 😉
Le blog de Vincent Battaglia 
Hier Flash, aujourd’hui JQuery \o/
LikeLike
Et ça donne quoi pour les images? (je me sens concerné)
LikeLike
J’ai ma réponse 🙂
Et hop un peu d’inverse ingeneering 😀
LikeLike
Tu pourrais même encore pousser plus loin en virant Typekit qui ne sert que pour ton logo (27 Ko) et le remplacer par ce png (5 Ko – http://wpt.cc/FxHZ) qui suivra bien le responsive des autres images postées sur ton blog. En plus, virer un peu de JS externe ne fait jamais de tort. 🙂
LikeLike
chez moi, recaptcha est trop large pour l’écran du smartphone, ce qui donne quand meme un scrolling horizontal
LikeLike
@PaKaL Tu as trouvé ton bonheur donc ?
@Thibaut Je n’aime pas l’idée d’avoir du texte en image mais dans ce cas, c’est vrai que c’est clairement discutable.
@Ju Oui, c’est pour ça que je veux le virer.
LikeLike
Pas encore regardé ce sera pour ce week end si tu m’autorise évidemment 🙂
LikeLike
@PaKaL OK. En gros, le conteneur principale (#content) a un max-width de 600 pixels et les images ont une largeur de 100%.
LikeLike
Joli 🙂
Pour le recaptcha tu peux le mettre avec un theme custom. En gros tu ne gardes que l’image (qui fait 300px de large) et tu crées les autres éléments toi-même. Exemple http://www.finalwebsites.com/demos/custom-captcha-image-script/
Sinon une autre solution serait peut-être simplement de… l’enlever pour les mobiles ?
LikeLike
@Ced Ah cool, je vais faire ça !
LikeLike
Donc en gros, c’est adapté aux résolutions des téléphones et des écrans CRT des années 90, mais pas aux écrans modernes qui ont droit à plus de largeur de marge qu’à de largeur de contenu. Les 2 flèches vers l’extérieur qui illustrent l’article auraient du pointer vers l’intérieur plutôt…
A moins que j’ai loupé une astuce de usability qqpart, et s’il est vrai que prendre toute la largeur ne serait pas partique, 600px me parait quand-même vraiment étroit non ?
LikeLike
@BARTDUDE: Non, ce n’est pas trop étroit. Une colonne de texte plus large devient difficile à lire.
LikeLike
@Bartdude Ben a raison, après un certain nombre de mots par ligne, le texte devient difficile et désagréable à lire.
LikeLike
Au temps pour moi alors… je savais qu’il y avait une “limite” officieuse, pas qu’elle était si basse. il faut dire qu’on n’a plus l’habitude de voir des sites sans sidebars remplies de brol, c’est sans-doute ca qui m’a perturbé ici.
LikeLike
Le responsive design est l’avenir de la création de site internet, bravo pour cette initiative !!!
LikeLike
Blog tres simple mais beau .juste il manque de navigabilité : comment connaitre ou on ai , je me perd vite!
LikeLike
J’ai fait beaucoup de sites en responsive. Il faut vraiment faire attention à beaucoup de détails pour que ça fonctionne correctement.
J’ai regardé comment rendait ce site internet en responsive, et c’est vrai qu’il est bien fait. Après c’est très dur à mettre en place sur des sites étant très chargés visuellement.
LikeLike