En fait, ça fait quelques temps que j’y travaille, ce n’est donc pas “tout neuf”…
Le changement le plus important est la séparation du contenu en deux parties distinctes :
- le blog reste à son emplacement habituel mais se voit considérablement allégé (je vous laisse visiter mais plus de détails plus loin),
- le site professionnel qui reprends les pages liées à mon activité professionnelle (et dont vous trouverez les liens dans la barre verte en haut de page).
ATTENTION, les urls des pages de la partie “pro” ont changé : mettez à jour vos bookmarks !
Je voulais par cette démarche à la fois rendre le “signal” moins brouillé (moins d’infos “annexes” par page) et mieux faire la distinction entre mon travail et les choses que l’on peut trouver dans mon blog…
Je voulais aussi mettre en concordance ma charte web avec ma carte de visite (le reste des documents est en cours, pour les curieux) et ainsi pérenniser cette identité dans les esprits des visiteurs (vous, donc).
EDIT (03:34am, lundi 20 mars) : j’ai failli oublier le portail !!!
Je vous rassure, je ne me suis pas réveillée pour ça, je finissais de tout mettre en place (les chemins qui changent entre le local et le online, la bdd, l’url-rewriting, tout ça…)… je sais pas si c’est mieux en fait ? *rolleyes*
Bref, si vous tapez http://www.pouipouidesign.net sans rien d’autre, vous arriverez sur le portail, qui vous permet de choisir entre une partie ou l’autre du site… pas mal non ?
Faites-moi savoir si ça vous plait !
—Ah, oui, si, ça marche pas bien sous IE mais (mine de rien) je ne suis pas une pro du js donc je ne suis pas sûre du pourquoi… ?
Toute aide sera la bienvenue !
—
Edit (22/03/06) : Merci à Christian Buffin pour l’aide avec le JS qui marche maintenant aussi sous IE !
Je vais donc vous faire un petit tour du proprio…
PARTIE BLOG :
Bon, déjà, un seul “thème”, le nouveau.
Oui, je sais, c’est dur.
J’en mettrai très probablement (peux pas m’en empêcher) d’autres au fur et à mesure, mais pour l’instant il va vous falloir faire le deuil des trois anciens…
Toutes mes excuses pour la brutalité de la démarche aux nostalgiques du tout premier thème, mais je suis sûre qu’à l’utilisation vous trouverez le nouveau bien mieux ! Et puis ne dit-on pas “qui aime bien châtie bien ?”…
Mais sinon, il vous plaît ? J’aime bien ce rose-lilas (je n’aurai jamais pensé dire ça un jour, ils doivent porter des moufles en enfer), je le trouve finalement assez frais…
Et il passe bien chez vous ? Comme c’est tout récent vous excuserez les petits bugs par contre tenez-moi au courant (plutôt par mail) pour que je sache et corrige !! Je ferai bien sûr un coup de browsercam dans tous les cas, mais c’est plus fiable avec de vrais gens derrière leur écrant (quoique ?)…
Vous avez probablement remarqué le bouton “plus” à droite de la page : si vous cliquez dessus, la barre latérale s’ouvre et vous révèle ses trésors…
Comme on a pas tous javascript, la barre est ouverte par défaut, elle est fermée au chargement par le js : vous aurez donc un petit “clignotement” le temps que la page finisse de se charger et que la barre se referme…
De la même manière, le contenu de cette barre s’accède en cliquant sur les titres : ils sont ouverts par défaut, fermés par le js au chargement… et donc clignotement…
Cela fait donc un clignotement un peu long sur certaines pages (surtout si elles sont très visitées) et vous m’en excuserez… mais il ne s’agit pas d’un bug (je préfère prévenir) !
Je suis sûre que vous serez d’accord que c’est un “petit mal” pour un “grand bien”…
Dans cette barre, un certain nombre de “machins” (parce qu’avec le recul c’est pas mal ce dont il s’agissait à mon avis) ont disparu devant leur inutilité flagrante :
- la météo (mais à quoi je pensais, on se demande…),
- le blogroll (pas moins mis à jour, tu meurs),
- les liens del.icio.us (sauf si vous êtes suffisamment nombreux à me demander de les remettre, n’ayant aucune idée de leur popularité actuelle),
- le calendrier et les archives (redondants avec les tables des matières par mois et catégories),
- la boite à musique (jamais mise à jour non plus).
Tri par le vide donc : la table des matières par lettre (probablement faite en même temps que la météo…) a elle aussi disparue mais je doute que la différence se fasse vraiment sentir…
Vous retrouverez par contre, bien sûr, en plus des pages liées aux billets (billets, tables des matières, catégories…), les pages les plus importantes :
- les goodies (ressources diverses),
- les galeries photos.
Enfin, je me suis laissée séduire par la mode des “big footers” (“gros bas de pages”) et en ai moi-même fait un…
Il paraît que ça récompense les lecteurs qui ont pris la peine de lire jusqu’au bout et de scroller en leur offrant des liens qui les invite à découvrir d’autres articles ou pages qui pourraient les intéresser…
Vous en pensez quoi ? du mien ? tout court ?
PARTIE PRO :
Dans cette partie, un vrai parti pris graphique : la page est en hauteur fixe et le contenu scroll à l’intérieur si vous grossissez la typo…
Je trouve le résultat convaincant, mais bien entendu vos commentaires seront les bienvenus !!
Vous y retrouverez les pages suivantes (donc sorties du blog) :
- portfolios : web et identité, adieu le portfolio illustration ! Aussi, j’ai fait le ménage dans les travaux de la galerie afin de mieux refléter mes compétences. Enfin, le portfolio webdesign se voit attribué d’un tri : Intégration, Graphisme, Intégration ET Graphisme… J’espère que cela vous simplifiera la navigation !
- curriculum : les travaux y sont dorénavant “fermés” par défaut et il faut cliquer dessus pour avoir le détail : cela permet, je trouve, une plus grande synthèse en un coup d’œil et donc un meilleur accès à l’information. A voir à l’utilisation…
- disponibilités : les dates où je suis (in)disponibles pour les projets professionnels,
- contact/devis : rien de neuf ! sauf une jolie interface…
Là aussi, même question : comment ça passe chez vous ?
Comme pour la partie blog, j’ai eu le temps de tester sur FF1.5 et IE6. Je ne pense pas (ou sauf peut-être pour la partie pro) essayer une compatibilité IE5.5 (alors encore moins IE5) mais je vais par contre tester pour NN8, Opera 8 et Safari (mais avec browsercam alors si vous êtes sous Safari vos remarques seront très appréciées).
Voilà, j’espère que tout cela vous plaît, j’attends avec grande impatience vos commentaires !!
Et tenez-vous bien car cette semaine vous devriez avoir un groooos cadeau… j’en dis pas plus, je vous laisse vous poser des questions !







