AFD Folio : zoom sur la création de mon portfolio

Le temps est venu pour moi de mettre en ligne mon portfolio personnel. Ce nouveau site hébergé sur ce même domaine me servira de « vitrine » pour exposer mes travaux mais aussi mes compétences. Cet article va me permettre d’expliquer quelle a été ma démarche, ma méthode de travail et les points délicats de ce projet…

Ce projet couvre de nombreux domaines : design, intégration xhtml, utilisation des css, typographie, optimisation du contenu, conception d’un thème wordpress etc…

Dans cet article je vais aborder un maximum de choses afin de vous expliquer ma démarche et les points importants. Néanmoins, si vous avez des questions supplémentaires, n’hésitez pas à me contacter par email.

Pour accéder au site c’est simple, il faut rajouter « /portfolio » à la fin de l’url de ce blog : http://all-for-design.com/portfolio.

Conception et réalisation du site

Une histoire de communication

Avant de construire « un site web », on construit une « communication ». Le site n’est finalement qu’un outil au service du message que l’on souhaite faire passer… Pour ma part, ce portfolio devait avant tout refléter ma personnalité et ma façon de travailler. J’ai donc simplement laissé libre court à ma créativité et mon inspiration. Après tout, puisque ce site devait me représenter, les meilleurs réponses se trouvaient certainement en moi n’est-ce pas ?

J’ai toutefois voulu mettre l’accent sur certains points :

  • Apporter un soin tout particulier au travail typographique
  • Créer un univers chaleureux, raffiné et sobre
  • Faciliter la mise à jour du contenu via une interface d’admin WordPress personnalisée
  • Optimisation : code sémantique / accessibilité / validation w3c / tps de chargement des pages
  • Compatibilité : Créer un site compatible sur une majorité de supports (IE6 inclu) : navigateurs / OS

Caractéristiques techniques générales

  • Structure
    • Largeur fixe : 960px
    • Construction via un système de grille de 1, 2 et 4 colonnes
    • Ligne de base constante de 22px
  • Typographie
    • Labeur : 18px/22px Garamond – Baskerville – Times
    • Titrage : Tungsten / Gotham HTF Medium
  • Code, Compatibilité
    • xhtml 1.0 strict (W3C valid)
    • css2.1 / css3
    • WordPress 2.9
    • Compatibilité multi-navigateurs (IE6 inclu) MAC et PC

Un petit focus sur le travail typographique…

La typographie est un sujet qui me passionne, j’y ai donc apporté une attention particulière.

J’ai choisi d’afficher le texte courant avec une Garamond. Mon choix a été motivé par plusieurs raisons :

  • Rappeler le côté « Français » puisque le créateur de cette police, Claude Garamond, était Français.
  • Utiliser le côté soigné et raffiné de cette police pour servir ma communication…
  • Me faire plaisir puisque j’aime énormément le dessin des Garamond

Il y a toutefois quelques points négatifs :

Cette police est certes très soignée mais il n’en reste pas moins qu’elle n’est pas optimisée pour un usage sur écran. Pour compenser sa faible hauteur d’x, j’ai augmenté le corps de texte à 18px et l’interlignage à 22px pour obtenir une lisibilité que j’estime correcte.

Cette Police n’est pas « Websafe »… (Windows:86% / Mac : 27% / Linux: 8%). Cela m’a conduit à définir des polices de remplacement (=css font-stack).

Pour concevoir mes « font-stack », je me suis appuyé sur 3 sondages mettant en évidence la probabilité de trouver une fonte sur les 3 OS

Un script php me permet de récupérer le système d’exploitation des utilisateurs et me renvoie une variable (« windows » ou « mac » ou « linux ») que je place dans l’id de ma balise body. Je peux donc charger des piles qui diffèrent légèrement en fonction de l’OS utilisé afin de proposer des choix plus spécifiques en dernier recours.

Font-stack générique

body {font-family:Garamond, Baskerville, "Times New Roman", serif;}

Windows font-stack: ajout de Cambria et constantia en fin de pile

body#windows{font-family: Garamond, Baskerville,  "Times New Roman", Cambria, Constatia, serif;}

Mac font-stack : ajout de Apple LiSung

