Voici la nouvelle version du site : lokan2016
Publié le vendredi 28 août 2015 dans la catégorie Divers
Ça fait plusieurs semaines qu'on travaille dessus avec Guillaume : voici la nouvelle version de LoKan.fr, mise à jour de la version précédente pour toujours davantage de confort visuel.
Une version améliorée de lokan2015
Sur cette nouvelle version du thème du site, j'ai presque tout re-pensé, afin que vous soyez toujours mieux en lisant les bêtises que je vous raconte. C'est également le moment de vous remercier d'être chaque jour plus nombreux à venir sur mon petit bout de web. Merci pour votre fidélité !
J'espère donc que cette nouvelle version vous plaira autant qu'elle me plaît. Elle n'est pas encore adaptée pour mobile, et vous pouvez rencontrer quelques petits soucis. A terme, l'idée sera tout de même de proposer une jolie application, mais on n'y est pas encore.
Vos suggestions sont les bienvenues
Il est possible qu'on soit passés à côté de grosses boulettes. Aussi, n'hésitez pas à les remonter dans les commentaires de cet article, à moins qu'elles soient listées ci-dessous en "modifications restantes". Par exemple, une des suggestions de la version précédente était le retour du bouton random. Suprise ! Il est là !
Modifications restantes
Voici ce qu'il reste à faire sur le thème. Vos suggestions, si validées, seront rajoutées ici.
Modifier la font de la page ArchivesEnlever le lien cliquable sur le H1 en singleIntégrer Flickr dans la barre latéraleMise en place des boutons VOD, Une Petite Mousse, et Amazon en barre latéraleJustifier le texte dans les articlesCorriger la page de loginCaptcha sur la page de contactCorriger le widget Flickr pour fonctionner en https (développeur contacté)Laisser de l'espace entre les listes et le texte (comme celle-ci, avec la ligne d'en bas, qui est trop collée)Aligner la largeur de Disqus sur la largeur des médiasProposer les "articles similaires" par catégories, au lieu des tagsCréer un bandeau "Regarder cette série sur Netflix", et un "Accéder à la location du Podcast XXL" comme il existe Amazon ou StravaModifier le texte dans le champ de recherche (et agrandir le champ)Pouvoir cliquer sur un article depuis toute la surface de la miniature (home et single)Modifier la home pour les titres longsLaisse de l'espace entre un titre et des listes (cet article)Supprimer Disqus et mettre en place un système de commentaire maisonFixer la fonction "répondre" dans les commentairesImage de miniature quand on fait "en voir plus" (home)Finir le responsive mobile et tabletteFixer la page de recherche quand il n'y a pas de résultatTrait noir sur l'image à la une de la home à certaines définitionsImage de l'article à la une qui devient carrée en grande largeurAligner le header sur la largeur des médias (logo et champ de recherche)Adapter les couleurs des vidéos Vimeo dans l'article, et supprimer titre, auteur, et icône- Gérer la taille des images en fonction de la taille de la fenêtre du navigateur
- Traiter tous les vieux articles pour les rendre compatibles, ou les masquer
Corriger le chargement latéral du thème (qui se réaligne quand tout le CSS est chargé, mais bon…)Configurer à nouveau le bandeau anti-adblockRendre le champ de recherche fonctionnel avec Safari MacAméliorer la barre de chargement de l'Infinite ScrollFaire la page AboutFaire la page FAQ- Solutionner Split View
- Optimiser en mode badass !
Des bisous ! Des GROS bisous !
C'est dommage que la barre des menus en haut ne soit pas fixé et ne descende pas quand on fait défiler la page. Cela nous éviterait de devoir tout remonter pour revenir à l'accueil. Sinon magnifique travail il est génial ton site continu comme ça!
Trop bien ! Maintenant quand on fait un double tap sur le Trackpad/Magic Mouse ça adapte le texte à la largeur de l'écran, ce qui n'était pas le cas avant ! Vraiment top cette nouvelle version, parfait !
En fait il reste tout à faire.
Il reste beaucoup de choses oui…
Stylééééé ! 😉 au moment où je poste ce commentaire, le menu sandwich n'est pas fonctionnel (surement dû à la version mobile non terminée) ^^
J'aime beaucoup cette nouvelle version, bravo! 🙂
Je rêve d'infinite scroll 🙂
C'est encouragent en tout cas !
Je trouve la version actuel bien plus jolie que la précédente, c'est plutôt bien réussit, bravo. 🙂
Pitite suggestion : ajouter l'URL vers Retina Boys. Et aussi, mais c'est pour pinailler, en bas de page il manque un point (le dernier) dans "F.A.Q.".
Pas de lien vers Retina Boys 😉
Et il n'y a aucun point entre F, A, et Q.
Ah oui, c'est marrant, les points sont sur la vidéo mais pas sur le site actuel.
Pour RB c'est dommage je trouve. Perso (et j'imagine que c'est le cas d'autres personnes) je vais sur Lokan.fr grâce aux flux RSS, mais il est désactivé pour RB. Résultat je consulte RB quand j'y pense donc moins souvent que Lokan.fr.
Le flux RSS n'est pas du tout désactivé sur RB 😉
J'me suis mal exprimé, c'est moi qui est choisi de le désactivé sur RB.
Il y a comme un soucis sur l'article de Kobo..
Un ligne de séparation entre les articles de l'accueil car ce n'est pas très claire, on a du mal à identifier les différent article !
Assez simple : chaque article à une image en face, et un titre 😉
C'est dommage que la barre des menus en haut ne soit pas fixé et ne descende pas quand on fait défiler la page. Cela nous éviterait de devoir tout remonter pour revenir à l'accueil. Sinon magnifique travail il est génial ton site continu comme ça!
Trop bien ! Maintenant quand on fait un double tap sur le Trackpad/Magic Mouse ça adapte le texte à la largeur de l'écran, ce qui n'était pas le cas avant ! Vraiment top cette nouvelle version, parfait !
En fait il reste tout à faire.
Il reste beaucoup de choses oui…
Stylééééé ! 😉 au moment où je poste ce commentaire, le menu sandwich n'est pas fonctionnel (surement dû à la version mobile non terminée) ^^
Coucou, très jolie la nouvelle version! Au passage je crois qu'il y a un problème avec les liens dans les listes. (j'ai une mauvaise connexion là donc pas sûr)
Hello Lokan, je ne sais pas si ça ne viens que de moi, mais je ne peux pas faire de clic molette (pour laisser appuyer et remonter en haut du site) dans la partie commentaire des articles !
Cela fonctionne parfaitement ailleurs sur le site, mais par exemple, je ne peux pas le faire sous la photo de profil quand on poste un commentaire... ou même sur les commentaires eux même.
Cela fonctionne correctement sous Firefox mais pas sous chrome.
Voilou, c'est anecdotique et pas forcément hyper important mais j'en fais part, bonne continuation cette version du site est bien kiffante =)
J'aime beaucoup cette nouvelle version, bravo! 🙂
Je rêve d'infinite scroll 🙂
C'est encouragent en tout cas !
Je trouve la version actuel bien plus jolie que la précédente, c'est plutôt bien réussit, bravo. 🙂
Pitite suggestion : ajouter l'URL vers Retina Boys. Et aussi, mais c'est pour pinailler, en bas de page il manque un point (le dernier) dans "F.A.Q.".
Pas de lien vers Retina Boys 😉
Et il n'y a aucun point entre F, A, et Q.
Ah oui, c'est marrant, les points sont sur la vidéo mais pas sur le site actuel.
Pour RB c'est dommage je trouve. Perso (et j'imagine que c'est le cas d'autres personnes) je vais sur Lokan.fr grâce aux flux RSS, mais il est désactivé pour RB. Résultat je consulte RB quand j'y pense donc moins souvent que Lokan.fr.
Le flux RSS n'est pas du tout désactivé sur RB 😉
J'me suis mal exprimé, c'est moi qui est choisi de le désactivé sur RB.
La version mobile sur iPhone 6 est toute pas belle, sous Safari (pas essayé sur un autre navigateur) : le menu ne fonctionne pas, les texte du premier article sont tout étriqués à gauche de l'écran, la section commentaires a plein d'images et textes en surimpression.
Oui, c'est écrit noir sur blanc dans l'article que c'est à faire 😉
Ha ben mince, je m'en vais de ce pas changer d'yeux.
très joli site, la refonte est vraiment belle, rend très bien sur le retina du MacBook 12"..
bon boulot !
par curiosité, si elle n'est pas protégée, quel est le nom de la police du "citoyen du mon, curieux par nature, etc..." de ta signature ? je la mettrai bien dans ma liseuse....
Clic droit, inspecter l'élément, et hop, tu as la réponse 😉
Si tu ne la trouves pas, je te la donne.
ah, j'ai pas "inspecter l'élément"... je suis sur Safari, tu es sur Chrome non ?
Petite astuce safari: Préférences > Avancées > Coche (tout en bas) "Afficher le menu Développement dans la barre des menus". Voilou; comme ça plus d'excuse 😉
titillium light ! thx !
Salut lokan,
La mise à jour ne marche pas vraiment sur mon iPhone 6 Plus, la mise en page est catastrophique.
(Ce n'est pas une critique, mais pour t'informer)
?
Salut Dylan,
Oui, c'est écrit noir sur blanc dans l'article 😉
Il y a comme un soucis sur l'article de Kobo..
Beaucoup mieux cette version, cependant je pense qu'il y a quelque chose à faire au niveau de la liste des articles pour rendre ça plus lisible. J'ai donc fait un mockup. J'ai seulement ajouter une séparation, réduit la taille de police des catégories et changer la couleur de la date de l'article. Ce sont des détails, mais je pense que ça améliore la lisibilité.
Tout à fait ! Très bonne idée !!
Salut, vraiment cool le nouveau design, je pensais juste a une petite idée étant donné que l'on peut scroll assez bas, ça serait de faire un sticky header pour naviguer plus rapidement et éviter de remonter toute la page si on est en plein milieu, et un autre petit détail sur tes hover dans le header, étant donné que chaque catégorie a une couleur par exemple " Geek " en bleu pourquoi ne pas mettre le hover de la catégorie " geek " dans le header de la même couleur.
Salut mon grand !
J'ai essayé de faire le hover de la catégorie d'une couleur, mais ça fait très vite arbre de Noel.
Pour le sticky header, c'est une évolution possible 😉
Un ligne de séparation entre les articles de l'accueil car ce n'est pas très claire, on a du mal à identifier les différent article !
Assez simple : chaque article à une image en face, et un titre 😉
Salut lokan,
La mise à jour ne marche pas vraiment sur mon iPhone 6 Plus, la mise en page est catastrophique.
(Ce n'est pas une critique, mais pour t'informer)
?
Salut Dylan,
Oui, c'est écrit noir sur blanc dans l'article 😉
Pourquoi pas justifier le texte dans vos articles ?
Travailler sur l'accessibilité de votre site, pour les malvoyants, handicapés, etc...
Aligner le bouton "random", un peu trop haut selon moi par rapport à "voyage"
Sur la page d'accueil, vous l'avez divisée en trois colonnes d'articles, je mettrai ce qui concerne la recherche aussi grand que la troisième colonne (la barre latérale).
De ce fait je mettrai votre menu d'une taille égale aux deux autres colonnes.
De nouveaux sur la page d'accueil, si le titre d'un article fait plus de trois lignes la date et le tag ne sont plus proprement alignés avec le thumbmail.
Ceci concerne la barre latérale sur tout le site, mais ça peut se discuter, je mettrai le bloc des boutons des réseaux sociaux aussi grand qu'un poste et aligné avec le premie poste de chaque page. Sur les pages "geeks", "photos et vidéos", etc... la barre latérale me semble trop haute par rapport aux articles.
Et enfin adopter le même design que la page d'accueil sur toutes les autres pages du site.
Fixer la barre du menu en haut pour y accéder n'importe où dans un article
Lorsqu'on scrolldown sur la page d'accueil les articles se chargent automatiquement
Voila !!!
Salut, vraiment cool le nouveau design, je pensais juste a une petite idée étant donné que l'on peut scroll assez bas, ça serait de faire un sticky header pour naviguer plus rapidement et éviter de remonter toute la page si on est en plein milieu, et un autre petit détail sur tes hover dans le header, étant donné que chaque catégorie a une couleur par exemple " Geek " en bleu pourquoi ne pas mettre le hover de la catégorie " geek " dans le header de la même couleur.
Salut mon grand !
J'ai essayé de faire le hover de la catégorie d'une couleur, mais ça fait très vite arbre de Noel.
Pour le sticky header, c'est une évolution possible 😉
Salut.
J'ai l'impression que le logo dans le header est "flou"? :-/
EDIT : Mon navigateur me jouait des tours. Tout est revenu dans l'ordre.
J'aime beaucoup cette nouvelle version à une exception, l'accueil est pour moi trop chargé dès que l'on passe sur le contenu en dessous de l'article à la une. Sinon très beau travail félicitations !
Vous n'arriverez décidément pas à me décevoir!
Bonjour Lokan, Le design de ton site est extrêmement beau, c'est très agréable à lire et ce n'est pas agressif à l'oeil. Toutefois, je ne sais pas ce qu'il se passe chez Viméo et si les autres lecteurs vivent la même chose, mais depuis quelque temps, les vidéos mettent 15 plombs à se charger en SD et mes yeux saignent avec cette qualité :'-( Avant de te mettre dans le doute, j'ai essayé avec d'autres lecteurs (tels que Dailymotion et youtube) et vérifié ma connection, ils ne sont pas en cause... :-/ En tout cas, continue sur ta lancé, je supporte de moins en moins la proposition des concurrents et tu es la meilleure proposition que je connaisse à ce jour 🙂 Hate de lire ton prochain article et à bientôt.
Salut Kévin,
En effet, c'est le CDN de Vimeo qui galère depuis un peu plus d'un mois.
Pour les images qui ne sont pas chargées, c'est à cause de la hauteur qui est manquante sur le (height: 208.125px;)
Je trouve cette version beaucoup moins lisible sur iPad que la précédente dommage (par contre sur PC c'est très bien) :/
Normal, car comme écrit dans l'article, la version mobile et tablette n'est pas encore faite.
Merci ! Désolé je sais pas lire 😛
"Pourquoi pas justifier le texte dans vos articles ?"
Toutes personnes travaillant dans le Web, encore plus les directeurs artistiques, te dirons qu'il ne faut jamais justifier le texte. C'est comme ça.
Salut,
J'adore le nouveau site mais il manque encore une option ultime : "l'option nuit" qui pour ma part ferait du site, l'un des plus lisible du net 😉
Salut Guillaume,
Chut, ce sera une surprise !
Re,
C'est juste une observation mais vu que ton site essai d'être optimiser à mort pour tous les devices, j'utiliserais le svg pour toutes les icônes du site (article au pif, rechercher, twitter, facebook, flickr, rss et même ton logo). Le rendu serait meilleur 🙂
En affichant la barre latérale dans safari sur un macbook pro 13" une ligne noire apparaît sur l'image à la une :
https://www.flickr.com/gp/128045151@N04/V4r0e7
En affichant la barre latérale dans safari sur un macbook pro 13" une ligne noire apparaît sur l'image à la une :
https://www.flickr.com/gp/128045151@N04/V4r0e7
Yes, Robin, c'est noté dans les trucs à faire "Trait noir sur l'image à la une de la home à certaines définitions"
Mince... J'ai recherché "ligne noire" avant de poster. Désolé !
Salut Lokan,
J'ai une petite remorque qui m'est venue lors du post de commentaire sur ton article sur "Aidez moi à remplir la page FAQ".
Pour commenter il a fallu descendre loin, ne serait-il pas mieux à ton avis de la mettre juste en dessous des boutons PayPal et Amazon? A moins que ça soit fait exprès pour forcer à lire les commentaires précédents pour ne pas te faire répéter deux fois les mêmes choses.
Bonne journée à toi,
JB
Salut JB,
J'espère que tu avais l'attache pour ta remorque 😉
Effectivement, c'est fait exprès.
Salut Lokan,
J'ai une petite remorque qui m'est venue lors du post de commentaire sur ton article sur "Aidez moi à remplir la page FAQ".
Pour commenter il a fallu descendre loin, ne serait-il pas mieux à ton avis de la mettre juste en dessous des boutons PayPal et Amazon? A moins que ça soit fait exprès pour forcer à lire les commentaires précédents pour ne pas te faire répéter deux fois les mêmes choses.
Bonne journée à toi,
JB
Salut JB,
J'espère que tu avais l'attache pour ta remorque 😉
Effectivement, c'est fait exprès.
Hello Lokan, je ne sais pas si ça ne viens que de moi, mais je ne peux pas faire de clic molette (pour laisser appuyer et remonter en haut du site) dans la partie commentaire des articles !
Cela fonctionne parfaitement ailleurs sur le site, mais par exemple, je ne peux pas le faire sous la photo de profil quand on poste un commentaire... ou même sur les commentaires eux même.
Cela fonctionne correctement sous Firefox mais pas sous chrome.
Voilou, c'est anecdotique et pas forcément hyper important mais j'en fais part, bonne continuation cette version du site est bien kiffante =)
très joli site, la refonte est vraiment belle, rend très bien sur le retina du MacBook 12"..
bon boulot !
par curiosité, si elle n'est pas protégée, quel est le nom de la police du "citoyen du mon, curieux par nature, etc..." de ta signature ? je la mettrai bien dans ma liseuse....
Clic droit, inspecter l'élément, et hop, tu as la réponse 😉
Si tu ne la trouves pas, je te la donne.
ah, j'ai pas "inspecter l'élément"... je suis sur Safari, tu es sur Chrome non ?
titillium light ! thx !
La version mobile sur iPhone 6 est toute pas belle, sous Safari (pas essayé sur un autre navigateur) : le menu ne fonctionne pas, les texte du premier article sont tout étriqués à gauche de l'écran, la section commentaires a plein d'images et textes en surimpression.
Oui, c'est écrit noir sur blanc dans l'article que c'est à faire 😉
Ha ben mince, je m'en vais de ce pas changer d'yeux.
Beaucoup mieux cette version, cependant je pense qu'il y a quelque chose à faire au niveau de la liste des articles pour rendre ça plus lisible. J'ai donc fait un mockup. J'ai seulement ajouter une séparation, réduit la taille de police des catégories et changer la couleur de la date de l'article. Ce sont des détails, mais je pense que ça améliore la lisibilité.
Tout à fait ! Très bonne idée !!
Salut.
J'ai l'impression que le logo dans le header est "flou"? :-/
EDIT : Mon navigateur me jouait des tours. Tout est revenu dans l'ordre.
Pourquoi pas justifier le texte dans vos articles ?
Travailler sur l'accessibilité de votre site, pour les malvoyants, handicapés, etc...
Aligner le bouton "random", un peu trop haut selon moi par rapport à "voyage"
Sur la page d'accueil, vous l'avez divisée en trois colonnes d'articles, je mettrai ce qui concerne la recherche aussi grand que la troisième colonne (la barre latérale).
De ce fait je mettrai votre menu d'une taille égale aux deux autres colonnes.
De nouveaux sur la page d'accueil, si le titre d'un article fait plus de trois lignes la date et le tag ne sont plus proprement alignés avec le thumbmail.
Ceci concerne la barre latérale sur tout le site, mais ça peut se discuter, je mettrai le bloc des boutons des réseaux sociaux aussi grand qu'un poste et aligné avec le premie poste de chaque page. Sur les pages "geeks", "photos et vidéos", etc... la barre latérale me semble trop haute par rapport aux articles.
Et enfin adopter le même design que la page d'accueil sur toutes les autres pages du site.
Fixer la barre du menu en haut pour y accéder n'importe où dans un article
Lorsqu'on scrolldown sur la page d'accueil les articles se chargent automatiquement
Voila !!!
Salut,
J'adore le nouveau site mais il manque encore une option ultime : "l'option nuit" qui pour ma part ferait du site, l'un des plus lisible du net 😉
Salut Guillaume,
Chut, ce sera une surprise !
Bonjour Lokan, Le design de ton site est extrêmement beau, c'est très agréable à lire et ce n'est pas agressif à l'oeil. Toutefois, je ne sais pas ce qu'il se passe chez Viméo et si les autres lecteurs vivent la même chose, mais depuis quelque temps, les vidéos mettent 15 plombs à se charger en SD et mes yeux saignent avec cette qualité :'-( Avant de te mettre dans le doute, j'ai essayé avec d'autres lecteurs (tels que Dailymotion et youtube) et vérifié ma connection, ils ne sont pas en cause... :-/ En tout cas, continue sur ta lancé, je supporte de moins en moins la proposition des concurrents et tu es la meilleure proposition que je connaisse à ce jour 🙂 Hate de lire ton prochain article et à bientôt.
Salut Kévin,
En effet, c'est le CDN de Vimeo qui galère depuis un peu plus d'un mois.
J'aime beaucoup cette nouvelle version à une exception, l'accueil est pour moi trop chargé dès que l'on passe sur le contenu en dessous de l'article à la une. Sinon très beau travail félicitations !
Vous n'arriverez décidément pas à me décevoir!
Je trouve cette version beaucoup moins lisible sur iPad que la précédente dommage (par contre sur PC c'est très bien) :/
Normal, car comme écrit dans l'article, la version mobile et tablette n'est pas encore faite.
Pour les images qui ne sont pas chargées, c'est à cause de la hauteur qui est manquante sur le (height: 208.125px;)
Re,
C'est juste une observation mais vu que ton site essai d'être optimiser à mort pour tous les devices, j'utiliserais le svg pour toutes les icônes du site (article au pif, rechercher, twitter, facebook, flickr, rss et même ton logo). Le rendu serait meilleur 🙂
"Pourquoi pas justifier le texte dans vos articles ?"
Toutes personnes travaillant dans le Web, encore plus les directeurs artistiques, te dirons qu'il ne faut jamais justifier le texte. C'est comme ça.