11 réponses à cet article
# - - Sebastien Billard -
Très joli design, sobre et esthétique avec une pointe de fantaisie sympa
Niveau accessibilité cependant, les textes verts sur fond rose sont peu lisible alors que j’ai une vision parfaite (ce doit être pire pour les personnes souffrant de dyschromatopsie)
# - - Monique -
Bonjour,
La surprise est agréable
Pas facile de faire sobre sans faire simpliste, et là, c’est réussi !
Pour le menu du haut, le vert sur fond lilas n’est effectivement pas facile à lire d’autant plus que le bas des mots est collé à la bande verte. Ils se décollent quand j’augmente la taille du texte et cela va déjà mieux (ce que je suis obligée de faire pour lire sans fatigue).
Par contre, si j’agrandis deux fois la taille de texte, le menu sort de la barre vert… le texte blanc sur fond lilas devient franchement illisible.
Les menus cachés, j’aime bien.
Mais le "PLUS" n’attire pas suffisamment le regard à mon avis… en tout cas je ne l’avais pas vu avant de lire tes explications dans le billet :-/
Amicalement,
Monique
# - - Marie ALHOMME -
Argh, je viens de taper une super réponse et… fausse manip’ ! Bon, je recommence…
Sébastien : merci des commentaires !! Et tu as raison bien sûr, mais cela varie pas mal en fonction des écrans (ici sur mon tft de bureau c’est très subtil et sur mon tft de portable beaucoup moins !)… et je viens de me rappeler que le rendu PNG de IE est très différent… donc j’ai fait un GIF pour le fond pour améliorer cela, est-ce mieux ?
Dans tous les cas, je peux toujours repasser sur fond blanc (quitte à mettre le fond de fenêtre en rose pour garder le relief) ?!
Monique : je suis ravie que ça te plaise, merci beaucoup !
En revanche, le problème du texte qui sort de la barre verte au zoom j’en suis consciente (et tu as raison) mais n’ai pas trouvé comment faire autrement (je voulais éviter les images)… :’( une suggestion ??
mais je ne vois pas trop comment m’y prendre non plus. Je voudrai éviter le clignotement, rapidement pénible, et voudrai quelque chose qui se voit mais n’est pas pénible/gênant en cas de visite/lecture prolongée…. là encore les suggestions sont les bienvenues mais de toute façon j’y réfléchis !
Pour le menu : la typo est collée exprès, c’est un effet graphique afin de réunir les éléments ensemble… c’est en fait un parti-pris donc beaucoup une question de goût car les retours sont très variés sur le sujet… Perso je préfère comme cela (essayé le décollé, pas aimé du tout), et comme c’est mon site ça va rester comme cela, na !
Intéressant de savoir que tu zoomes une fois par défaut : ta remarque sur le texte que tu trouves trop petit à lire concerne les posts (titre + contenu) ou l’ensemble de la page ? Car je pourrai toujours augmenter la taille par défaut de ces éléments ?!
Concernant le « PLUS », tu es la deuxième à me le dire, donc je te crois…
Et sinon, êtes-vous aller visiter le site pro ? Qu’en pensez-vous ? Des critiques ou suggestions ?
Bref, encore merci de vos visites et commentaires, j’espère vous revoir bientôt !
# - - Nhk -
Salut,
Ca passe nickel chez moi (ie et ff). J’aime bien les 2 univers. Bien que ressemblants, on sent le contexte serieux dans la partie pro, et le coté plus cool dans le blog. Le menu affichable/masquable est très sympa également. Bravo.
Juste 1 ou 2 trucs : Les screenshots de ton portfolio montre le navigateur IE. Je trouve ca assez surprenant de ta part. De plus il manque un liens permettant de passer directement du coin pro au blog.
A plus. Niko.
# - - Marie ALHOMME -
Salut Niko, ça va ?
Je te remercie de tes commentaires très positifs !!
Pour ce qui est des screenshots, tu as raison, mea culpa… ils sont assez « anciens » pour certains et j’ai continué de les faire de la même manière mais je devrai sûrement tous les refaire autrement…
Et d’ailleurs ta remarque tombe à point car je voulais demander si vous pensiez qu’il fallait garder la fenetre du navigateur, fusse-t-elle FF ou IE, ou bien au contraire mettre le travail seul/nu (mais je trouve ça moins cohérent pour un site web)… ?
En revanche, pour la deuxième remarque : le lien « actualités » là haut (le seul en violet) permet de revenir au blog… maiqs je devine que ce n’est pas assez clair ??
Peut-être devrais-je ajouter deux petits liens « portail » et « blog » en bas des pages pros, et « portail » et « pro » sur les pages blogs ??
Encore merci de ta visite et de tes remarques !
A bientôt !
# - - cypher -
Marie,
Ca déchire ! Toutes mes félicitations, tu es hors-concours. Un modèle inaccessible
J’aime assez la notion de "big footers", on gagne en lisibilité (accès rapide au contenu) ce qu’on perd en ergonomie…mais j’avais pas vu le "collapsible sidebar" (comment qu’on dit en Français). Trop fort.
Ton formulaire passe moyen sous IE 6 pour ce qui est de la textarea. Je supprimerais totalement les contours (qui ne s’affichent qu’à gauche sous mon xp pro sp2) pour cet élément. Mais c’est vraiment parce que tu le demandes et c’est un détail.
@ très bientôt dans la vraie vie
# - - Marie ALHOMME -
Salut « Cypher » !
Merci d’être passé voir le site, et ravie que tu aimes !!
Attention cependant à « modèle inaccessible », ça pourrait être mal (com)pris !
Il faut que je trouve quelque chose pour cette barre que personne ne voit… je continue d’y réfléchir !
Merci du heads-up (comme qu’on dit en Français…) pour le formulaire sous IE6, avais pas vu dis donc ! C’est corrigé (merci le hack du _…). J’ai aussi réglé le fond qui disparaissait quand on tapait (sous IE seulement, bien sûr) !!
A bientôt !
# - - Mdkart -
Encore un template réussi
!! Lisible, agréable et joli!!
) pour mémoriser l’état visible/nonvisible de la sidebar.(j’ai quelque chose en stock si ça t’intéresse
)
Pour ton problème de sidebar déroulante, je pense qu’un petit système qui ferait déplacer le logo "plus" avec le scrolling de la page la rendrait beaucoup plus visible et accessible. Un système tel qu’on peut le voir sur certaines pubs internet vois-tu. Quant à savoir comment on fait et si c’est propre, je n’en ai aucune idée. Je me demande également si ça n’est pas génant pour la lecture du site et l’attention du lecteur.
Il aurait été également agréable d’utiliser un petit gateau *rolleyes* (cookie
Sinon que du bon!! Vraiment excellent.
# - - eklectik -
Bravo pour cette nouvelle refonte !
Un sérieux qui pouvait faussement manquer à tes versions précédentes.
# - - oxman -
Jolie, tant dans l’aspect sobre et stylisé que dans le choix des couleurs.
Ca se voit que tu as passé du temps pour chaque détail. Une grande finition.
Il est très dur d’innover, de faire un site qui se démarque, que l’on n’oublie pas et agréable à consulter.
Mais tu y es arrivée.
Donne moi des cours stp, moi je n’y arrive pas
Bravo en tout cas
# - - Marie ALHOMME -
Bonjour Mdkart, laurence et oxman !
Merci infiniment de vos super commentaires, ça va vraiment très très plaisir !!
Et surtout désolée de ne pas avoir répondu plus vite !!!
J’espère mettre à disposition un nouveau thème dans le courant de l’été…
Revenez souvent, donc !