[amateur] Site perso d'étudiant

Bonjour à toute la communauté !

Je souhaite soumettre mon blog à vos avis critiques. Il fonctionne sous Blogotext, et je l'ai étendu avec des pages statiques.

Il s'agit de la deuxième version d'un thème que je réalise pour ce CMS (sous copyleft). Je vous remercie donc d'avance de m'éclairer :
- sur des problèmes de compatibilités entre navigateurs, user-agents, résolutions…
- sur des rendus de couleurs ou de polices qui vous semblent moches (les avis à base d'onomatopées sont appréciés).
- sur des faiblesses, erreurs voire aberrations de code (les moqueries sont encouragées. Remarque: une partie du code est générée par le CMS).
- sur des optimisations possibles.

Néanmoins, toutes vos idées et remarques sont les bienvenues ! (sauf sur la photo de mon cv )

NOTA :
- Je suis sous Ubuntu 10.04. J'ai testé sous Firefox 17 pour Ubuntu, Opera 12 et w3m ( )
- L'url dans la barre de navigation pour Mes articles est bizarre ? C'est dû à une redirection qui a du mal à passer Bientôt, elle ne sera plus.

Merci d'avance et bon week-end de nouveau Monde !
Modifié par Muchos (25 Jan 2014 - 08:37)

Hello,

C'est le lien en signature ?...

C'était bien ça, et je l'ai ajouté dans le message.

J'avais tout bonnement oublié de mettre le lien, alors que je me moque toujours de celles et ceux à qui ça arrive!

Salut, alors ce qui me vient tout de suite à l'esprit, c'est:

La taille du texte, je la trouve trop grande et elle n'est pas toujours cohérente vis à vis de la structure (un coup plus grand, un coup plus petite).

Ensuite les couleurs, c'est un peu terne et fort plat à mon goût, tu pourrais utiliser des dégradés, des ombres, des arrondis, bref donner un peu de profondeur à l'ensemble.
PS: voila un bon p'tit générateur CSS pour générer ca rapidement (avec les préfixes vendeurs).

Pour le code par grand chose à dire c'est propre et très bien construit (je pense entre autre à ARIA), une seule erreur au validateur W3C mais qui ne peut t'être imputé (merci Google+ ).
Tu pourrait encore grapiller quelques octets au chargement mais c'est déjà très satisfaisant à mes yeux.

Sinon, voyant que tu utilises la balise hgroup, je t'invite à lire cet article car elle pourrait être remplacée prochainement par un nouvel élément subline: http://css.4design.tl/html5-element-subline-pour-remplacer-hgroup

Pour ce qui concerne l'affichage de ton adresse email (ou plutôt son masquage) je ne suis pas sur que le codage en hexadecimal soit une technique sure, je te conseillerait plutôt le javascript avec MailTo Encoder

Mais pluôt que de lacher ton email comme une bombe pour te joindre, l'ajout d'un petit formulaire de contact avec toutes tes infos (tel, adresse, ...) serait certainement un plus

Ajouter Google Analytic (ou un autre programme d'analyse) pourrait aussi t'apporter un plus non négligeable pour mieux dévelloper tes stratégies SEO !

Pour résumer, coté code, au poil par grand chose à dire, c'est top (d'ailleurs, je ne connaissais pas BlogoText) !!

Coté design, peut mieux faire

Muchos a écrit :
sauf sur la photo de mon cv

Tu pourras pas y couper lol, faut la changer, essaie de mettre une plus grande et une ou tu souris
 
Modifié par LuciferX (28 Dec 2012 - 18:36)

Who! Merci LuciferX pour cette réponse détaillée.

a écrit :
je ne suis pas sur que le codage en hexadecimal soit une technique sure, je te conseillerait plutôt le javascript

En effet, j'essayais d'éviter de recourir à JS. Mais comme il est utilisé pour le formulaire de commentaire, autant y recourir aussi pour le mail. Merci pour l'outil en ligne, car je n'y connais rien en JS!

a écrit :
l'ajout d'un petit formulaire de contact serait certainement un plus

Tout à fait! Mais je n'y connais rien non plus en PHP! Je ne voudrais pas faire un formulaire mal sécurisé, sans message de confimation/inmirmation, etc. Mais je veux le faire et il faut que je le fasse

a écrit :
Ajouter Google Analytic

J'utilise (un peu) AWStats chez mon hébergeur. J'imagine que c'est loin d'être aussi sophistiqué, mais la SEO n'est pas déterminant pour ce blog et utiliser Analytics m'inquiète un peu (traçage).

a écrit :
pourrait être remplacée prochainement par un nouvel élément subline

Merci pour cette info! Ce serait une bonne idée, d'ailleurs.

a écrit :
La taille du texte, je la trouve trop grande

Merci pour ce retour, car c'est une interrogation depuis le début. Je veux que l'accessibilité du texte soit bonne, sur desktop comme sur mobile. En outre, sur les résolutions 1400 et plus, le texte est 25% plus gros. C'est inutile ?

a écrit :
Coté design, peut mieux faire

Oui! Pour mon propre blog, je préfère rester comme ça, mais il faudra en effet que le thème soit un peu plus séduisant pour les autres. J'ai du mal à concilier joliesse et accessibilité des couleurs. Je vais travailler ça et j'en ferai part ici

Merci pour tes remarques et encouragements !

Bonjour,

Le site est clair et agréable à lire tant sur la qualité rédactionnelle que sur la lisibilité.

Le focus de la barre de recherche à un rendu disgracieux (sur Mac) safari et chrome.

Concernant la page du CV je verrais bien un retour au blog en haut de page (le nom cliquable par exemple).

Il est vrai que le design est très spartiate mais l'accent est mis sur la clarté et la rapidité du chargement des pages. Par contre une petite amélioration pourrait-être apportée sur les couleurs car les tonalités de vert ajoutées au noir et beige renforce le côté quelque peu terne de l'ensemble. Choix des couleurs

Bonne continuation.

Merci Rodolpheb pour ce retour !

a écrit :
Le focus de la barre de recherche à un rendu disgracieux (sur Mac) safari et chrome.

J'ai effectivement constaté ça chez un proche sous Safari/Mac, et pas que pour la barre de recherche. Je ne sais pas comment faire. J'ai essayé d'utiliser http://browsershots.org/ mais ça sort une erreur 403

a écrit :
Concernant la page du CV je verrais bien un retour au blog en haut de page (le nom cliquable par exemple).

C'est une bonne idée! Je vais faire une petite barre de navigation pour mettre les deux liens du footer.

a écrit :
Par contre une petite amélioration pourrait-être apportée sur les couleurs

Vous confirmez les propos de @LuciferX. Merci pour votre lien! Je vois que je peux peut-être me tourner vers des couleurs plus chaudes, et une troisième couleur.

Vous pouvez atténuer dans un premier temps cet effet en saisissant ces valeurs:

outline-color: couleur légèrement plus foncée que le parent;
    outline-style: solid;
    outline-width: thin;

Sur Mac FF et Op la barre de recherche est rectangulaire.

Sur FF rendu différent du titre principale de la page d'accueil: la fonte est plus bleutée.

Même rendu sur FF PC.

Si vous voulez des screens n'hésitez pas pour: PC(FF, Ch, ie8) ou Mac (FF, Ch, Saf, Op)

rodolpheb a écrit :
Vous pouvez atténuer dans un premier temps cet effet

Bien vu! Je teste des rendus plus discrets et plus doux.

a écrit :
Sur Mac FF et Op la barre de recherche est rectangulaire.

C'est l'effet voulu, mais je n'ai pas précisé de forme particulière. J'imagine qu'on ne peut pas définir des coins carrés

a écrit :
la fonte est plus bleutée.

Merci! Je vais choisir un bleu un peu plus foncé.

Et merci d'avance pour les screens sous Mac! Je vous en demanderai sûrement lorsque je proposerais la version corrigée

Concernant les couleurs il y a ce lien aussi.

Muchos a écrit :
J'ai du mal à concilier joliesse et accessibilité des couleurs.

Pour l'inspiration n'hésite pas à aller jeter un oeil du coté des galeries CSS
http://www.google.fr/search?q=css+gallery
Modifié par LuciferX (30 Dec 2012 - 07:13)

Merci à vous deux pour ces liens inspirants qui me rendent transpirant !

Un grand merci à LuciferX et rodolpheb ! Selon vos remarques, j'ai modifié ainsi mon blog [lien dans le premier post ou dans ma signature]:

- Couleurs plus franches (avec l'objectif de conserver l'accessibilité visuelle) et usage de box-shadow pour rendre les focus plus légers.
- Petites corrections des trop grandes différences de taille de texte.
- Création d'un formulaire de contact et lien mail du footer (@webmaster) généré en Javascript.
- Menu du cv en haut, et visuellement cohérent avec le reste du site. …Par contre, je n'ai pas encore changé la photo

J'espère que c'est mieux. Bon week-end à tou-te-s !

Pour les couleurs, j'accroche toujours pas trop (du coup je préférerais qu'il n'y en ait pas).
Essayez avec ce lien et inspirez vous de ce genre de sites.

Concernant le contenu principal:
- sur mon écran il fait 1400 px ce qui implique un balayage visuel peu agréable.
- les articles ombrées à l'intérieur apporte une surcharge ou ne collent pas avec l'ensemble.

Peut-être avec le temps, donner un style au header (tout en conservant la sobriété de l'ensemble) en plaçant des icons (font) pour chaque domaine (télévision, cinéma....).

La partie "commentaires" manque aussi de style. Pourquoi ne pas faire ce qui existe déjà sur tous les forum c'est à dire un commentaire encadré ou bien mis en valeur.
Modifié par rodolpheb (05 Jan 2013 - 06:43)

a écrit :
sur mon écran il fait 1400 px ce qui implique un balayage visuel peu agréable.

J'ai réduit la largeur du contenu de 20%, en résolution 1400px et supérieures. Est-ce mieux ?

a écrit :
les articles ombrées à l'intérieur apporte une surcharge ou ne collent pas avec l'ensemble.

Viré! L'ombrage restera consacré au hover sur certains boutons et champs.

a écrit :
Pourquoi ne pas faire ce qui existe déjà sur tous les forum c'est à dire un commentaire encadré ou bien mis en valeur.

Fait! J'ai repris le code couleur des champs interactifs (recherche, contact).

a écrit :
donner un style au header (tout en conservant la sobriété de l'ensemble) en plaçant des icons (font) pour chaque domaine (télévision, cinéma....).

J'y ai songé, mais je crains toujours que le code de la font icon ne soit pas chargé chez un utilisateur. Dans le cas d'une puce, ça peut passer, mais dans un menu c'est gênant

a écrit :
Pour les couleurs, j'accroche toujours pas trop (du coup je préférerais qu'il n'y en ait pas).

J'ai légèrement modifié le thème pour qu'il fasse moins "drapeau américain" ^^
Néanmoins, le premier thème était trop fade, et je ne le souhaite pas sans couleurs (et puis j'aime l'effet bandeau).
Modifié par Muchos (07 Jan 2013 - 03:32)

Bravo, C'est beaucoup plus clair!
L'oeil est attiré vers le texte et étonnament je me suis mis à lire vos articles (non pas qu'ils ne soient pas intéressants mais je me concentre sur le design )

Pour les couleurs... inspirez-vous de sites car c'est très sombre. Voici un exemple de charte graphique simple sur ce site (c'est en plus un utilitaire très utile).

Muchos a écrit :

J'y ai songé, mais je crains toujours que le code de la font icon ne soit pas chargé chez un utilisateur. Dans le cas d'une puce, ça peut passer, mais dans un menu c'est gênant

Je ne parle que du header pas du menu. Pour des icones de décoration(icon fonts - je les utilise avec beaucoup de plaisir-) vous de ne prenez pas de risque si elles ne se chargent pas pour tout le monde. Ou alors en créer en Png.

Le thème est désomais disponible sur le site de Blogotext.
Je souhaite remercier @rodolpheb et @LuciferX pour leurs conseils.
Modifié par Muchos (29 Jan 2014 - 16:13)

Bonjour à tou·te·s !

Je viens de refaire mon site perso en profondeur (lien dans ma signature). C'est principalement un site de textes, que je souhaite accessible et léger.

## Ce qui m'inquiète.

Le design, même si mes camarades au début de ce thead m'ont considérablement aidé à progresser sur ce point. Que trouvez-vous manqué ou désagréable? Les fontes vous conviennent-elles?
Est-il bien supporté sur vos devices/browsers? J'ai utilisé les unités VW et REM. J'ai aussi tenté une css pour Smart TV, mais sans pouvoir constater [s]les dégâts[s] le rendu.

En outre, il y a le ou les domaines de l'intégration que j'aurais sous-estimés…

## Ce qu'il manque.

Je n'utilise plus de CMS. Il n'y a donc pas (encore) de système de commentaires, malheureusement. L'heure d'apprendre PHP, sans doute

De plus, le site nécessite un moteur de recherche interne. Je ne sais pas si je serai capable d'installer ça sur mon mutualisé. Je veux éviter les outils tiers. Je suis attiré par mnoGoSearch.

Enfin, la photo de CV n'a toujours pas changée depuis l'ouverture de ce thread Une honte qui n'a que trop duré…

En attendant, merci d'avance de votre attention et de votre patience. Bonne semaine !
Modifié par Muchos (29 Jan 2014 - 16:14)