[Pro] AFD-Folio : Portfolio webdesigner : vos critiques ?

Bonjour à tous,

Je suis webdesigner et je viens de mettre en ligne mon portfolio il y a quelques jours.
Je souhaiterais avoir l'avis de la communauté afin d'améliorer ce site.

Conception et réalisation de A à Z : Conception / Réalisation Graphique / Maquettes fonctionnelles XHTML/CSS / Création du Thème Wordpress.


Infos techniques

Code et plateforme

> J'ai construit ce site avec Photoshop pour la partie graphique, Coda pour la partie html et le tout intégré dans Wordpress 2.9.

> Code XHTML 1.0 Strict (W3C Valid) / CSS2.1 & CSS 3


Travail typographique

> Labeur : j'ai orienté mes piles de polices css (font-stack) sur les pas d'une Garamond (Monotype). Les autres polices ont été choisies en fonction de leur similarité de rendu avec ma Garamond ET de leur présence sur les différents OS : Windows / MAC / Linux. (Les polices sont chargées en fonction des OS)
> Titrages: Tungsten et Gotham (pour les sous-titres)
> Lisibilité : 18px/22px (il fallait au moins ça pour compenser la très faible hauteur d'x d'une Garamond)


Structure

> Largeur fixe de 960px
> Construction sur une double grille : verticale (4 colonnes) / Horizontale (contenu aligné sur une ligne de base de 22px)


Compatibilité

> Compatibilité inter-navigateurs (IE6 inclu) MAC/PC
> Contenu optimisé pour un chargement des pages inférieur à 2sec (via une connexion ADSL "classique" actuelle)


Pourquoi une beta ?

- Comme je le disais j'ai besoin du retour des utilisateurs pour améliorer certains points...
> Conversion des unités fixes (px)en unités relatives (Quadratin : em)
> Je dois continuer mon travail d'optimisation du poids des pages et du nb de requêtes puisque ma homepage fait quand même plus de 600ko c'est bcp.

Merci de votre retour !

ps : Pour ceux que ça intéresse, si vous voulez plus d'infos, j'ai fait un article sur mon blog pour expliquer en détails le processus de création de ce site.
Modifié par Aure (17 May 2010 - 18:43)

Je trouve que c'est du beau travail, et j'adoore gotham (comme barrack).

Le validateur couine: 3 erreurs.

C'est effectivement lent au chargement:
- as tu un bon système de cache ? (1 seconde rien que pour servir le html)
- active gzip
- réduis les requêtes: une dizaine de js et une trentaine d'images c'est énorme.

Pas de version française ?

Salut,

Pourrais-tu éditer ton message initial pour modifier ton titre de manière à le rendre conforme aux attentes du salon. Je te remercie d'avance.

