S'abonnez
Divers

Voici la nouvelle version du site : lokan2016

LoKan Sardari

Ç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.

Sommaire

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 Archives
  • Enlever le lien cliquable sur le H1 en single
  • Intégrer Flickr dans la barre latérale
  • Mise en place des boutons VOD, Une Petite Mousse, et Amazon en barre latérale
  • Justifier le texte dans les articles
  • Corriger la page de login
  • Captcha sur la page de contact
  • Corriger 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édias
  • Proposer les "articles similaires" par catégories, au lieu des tags
  • Créer un bandeau "Regarder cette série sur Netflix", et un "Accéder à la location du Podcast XXL" comme il existe Amazon ou Strava
  • Modifier 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 longs
  • Laisse de l'espace entre un titre et des listes (cet article)
  • Supprimer Disqus et mettre en place un système de commentaire maison
  • Fixer la fonction "répondre" dans les commentaires
  • Image de miniature quand on fait "en voir plus" (home)
  • Finir le responsive mobile et tablette
  • Fixer la page de recherche quand il n'y a pas de résultat
  • Trait noir sur l'image à la une de la home à certaines définitions
  • Image de l'article à la une qui devient carrée en grande largeur
  • Aligner 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-adblock
  • Rendre le champ de recherche fonctionnel avec Safari Mac
  • Améliorer la barre de chargement de l'Infinite Scroll
  • Faire la page About
  • Faire la page FAQ
  • Solutionner Split View
  • Optimiser en mode badass !

Des bisous ! Des GROS bisous !

Auteur de l'article

LoKan Sardari

🦓🧠 Ultralearner | 👨🏻‍💻 Entrepreneur | 🏋🏻 Athlete | 📷 Pixel lover | 🎒 Travel addict

LoKan Sardari

Rejoins-nous !

Abonne-toi sur Patreon pour accéder à notre communauté Discord et au contenu VIP.

S'abonner sur Patreon
Commentaires
Guillaume
il y a 8 ans
Répondre

"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.

Guillaume
il y a 8 ans
Répondre

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 🙂

Guillaume
il y a 8 ans
Répondre

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 😉

LoKan Sardari
il y a 8 ans

Salut Guillaume,

Chut, ce sera une surprise !

Julien Miclo
il y a 8 ans
Répondre

Pour les images qui ne sont pas chargées, c'est à cause de la hauteur qui est manquante sur le (height: 208.125px;)

Guillaume
il y a 8 ans
Répondre

Je trouve cette version beaucoup moins lisible sur iPad que la précédente dommage (par contre sur PC c'est très bien) :/

LoKan Sardari
il y a 8 ans

Normal, car comme écrit dans l'article, la version mobile et tablette n'est pas encore faite.

Kevin Besnard
il y a 8 ans
Répondre

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.

LoKan Sardari
il y a 8 ans

Salut Kévin,

En effet, c'est le CDN de Vimeo qui galère depuis un peu plus d'un mois.

jb_FICHET
il y a 8 ans
Répondre

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!

MarukuSensei
il y a 8 ans
Répondre

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.

Robin
il y a 8 ans
Répondre

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 !!!

Adrien Rochet
il y a 8 ans
Répondre

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é.

LoKan Sardari
il y a 8 ans

Tout à fait ! Très bonne idée !!

Aymeric PECH-MERCIER
il y a 8 ans
Répondre

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 =)

Pyjamane
il y a 8 ans
Répondre

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.

LoKan Sardari
il y a 8 ans

Oui, c'est écrit noir sur blanc dans l'article que c'est à faire 😉

Patrice Blanco
il y a 8 ans
Répondre

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....

LoKan Sardari
il y a 8 ans

Clic droit, inspecter l'élément, et hop, tu as la réponse 😉

Si tu ne la trouves pas, je te la donne.

jb fichet
il y a 10 ans
Répondre

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

LoKan Sardari
il y a 10 ans

Salut JB,

J'espère que tu avais l'attache pour ta remorque 😉
Effectivement, c'est fait exprès.

jb fichet
il y a 8 ans
Répondre

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

LoKan Sardari
il y a 8 ans

Salut JB,

J'espère que tu avais l'attache pour ta remorque 😉
Effectivement, c'est fait exprès.

Robin P
il y a 10 ans
Répondre

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

LoKan Sardari
il y a 10 ans

Yes, Robin, c'est noté dans les trucs à faire "Trait noir sur l'image à la une de la home à certaines définitions"

Robin P
il y a 8 ans
Répondre

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

Guillaume
il y a 10 ans
Répondre

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 🙂

Guillaume
il y a 10 ans
Répondre

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 😉

LoKan Sardari
il y a 10 ans

Salut Guillaume,

Chut, ce sera une surprise !

Guillaume
il y a 10 ans
Répondre

"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.

Guillaume
il y a 10 ans
Répondre

