3246 sujets

Critiques de vos sites: code et design

[Pro] Création/Développement du site de ma boite.

Bonjour,

Je me présente rapidement. Kévin, 22ans, habite Cholet dans le Maine et Loire. Je suis actuellement en contrat pro (BAC+4) en tant que concepteur logiciel. Je suis spécialisé dans la création de site web et j'ai voulu de mon plein gré faire une refonte du site de ma boite. L'ancien site à été développé avec WebDev en version 15, affiché dans un design à faire tourner les yeux à n'importe quel graphiste. Smiley lol

C'est donc avec une grosse carte blanche que j'ai commencé a partir d'une page toute blanche cette conception, aidé de mon bon vieux framework Cakephp dans sa version 2.5.1.

Avant tout, je tiens à préciser que le responsive design est en tout début d'intégration, et si vous obtenez un écran du type ville bugguée dans Pokémon rouge ou bleu, c'est normal ! Smiley biggol

Ceci dit j'aimerai votre avis sur l'ergonomie général, les animations en css3 complètement de moi même, ... enfin bref, un peu tout. Tout avis constructif me sera utile.

NB : Mon patron adhère carrément la version de test actuelle.
NBbis : Le site se trouve sur un serveur de test.

Le lien : BDL Informatique

Merci d'avance Smiley cligne

EDIT : Ah oui ! Merci de ne pas jouer avec le formulaire de contact
Modifié par Kikimagik (26 Jun 2014 - 16:27)
Modérateur
Salut,

points positifs :
gestion du formulaire a l'air pas mal
gestion du caroussel dans la home avec du texte en html

points négatifs :
je vais commencer par là : http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fimap.bdlinfo.com%2Fbdl%2Fnewsletter. Les autres pages ont sûrement le même souci
très mauvaise mise au point du texte
le favicon est à changer
Comment se fait il que je vois ce genre d'url ? contacts?url=contacts (c'est du grand n'importe quoi)
les champs nom/email sont écrasés : rallala, encore une erreur de débutant (figer le height)


avis perso : le design graphique est très moyen. Ça manque de professionnalisme.
Modifié par niuxe (25 Jun 2014 - 13:57)
niuxe a écrit :
Salut,

points positifs :
gestion du formulaire a l'air pas mal
gestion du caroussel dans la home avec du texte en html



Bon c'est déjà un bon point.

niuxe a écrit :


points négatifs :
je vais commencer par là : http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fimap.bdlinfo.com%2Fbdl%2Fnewsletter. Les autres pages ont sûrement le même souci



Attention, je bosse dessus et il est possible que pendant le moment ou tu as fait cette vérification, j'avais changé la base de données de place, ce qui dans le framework, rend les choses un peu différente. Je viens de tester et je n'ai aucun problème.

niuxe a écrit :


très mauvaise mise au point du texte



C'est à dire ? Pour le menu en haut ? Seul lui m'ennuie car je n'arrive pas a forcer l'accélération matérielle pour le moment, ce qui rend le texte du menu flou..

niuxe a écrit :


Comment se fait il que je vois ce genre d'url ? contacts?url=contacts (c'est du grand n'importe quoi)
les champs nom/email sont écrasés : rallala, encore une erreur de débutant (figer le height)