Merci de ta réponse.
Le validateur couine rrrrr...
Merci de ton retour je vais regarder ça de plus près.
J'ai pour habitude d'utiliser l'extension "html validator" pour firefox, qui me valide d'ailleurs toutes les pages (via les 2 algo "HTML Tidy + Analyseur SGML) de ce site.
Je vais aller faire un tour côté du validateur du W3C.

Concernant le nombres de requêtes oui c'est mauvais c'est évident...
C'était un peu le côté négatif d'opter pour un site "illustré" avec images et textures + des polices en images pour tous mes titres...
Je voulais utiliser des sprites pour charger les images en css mais j'ai peur du poids qu'aura cette "énorme" image constituée de tous les titres par ex.

Qu'en pensez-vous ?

Je n'ai pas réussi à activer GZIP...
J'ai trafiqué mon fichier .htaccess durant de nombreuses heures pour essayer d'optimiser les pages en suivant les conseils de l'extension "YSlow" (Firefox) mais je n'y suis pas arrivé...
J'ai aussi essayé d'ajouter le plugin "WP SuperCache" qui propose une option de compression GZIP mais j'ai l'impression que ça ne fonctionnait pas... en tous cas je n'avait aucun changement côté YSlow... toujours la même note "D"... je suis arrivé à "C" mais pas mieux.

Auriez-vous des conseils à me donner sur ce point ?

Concernant la version Française, je suis entrain de regarder les solutions proposées par les plugin WP

Merci pour ton retour Paolo

mikachu oups désolé, le titre est corrigé

Paolo, je viens de tester mon site au validateur du W3C et il me donne bien une validation XHTML 1.0 Strict.
Tu as validé avec quel outil ?
Les CSS ne sont pas valides puisque j'ai utilisé des propriétés CSS3 qui ne passent pas la validation.
Modifié par Aure (17 May 2010 - 18:55)

Bonjour,

Pour une fois, je vais faire court : C'est beau *_*

(bon par contre y a un gros problème d'accessibilité dès qu'on désactive les images )

Laurie-Anne merci pour ta réponse. J'ai attaché bcp d'importance pour avoir un site utilisable sans css via un code sémantique qui permet d' avoir un contenu lisible. En revanche je n'ai pas pensé au mode "avec css" et "sans images". Cela dit, venir conster un portfolio sans activer les images c'est un usage assez particulier

Merci de ton retour en tous cas

Désolé, je crois que j'ai passé le validateur sur ton site principal.
Le portfolio est effectivement valide.

Aure a écrit :
Laurie-Anne merci pour ta réponse. J'ai attaché bcp d'importance pour avoir un site utilisable sans css via un code sémantique qui permet d' avoir un contenu lisible. En revanche je n'ai pas pensé au mode "avec css" et "sans images". Cela dit, venir conster un portfolio sans activer les images c'est un usage assez particulier

Merci de ton retour en tous cas

Bonsoir,

Un site ça se "teste" effectivement dans les conditions les plus extrêmes, même si en réalité dans ce cas de figure il se pourrait seulement qu'un moment, une seule ou deux de tes images ne soi(en)t pas téléchargeable depuis le serveur pour une raison ou pour une autre.

Parmi les tests un peu plus fous on peut tester son site sous des luminosités/contrastes d'écran très faibles ou très prononcés (à l'aide des boutons placés sur votre moniteur), dans des conditions d'ensoleillement fort (qui induit de forts reflets sur l'écran, si quelqu'un consulte le site avec son portable à la terrasse d'un café), etc.

Sinon à part ça, c'est du beau travail

Bonjour Auré,
il nous est rarement (pour ne pas dire jamais) soumis de site de cette qualité, c'est appréciable. Les Webdesigner pro sont ailleurs...
Dans l'ensemble c'est du très bon boulot mais quelques remarques :

a écrit :
> J'ai construit ce site avec Photoshop pour la partie graphique.

On en a même la preuve : les motifs floraux gaufrés en haut de page
A ce niveau là ça mérite quelque chose d'un peu plus personnel

a écrit :

> Labeur : j'ai orienté mes piles de polices css (font-stack) sur les pas d'une Garamond (Monotype).

La version Monotype est malheureusement la moins réussie et la plus éloignées de l'originale mais est-ce la version installée dans tous les OS ? La version d'Abobe par exemple est bien meilleure. Je pense que la taille que tu as choisie (18px) est encore trop faible au vue du raffinement d'une Garalde telle que la Garamond. Ça passe pour du papier
mais pour un affichage écran je dirais que c'est presque un sacrilège pour un typo de cette trempe (graisse trop faible, raffinements divers)
Ceci dit le fait que tu n'aies pas utilisé la Georgia apporte une certaine distinction à ton site et la lisibilité reste correcte (j'ai lu ta justif. sur ton blog). Après, tout dépend de tes priorités et ton parti pris en amont, d'un certain point de vue ce n'est pas forcément un mauvais choix.

J'aime bien tes h1, très réussis même si j'aime un peu moins des dégradés aux extrémités.

Sympathique ta lettrine malgré quelques problème d'alignements. Pourquoi n'as tu pas utilisé :first-letter? (compatibilité IE6?) Je sais plus si IE7 l'interprète comme il faut.
D'ailleurs je serais toi je ne m'embêterais pas avec la compatibilité IE6 vu la cible

