Mon portfolio / blog

J'aime bien, très sobre mais les images apportent de la couleur et sont bien mises en valeur, design parfait pour un portfolio/blog !

Par conter ya un petit soucis avec le bouton galerie du header qui se balade un peu partout quand ont survole le menu.

Merci pour ces retours positifs, sur quels navigateurs êtes vous ? Car je n'ai pas ce soucis sauf quand je redimensionne fortement ma fenêtre.
Il est vrai que j'ai eu quelques soucis entre firefox, et chrome, apparemment ils ne gèrent pas de la même manière les tailles des ul li.

Suis sous chrome.
En fait le soucis est que le nav est trop petit de 1px, et le bouton s'affiche dessous! suffit de

.nav {
width: 463px; //au lieu de 462
}

voilou. Tu peux même meetre un peu plus par sécurité!

Hum c'est étrange parce que chez moi (sur chrome) ça passe très bien pourtant. De plus que j'avais déjà augmenté pour chrome. Sous firefox il faut au moins 10 px de moins... D'où vient cette différence ?
Si je met plus (plus d'1px) le risque est que le decentrage soit visible sur les autres navigateurs.

D'un point de vue graphique c'est assez sympa, surtout le logo qui fait un peu aquarelle. J'aime beaucoup ta favicon et le fait qu'elle revienne sur tes posts. J'aime vraiment l'effet thumbnail autour de tes images.
D'un point de vue technique c'est un peu moins bien. J'ai ouvert ton site en premier sur mon android et je ne pouvais rien lire sans zoomer. La largeur de ton contenu est plutôt petite donc je ne comprenais pas pourquoi. Pareil du côté pc, tes largeurs de tes blocs principaux (#header, #content et #footer ne sont pas les mêmes). Du coup ça ne se repositionne pas bien au redimensionnement. A ta place, je ferais ceci :

<div class="container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

Autres points négatifs pour moi :

1. J'ai du mal avec les icônes et les textes dans ta navigation. J'ai mis du temps à comprendre que la dernière icône servait à la navigation.
2. Je trouve que tes flèches pour accéder à la lecture d'un article n'est vraiment pas assez visible. Il m'a fallu plusieurs lectures pour les voir.
3. Les images du zoombox sont trop petites. Au final on clique car on veut en voir plus mais on se retrouve avec la même image. C'est dommage car j'aime beaucoup les contenus (et surtout l'exercice de typo).
4. Tu charges Bootstrap dans ton CSS mais tu ne l'utilises pas dans ton code HTML.
5. jQuery UI ? Je n'ai pas vu où tu l'utilisais.

Possibilité d'amélioration :

1. J'aurais mis la date de publication en gris plus clair pour donner plus d'emphase au contenu du post.
2. J'aurais mis la catégorie du post dans un style label (pour donner un exemple reprenant de Bootstrap). Actuellement on à l'impression que c'est un lien et on ne peut pas cliquer alors c'est frustrant.
3. Pas besoin d'image pour ton séparateur de gauche/droite dans tes posts, une simple bordure fera l'affaire et c'est une image de gagné. (même si ton site n'est pas lent).

Dernière remarque :

Ce n'est pas la peine de mettre ton adresse contact[at]swith.fr si tu la mets en clair dans le lien. Le but est d'éviter de te faire spammer, hors les robots vont principalement analyser les urls de liens. Soit tu le mets dans les deux soit pas du tout. Si tu ne veux pas mettre ton adresse mail, tu peux mettre un formulaire de contact. Si tu n'as pas envie de t'embêter, tu peux utiliser un service externe (ex : http://www.wufoo.com/, je l'utilise pour mon site perso mais pour des raisons techniques).

Mon post n'a pas pour but de t'accabler, mon souhait est de te montrer les pistes d'amélioration pour que tu puisses devenir plus compétent. Je n'écrivais pas du code aussi propre au tout début (mais on avait pas encore les frameworks CSS :p). Si tu as besoin d'aide pour l'amélioration, n'hésite pas à demander, je te donnerai toutes les pistes que je pourrai.

En tout cas c'est pas mal ! Continue comme ça !

Ah merci pour cette critique très intéressante !

Premièrement, je n'ai pas du tout travailler le coté mobile ou tout autre device qu'un PC donc normal que ça foire sur mobile pour le moment. Je m'attarderai sur ce point quand j'en aurais le temps, pour le moment ce n'est pas ma priorité.

La largeur du contenu est volontairement petite, je ne pense pas écrire des articles romans et seulement quelques phrases (comme ceux déjà présents) et j'ai fais plusieurs test de largeur et plus grand ne rend pas aussi bien. Avec peu de contenu faire une ligne de texte de 900 px c'est pas interessant. Du moins c'est mon avis. Après comme la remarque m'a été faite à plusieurs reprises, il se peut que je l'augmente mais pas beaucoup!

Les icônes dans la navigation c'est parce que je voulais pas un menu trop long et écrire galerie et présentation rallonge fortement le menu. Alors voir pour trouver une autre solution que ces icônes qui viennent du bootstrap twitter (voilà pourquoi je le charge, et notamment pour l'administration (tables...)).

Les flèche oui en effet elle ne sont pas assez visibles mais c'était volontaire. Après si ça gène à la lecture et la navigation, je les rendrais plus visible.

Le plugin zoombox est celui de Grafikart (je lui résérve une petite dédicasse d'ailleurs), alors va falloir que je fouille un peu pour agrandir plus les images...

jQueri UI c'est pour le plugin media il me semble et j'en ai besoins pour mon administration.

Après en ce qui concerne la date de publication, je n'y avais pas pensé, je corrigerais ça. En revanche pour la catégorie, je trouve que le rouge donne un plus au design, donc je ne pense pas mettre un petit label comme le bootstrap, par contre on pourra cliquer dessus parce que c'est vrai que c'est frustrant ! Peut-être que je réduirais la taille de la typo également.

En effet l'image de bordure est inutile je la virerai, des fois je fais des trucs pas logiques ^^

En tout cas encore merci pour ces conseils très constructifs, merci pour les compliments et je suis content que le contenu te plaise.

Je rajouterai l'icone en forme de 4 carrés en dessous du menu qui bug (quand on survole un menu, l'icône parcourt toute la ligne, c'est assez gênant d'un point de vue esthétique).

Le fait de faire un coup l'article à gauche, un coup à droite : c'est pas mal mais je trouve que la place libre à côté des images est trop importante. J'aurais bien vu plusieurs captures, ou alors mettre l'explicaiton à côté au lieu d'au dessus.

J'aime bien la sobriété, mais pas quand il n'y a quasiment rien d'affiché sur la page.

Silon le reste, c'est du good work. Keep it up !

Merci Pewel ! Il est clair maintenant que l'icône de la galerie pose problème, ce sera corrigé!

Pour le manque de contenu sur les cotés, je pense mettre un systeme d'archive quand il y aura plus de posts. Mais après je ne vois vraiment pas quoi ajouter... :/

Je vais travailler sur la piste du contenu à coté plutot qu'au dessus de l'image ainsi que sur plusieurs captures.

Bonjour,
Le coté gauche droite me donne envie de vomir.

Bonjour,

Les critiques négatives ne me déranges pas, au contraire elles font progresser. Cependant, quand elles sont aussi vulgaires (et non argumentées) et donne l'impression que leur seul but est de provoquer ou blesser... là j'apprécie moins. Tu as tout à fait le droit de ne pas apprécier mon travail je ne te reproche pas ça mais serait-il possible d'avoir plus de détail ? Ton commentaire est plutôt cru et plat!

Cordialement.

Voilà plusieurs corrections ont été apportées en fonction des remarque que j'ai reçu. Il me reste encore: A trouvé quoi mettre sur les cotés pour combler l'espace... Changer les icones du menu et trouver autre chose qui n'agrandisse pas plus le menu Regler la tailles des bloc Header, Content et Footer ** Pour le moment les améliorations sont elles sur la bonne voie ? Encore merci pour critiques.

C'est mieux pour moi !

Peut être que tu devrais essayer, quand sur un post le texte est à gauche, de coller les captures au bord droit.
Quand le texte est à droite, l'image est bien collé à gauche, mais quand le texte est à gauche, l'image de capture est limité centrée.
Aussi, aligner les captures par rapport à la date de publication, pas par rapport au titre.

Je te montre ce qu'il me semble être une bonne solution :

Oui c'est un problème que je n'ai pas réussit à résoudre pour l'instant, je galère un peu avec le positionnement ^^ Mais ça viendra ;) Merci pour la remarque

Bonjour,
Je suis désolé si j'en est offusqué certains. C'est vrai mon propos était pas du tout constructif.

Je vais pas rentrer dans tout les détails, je ne suis pas graphiste mais j'ai des notions de base qui sont a mon avis fondamental pour un intégrateur.

• Il n'y a aucune grille
• logo et menu qui prenne 50% de la partie active d'un écran 13 pouce
• le design n'utilise pas de façon intéressante l'espace actif de l'écran en largeur
• mise en page du texte pauvre (a part la nuance entre le tire, les tag et le texte)
• image de article trop petit
• sobre ne veut pas dire pauvre visuellement...

Le gros soucis c'est que le principe d'un site vitrine comme le tiens c'est que son principale but est d'attirer l'attention des utilisateurs sur ton contenu et c'est pas en vidant ton site visuellement (sobre) que tu attire l'oeil sur ton contenu. L'autre partie c'est que ton site doit marquer les gens pour qu'ils se souviennent après de ton site. Je pense ne pas avoir besoin d'expliquer...

D'un point de vue fonctionnel, aucun résaux social n'est présent sur le site.
Utiliser cakephp pour un site aussi simple est particulièrement contre productif. Maintenant je peut comprendre que si c'est le premier site que tu as fait avec, on peut le considérer comme de l'apprentissage.

Ce que je veux faire comprendre, c'est que tu as des compétence (3d, 2d) que moi je n'ai pas par exemple. Mais le web n'est pas simplement créer un design l'intégré et puis c'est tout. Sa c'est le web 1.0.

Il faut que tu pense utilisateurs (UX). Tu trouvera beaucoup d'info sur google qui je l'espère te permettront d'évoluer là dedans si tu t'y intéresse. Je suis désoler de mon commentaire mais beaucoup de personne post des sites comme le tiens et parfois les fonds facturer et je trouve sa inadmissible car je ne suis encore que étudiant et jamais de ma vie je vendrais se genre de site ou il n'y a aucune réflexion et en réalité très peu de travail en amont de la production.

Je sais que c'est ton site perso mais je pense que je vais poster un message a grafikart pour qu'on parle en générale des métiers liée au web et du travail général du web. Pour que certains se rendent compte que en suivant les tutos de grafikart on aquère des compétences mais qu'il y a un vrai travail de fond, pas seulement du dev et des fonctionnalitées.

Et encore une chose pour les graphistes, pour s'améliorer laché un peu photoshop et posé vous les bonnes questions (pour qui je fais mon site, qui va allez dessus, qu'attendent ils de mon site).

