3246 sujets

Critiques de vos sites: code et design

[intermédiaire] grafikarea : une communauté d'art novatrice !

Bonjour à tous !

Je suis Alex Bond et je veux présenter un projet qui me tient à coeur.

http://grafikarea.webou.net/image/logo-favicon.png Présentation de grafikarea

Grafikarea est un service gratuit qui vous permet de partager vos images,
que ce soit dans le domaine du graphisme, la photographie et bien plus encore. Avec cela, grafikarea est construit pour les créatifs qui cherchent à bâtir un portfolio de design en ligne. En faite, grafikarea est comme un twitter pour graphistes. De plus, vous pouvez suivre vos graphistes préférés avec la fonction «Follow». Il offre davantage de fonctions : journal, portfolio, créations, biographie, etc. Grafikarea est également un blog qui à pour but de vous en apprendre plus sur le monde créatif. Vous y retrouverez inspiration, tendance web, ressources, tutoriels et bien plus encore !

Nous souhaitons avoir vos avis sur la mis en page du site, navigation, etc...
Si vous avez des suggestions, n'hésitez pas !

Je passe un petit mot : je cherche des rédacteurs pour la partie blog du site. Intéressé ? Allez voir [Modération : URL supprimée].

Voilà le site : http://grafikarea.com

Merci Smiley cligne
Modifié par shark94 (03 Jun 2011 - 03:22)
Avec ta présentation je sais pas trop si tu viens juste présenter ton site ou si tu veux des critiques. Par contre le site est vraiment super lent à charger chez moi.
jb_gfx a écrit :
Avec ta présentation je sais pas trop si tu viens juste présenter ton site ou si tu veux des critiques. Par contre le site est vraiment super lent à charger chez moi.


T'as pas la berlue, juste les images font plus de 2 Mo en tout !! En regardant les images utilisées, il y aurait de la place pour l'optimisation !