C'est le seul élément que j'ai intégré (ça n'est pas entièrement de moi), et oui, je confirme le problème que tu décris, je vais corriger cela.

niuxe a écrit :


avis perso : le design graphique est très moyen. Ça manque de professionnalisme.



C'est à dire ? C'est là ou justement si tu pouvais étoffer ça m'aiderai bien. J'essai de jouer la carte de l'originalité, et non pas la carte de monsieur tout le monde. Mais il est fort possible que je fasse des erreurs.
Si tu peux me donner plus de détails, ça serais sympas, merci.
Modifié par Kikimagik (25 Jun 2014 - 14:18)
Bonjour,

Je vais être un peu plus "critique" que mon voisin,

L'infographie du site :

- La charte graphique est floue, si ce n'est indéfinie, beaucoup de couleurs différentes sur le menu du haut de page qui viennent contraster le reste du contenu qui est quant à lui gris sur blanc : le choix de couleurs semble totalement aléatoire.

- Il y a trop de nuances différentes, un bon design ne doit pas perdre le visiteur, mais instaurer des règles de cohérences explicites et récurrentes sur l'ensemble des pages du site.

- Les titres de couleurs sont une bonne idée à garder, contrairement aux listes à puces qui sont décalées à l'affichage et cassent une fois de plus la cohérence générale du document (puce carrée de la même couleur que les titres mais utilisation de puces rondes noires dans le texte...)

- Le menu de navigation disparaît au format tablette et mobile, est-ce voulu ? Le site est ainsi rendu totalement inaccessible sur ces supports. Pas de <meta> viewport déclaré, même incidence.

- La feuille de style est non seulement déclaré dans le <body>, ce qui est une erreur de sémantique indéniable en plus d'être une mauvaise pratique en terme de performance, de maintenabilité du code et de cohérence dans le développement : centraliser le style dans une feuille CSS externe.

- D'autres erreurs de sémantique assez frappantes : l'utilisation de balises <h4> sans aucun élément <h2> et <h3> déclaré précédemment dans le code : totalement rédhibitoire pour le référencement.

- Utilisation massive de <div> couplé à un doctype HTML5 => aucune balise sémantique html5 utilisée : autant repasser à un doctype antérieur, on n'y verra que du feu.

- Les images du slider appellent plusieurs requête inutiles, il serait bon de centraliser celles-ci en un seul sprite CSS dans un souci d'optimisation du temps de chargement de la page, et d'adapter le slider si l'internaute navigue sur mobile : grande image = grande ressource = latence = fuite du visiteur.

Bon courage, c'est précisément l'apparence graphique et la sémantique qui à mon goût pose problème.
Modifié par ohweb (25 Jun 2014 - 16:05)
Bonjour,

Après une lecture attentive de vos messages, j'ai :
- Retravailler la structure du site en HTML 5,
- Retirer le menu en losange pour un menu plus "pro" fait a la main,
- Ré-ordonné les titres h1, h2, h3 ...
- Affiné toutes les ombres, tous les contours,
- Atténué cette effet de couleur qui rendait le tout je l'avoue un peu enfantin et non "pro",
- Réduit le poids des images, bien que celle-ci étaient déjà bien
- Harmoniser le tout.

Ce que je n'ai pas encore fait, mais je vais m'y atteler cette aprem :

- Rassembler les fichiers CSS en un seul fichier,
- Retirer le CSS par endroit dans le code HTML,
- LE RESPONSIVE, je le répète, il est en mise en place et non mis en place complètement,


Ce que je n'ai pas compris :

ohweb a écrit :

- Les images du slider appellent plusieurs requête inutiles, il serait bon de centraliser celles-ci en un seul sprite CSS dans un souci d'optimisation du temps de chargement de la page, et d'adapter le slider si l'internaute navigue sur mobile : grande image = grande ressource = latence = fuite du visiteur.
Kikimagik a écrit :
Ce que je n'ai pas compris :
ohweb a écrit :
- Les images du slider appellent plusieurs requête inutiles, il serait bon de centraliser celles-ci en un seul sprite CSS dans un souci d'optimisation du temps de chargement de la page, et d'adapter le slider si l'internaute navigue sur mobile : grande image = grande ressource = latence = fuite du visiteur.
Bonjour,

Au chargement de ton site, chaque image à afficher demande une requête supplémentaire au navigateur, ce qui augmente le temps de chargement des pages, dans un souci de performances il est souvent recommandable autant que faire se peut de rassembler ces images en une seule, ce qu'on appelle un sprite CSS.

On peut ainsi ensuite appeler une seule et unique image dans le code en image de fond (background-image) en les manipulant avec background-position et ainsi réduire significativement les appels de requêtes et donc améliorer considérablement le temps de chargement et les performances du site (un peu à la manière des styles CSS à rassembler dans un fichier externe)

Un article détaillant ce sujet : http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html

Je te conseille également de tester ton site sur un outil comme dareboost, c'est gratuit, rapide et souvent de très bon conseil : https://www.dareboost.com (il te suffit de rentrer l'url de ton site et tu auras un aperçu général des améliorations possibles et des manquements, notamment en terme de performance).

Bon courage!

ps: Après test pour dareboost, ton site renvoyant vers un dossier de ton site ( /bdl ) et non directement à la racine, tu ne pourras tester qu'en déplaçant ton site à la racine du domaine...
Modifié par ohweb (26 Jun 2014 - 15:01)
Salut Ohweb,

Tu m'aurais parlé de sprite CSS, j'aurais compris de suite car j'utilise ce procédé sur les sites où j'en ai besoin.

Je suis actuellement sur gtmetrix, en ce moment même, et, c'est dingue comme j'avais des choses à optimiser.

D'ici la fin de la journée vous aurez quelque chose de bien plus propre que le jour ou j'ai posté le sujet.

NB: le site se trouve actuellement sur un serveur de test, et non sur un serveur de prod. C'est normal que sa place ne soit pas terrible.
Modifié par Kikimagik (26 Jun 2014 - 15:37)
Kikimagik a écrit :
Salut Ohweb,
Tu m'aurais parlé de sprite CSS, j'aurais compris de suite

Tu m'as juste mal lu :
ohweb a écrit :
- Les images du slider appellent plusieurs requête inutiles, il serait bon de centraliser celles-ci en un seul sprite CSS dans un souci d'optimisation du temps de chargement de la page

Modifié par ohweb (26 Jun 2014 - 16:46)
Oh excuse moi, je suis désolé.

NB : Le site est de nouveau soumis à la critique. Il a changé depuis le premier poste. Qu'en pensez-vous ?
Modifié par Kikimagik (27 Jun 2014 - 15:24)
Bonjour,
petit retour rapide,

Le menu est en effet plus propre mais n'est pas adapté pour les mobiles et tablettes, plutôt bête pour un site qui a été fait dans une philosophie responsive...

Les puces sont toujours en retrait par rapport au reste du texte, je trouve cela pas terrible au niveau esthétique.
upload/50556-screenn.png

Les feuilles CSS sont toujours éparpillées sur les pages.

L'effet de glissement au survol des vignettes est je trouve trop kitch et vu et revu mais c'est un parti pris...

On observe des zones de blanc assez grandes selon les pages, cela casse un peu l'esthétique général du site.
ohweb a écrit :

Le menu est en effet plus propre mais n'est pas adapté pour les mobiles et tablettes, plutôt bête pour un site qui a été fait dans une philosophie responsive...


Ça c'est en cours de réalisation.

ohweb a écrit :
Les puces sont toujours en retrait par rapport au reste du texte, je trouve cela pas terrible au niveau esthétique.
upload/50556-screenn.png


Comment ai-je pu oublier une fois de plus ces puces.. Je m'en occupe.

ohweb a écrit :
L'effet de glissement au survol des vignettes est je trouve trop kitch et vu et revu mais c'est un parti pris...


La tendance veut que l'événementielle d'une application web soit réactive et montre une certaine souplesse, pour casser les sites "figés".. Mais ceci n'est qu'un parti pris.

ohweb a écrit :
On observe des zones de blanc assez grandes selon les pages, cela casse un peu l'esthétique général du site.


Et je ne vois pas vraiment les corriger.. Smiley confus
Sujet clos
Aller à