3246 sujets

Critiques de vos sites: code et design

[pro/semi-pro] Mon portfolio | studio-khaz.com

Bonjour à tous !

J'aimerais, si possible votre avis sur le design et le code en général.
Le site tourne avec RadiantCMS, un CMS écrit en Ruby avec le framework Rails.

L'adresse est : http://www.studio-khaz.com

Je tiens à préciser que la page de contact n'est pas valide XHTML/CSS (Mise en forme par du JS avec jQuery).

Antoine
<troll>Ruby on rails, quelle drôle d'idée. Pourquoi pas un vrai framework ?</troll>

Plaisanteries mises à part, gzip ne semble pas activé.
Le recours à typekit ne me paraît pas indispensable vu les polices que tu as choisies (pour moi ces services de fondeurs et les EULAs délirantes de leurs fontes nous transforment en vaches à lait)
Tu insistes beaucoup sur le faible coût de tes prestations, je ne suis pas certain que ça soit la principale qualité à faire ressortir.

Globalement ça me plaît.
Modifié par paolo (15 Apr 2010 - 17:53)
Au contraire, je trouve que le faible cout est un argument original. Combien d'associations ont déjà formulé des demandes de service dans le bar d'Alsa (et même jusqu'à envoyer des MP à des membres) ?
Modifié par darkstar2023 (15 Apr 2010 - 22:51)
Indépendamment de toutes les considérations techniques, je trouve que c'est archiment didactique, bien amené, et que le ciblage assoc' 1901 est très bien vu. En plus, un design présent sans être écrasant, des animations qui ne s'éternisent pas mais ne sont pas non plus blinquantes à vous épileptiser...

... bref, l'élégance. Si j'ai un besoin pour une assoc', je recourrai tout de suite à tes services !
Modifié par quantumOfPixels (16 Apr 2010 - 08:39)
Merci beaucoup pour vos commentaires !

Pour répondre à paolo :
Ruby on Rails parce que j'avais envie de tester Smiley cligne
Ensuite, j'ai eu l'occasion de tester la bêta de Typekit, qui m'a pas mal plue, donc, j'ai décidé d'utiliser leurs services.
Pour la question du GZIP, je suis en train de voir si Mongrel (mon serveur applicatif) permet de gzipper les données, mais je ne suis pas encore sûr.

Encore merci,

Antoine
J'essaierai de formuler une critique personnelle ce soir ou demain sur le design et l'organisation. Les critiques d'ordre technique seront faites par des spécialistes en la matière.
Bonjour à toi,

J'aime beaucoup ton site, juste comme ca en passant j'aurais bien ajouter ceci à ton menu pour plus de lisibilité :

Ligne 108 de style.css :

#header ul li {
float:left;
margin-left:4px;
}


et (mais vraiment pour chipoter) Smiley lol 


#header ul li a:hover, #header ul li a.active {
color: #fff;
background:url(/images/button-top.jpg) repeat-x;
border-bottom: 4px solid #115C8F;
}


De plus, je trouve que la police pixelise beaucoup, et du coup ca fait moins propres. Ça peut venir de moi : on est Vendredi je fatigue Smiley langue

Beau travail en tout cas.
En construisant un site de ce type (donc en se mettant à la place du visiteur), il faut éviter d'éparpiller les informations lorsqu'il est possible de regrouper davantage.
Pour se faire une idée de ce qui peut être le plus efficace possible, l'un des principes de base est de se dire que l'utilisateur n'aime pas trop cliquer beaucoup (même si le web est par principe un ensemble de liens et de pages liées).

Donc je regrouperais bien la page "philosophie" et éventuellement la page "offres" dans la page d'accueil (avec éventuellement un lien d'évitement)
Et la FAQ dans la page de contact (si le formulaire mail est trop haut, mieux vaut laisser la FAQ à part)

La page portfolio doit afficher tous tes travaux sans défilement temporel (qui en plus, n'est pas contrôlable - bouton pause, suivant, précédent,...), le défilement pouvant éventuellement être mis en page d'accueil en guise de vitrine.

À titre vraiment personnel je réduirais volontiers la taille du titre du site (et mettrais surtout un lien vers la page d'accueil autour de l'image) et grossirais au contraire le slogan du dessous "créer le web avec vous".

Je me retrouve avec un résultat qui ressemble à ça (avec un design à retravailler évidemment) :
http://img694.imageshack.us/img694/2394/khaz.jpg
Modifié par darkstar2023 (16 Apr 2010 - 22:52)
@darkstar2023 :
Merci beaucoup pour tes commentaires !
Je vais essayer d'améliorer cela. Puis-je réutiliser tes idées (que je trouve absolument démentes, soit dit en passant, j'adore !) ?

