[Intermédiaire] - Site personnel / Portfolio de S.L.

(reprise du message précédent)

Voilà !

Je viens de mettre en ligne une nouvelle version. Au menu :

- mise en place de la police Verdana pour le texte long.
- remplacement du font-face de Miso Light par un font-face de Graublau, plus assortie à Verdana.
- ajout d'un ampersand stylisé en Baskerville ... petite touche perso !
- automatisation de la page des Archives via le script Delicious.
- le formulaire de contact fonctionne enfin avec les accents !
- allongement de la question anti-spam.
- mise en place d'un script JS pour afficher mon adresse mail "directement" sans me faire spammer.
- recodage de la page Contact qui faisait un peu "cuisine" au niveau du code.
- ajout de réseaux sociaux dans la page Contact ... et un lien Alsacréations bien sûr !
- petit réglage au niveau de bullet.gif pour certaines ul (le "bullet" s'affichait en baseline au lieu de se mettre en middle pour ce qui est du vertical-align).
- allègement de la tagline de la page Home.
- ajout d'un article "test", que je finirai dès que possible.

Et c'est tout !

Bref, seul le changement des polices est un gros changement ... qu'en pensez-vous ?

Je vais m'occuper du bug de la page de remerciement de contact après.

La police, c'est nettement mieux !!!

Pour ton menu, l'item contact est totalement cachée, il faut jouer de précision pour l'atteindre en-dessous de ton "sur menu".
Le Footer est la plus belle réussite du site.

La seule chose "gênante" est ce sautillement des pages mais c'est de l'ordre du détail.
Le logo: tu t'es vraiment pas foulé !

Je pinaille... Ton site montre l'intérêt [au minimum de cette partie] du forum quand on regarde les 1ères critiques et le résultat aujourd'hui.

Salut,

Je suis content que le changement de police te plaise !

Pour ce qui est de l'item "Contact" caché, c'est que j'ai un peu trop mis la dose sur la margin des li de nav (quelle phrase !). Je vais fixer cela, merci de me l'avoir signalé.

Le sautillement des pages, je ne l'ai pas sur Chrome, mais c'est vrai qu'il existe toujours sous FF. Et ... j'ai compris pourquoi ! En fait, mon menu est fait avec un font-face, et c'est le FOUT (Flash Of Unstyled Text) qui fait que le menu "saute".
Et en fait, Chrome a la fonctionnalité de ne pas afficher le font-face tant que la police n'est pas complètement chargée, mais de laisser la place équivalente, ce qui fait que le texte vient se caler joliment sans faire sauter le menu.
Voilà, ça c'est mon hypothèse qui me paraît satisfaisante.

Le logo est plutôt temporaire, c'est juste que j'avais pas trop d'idées. Mais j'y réfléchis activement !

Merci encore pour tes nombreux passages et tes interventions pertinentes

Et voilà, au programme encore :

- le footer s'affiche (enfin) normalement dans la page de remerciement de contact.
- j'ai fini l'article Responsive, Adaptive.
- petit problème de marges réglé dans le div #recentarticles du footer.

Plus de scroll horizontal sur mon netbook donc c'est cool.
Cela saute toujours et j'ai chrome en navigateur fétiche!

L'item "contact" est encore quelque peu cachée, décale-là légèrement 5 à 10 px devraient largement suffire.

Flûte. Tu viens d'annuler toute ma théorie du FOUT. Ou alors c'est que Chrome ne gère pas si bien que ça ce FOUT ... Je vais me pencher de plus près sur la question.

Je vais décaler un peu l'item Contact, je croyais que ça passerait.

Merci encore !

Excusez mon retard

Eh bien je te dirais au départ que j'apprécie vraiment le design classique. Garde avec toi cet attraît. Conserve le toujours. Ce design est propre, sobre et équlibrer.

Toutefois certaines erreurs techniques. Vérifier sous IE8 et FF dernier cri. Tu ne contrôle pas ton scrollbar horizontale ? - donc ta largeur en CSS. Quand on ne controle pas la largeur en CSS, c'est un mauvais signe. La largeur dont nous parlons est celle de la globalité de la page, et tu ne la controle pas. C'est un très mauvais signe. Ne pas controler la largeur en CSS, c'est le mal.

De plus l'icone pour l'ouverture de la zone cachée, cache aussi une partie de la navigation horizontale à la hauteur de ABOUT, dû moins je crois que c'est ABOUT.

Cet icone ne représente pas le contenu, une fois la zone ouverte.
Sur 9 carrés de l'icone, tu peux en enlever six.

Je n'ai pas été voir plus loin pour une critique plus technique. Je ne faisais que passer.
Toutefois je te félicite pour un choix design classique, encore très apprécier.

ÉDIT : d'ailleurs dans la rubrique READING, j'ai cliqué sur un couvert de livre (bien fait cette page), pour aboutir sur « abookapart » mais sur abookapart il n'y a pas de scrollbar horizontale sur mon navig. Il n'y a que sur ton site que l'on voit un scroll horizontale

..
Modifié par zardoz (23 Sep 2011 - 10:56)

Salut,

Merci d'être passé !

Je vais voir ce que je peux faire pour le scrolling horizontal ... moi sous Chrome et FF6, je l'ai pas.

Par contre je ne comprends pas pourquoi chez tout le monde, l'affichage du menu est différent ... chez jmlapam, le lien Contact était caché, chez toi c'est le lien About et ... chez moi, rien n'est caché. Anyway, je vais re-baisser la margin, c'est pas grave.

Pour ce qui est de l'icône, le nombre de carrés n'a aucun lien, c'est juste comme ça, honnêtement c'est le genre de détails qui ne compte pas. Mais tu as raison dans le fond.

Merci encore de ton passage !

Stephanelam a écrit :
Salut,


Par contre je ne comprends pas pourquoi chez tout le monde, l'affichage du menu est différent ...

Résolutions d'écrans différentes.

Ok, d'accord, mais vous regardez vraiment mon site avec un écran d'une largeur de moins de 1024px ? Moi qui me disais que tous les geeks (sauf moi) avaient des iMacs ...

D'accord seulement nous ne voyons pas ce genre sur tout autre site de qualité. Alsacréations ou abookapart, et combien d'autre encore que je pourrais nommer.

Il est préférable Stephanelam de considérer CSS comme une technologie adaptative axée principalement sur une utilisation judicieuse des instructions en CSS. Surtout en ce qui concerne la globalité de la page.

J'ai un écran temporaire de 15" (unité anglaise). Et pourtant les sites conscientisés sur le sujet CSS, ont suivi correctement et s'adapte très bien à la résolution écran.

Je n'ai pas été voir ton fichier CSS. Cependant je crois sincèrement que tout est dans la façon de rendre les instructions CSS. Je dirais même que c'est très !important.

En ce qui concerne les instructions CSS et la résolution, ceux-ci font partie des décisions de départ juste avant de taper du CSS. Ce genre se rattache toujours à la structure globale de la page.

Tout ça pour te dire que c'est toujours le développeur qui fait erreur en CSS. Quand je commence une page web, c'est la première chose que je fais. Avant même de placer du contenu ou autres instructions CSS, déjà je sais que la question des scrollbar's est résolu (et multi-poste), et seulement avec quelques instructions CSS attachées à la structure globale (souvent sur body), pas nécessairement placer en visuel. Juste quelques instructions, avec un but précis.

C'est la première chose à faire. Simple et facile.

..

Yep, mais je vois pas quoi changer dans mon code ...
C'est normal qu'il y ait du scrolling si la width de l'écran est inférieure à 1024px ...

D'abord j'ai rien d'un geek, j'essaie plutôt de les comprendre pour mieux les manager.
D'autre part, le scroll horizontal montre que tu ne contrôles pas ta largeur et cela ce n'est pas normal contrairement au scroll vertical qui lui est inévitable si tu as du contenu.
Modifié par jmlapam (25 Sep 2011 - 21:02)

C'est pas 1024px, tu as un padding de 40 de chaque côté.
Sur des netbooks, des tablettes ou des écrans de faible résolution, c'est pénible de devoir scroller de quelques pixel pour accéder à la fin des phrases.
Si tu te positionnes comme un spécialiste front, il vaut mieux le corriger.
C'est d'autant plus dommage que ton article en page d'accueil traite justement de l'adaptabilité des pages aux résolutions d'écran des différents terminaux.

paolo a écrit :


C'est d'autant plus dommage que ton article en page d'accueil traite justement de l'adaptabilité des pages aux résolutions d'écran des différents terminaux.

Oui, c'est d'ailleurs pour cela que je suis allé voir ce que cela donnait sur mon netbook donc mauvais calcul si tu mets cela en avant.

Stephanelam a écrit :
C'est normal qu'il y ait du scrolling si la width de l'écran est inférieure à 1024px

Eh bien comme répéter plus haut et à plusieurs reprises - non c'est pas normale.

Je préfère que tu découvre par toi même. Par expérience je sais que te donner les instructions CSS pour faire sans scroll horizontale, que ça peut très bien dérégler les éléments déjà en place. Ceci est dû au fait que ton fichier CSS est déjà avancer. Et tout dépend de la façon dont il est écrit.

Mais comme je te le disais : la question du scrollbar est toujours attacher à la globalité de la page. Et qu'il fait partie du groupe des premières instructions CSS. Si la question du scrollbar n'est pas régler, nous ne passons pas à l'étape suivante.

..

Le padding. Bingo. Je l'avais oublié celui-là. Je vais régler cela, merci à tous pour vos remarques et aides !

Avec des outils tels que firebug, les dev tools de chrome etc. tu visualises ce genre d'oubli facilement.

Bonjour,

Chez moi deux onglets se chevauchent : une flêche se positionne au-dessus de l'onglet du formulaire de contact... enfin ça dépend : la flêche doit être dans un positionnement "float:right", donc ça dépend de la largeur de la fenêtre du navigateur...

Et à la suite d'autres je dis : bravo pour le footer, il est vraiment bien.
Modifié par Olivier C (27 Sep 2011 - 11:14)

Yep, j'avais pas pensé à utiliser Firebug.

@OlivierC : merci pour ton passage ! pour le bouton, c'est normal, c'est que tu dois avoir un tout petit écran mais autrement je suis obligé de forcer le scrolling, et ça c'est bof.