Merci galyb pour ces précisions !

J'ai pris en note vos remarques et j'ai un peu bosser sur un nouveau design. Il est évident que le principal problème était l'utilisation de l'espace. Trop de sobre tue le sobre. J'ai donc repensé la disposition des éléments et surtout le menu qui à complètement changé.

L'image entière ici.

Cependant il me reste un véritable souci : le header / logo je trouve rien qui convienne alors je suis preneur d'idée !

Alors que pensez-vous de cette nouvelle maquette ?

Encore merci de votre aide

Un autre petit conseil ^^. Pour ta typo en général, met plus de (1.5*la taille de ta typo) en hauteur de ligne. Cela permet de plus espacer les lignes et d'être plus lisible. Pourquoi le mot switch? dans ta nav?

Ah oui j'ai oublié le détail de l'interligne ici.
Et bien Swith (et non Switch) parce que c'est le nom de mon site et mon pseudo (jeu de mot avec mon nom Smith).
Sinon c'est mieux ou pas ? ^^

J'ai apporté la majeure partie des modifications ce week end, pas mal de nouvelles choses en place. Je vous laisse juger. Les avis et critiques sont toujours les bienvenus
swith.fr

J'aime bien c'est sobre, c'est cool.
Par contre j'aime pas trop l'animation du menu à gauche, c'est saccadé, enfin chez moi en tous cas. Par exemple je pointe mon curseur ça bouge, mais la couleur ne vient pas ou genre 10sec après c'est dommage ^^