- Pour le fond de page ( http://grafikarea.webou.net/image/arriere-plan.png ), il n'est absolument pas nécesaire d'allonger une couleur unie ! Un background-color noir aurait suffit pour l'allongement sur le côté et le bas ! Ça n'économise peut-être que 20 Ko, mais ça fait une différence dans la charge du processeur des visiteurs, surtout si la machine est un peu âgée comme c'est le cas de la mienne.
- Le fond back_menu.png ( http://grafikarea.webou.net/image/back_menu.png ) ainsi que back_container ( http://grafikarea.webou.net/image/back_container_down.png ) auraient pu être remplacés par un simple background-color.
- Pour le menu horizontal, un découpage aurait permis d'économiser en octets. Pour les deux bouts, tu aurais pu ne garder que les parties correspondantes, tandis que pour les liens du milieu, une petite colonne de 1 à 5px de large aurait suffi, et un background-repeat:repeat-x; aurait fait la job.
- Pour le petit fond en haut ( http://grafikarea.webou.net/image/arriere-itshead.png ), même en PNG indexé en ou GIF, tu aurais eu le même rendu, pour un poids plus léger, il n'y a pas assez de couleurs pour qu'il y ait dégradation. Idem pour cette image ( http://grafikarea.webou.net/image/arriere-itshead2.png )
- Au niveau des créations exposées, tu aurais économisé énormément en octets si tu utilisais la librairie GD au lieu de redimensionner les images côté client (avec HTML ou CSS), d'autant plus que GD est activé sur Webou. Car même redimensionné côté client, ça n'a AUCUNE influence sur le chargement car l'image reste lourde, pendant qu'une vraie miniature générée côté serveur avec GD ne fera qu'une petite fraction de ce poids ! Tu gagnerais des centaines d'octets, et ainsi en bande passante, en utilisant GD ! Juste ces images totalisent près de 2 Mo ! Avec GD, tu aurais pu baisser facilement en bas de presque le dixième de ce poids !
- Et finalement, ton image footer ( http://grafikarea.webou.net/image/footer.png ), tu aurais pu t'en tenir à une largeur de 1 à 5 px et à la faire répéter horizontalement avec background-repeat:repeat-x;

En conclusion, optimise-moi tout ça, en 1) découpant mieux ton menu et en mettant CSS à profit pour les images qui sont reproduisibles en CSS comme les fonds uni, les fonds qui peuvent se répéter sans raccord visible et, 2) en générant les miniatures avec GD plutôt que de redimensionner côté client.


En dehors des images
- tu as 106 erreurs de validation sur la page d'accueil : http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fgrafikarea.webou.net%2Findex.php
Des balises qui traînent sans qu'on sache où ils se ferment... si premièrement ils sont fermés... des erreurs de syntaxe XHTML (balises écrites en majuscules, oubli des guillemets pour entourer les attributs, etc.), balises autofermantes non fermées, alt="" manquants, caractères & non encodés en leur entités HTML (&), ...
- La méta keywords ne sert plus à rien, sauf à la publicité ciblée par Google
- Même si tu as une feuille externe, je remarque un bout de CSS interne (avec balise <style>), ainsi que des styles en-ligne. Externalise-moi tout ça, en aussi peu de feuilles que possible ! Tu gagnerais énormément en facilité de maintenance du style !
- De toutes les images insérées en dur avec HTML, il n'y en a pas une seule maudite qui a un attribut alt="" ! Non seulement leur absence cause des erreuers de validation, mais ceci est un gros problème d'accessibilité, car s'il y a un problème de chargement ou si le robot Google passe, il y a de la perte d'information là où il y a des images porteuses de contenu ! Désactive les images SANS désactiver le style et tu verras ce que je veux dire par là ! Même pour les images décoratives (bien qu'elles devraient dans ce cas être en fond), un alt="" doit être présent, mais dans ce cas, il suffit de le lailsser vide.
- le problème d'accesisbilité est encore plus problématique au niveau du logo, car celui-ci est intégré en fond, alors que justement ce logo EST une image porteuse de contenu !
- Au lieu du lien du menu actif, une simple classe .active t'aurait évité un div inutile...
- Ton script Google Analytics est bien placé (avant </body>), mais tu aurais pu faire la même chose avec le script all.js...

Voilà, j'ai relevé les principaux éléments, mais Laurie-Anne n'est pas encore passé et je suis sûre qu'elle en relèvera d'autres (et préciser certaines choses).
Bonjour shark94, j'ai supprimé le lien vers ta news, ce forum n'est pas le lieu pour trouver des contributeurs.
J'ai modifié tous les images (background...footer et retiré le container et container down).

Je ne modifie pas les menus! Si tu saurais comment ça ma pris de temps pour faire cela. Je me la compliquerai pas plus là.

Pour la librairie GD, comment je fait ? Peut-tu m'aidez ? Merci.
J'ai mis en place des miniatures de la librairie GD et j'ai gagné beaucoup de espace disque !!!

Passé de 2MB à 500KB.

Mais le chargement de page est plus long.

Est-il possible de déterminer la largeur mais aussi la longueur de la miniature à la place du ratio ? Ça serait mieux parce que j'utilise, dans un autre code, une fonction qui le fait en php et non avec la librairie GD. C'est ça la cause du ralentissement. Il faut que vous m'aider à modifier mon code afin que je puisse mettre toutes les dimensions et non juste le ratio.


header ("Content-type: image/png");  

// on donne à PHP le lien vers notre image à miniaturiser
$Image = "creations/".$_GET['image']."";  
 
// on impose la taille de la largeur ou de la hauteur de la photo (le choix entre la largeur ou la hauteur se fait automatiquement, suivant que la photo est "horizontale" ou "verticale")

$ratio = 128; // On crée la miniature vide

// on crée une ressource représentant en fait l'image à miniaturiser
$src=imagecreatefrompng($Image);  
 
// on récupère les paramètres de notre image (getimagesize est une fonction qui retourne un tableau contenant les paramètres d'une image : sa largeur, son hauteur, son type, etc...)
$size = getimagesize($Image);  
 
// on test si la largeur de l'image est supérieur à sa longueur
if ($size[0] > $size[1]) { 
   // on crée une ressource pour notre miniature
   $im=imagecreatetruecolor(round(($ratio/$size[1])*$size[0]), $ratio); 
   // on place dans la ressource que nous venons de créer une copie de l'image originelle, redimensionnée et réechantillonée
   imagecopyresampled($im, $src, 0, 0, 0, 0, round(($ratio/$size[1])*$size[0]),$ratio, $size[0], $size[1]);  
}  
else { 
   // si la largeur est inférieure ou égale à la hauteur, on entre dans ce cas
   // on crée une ressource pour notre miniature
   $im=imagecreatetruecolor($ratio, round(($ratio/$size[0])*$size[1])); 
   // on place dans la ressource que nous venons de créer une copie de l'image originelle, redimensionnée et réechantillonée
   imagecopyresampled($im, $src, 0, 0, 0, 0, $ratio, round($size[1]*($ratio/$size[0])), $size[0], $size[1]);  
}  
 

 
// on crée notre miniature
Imagepng ($im);



Merci d'avance.
Modifié par shark94 (12 Mar 2011 - 20:38)
Bonjour Alex, j'ai quelques remarques sur ton site et elles concernent l'agencement et le design.
Il y a certaines incohérences graphiques à mon gout :

Le background global est trés sympa, bien travaillé sur les tons de rose/violet, c'est dommage que vous repreniez pas ces couleurs pour les liens, les titres etc.
Je trouve que le logo est mal placé, je l'attendrais plutôt à gauche.
Le 'cadenas' pour la connexion membre est peut etre pas trés représentatif, pourquoi tout simplement ne pas mettre ' Connexion' ?
Les boutons du bandeau 'A la une' sont trés peu lisibles (gris sur fond gris) et le terme 'à la une' est-il vraiment adapté ? Ces liens ressemblent plus à des catégories.
Enfin, le footer me semble vraiment à part et pas travaillé du tout. (libellés décallés, couleur grise de la police trop claire etc ).

Benjamin
Bonjour Shark94.

C'est un beau projet et pas de doute qu'il s'améliorera avec le temps.

connais tu deviantart ?
shark94 a écrit :
D'autres avis ou suggestions ?
Oui, éviter les "up" de tout genre, il parait que ça énerve certains modos...
Sujet clos
Aller à