body#mac{font-family: Garamond, Baskerville,  "Apple LiSung", "Times New Roman", serif;}

Linux/Unix font-stack : ajout de Liberation Serif

body#linux{font-family: Garamond,  Baskerville, "Times New Roman", "Liberation Serif", serif;}

J’ai choisi mes polices de remplacement en fonction de leur similarité de rendu avec Garamond puis en fonction de leur présence sur les systèmes d’exploitations identifiés.

Titrages

A part ça, j’ai choisi deux autres polices pour les titrages : Tungsten et Gotham. Par souci de compatibilité et d’homogénéité du rendu, j’ai transformé tous ces titres en images. Le système reste néanmoins complètement lisible sans les feuilles de styles activées.

Lettrines

Enfin, j’ai mis en place un système de lettrines constitué d’un caractère, affiché dans la police de haut de pile (normalement Garamond) en 70px et d’une image de fond constituée de ce même caractère, en minuscule cette fois, affiché avec la police Parchment.

Je gère la mise en page grâce à 2 classes css : « lettrine » et « l-a » pour la lettre A, « l-b » pour le B etc… Cette seconde classe permet simplement de charger la bonne lettre en image de fond.

<span class="lettrine l-h">H</span>ello visitor !
.lettrine{float:left;font-size:71px;line-height:71px;text-align:center;margin-bottom:-5px;width:60px;height:71px;}
.l-a{background:url("img/lettrines/a.gif") no-repeat 0 5px transparent;}

J’ai prévu 26 images de fond, une image pour chaque lettre de l’alphabet et 26 classes css allant de « l-a » à « l-z » permettant de superposer le caractère « texte » sur son image de fond associée. Je n’ai donc plus qu’à indiquer la classe appropriée et la lettrine va s’afficher correctement : elle est pas belle la vie hum ? uh uh :)

Présentation du travail sur WordPress

Structure du thème

Ce portfolio est constitué de 4 pages principales :

  • Index : la page d’accueil.
  • Category : la page de présentation de catégories. C’est un « template » spécifique qui permet d’afficher ma liste de catégories.
  • Single : page permettant d’afficher toutes les informations d’un projet
  • Archive : page d’archive qui va s’afficher lorsque vous cliquez sur les tags ou les catégories assignées à chaque projet

Utilisation de JQuery

Sur la page de catégories, l’affichage sélectif des projets en fonction de la catégorie cliquée a été réalisé à partir de ce tutoriel de Nettut+ et de ce second tuto très bien réalisé : A jQuery Portfolio Plugin that’s Interactive and Filterable.

J’ai aussi utilisé Javascript pour permettre l’ouverture des liens dans une nouvelle fenêtre en conservant un code valide :

$(function(){
  $("a[rel*='external']").click(function(){
     this.target = "_blank";
  });
});

Comme vous l’avez surement remarqué j’ai opté pour un système « Lightbox » pour permettre l’accès aux previews des projets avant d’arriver sur leur page respective. Pour cela j’ai utilisé le plugin Jquery Lightbox.

J’ai également ajouté un système de « bulles » qui s’affichent lorsque vous survolez certains liens. Pour cela j’ai utilisé Qtip, qui permet également de charger les screenshots de pages web de façon dynamique (via websnapr).

N’étant pas vraiment au top sur JQuery je suis parti à la pêche au code sur le web. Je me suis lamentablement inspiré du site WooConcept, le site de Thibaut Ninove (sa page Twitter), pour le code d’apparition et de disparition du bouton de retour en haut de page. Il apparait à partir de 400px du haut de la page et disparait au dessus de cette limite. Merci Thibaut :)

$(function () {
  $('#top-btn').hide();
  $(window).scroll(function () {
    if ($(this).scrollTop() >= 400) {
      $('#top-btn').fadeIn();
    } else {
      $('#top-btn').fadeOut();
    }
  });
});

Interface de Gestion de contenu

Je voulais avoir une interface d’admin WordPress qui soit optimisée pour mon site. Il a donc fallu mettre un petit peu les mains dans le moteur mais bon… on a rien sans rien.

Comme c’est un portfolio, il y a de nombreuses informations à afficher pour chaque projet : clients / logiciels utilisés / catégorie / tags / previews multiples et informations diverses. Heureusement, WordPress dispose de nombreux outils pour cela.

