Toilettage d’urbanbike | 3

Depuis 2003, je bricole mes templates pour ExpressionEngine mais, fort heureusement, @doopix veille à corriger mes erreurs (…il a les clés du camion…!)…

En octobre 2012 (lire ici et là), cela m’avait repris pour adapter des fontes, poussé — entre autres — par les deux Benoît(s)…

Et puis quelques expériences ce premier semestre en responsive sous WordPress.

Certes, urbanbike n’étant pas un vrai site et a une mise en pages à laquelle je tiens. Bref, je soupirais en regardant ce que je pouvais déjà faire avec Photager qui tourne lui sous Koken.

J’en étais resté là, sans frustration aucune, mon bout de code dans le source d’urbanbike permettant au moins aux utilisateurs d’iPhone de charger une autre CSS pour afficher ces pages dans un format plus adapté.

De la discussion à l’action…!

Tous les mois, je discute avec mon hébergeur, @monarobase (lui aussi a les clés du camion)…

Je n’ai jamais rencontré Richard mais on échange au téléphone depuis des années, depuis que je suis arrivé chez lui à vrai dire…! Et pas trois minutes…!

J’avais déjà évoqué cette problématique du responsive avec Dominique et lui. En juin 2012, Richard m’avait d’ailleurs passé une maquette de principe qui reprenait la disposition actuelle du site mais je lui avais demandé du temps pour réfléchir. Je voulais autre chose, mais je ne savais pas encore quoi.

Mais depuis avril 2013, cela se précise. Bon, entre temps, j’ai fermé quelques projets dont, accessoirement, ma propre boite.

Bref, la semaine dernière, je termine enfin une maquette au pixel près pour avancer sur des bases précises (…se souvenir que monter une maquette en CSS ne permet pas de changer ensuite d’idée comme pour un projet papier) et la pose dans notre dossier commun…

Et, ce soir, petit courriel de @monarobase avec ceci…

Avec une de mes photos d’artichaut permanenté…!

Une maquette de principe mais 100 pour 100 responsive, sur mesure et respectant ma colonne de gauche de 450 pixels… sans logo, juste dans la version iPhonesque.

Pour que les choses soient claires, ô lecteur, quelques copies d’écran (…j’aurais pu mettre en ligne cette maquette mais on en est à des ajustements et déjà reçu une nouvelle mouture suite à mes remarques)…

C’est quoi responsive…?

L’idée est d’employer une seule page d’accueil qui s’adapte à tous les écrans, que l’on soit en mode portrait ou paysage.

Et donc à des tailles d’écran différentes, quitte à masquer des infos ou les repousser sous d’autres…

Tiens, mais c’est une disposition que je connais…

Jusqu’au iPhone…

Et plus étroit encore… Là, ça va encore changer mais cela reste du cosmétique…

@monarobase a respecté ma maquette de départ et je me suis adapté de mon côté sur d’autres aspects techniques. C’est aussi très agréable de bosser avec des fous du HTML5 et des CSS qui proposent des solutions aux problèmes évoqués (le coup de la photo, c’est sympa non…)

Bref, ce n’est qu’une première étape car il reste à changer quelques éléments graphiques (…vous le verrez à l’occasion), préciser quelques points, en discuter avec @doopix. Puis à insuffler le tout dans ExpressionEngine, tester. Et fignoler au coton-tige (clin d’oeil à Jean-Pierre Thérond)…

À suivre, assurément…

Merci Richard…!

Zut, on a oublié les zones de réclame…!