Allformusic, nouveau design, html5, optimisation des perfs web

Bonsoir à tous,

Je travaille depuis un moment sur la refonte de mon site de musique et je commence à avoir une version stable de celui-ci : http://www.allformusic.fr

Je suis reparti sur de nouvelles bases côté code et design. Il manque encore certaines parties de contenu, mais je me focalise pour l'instant sur les pages artistes et albums comme :
http://www.allformusic.fr/amy-winehouse
http://www.allformusic.fr/muse/showbiz

Côté design, je pars sur une ambiance sobre, que j'agrémenterai de picto au fur et à mesure.

Côté code, c'est mon premier essai avec le html5 et je doute un peu sur l'utilisation des balises article/section/header/footer/h1

Côté performance web, j'essaye d'utiliser les bonnes pratiques, mais je n'ai pas encore la main sur tout.

Merci d'avance pour vos retours, c'est toujours constructif d'avoir un regard neuf
Modifié par Bellami (09 Dec 2011 - 00:48)

Salut,

Côté design c'est bien trop sombre.
Assure-toi d'avoir les droits pour toutes ces images et musiques.
La page saute dans la rubrique chronologie, tout se décale, il doit y avoir une marge ou une div en trop.

Remplace tes "&" par des & dans le code et tu élimineras quantité d'erreurs au validateur.
Sinon cela correspond bien à ce qui se fait dans le genre en termes de navigation sauf que toi tu as laissé une barre de menus, certain sites optent pour un tout images (je ne dis pas que c'est bien, je dis ce qui se fait).

Tu as un souci d'encodage apparemment, vérifie.
Bon courage, tu peux largement améliorer ton design en le travaillant plus.

Salut,

Je trouve aussi que tu as un trop faible contraste entre le vert du menu horizontal et son fond.
Sinon, côté performances, tu pourrais faire de grosses économies :
- en mettant tes images à leur taille d'utilisation et en les optimisant : en prenant les jpegs de ta page d'accueil, en les redimensionnant, et en les passant à un optimiseur automatique, je suis passé de 728ko à 121ko
- apparemment, seuls certains fichiers html, css et js sont gzippés

Merci pour vos retours!
Effectivement c'est sûrement trop sobre pour le moment. Ça va être un peu plus funky petit à petit, je me concentre surtout sur le contenu et son BO en ce moment.

@jmlapam
J'hésite effectivement à passer avec un body en fond blanc, mais historiquement tous mes sites persos sont dans une ambiance sombre, je dois être plus à l'aise.

Sur la page chronologie, je ne vois pas de soucis visuel (à part que je n'ai pas encore de colonne de droite). Sur quel navigateur es tu ?

Le tout image ce n'est pas mon optique Je vois plutôt le texte comme il est avec une petite icône explicite juste à côté. J'ai du mal à symboliser les artistes d'ailleurs.

Je rajoute le reste à ma todolist.

@Marvin Le Rouge
C'est la pire chose à faire je crois que de prendre de grosses images pour les afficher en beaucoup plus petit , j'avoue avoir coder la home à l'arrache. Le gain est énorme, ca motive à se bouger... surtout quand on voit que la home pèse en tout 781Ko dont 728Ko d'image trop grosses...

Je rajoute les gzip à la todolist, mais sur certains appel de fichiers je n'ai pas la main dessus.

Merci encore pour les remarques.

Je suis sous tous les navigateur mais je pense que cela vient de ma résolution d'écran, je suis sous notebook parfois donc si tu n'as pas prévu comment s'affiche ton site sur des résolutions plus faibles que le standard 1024x768 c'est possible que cela joue.

Bellami a écrit :
@Marvin Le Rouge
C'est la pire chose à faire je crois que de prendre de grosses images pour les afficher en beaucoup plus petit , j'avoue avoir coder la home à l'arrache. Le gain est énorme, ca motive à se bouger... surtout quand on voit que la home pèse en tout 781Ko dont 728Ko d'image trop grosses...

Je crois que Marvin Le Rouge s'était mal exprimé. Je pense qu'il voulait dire de redimensionner les images avec un logiciel de traitement d'image ou avec la librairie GD au lieu d'utiliser les attributs HTML et CSS. Car de la manière qu'il l'a dit, ça prête à confusion.

IshimaruChiaki a écrit :


Je crois que Marvin Le Rouge s'était mal exprimé. Je pense qu'il voulait dire de redimensionner les images avec un logiciel de traitement d'image ou avec la librairie GD au lieu d'utiliser les attributs HTML et CSS. Car de la manière qu'il l'a dit, ça prête à confusion.

Et je crois que c'est précisément ce que disait Bellami : qu'il avait compris ma remarque, avait fait ça "à l'arrache", et pratiquait donc l'auto-flagellation.


Bref, clarifions pour tous : je parlais bien du fait que certaines images étaient chargées en plus grand format que leur taille d'utilisation réelle, et redimensionnées en attributs html ou en css => bouh c'est trop lourd pour rien.

Sinon, c'est bizarre ce que tu me dis pour le gzip , tu as la page d'accueil qui est gzippée, et pas les autres. Donc, tu as probablement accès à un petit .htaccess qui va bien, non ?

C'est propre mais trop plat. Pas de texture, d'image ou autre pour l'identité. Tu peux utiliser ce site pour n'importe quel autre contenu, ça passera sans problème. Tu peux peut être agrandir le logo et placé le menu sur sa droite au lieu de le centrer.

Sinon, il manque des albums sur la fiche de -M- (les albums live) et son ITW vidéo est une vidéo qui n'a rien a voir. Après, c'est subjectif mais Louise Attaque et Noir Desir n'ont rien a voir avec -M- musicalement parlant. J'aurais plutôt mis Izia, Nach (la soeur de Mathieu Chedid qui n'a fait qu'un EP juste magnifique), Dionysos.
Voilà pour l’aparté d'un fan de -M-.

D'une manière générale tout le monde est d'accord pour dire qu'il faut que j’ajoute une identité graphique propre à ce site, et je suis bien d'accord.
Mais êtes vous d'accord pour dire que la priorité actuelle est de plutôt bosser le contenu (il manque la chronologie, beaucoup plus d'artistes, tous les albums, ...) que le design ?
Pour l'identité il est prévu de mettre un gros vinyl sur le côté gauche du contenu, pour faire comme si il se rangeait dans une pochette.

@jmlapam
"Normalement", rien ne bug visuellement sur les petites résolutions.
Sinon j'ai bien une tâche responsive design via les media queries si c'est ce à quoi tu pensais.

@IshimaruChiaki
Lui et moi parlais effectivement du fait d'afficher visuellement des images redimensionnées. C'est modifier (bon ok encore 5 pixel d'écart mais la home va bientôt changer un peu)

@Marvin Le Rouge
Oui oui j'ai accès au .htaccess et je vais checker les gzip html, les fichiers auxquels je n'ai pas accès c'est par exemple les fichiers zip d'Analytics ou d'Amazon?

@David-Dante
Pour le placement du logo et du menu j'y ai pensé, mais je veux dans un avenir proche ajouter une grosse barre de recherche à cet endroit, voir un espace pour se connecter.
Pour info selon la bdd que j'utilise les "albums live" n'existent pas, il ya les "albums" et les "lives" ce qui expliquent l'absence des "albums live" car je vais devoir rajouter comme contenu les lives, les compilations, les OST, les singles, les EP,... mais ce n'est pas encore fait, ca va venir
Effectivement Louise Attaque et Noir Désir ne sont pas forcément très similaires, mais n'ayant pas beaucoup d'artistes dans ma BDD pour le moment je fais au mieux dans l'urgence.
Pour les vidéos je fais en fait une recherche youtube avec "interview+$artistName". Avec l'artiste "-M-", ça passe mal (et pour pleins d'autres aussi en fait ). A terme, avec les fiches membres, j'aimerai que la communauté puisse voter pour retirer ou mettre en avant les vidéos ; mais ça me semble compliquer à coder tout cela.

Bellami a écrit :

@jmlapam
"Normalement", rien ne bug visuellement sur les petites résolutions.
Sinon j'ai bien une tâche responsive design via les media queries si c'est ce à quoi tu pensais.

Bon bah pas de souci alors... , en tout cas chez moi cela ne fonctionne pas.

@jmlapam
J'ai rajouté un

overflow: hidden

à un conteneur (#bd). Ça devrait effacer le bug que tu as repéré, peux-tu confirmer stp ?

Non, sur la page chronologie tout ton conteneur se décale vers la droite.

Je relance mon sujet étant donné que :
_j'ai effectué beaucoup de modifications au niveau du contenu, un petit peu côté design (il reste un élément graphiquement fort à trouver)
_je n'ai pas vraiment eu de retour sur le code HTML5 (ça méritera peut être un post dans la section approprié)

Donc n'hésitez pas à critiquer! C'est très constructif.
Modifié par Bellami (07 Mar 2012 - 00:17)

Au niveau du code HTML5, j'ai eu un peu peur en voyant le <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">.

On faisait ça pour les anciennes versions ; tu dois remplacer par <html lang="fr">. C'est du HTML 5 !

Même chose pour <meta charset="utf-8">, c'est <meta charset="utf-8">. J'ai relevé deux types de cette erreur, ensuite, à toi de les dénicher (regarde le code d'un site comme www.alsacreations.fr). Ça peut être très constructif !

À part ça, je n'ai rien vu d'autres, je te conseille juste une indentation du code plus poussée, c'est plus simple à lire). Et n'oublie pas que le validateur sort 10 erreurs.

En ce qui concerne le design, je n'aime pas trop le logo ; il fait un peu tâche, par rapport à la page, et qui plus est trop petit. Le design reste simple et efficace.

Quelques erreurs au niveau du contenu : dans la page d'Amy Winehouse, l'interview vidéo n'est pas la bonne (c'est celle de Selah Sue). Aussi pour la page d'écoute de l'album Mylo Xyloto, la première vidéo n'est pas celle de Mylo Xyloto mais de Paradise. Evite aussi d'utiliser les vidéos live (de qualité moins bonne) ou crée une catégorie spéciale.

Voilà, je pense avoir dit l'essentiel.

Bonne chance, c'est très prometteur ! Maintenant, un côté plus communautaire devrait être développé.

Salut,

hopper a écrit :
Au niveau du code HTML5, j'ai eu un peu peur en voyant le <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">.

On faisait ça pour les anciennes versions ; tu dois remplacer par <html lang="fr">. C'est du HTML 5 !

En fait non.

Ici c'est du XHTML5 et non du HTML5. L'attribut xmlns défini un espace de nom XML et est donc tout à fait valide dans ce cas ci (et même obligatoire ^^).
Modifié par Gili (11 Mar 2012 - 13:49)

a écrit :
_je n'ai pas vraiment eu de retour sur le code HTML5 (ça méritera peut être un post dans la section approprié)

C'est ce que j'ai lu. Mais, n'est-il pas un peu tôt pour coder en XHTML5 ?

XHTML5 n'est pas une version plus élaboré de HTML5, c'est juste qu'il est servi avec un type MIME différent, et que par conséquent il sera interprété par le moteur d’analyse syntaxique XML du browser (au lieu de l'HTML).

En pratique je ne sais même pas ce que ça change à part le fait de pouvoir utiliser MathML et SVG dans le corps du document (bien que l'élément svg permette de le faire sans pour autant devoir faire du XML). Bref, d'après ce que j'en sais l’intérêt est plutôt limité, mais si quelqu'un à des exemples pratiques à partager qu'il n'hésite pas ^^

Merci pour les retours, je m'étais effectivement embrouillé sur les déclarations HTML5 XHTML5, c'est corrigé.

Pour l'indentation du code HTML, je suis contre, je m'explique. Un code HTML bien indenté en production c'est des octets en trop à télécharger par le navigateur. De plus, cela alourdit un peu le DOM. Idéalement, je pousserai le vice pour imposer un code HTML "minimisé" sur une seule ligne. En revanche, côté développement, il faut que le code soit bien indenté pour travaillé sereinement.

Pour le logo, je pense à une restructuration du header avec le logo à gauche, une grosse barre de recherche à sa droite, un bouton de connexion à la twitter en haut à droite ; et le fil d'ariane qui descend sous la barre de navigation.

Pour le contenu, je requête sur youtube par "pertinence" d'une manière générique pour tous les artistes (que ce soit les interviews ou les chansons). IL y a donc du déchet que j'ai tenté de minimiser. Je pense ajouter un bouton "Essayer une autre vidéo ?" et garder ces infos en mémoire pour blacklister certaines associations de vidéos.

Le côté communautaire est prévu mais non commencé à l'heure actuelle. L'idée est de bien architecturer/développer le cœur du site puis d'arriver à la création d'un "facebook de la musique". Si vous avez des infos ou des retours sur l'utilisation d'OpenId n’hésitez pas.

Je comprends que la rapidité est un facteur important. Mais, je pense qu'il faut trouver un équilibre entre la lisibilité et les performances.

Le code doit rester simple, clair et facilement maintenable. J'ai connu un développeur qui avait bossé pour une société connue, à l'époque. Elle connaissait un succès fou avec un logiciel. Sauf que petit à petit, les ventes ont baissé, les bugs se sont multipliées au fur et à mesure des mises-à-jour.

L'ami m'a avoué que la source du problème était le code : chaque ajout se faisait, sans tenir compte de ce qui a été fait précédemment. À un certain moment, il était complètement illisible et brouillon. La société a, par la suite, fait faillite. (Je ne cite pas de noms ! )

Voilà pour l'anecdote. Moi, j'ai toujours prôné la clarté. Les changements de surface (compression de pages et des images, etc.) ont un gain de temps minime. Cela ne m'empêche de privilégier l'optimisation de fond ou l'optimisation le code, grâce à l'utilisation minimale des div au profit des sélecteurs avancés ou la diminution des requêtes MySQL.

Ensuite, je laisse des solutions automatisées comme Gzip faire le sale travail. Du HTML sur une seule ligne ? N'est pas Google qui veut ! On fait ça surtout pour les applications web où une milliseconde est vitale. Exemple des moteurs de recherches.

Niveau contenu, mets des liens alternatifs d'autres hébergeurs de vidéo pour éviter les problèmes. Mais, il faut vraiment que tu proposes un contenu de qualité, ça serait idéal, s'il était à 100% original avec des critiques, des anecdotes, des dossiers et des informations croustillantes.

Pour le côté communautaire, retire-toi de ta tête l'idée d'un "facebook de la musique", ça serait le pire cadeau à offrir à ton bébé. Pas d'usine à gaz, par pitié ! Si j'étais à ta place, je vais continuer sur ce chemin de petit site et imaginer un truc sympatoche et efficace comme Sublistime.

Un système de notation et de critiques, un wiki collaboratif, jeux musicaux et un forum. Enfin, quelque chose de cool, de simple et de jetable (qui n'accapare pas le temps et parfait après une dure journée de travail). Pour l'OpenId, suis ce lien.

@hopper
Merci pour ce long compte rendu. Je suis bien d'accord avec toi sur le fait que le code doit être clair. Mais je maintiens qu'un code html lisible ne me sert à rien. Le code côté serveur (et donc sur lequel je fais des modifications) est propre. De plus, Firebug mâche ce travail d'indentation si besoin (je ne regarde que très très rarement le code via ctrl+u). Par contre je te rejoins sur le fait que c'est une optimisation minime sur laquelle il ne faut pas perdre (trop) de temps.

Je suis d'accord avec toi sur le fait qu'il faut éviter les ajouts successifs mal pensés, ça fait peut être gagner du temps sur le moment, mais sur le long terme ça transforme le site en usine à gaz...

Pour les liens alternatifs, j'y travaillerais plus tard. J'ai prévu d'attaquer les autres plateformes vidéos et de streaming comme Spotify, Deezer, MusicMe... mais chaque chose en son temps, et c'est ce qui me manque un peu

Pour le "facebook de la musique" j’entends par là une communauté qui peut échanger sur ses artistes préférés, albums préférés, chansons préférés, avec du contenu généré par les utilisateurs (notation, critiques, voir correction des infos à la wikipédia). Le projet "communauté" étant en train d'être défini je ne me pose pas de limites pour l'instant. Je note toutes les idées En attendant je soigne le noyau et le Back Office afin d'augmenter rapidement le nombre d'artistes. N'étant pas développeur cela me prend un temps fou

Merci pour Sublistime, je ne connaissais pas je vais y faire un peu de veille

Pour les jeux j'ai des idées, mas ce n'est pas ma priorité du moment. Pour info je teste avec ce site le nosql et j'en suis particulièrement content pour le moment.