Voici un petit screenshot d’une partie de mon back-office :

  • Catégories: il n’y a qu’une catégorie par projet (+ une catégorie générique qui n’est jamais affichée mais qui sert pour l’affichage de « tous les projets »)
  • Tags : ils peuvent être plusieurs par projet : WordPress, Design, xhtml, Typography etc…
  • Taxonomies : J’ai ajouté 2 types de taxonomies dans mon back-office : « Client » et « Logiciels ». Cela me permet de renseigner ces informations comme je le fais pour les tags. Je n’avais jamais utilisé cette fonctionnalité et je dois dire que cela m’a beaucoup servi. Pour en savoir plus à propos des taxonomies, vous pouvez aller jeter un œil par ici : WP Taxonomy.
  • Champs personnalisés : ils sont très nombreux et me servent à afficher les previews (petites et larges), les url lorsque les projets sont en ligne, les awards.

J’ai ajouté des contrôles sur toutes les informations liées aux projets. Chaque information (et son label, son titre etc.) ne s’affiche que si elle a été renseignée : texte descriptif, tags, champs personnalisés etc.

Cela me permet d’avoir des pages projet qui s’adaptent en fonction du contenu que ajouté dans l’interface de gestion.

Les points les plus délicats du projet

L’avantage avec WordPress c’est qu’en cherchant bien on trouve toujours une solution sur les forums et sur le web. Néanmoins, tout n’a pas été simple… et j’ai parfois passé pas mal de temps sur certains sujets tel que :

  • Le choix de la typographie
  • Le calage de tout le contenu en fonction de la ligne de base de 22px.
  • La personnalisation de l’interface de gestion du contenu et la récupération d’infos : champs personnalisés / taxonomies / catégories / tags
  • La configuration du fichier .htaccess
  • L’optimisation du poids des pages
  • La compatibilité du site sur les nombreux navigateurs

Voici un petit aperçu des résultats de mon travail d’optimisation. J’ai utilisé la console de test du navigateur Chrome et l’extention Firefox Yslow très utile…

Mes résultats ne sont pas parfaits loin de là mais il y a pire…

Les outils utilisés pour créer ce site

  • Papier et crayon pour les premières phases : reflexion, wireframes etc.
  • Photoshop pour toute la partie graphique.
  • Coda pour tout le développement
  • J’ai testé mon site sur plusieurs navigateurs : Firefox 3.6.3 / Internet Explorer 6 7 8 / Safari 4.0.5 / Opera (Win) / Chrome 5.0.35. J’ai effectué deux séries de tests, une sur MAC (MAC Snow Leopard), l’autre sur PC (Win Vista et Win XP).
  • Les outils de test IE6 que j’ai utilisé : IETester sur Windows et VirtualBox + Win XP et IE6 sur mon MAC. Dans les deux cas, l’extention IEDeveloper toolbar m’a été très utile pour la phase de debug.

To be continued…

Ce site est actuellement en version « Beta » puisque je compte me servir du retour des utilisateurs pour l’améliorer. Cette phase de test en « live » est primordiale car elle va me permettre d’ajuster le design et l’ergonomie.

J’ai dores et déjà quelques points à revoir/corriger/améliorer :

  • Conversion des unités fixes en unités relatives
  • Ajouter un anti-spam genre captcha à mon formulaire de contact
  • Améliorer la visibilité du bouton « back to top » (l’aviez vous seulement vu ? à droite de la page, il apparait en dessous de 400px)
  • Trouver un anglophone qui pourrait améliorer ma traduction anglaise… Si vous êtes intéressé faites moi parvenir vos tarifs pour revoir tout le contenu de ce site.
  • etc…

Découvrir mon portfolio : http://all-for-design.com/portfolio.

Quelques liens pour finir :

