Koken à l’usage | 7
Modèle "responsive" of course…
dans
ancres |
dans mon bocal |
mémoire |
photo
J’aime bien Koken — lire urbanbike | Koken à l’usage | 6 — que j’emploie depuis début 2013.
Ce produit permet de mettre en ligne nos images1.
Alors, certes, l’application n’est pas toujours d’une vitesse foudroyante (surtout avec ma ligne ADSL en fin de ligne) au niveau du retour des images mais j’apprécie le travail effectué par une équipe de trois développeurs qui nous proposaient alors d’utiliser leur produit gratuitement.
Au bout de trois années de mises à jour, à découvrir les ajouts mais aussi suivre leurs aventures, la question reste entière : comment les remercier…? D’autant que je me suis familiarisé avec cet outil…
- Même si la template elementary était parfaite (…et livrée avec quelques autres), j’avais l’envie de payer mon éco depuis un bout de temps. Un achat via Koken + PayPal… Et hop…
Bon, je n’ai pas terminé, je suis même arrivé lundi matin à virer par erreur tout ce que j’avais fait le week-end. Oui, je suis parfois totalement à la masse…!
J’ai recommencé, cela m’occupe même si leur CSS est assez complexe à paramétrer (…complexe pour mes 3 neurones, CQFD…!). Sans oublier que le nombre d’images à régénérer complique singulièrement la tâche…
Ce qui suit sont des vues à un instant “t”…! Et plus d’actualité…
Responsive, pourquoi faire…?
Illustrons — maladroitement2 — la template Madison 2 proposée par Koken…!
Je voulais (…même si le premier revers est un temps de chargement assez long) obtenir un effet comme celui-ci…

- Plein écran sur le Mac…
En réduisant la fenêtre…

- à gauche, un poil plus resserré (j’ai regroupé dans une seule copie d’écran pour éviter de vous lasser…)
- à droite, plus encore avec réduction de 8 colonnes à 3… Ceci se définit dans la CSS…

- Et enfin à 2 pour la version sur iPhone… Notez que le menu passe en noir dans un espace en avant-plan…

Tout ceci se règle via l’interface de Koken dans une fenêtre Drafts.

- Évidement, ce n’est pas (!!) le bon modèle affiché mais cela vous permet de comprendre le principe…

- On change les infos de CSS et on applique pour voir le résultat…

- Chaque modèle de page a sa template, son modèle…

- La fenêtre de réglage de la CSS peut être fixe ou se balader devant la page en cours de peaufinage…
Et on reste patient… on attend que le CMS réagisse… On reste en lévitation, on ne s’énerve pas…
Optimiser vos images est un plus…
Autre point essentiel, les photos, bien entendu.
J’emploie en batch JPEGmini ⚑ ici en lieu et place de l’excellent TinyPNG.

Les résultats sont excellents et la consommation de la bande passante réduite (au moment de l’envoi des fichiers…).
Ne pas oublier que c’est un profil ICC sRVB qui est demandé pour le Web, pas du ProPhoto comme je l’ai fait récemment par erreur…!!
Changer les images existantes, c’est possible…
À ce propos, autre point agréable avec Koken, la possibilité de changer les images d’une résolution inférieure par une version plus lourde. Et avec le bon profil ICC.
En un seul montage, une explication succincte…!

- .1 et 2 Oh mais cette photo est trop légère (je recherche une image, je la sélectionne et je lis sa taille en pixels tout en visualisant sa miniature, ses tags…)
- .3 Pas grave, il est possible de la remplacer…
- .4 Il suffit d’indiquer à Koken où se trouve le fichier sur le disque de travail (et si, malin, le nom de fichier est le même que celui cherche au départ, c’est de la balle)…
- .5 Paf… l’image est remplacée (une barre de progression en témoigne) et la nouvelle résolution en témoigne…
Au passage, après ces changements, si la perception du rendu de l’image est toujours abomifreuse à l’écran malgré un changement de profil ICC, pensez à vider les caches de Safari…
Koken tourne sur iPad et iPhone
Le responsive permet de s’adapter aux écrans (…inutile de me rappeler que ce n’est pas le cas d’urbanbike, chaque chose en son temps…)

- Sur iPhone, je préfère assurer une vue au départ en deux colonnes pour repérer les images aisément… et ensuite les visualiser avec quelques informations…

- Sur l’iPad, en mode paysage, on retrouve plus de colonnes (…quatre dans le version en ligne au moment de ce billet) dans la page Albums…

- mais bien huit colonnes en mini pour la page Content (et si vous ne l’êtes pas, tant pis…!)…

- et bien une seule image quand nécessaire…
Koken répond assez bien à nos besoins et je remercie monarobase pour l’installation naguère ce produit sur un serveur mutualisé et ses amicaux conseils…! Certes, il existe certainement des solutions plus performantes mais la philosophie de cet outil me convient…
NB : bien entendu, le site évoqué dans ces copies d’écran est en chantier à tous niveaux…