@Maki
La police pixellise beaucoup... sous windows, qui n'effectue aucun lissage des polices, contrairement à GNU/Linux ou MacOS X. J'essaie de changer cela mais je n'ai pas encore trouvé de police qui fonctionne réellement bien sous tous les OS...
À ma connaissance il n'y a pas de police qui fonctionne bien sous tous les OS, ou sinon elle n'est pas web safe : et pour le moment j'évite d'utiliser @font-face car des -rares mais possibles- mauvaises surprises ont été rapportées concernant le rendu de la police chargée (ça peut très fonctionner sur un navigateur/OS/version donné(e) alors que le résultat peut être catastrophique pour une autre configuration - pixellisation, pointillisme, etc.)

Pour lisser la police sans dispositif particulier, il suffit d'augmenter légèrement la taille : 18px ou 1.1em avec la taille de référence fixée à 16px (ou 100% si votre navigateur est réglé par défaut à 16px). Avec ClearType activé la pixellisation se voit à peine avec cette taille.

Sinon la solution la plus simple est de faire une image -avec un alt dûment rempli- à la place des gros titres, et seulement les titres (inutile et inaccessible de faire des images sur tout le site). La police fantaisiste serait donc vue par tout le monde.
Pour les textes normaux les fontes web safe conviennent très bien (Trebuchet MS est très confortable à l'oeil)
En fait, j'utilise typekit (donc @font-face) uniquement pour les titres ainsi que le menu. Autrement, j'utilise une stack assez classique (Helvetica, Arial, sans-serif) pour le reste du texte.

L'inconvénient est que Windows n'active pas clear type pour les polices web embedded... Je songe de plus en plus à faire une détection de l'OS par le navigateur et de mettre des polices web-safe ou des images pour les windowsiens, mais cela alourdirait un peu (beaucoup) la chose, je pense...

Le site avait été conçu dans une optique de minimalisme à l'origine (j'aime le minimalisme, ça se voit je pense...)
Cela n'alourdit pas significativement le site...

<? if(eregi('Windows', $HTTP_USER_AGENT)) 
echo '<h2><img src="creer-le-web-avec-vous-!.jpg" alt="Créer le web avec vous !" /></h2>' 
else echo'<h2 style="font-family:exotic;">Créer le web avec vous !</h2>'; ?>

Modifié par darkstar2023 (19 Apr 2010 - 17:25)
Si je puis ajouter mon mot à propos du rassemblement d'information que présentait Darkstar.

C'est sûr que cliquer beaucoup, c'est usant. Cependant, en tant qu'utilisateur web, je déteste encore plus une page chargée d'information!!

Dans le cas d'un site vitrine assez basique et à l'information très simple, je préfère le site de Khazou tel qu'il est présentement. Les sujets sont bien délimités par pages, et le peu de contenu sur chaque encourage le visiteur (en tout cas, ça m'encourage moi) à lire l'entier du contenu, et à beaucoup mieux cerner le sujet et le message du site qu'en une page d'information unique allongeant la page et décourageant le lecteur (et puis, actuellement, on a même pas besoin de faire de scrolling vertical, c'est vraiment la fine pointe!)
C'est vrai que les habitudes varient considérablement d'un internaute à l'autre (et la configuration matérielle y met aussi sa part) et les pratiques en matière d'efficacité ont beaucoup de mal à converger. Un peu comme les standards web en général.

Mais j'estime que l'internaute a l'habitude de se voir submergé par un flux indigeste d'informations sur une même page et qu'il sait plus ou moins déjà gérer son ordre de lecture.
En plus vu le sujet des paragraphes regroupés, ils sont d'un point de vue très directement en rapport avec le site et les services proposés. Donc les mettre sur la même page favoriserait la cohérence. En quelque sorte l'accessibilité cognitive.

Mais il est vrai qu'à titre très personnel, les longues pages à scroller ne me dérangent pas, ce qui influence probablement mes méthodes (et pourtant, paradoxalement la roulette de ma souris est complètement défoncée).

PS. ce qui rend ma proposition illisible ce sont les textes mal alignés - un alignement justifié (je n'sais pas faire sous Photosh*p 6) fluidifierait déjà considérablement le confort de lecture (et donc la mémorisation des informations).
Modifié par darkstar2023 (21 Apr 2010 - 00:38)
Sujet clos
Aller à