26 réflexions au sujet de « AFD Folio : zoom sur la création de mon portfolio »

  1. Ping : Tweets that mention AFD Folio : zoom sur la création de mon portfolio | All For Design -- Topsy.com

  2. Merci pour ce making-off. J’allais me permettre de t’envoyer un mail pour te poser quelques questions à ce sujet. Ton portfolio marche de lui-même (je trouve les infos direct).

  3. Au risque de me répéter, ton portfolio est vraiment trés chouette, clean en restant graphiquement sobre et travaillé.

    Je trouve le billet trés intéressant, le fait que tu détails les étapes m’en apprend encore plus, notamment sur la partie typographie et backoffice. Merci pour cette description, et pour tous les liens qui ton aidé pour ce projet.

    Je les met de coté également, je sais que pour l’avenir cela me sera forcément utile ;)

    Encore bravo !
    .-= Dernier blog de lazy : Ziul Reel 2010 =-.

  4. Poulpe / Lazy : Merci à vous les gars c’est sympa ;)
    Jean-Michel : Si tu as trouvé les infos que tu cherchais c’est cool, ça veut dire que je ne me suis pas trop planté sur l’aspect fonctionnel et ergonomique du site uh uh :)
    Cela dit, n’hésites pas si tu as des questions supplémentaires, je me ferais un plaisir de te répondre.

    Merci pour vos commentaires :)

  5. J’adore le soin que tu mets dans tes explications. C’est vraiment généreux de ta part, on en apprend beaucoup. Merci. Et très joli portfolio, simple, fonctionnel, ergonomique, pas trop ni pas assez. Juste ce qu’il faut :)

  6. Salut ! Juste un petit message d’encouragement. J’aime beaucoup ton site et toutes les informations et les explications que tu donnes. Ce site est devenu pour moi un passage obligé. Bon courage et bonne continuation. Merci !

  7. Quand communication rime avec simplicité, superbe travail. Et merci pour les détails de la fabrication.

  8. @Adone : thanks for your comment :)
    @boddhi : Merci pour ces quelques mots. Je prends cette « Simplicité » apparente comme un gage de qualité. Plus ça parait « simple » et « évident » et meilleur c’est. Il me semble que la quantité de travail doit être « transparente » pour l’utilisateur lambda (je ne parle pas des webdesigners qui vont aller décortiquer mon code hein :) ).

  9. Ton portfolio est vraiment très réussi et tes explications sont très claires. Merci à toi notamment pour les taxonomies.
    Pour ce qui est de ton lien retour, effectivement je ne l’avais pas vu au premier coup d’oeil :)

  10. Salut à toi Aurélien. Je découvre pour la première fois ton site et, j’aimerais dire que c’est au plus grand bonheur de mes petites pupilles.
    Du très bon boulot, tant bien qu’en webdesign qu’en autres créations. « La MAJ d’un portfolio bien mériter ».
    Bonne continuation ;)

  11. Bonjour, une petite question : ta page d’accueil est codée en dure, tu n’y touches pas dans wordpress? Bonne journée

  12. @boddhi hello,

    il y a certaines parties sont codées en dur mais tout ce qui concerne les projets est récupéré dynamiquement.

    La partie about est codée en dur car la mise en page est assez précise et pourrait difficilement s’appliquer de façon automatique (double colonne de texte, indentation spécifique des dernières lignes, etc.)

    Le top aurait été de me créer un back-office plus poussé me permettant de mettre à jour les infos de la home (je pense à la partie « inspiration » par exemple et à la colonne de droite de la section « contact ») mais j’ai abdiqué par manque de temps.

  13. Ping : Polices de caractères sur le web : un an après, où en sommes-nous ? — Boris Forconi — Webdesigner freelance à Nantes

  14. Salut, merci pour ces explications vraiment intéressantes, mais il me semble que tu n’as pas parlé du scroll progressif quand on clique sur un des liens présents dans la barre de navigation :)

    Merci encore !

  15. Très impressionné par la qualité de tes tutoriaux et surtout par ce petit soucis de perfection dans ce que tu accomplis!

    J’en tire mon chapeau! :)

  16. Beautiful. What sort of paper texture have you used for the background? Is it a photoshop texture or actual paper?

  17. Vraiment très instructif et très sympa de ta part ! Ton portfolio est très clean, vraiment plaisant à consulter.

    Merci !

  18. Génial, plein de ressources, le PF est simplement magnifique.
    Je tiens à signaler un petit défaut : le z-index de ta banderole « articles » (dans « Inspirations ») est plus élevé que celui de ta lightbox, et vient gêner la prévisualisation de tes projets ;).
    Bonne continuation, tu m’as ébloui.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>