Tes colonnes de texte dans "My mast project" sont un peu étroites (je sais qu'on rencontre souvent ce type de problème) et l'absence de césure n'arrange rien.
Personnellement quand c'est le cas je baise le corps d'un pixel mais ce n'est pas envisageable avec la Garamond et puis par certain que ça en vaille vraiment la peine.
A mon avis on devrait lâcher prise avec certaines conventions héritées du print...

a écrit :
Cela dit, venir conster un portfolio sans activer les images c'est un usage assez particulier smile

+1 A mon avis tu ne devrais pas perdre du temps sur ça.
Modifié par Hermann (18 May 2010 - 00:17)

darkstar2023 oui je suis d'accord avec toi. C'est vrai que quelque part, si on veut, on peut toujours pousser les phases de test sur un site web.
Après je pense que tout est question de parti pris. Tout dépend ce que l'on veut faire passer comme message et jusqu'où il est possible de tester le site sans que cela n'aille à l'encontre de là problématique de communication.

En tous cas, ça me fait bien plaisir de discuter avec des gens aussi pro, oserais-je dire "pointilleux" car c'est toujours source d'apprentissage pour moi.

Merci pour vos remarques

Salut,

Bon je peux prendre un peu de temps pour venir parler de ton site. J'étais tombé dessus l'autre jour. Je trouve que c'est de bonne facture, globalement très lisible et même agréable à parcourir.

J'ai malgré tout quelques remarques :

Je trouve que la zone d'entête est très très haute, et je trouve dommage que le contenu soit finalement si bas dans la page. Pour moi la zone horizontale entre le bandeau crénelé du haut et le menu est la moins intéressante visuellement, et personnellement j'en réduirais la hauteur (et du coup l'aspect).

Je trouve d'ailleurs que si la matière de papier est sympa et discrète, le motif gaufré est effectivement pas spécialement dans le ton. C'est un peu dommage.

Les styles présents dans les commentaires conditionnels mériteraient d'être déplacés dans un fichier CSS externe, car là même les gens qui ont définitivement tourné le dos à IE6 se trouve obliger de télécharger quelques lignes de code supplémentaires, alors qu'elles ne leur serviront pas.

Une balise meta content serait peut être pas mal pour avoir une description choisie de ton site sur un moteur de recherche, et pas un regroupement de mots clés pris aux hasard des recherches.

Je trouve dommage que l'intitulé de la zone "lets talk together" ne reprennent pas l'intitulé du lien du menu comme les autres rubriques (about > a little ABOUT me, projects > my last PROJECTS, etc.)

Je trouve que la zone "inspiration" est un peu confuse, car tu présente des liens de façon disparate ce qui perturbe un peu. J'ai pas réalisé tout de suite que les deux images à gauche n'étaient pas décoratives mais faisaient partie du contenu de la rubrique. En plus le bandeau en biais "articles" (beurk je déteste ce procédé visuel sur les sites, ca me rappelle le même truc qu'on met sur la photo d'un mort à un enterrement), attire l'œil à l'opposé.

Je trouve les barres vertes et oranges de tes disponibilités un peu trop criardes par rapport au reste du site, elles se fondraient mieux en demi teinte. Pareil pour les icônes des réseaux sociaux.

J'adore le survol des puces en gaufrage dans les pages de projets, ça sert à rien mais c'est classe ! Par contre je trouve les puces un poil trop écartées, du coup ca donne moins envie de les lire.

Bref enfin bon c'est pas forcément des grosses choses, à toi de voir si tu y prête attention ou pas, c'est surtout pour te mettre le nez dessus.

Je ne suis pas un "pro", en revanche au fil de mes exercices personnels de design web (et design tout court), j'ai vite compris que l'approximation n'a pas du tout sa place.

En parlant de tests, cela dépend bien évidemment du site. Mes histoires de luminosité/teinte/couleur/saturation au soleil sont bien évidemment très facultatifs, sous peine de passer quelques jours supplémentaires de travail pour une simple satisfaction très personnelle.
En revanche, je ne partage pas l'avis d'Hermann sur l'histoire des images, ce n'est pas parce que je suis subjugué par la beauté d'un site qu'il m'est possible d'oublier les autres questions, à moins de mettre délibérément de côté une tranche du public ou de ne pas prévoir les éventualités techniques non prévues. Les solutions de facilité sauvent parfois beaucoup de temps et permettent des prouesses graphiques, mais l'idéal serait de faire des sites web beaux et sans inconvénients fonctionnels.

Je ne connais pas beaucoup de galeries de sites à la fois esthétiques et sans entorses aux règles techniques (je connais http://www.z-index.info/ mais après je n'ai pas pris le temps d'inspecter et de tester en profondeur les sites exposés)
Modifié par darkstar2023 (18 May 2010 - 01:17)

Merci à tous pour vos réponses, je vais répondre dans l'ordre.

@Hermann :
> J'ai utilisé les motifs floraux en haut de page tout à fait sciemment. Il s'agit de feuille Aldine, un ornement utilisé en typographie (imprimerie bien entendu) en guise de séparateur de contenu. Il en existe de nombreuses sortes (je me suis pas mal renseigné à ce sujet, si ça intéresse qlq1, j'ai des liens et doc. sympas). J'ai donc inclus ces feuilles aldines dans mon header pour éviter que mon contenu ne "flotte" trop dans l'espace et pour ajouter un peu de "contenu" à mon header, sans trop m'écarter d'un de mes axes de communication : webdesign mais aussi typo. J'ai d'ailleurs repris certains de ces fleurons à leur juste utilisation en guise de séparateurs de paragraphes ou de sections (pas tout le temps pour ne pas trop "surcharger" (ok ça manque peut-être un peu de rigueur sur ce point, tout ou rien il aurait peut-être fallu que je choisisse...))

a écrit :
La version Monotype est malheureusement la moins réussie ...

Je ne te rejoins pas sur ce point, pour moi c'est même un peu le contraire puisque je la trouve très élégante, tout en finesse. Si tu la compare à une ITC Garamond je pense qu'il n'y a pas photo.
C'est effectivement, d'après mes petites recherches, la version installée de base sur Windows. Mais ça correspondait (par chance) à ma version favorite même si je m'éloigne un peu du côté "Français"... Je ne pense pas que beaucoup d'utilisateurs possède des Simoncini Garamond ou des Stempel Garamond... Concernant la Adobe Garamond, c'est très bon oui mais un peu large à mon gout... Je l'ai retiré de ma pile pour cette raison.
Donc... J'ai opté pour Monotype ( classiquement appelée via font-family:Garamond).

En revanche, je te rejoins à 100% sur la taille puisque c'est vrai qu'avec un corps de 18px ce n'est pas vraiment le top... Idem pour la non-optimisation, tu as tout as fait raison.

> :first-letter : +1 . Je vais tester le rendu sur tous les navigateurs de mon petit panel.

a écrit :
...je serais toi je ne m'embêterais pas avec la compatibilité IE6 vu la cible

Je ne suis pas d'accord puisque ce portfolio me permet de cibler d'éventuels clients. La compatibilité du site sur IE6 est une des compétences que je propose. Ce serait désastreux en terme d'image de proposer un service et de ne même pas l'appliquer sur son propre site sensé être sa vitrine. Donc si si si Je m'entête à passer du temps sur la compatibilité IE6.

@Mikachu :

a écrit :
...je trouve dommage que le contenu soit finalement si bas dans la page...

+1 c'est effectivement un pb... plusieurs personnes m'ont fait cette remarque. Comme tu le disais, ça demande, je pense, une refonte presque intégrale du header. arf

a écrit :

Les styles présents dans les commentaires conditionnels mériteraient d'être déplacés dans un fichier CSS externe, car là même les gens qui ont définitivement tourné le dos à IE6 se trouve obliger de télécharger quelques lignes de code supplémentaires, alors qu'elles ne leur serviront pas.

Je ne comprends pas ? Ceux qui ne possèdent pas IE6 ne chargent pourtant pas les css IE6 ? Peux-tu me donner un exemple de la solution que tu mettrais en place ?

> Une balise meta content : +1 Merci

> Concernant l'intitulé de la partie "Lets talk together" tu n'es pas le seul à m'avoir fait cette remarque. C'est un point que j'ai noté. Je pense clairement y revenir.

> Partie inspiration : ok c'est noté, je pensais que c'était clair, visiblement pas assez donc je vais attendre d'avoir plus de retours et éventuellement revoir ça.

> Les puces trop écartées selon toi ? Peut-être effectivement... Je vais regarder tout ça.

--

Merci à tous pour vos remarques super constructives et appuyées. C'est exactement le retour que je cherchais et dont j'avais besoin.
Merci beaucoup de m'avoir consacré tout ce temps, c'est vraiment sympa de votre part

Re-bonjour,

Hier je suis passée en coup de vent, donc je vais expliciter un peu quand même. Au sujet des images ce qui me pose problème c'est que tu place des images porteuse de contenu (qui sont donc du contenu) dans un fichier CSS (les qualifiant ainsi de présentation). Ces images (principalement celle représentant un titre) devraient se trouver dans le code HTML avec un attribut alt correctement rempli. Au delà de la contrainte d'accessibilité (et là ça vise les pauvres belge abonné chez VOO qui déconne à fond en ce moment et ne charge qu'une image sur 3...) c'est surtout une question de logique du code.


Graphiquement, je l'avais déjà dit, et je vais me répéter, ton site est vraiment très beau. Ton anglais est un peu trop scolaire, pas vraiment naturel, mais c'est parfaitement compréhensible et sans fautes de grammaire/orthographe.

Pour ce qui est du code, bien que tu utilises wordpress, il y a des p'tites choses à revoir :
* Il manque quelques metas dans ton code, notamment Language et Description (qui sert à remplacer le texte pas défaut des pages de résultats de google ; la descriptions actuelle de ta page d'accueil est : "Hello visitor ! Thank you for taking the time to come to my site. If you are reading these lines, you probably want to know more about myself.", ce n'est pas vraiment parlant...).

* Il y a effectivement trop de fichiers JS, les regrouper ne ferait pas de mal.

* Pour les images, les sprites seraient effectivement une bonne solution, et tu n'as pas trop à t'en faire pour le poids (le total à charger reste équivalant, mais le nombre d'appel serveur diminuant, tu devrais y gagner).

* Google PageSpeed te recommande également de préciser les dimensions des images (pour info).

* Ton code est bien trop chargé en div (il y en a 4 qui s'ouvrent en chaine juste après <body>), il y a surement moyen d'optimiser.

* Ta hiérarchie des titres est un peu bancale. Tu utilises H2 comme balise pour des tagline et non pour des titres, il faut utiliser <p> dans ce cas (ou un span dans le h1).

* Il serait intéressant d'utiliser <q> ou <blockquote> pour les citations.

* Tu utilises des title sur les liens... vides. Remplis, ils ne sont généralement pas du tout nécessaire et parfois gênants, mais vides ils sont totalement inutiles et perturbants (oui, je sais que wordpress les mets par défaut, mais en fouillant dans le code il doit y avoir moyen de rajouter une condition s'ils sont vides).

* Par contre, pour les alt c'est le contraire. Bien sûr quand l'image est purement décorative, il doit rester vide, mais quand l'image est porteuse de contenu ou, dans le cas qui non concerne, support de lien, il ne peut rester vide (plus d'image (merci VOO), plus de lien).

* Vu que la typo c'est ton domaine (même si je ne suis pas sûre que ça en fasse partie), attention, en anglais les règles de placement des espaces ne sont pas les même qu'en français. Avant "?", "!", ":" et ";" il ne doit pas y avoir d'espace !


Bonne continuation

Bonjour,

Aure a écrit :

J'ai utilisé les motifs floraux en haut de page tout à fait sciemment. Il s'agit de feuille Aldine, un ornement utilisé en typographie (imprimerie bien entendu) en guise de séparateur de contenu. Il en existe de nombreuses sortes (je me suis pas mal renseigné à ce sujet, si ça intéresse qlq1, j'ai des liens et doc. sympas).

Tiens donc, là tu m'apprends quelque chose, je pensais que c'était un vulgaire motif récupéré d'une bibliothèque thématique (mais peut-être simplifié). Dommage que Adobe Photoshop mélange tout...
Est-ce une création de Alde Manuce? Si c'est le cas alors ça concorde assez bien historiquement avec Garamond Je veux bien que tu me donnes quelques infos là-dessus.

a écrit :

Concernant la Adobe Garamond, c'est très bon oui mais un peu large à mon gout... Je l'ai retiré de ma pile pour cette raison.
Donc... J'ai opté pour Monotype ( classiquement appelée via font-family:Garamond).

Comme tu as des justifs assez courtes c'est un choix pertinent, la chasse est assez proche de la Times manifestement.

a écrit :

> :first-letter : +1 . Je vais tester le rendu sur tous les navigateurs de mon petit panel.

Attention il me semble qu'IE6 ne l'implémente pas.

a écrit :

Je ne suis pas d'accord puisque ce portfolio me permet de cibler d'éventuels clients. La compatibilité du site sur IE6 est une des compétences que je propose. Ce serait désastreux en terme d'image de proposer un service et de ne même pas l'appliquer sur son propre site sensé être sa vitrine. Donc si si si Je m'entête à passer du temps sur la compatibilité IE6.

Ok je vois. Mais si ton client potentiel a encore IE6 sur sa machine c'est un ringard ou c'est une boîte avec un DSI feignant Donc ne pas prendre en compte IE6 est une bonne stratégie pour éviter ce type de client.
Modifié par Hermann (18 May 2010 - 09:33)

Aure a écrit :
Je ne comprends pas ? Ceux qui ne possèdent pas IE6 ne chargent pourtant pas les css IE6 ? Peux-tu me donner un exemple de la solution que tu mettrais en place ?

En fait je n'avais pas vu que tu faisais déja appel à une feuille de style pour IE6 dans ton commentaire conditionnel.
Mais pourquoi ne pas y mettre ceci aussi :

<style type="text/css">
body .container .two-cols .col img.photo,
.books img,
.library .articles,
.library .articles p,
.shadow-right,
#footer .ampers{ behavior: url(http://all-for-design.com/portfolio/wp-content/themes/afdfolio/pngfix/iepngfix.htc) }
</style> 

Cela ne concerne qu'IE6 car le code se situe dans le commentaire conditionnel, mais présentement chaque utilisateur va charger ce bout de code inutilement.

Hello Laurie-Anne,
avec cette nouvelle explication je comprends effectivement tout à fait ce pb sur les images.
Du coup, tu préconiserais donc de les intégrer directement dans ma page html via des balises img... mmm...
En fait, lorsque j'ai construit cette page j'ai d'abord cherché à avoir une page lisible uniquement en html.
Tous mes titres sont donc entrés textuellement dans mes balises H.. C'est simplement ensuite que je les ai remplacé par des images via les feuilles de style.

J'ai donc plutôt utilisé mes images comme un élément de "décoration", un ajout "esthétique", de la "présentation" uniquement.
D'ailleurs, si tu désactives les CSS, tu vois une page de contenu uniquement, avec titres, sous-titres et contenu de rubrique.

Opter pour la solution consistant à placer ces images directement dans mon code html irait à l'encontre de cette idée puisque je mets de la "présentation" dans une page de "contenu".

Qu'en penses-tu ?
En fait, je crois que nous voyons les choses de façon inverse non?

> le manque de meta : oui tu as tout à fait raison, c'est un pb remonté par d'autres utilisateurs ici même et je vais rajouter ces infos dans mon header. +1 Merci !

> Trop de fichier JS : ouaip +1 il faut que je regroupe tout ça c'est vrai.

> Les Sprites ? +1 C'est vrai ce que tu dis... d'un côté, le poids sera le même et je limite les requêtes donc je crois que je vais me pencher sur cette solution. Déjà pour mes titres ce sera pas mal. Merci pour cet avis

> Hierarchie des titres : ah ! +1 tu as surement raison effectivement...

> blockquote pour les citations : impossible de l'utiliser dans mon cas puisque je suis déjà dans un paragraphe. La balise "q" j'y ai pensé mais ce n'est pas super recommandé non ? J'ai cru comprendre qu'il y avait des souci d'interprétation de la balise "q par certains navigateurs.
Tu as des infos sur ce points ?

> title "vide" sur les liens : +1, merci je vais regarder ça

a écrit :
en anglais les règles de placement des espaces ne sont pas les même qu'en français. Avant "?", "!", ":" et ";" il ne doit pas y avoir d'espace

Oulala ! Tu m'apprends un truc merci du conseil. +1

Pour finir, je voudrais simplement rebondir sur ta remarque :

a écrit :
Vu que la typo c'est ton domaine (même si je ne suis pas sûre que ça en fasse partie)

Je pense que la typographie est vraiment une part extrêmement importante du webdesign. Un webdesigner n'est pas un typographe et il n'a pas à l'être nous sommes bien d'accord. Mais il me semble qu'on ne peut qu'y gagner en s'intéressant à ce domaine.
Après tout, nous (webdesigners) sommes censés proposer à nos clients des solutions pour répondre à leur problématique de communication.
Il me semble qu'une réelle recherche typographique peut justement constituer une partie de la solution. Exactement comme dans le domaine de l'impression.

Merci pour tes remarques

Aure a écrit :
Opter pour la solution consistant à placer ces images directement dans mon code html irait à l'encontre de cette idée puisque je mets de la "présentation" dans une page de "contenu".

Non justement tes images comportent du contenu qui peut être lu, donc ce sont des images de contenu. Après, qu'elles comportent une mise en forme c'est autre chose.

Ton html restera tout aussi pur en appelant ces images, car si la CSS est désactivée l'information sera présente dans l'image.
Si les images sont désactivées, l'attribut alt que tu auras pris le soin de renseigner avec les mêmes informations que celles contenues dans l'image s'y substituera sous forme textuelle.
Si ni la css ni les images ne sont activées, l'attribut alt jouera là encore son rôle.