Je trouve cette version beaucoup moins lisible sur iPad que la précédente dommage (par contre sur PC c'est très bien) :/

LoKan Sardari
il y a 10 ans

Normal, car comme écrit dans l'article, la version mobile et tablette n'est pas encore faite.

Julien Miclo
il y a 10 ans
Répondre

Pour les images qui ne sont pas chargées, c'est à cause de la hauteur qui est manquante sur le (height: 208.125px;)

Kevin Besnard
il y a 10 ans
Répondre

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.

LoKan Sardari
il y a 10 ans

Salut Kévin,

En effet, c'est le CDN de Vimeo qui galère depuis un peu plus d'un mois.

jb_FICHET
il y a 10 ans
Répondre

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!

MarukuSensei
il y a 10 ans
Répondre

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.

HowardLawrenceB
il y a 10 ans
Répondre

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.

LoKan Sardari
il y a 10 ans

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 😉

Robin
il y a 10 ans
Répondre

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 !!!

Dylan Vdn
il y a 10 ans
Répondre

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)
?

LoKan Sardari
il y a 10 ans

Salut Dylan,

Oui, c'est écrit noir sur blanc dans l'article 😉

Louis Vivier
il y a 10 ans
Répondre

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 !

LoKan Sardari
il y a 10 ans

Assez simple : chaque article à une image en face, et un titre 😉

HowardLawrenceB
il y a 8 ans
Répondre

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.

LoKan Sardari
il y a 8 ans

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 😉

Adrien Rochet
il y a 10 ans
Répondre

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é.

LoKan Sardari
il y a 10 ans

Tout à fait ! Très bonne idée !!

clementlanot
il y a 10 ans
Répondre

Il y a comme un soucis sur l'article de Kobo..

Dylan Vdn
il y a 8 ans
Répondre

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)
?

LoKan Sardari
il y a 8 ans

Salut Dylan,

Oui, c'est écrit noir sur blanc dans l'article 😉

Patrice Blanco
il y a 10 ans
Répondre

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....

LoKan Sardari
il y a 10 ans

Clic droit, inspecter l'élément, et hop, tu as la réponse 😉

Si tu ne la trouves pas, je te la donne.

Pyjamane
il y a 10 ans
Répondre

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.

LoKan Sardari
il y a 10 ans

Oui, c'est écrit noir sur blanc dans l'article que c'est à faire 😉

Erwan de Saint Lager
il y a 10 ans
Répondre

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.".

LoKan Sardari
il y a 10 ans

Pas de lien vers Retina Boys 😉
Et il n'y a aucun point entre F, A, et Q.

Gaétan
il y a 10 ans
Répondre

Je trouve la version actuel bien plus jolie que la précédente, c'est plutôt bien réussit, bravo. 🙂

sylvain_Ls
il y a 10 ans
Répondre

Je rêve d'infinite scroll 🙂
C'est encouragent en tout cas !

theez
il y a 10 ans
Répondre

J'aime beaucoup cette nouvelle version, bravo! 🙂

Aymeric PECH-MERCIER
il y a 10 ans
Répondre

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 =)

AlexandreJolly
il y a 10 ans
Répondre

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)

WornCherryRock
il y a 10 ans
Répondre

Stylééééé ! 😉 au moment où je poste ce commentaire, le menu sandwich n'est pas fonctionnel (surement dû à la version mobile non terminée) ^^

Thib
il y a 10 ans
Répondre

En fait il reste tout à faire.

LoKan Sardari
il y a 10 ans

Il reste beaucoup de choses oui…

Bertrand
il y a 10 ans
Répondre

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 !

maximesaltet
il y a 10 ans
Répondre

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!

Louis Vivier
il y a 8 ans
Répondre

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 !

LoKan Sardari
il y a 8 ans

Assez simple : chaque article à une image en face, et un titre 😉

clementlanot
il y a 8 ans
Répondre

Il y a comme un soucis sur l'article de Kobo..

Erwan de Saint Lager
il y a 8 ans
Répondre

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.".

LoKan Sardari
il y a 8 ans

Pas de lien vers Retina Boys 😉
Et il n'y a aucun point entre F, A, et Q.

Gaétan
il y a 8 ans
Répondre

Je trouve la version actuel bien plus jolie que la précédente, c'est plutôt bien réussit, bravo. 🙂

sylvain_Ls
il y a 8 ans
Répondre

Je rêve d'infinite scroll 🙂
C'est encouragent en tout cas !

theez
il y a 8 ans
Répondre

J'aime beaucoup cette nouvelle version, bravo! 🙂

WornCherryRock
il y a 8 ans
Répondre

Stylééééé ! 😉 au moment où je poste ce commentaire, le menu sandwich n'est pas fonctionnel (surement dû à la version mobile non terminée) ^^

Thib
il y a 8 ans
Répondre

En fait il reste tout à faire.

LoKan Sardari
il y a 8 ans

Il reste beaucoup de choses oui…

Bertrand
il y a 8 ans
Répondre

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 !

maximesaltet
il y a 8 ans
Répondre

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!