En fait il y a un bug sur le menu, quand on pose une première fois la souris dessus, il y a l'animation.
Quand on arrête la souris, on est donc sur le menu mais il n'a pas la propriété de background-color parce qu'on a arrêté la souris avant la fin de l'animation sur le premier hover.

Ensuite, quand on rebouge la souris sur le menu, là il vient se colorer. Ca fait une animation saccadé à cause de ça.
Il faut deux mouvement à intervalle d'une seconde minimum pour déclencher les deux animations.

Retravaille un peu le menu et ton logo et tu auras déjà qqchose au final qui sera pas mal :D

Le logo d'avant était magnifique ;(

Sinon un gros soucis avec le menu, en plus d'animations zarb on ne peut cliquer sur le lien qu'une fois l'animation fini ce qui est très dérangent!
Et chez moi le lissage de la typo des titres d'article est assez horrible, tu travailles sous OSx ou linux j'imagine? (car le lissage des police est plus agréable)
Voilà ce que ça donne sur mon écran:

Voilà, sinon ça reste joli hein ^^

+1 pour les typo avec ull. Après le site est sympa et les modifications ont été concluante ;)

Bonsoir à tous et un grand merci pour toutes vos remarques.

Alors ouais le menu déconne beaucoup sur chrome, sur fifrefox ça va encore mais je vais certainement retiré l'une des deux animations.
Pour la typo je m'en suis rendu compte en effet je suis sur Mac et c'est bien mieux que sur PC du coup faudra que je trouve une meilleure police. J'avais déjà eu pas mal de mal à en trouvé une qui me plaise ^^

En tout cas merci beaucoup pour votre participation.