Http://www.developpement-web.net : Design Web sans image

Bon le projet était juste un challenge personnel, pour évaluer un peu mes connaissances niveau CSS. Je n'ai donc pas cherché à faire une page magnifique, mais juste un design sans AUCUNE image. Le site a le mérite de se charger en 0.1 seconde

http://www.developpement-web.net/design_web/
Modifié par floatLeft (24 Jun 2007 - 19:35)

Bonjour aussi...

Merci de bien vouloir afficher le nom de ton site dans le titre du sujet, comme cela est demandé dans le message d'annonce de ce forum : "A lire avant de poster : Ergonomie, Design et demandes de critiques", sinon 99% des sujets de ce salon auraient le même titre évasif

Salut,

C'est marrant comme idée. T'as de l'imagination, en tout cas (cf. l'arrondi en arrière-plan de ton menu). Bon, c'est clair que ça fait pas beaucoup avancer notre bon vieux schmilblick (prochain défi : la même chose avec du code sémantique ), mais en tout cas c'est original, et tu t'en tires pas mal .
PS : t'as quand même deux trucs à corriger : une erreur de validation et ta div#page qui passe sous le menu avec ie6.

Le petit problème avec ie6 a été corrigé... Merci de l'avoir signalé

Bonjour l'artiste,

Je trouve ton idée très attrayante.
Pour ma part je suis en train de relooker mon site et cherche désespérément sur la toile l'inspiration d'une présentation sobre et légère.
Comme je n'ai aucun gout graphique j'ai meilleur temps de m'abstenir d'insérer des images.
Autrement dit ta démarche est très proche de mon objectif et cadre bien avec mes faiblesses. D'où ma question:
Est-ce que tu m'autorises à m'inspirer (pour ne pas dire copier) de ta création?
[quote "Si vous souhaitez réaliser une page dans le même esprit (aucune image), n'hésitez pas à me l'envoyer, je me ferai un plaisir de la publier !"]

Bravo et à+

Bonjour,

... globalement ... Non

Je m'explique: le design sans élément graphique est un vieil exploit régulièrement pratiqué, et ici fort honorablement réalisé (il faut le souligner, c'est du beau boulot malgré quelques horreurs de contenus martyrisés et une structure effectivement pas toujours pertinente). loatLeft est d'ailleurs très clair sur le côté "challenge personnel".

Mais ce n'est en aucun cas:
- ni une pratique à recommander en production (ce que personne ici, je crois, n'a prétendu d'ailleurs),
- ni une solution envisageable à un manque éventuel d'expérience graphique (mathiasZ: c'est pour toi, là ).

A ce dernier égard, ne pas confondre:
- l'absence de travail graphique (il y a au contraire un travail graphique, et justement plutôt poussé, dans l'exemple qui nous est proposé ici)
- la question purement technique de types de contenus graphiques (les images HTML et CSS);

Aucun site (même en HTML brut) ne se passe d'un travail graphique. Et surtout, les types de contenus images sont tout simplement le moyen le plus simple, le plus robuste, le plus direct et le plus riche au service de ce travail graphique. Réaliser une page sans "véritables" images, comme ici, c'est très amusant et très instructif, mais ce serait une pétition de principe stupide en terme d'économie de moyens.

Par ailleurs, j'avoue que je suis un peu incertain mais gêné tout de même, par ce que je lis sur la page en question, ne sachant pas vraiment ce que floatLeft a voulu y dire:

floatLeft a écrit :
Cette réalisation est un challenge personnel, elle m'a permis de mesurer mes connaissances sur : l'utilisation des propriétés CSS, l'intégration XHTML, la sémantique, l'accessibilité ...

En effet, ce n'est en aucun cas une manière de favoriser l'accessibilité, bien au contraire (la page n'est d'ailleurs pas accessible, faut-il le préciser ?).

L'accessibilité ne consiste pas à évacuer les éléments jugés problématiques (comme on le fait dans la version texte à l'ancienne), mais à bien les utiliser. L'accessibilité ne peut pas consister à évacuer une technique (les images, les frames, le javascript, le flash, le target, AJAX, CSS, les menus déroulants, les popups, le son par défaut, PDF, ...) puisque:
- l'accessibilité est elle-même une composante nécessaire de chaque pan technique du Web.
- surtout (et c'est plus neuf), chaque pan technique est un apport potentiel à l'accessibilité, en offrant la possibilité d'un traitement d'autant plus pertinent qu'il sera ciblé. C'est une forme de modularisation qui a, d'ailleurs, un impact énorme (cf WCAG2).

ça ne favorise d'ailleurs rien d'une manière générale, au contraire; par exemple, l'emploi de caractères typos en remplacement d'une image est explicitement découragé par les RFC concernées, depuis longtemps (pour faire un "bullet", n'utilisez pas & bull;, pour faire un motif graphique en forme de double chevron, n'utilisez pas & gt; etc.).

Pour ce qui est de permettre de pratiquer des techniques CSS réutilisables dans la vraie vie, oui, c'est un bon exercice; mais qui demande un certain discernement au moment du tri avant ré-emploi. Comme souvent, l'accessibilité est une bonne clé de tri (mais pas la seule).

Après, si vous voulez aller au fond des choses, votre véritable question n'est pas du tout "site avec ou sans images ?".

Votre question, c'est celle du format graphique. Et la réponse que vous cherchez s'appelle simplement format vectoriel XML, c'est à dire SVG.
Modifié par Laurent Denis (24 Jun 2007 - 16:25)

a écrit :
Est-ce que tu m'autorises à m'inspirer (pour ne pas dire copier) de ta création?

Cela ne me dérange absolument pas.

Concernant l'accessibilité je suis d'accord que certains éléments utilisés à des fins purement graphiques ne sont absoluement pas recommandés (Le O majuscule pour dessiner une courbe, les visuels W3C en bas à droite). Mais je ne crois pas que ces 2 ou 3 écarts rendent le document totalement innaccessible... La structure du document reste correct et la page (sans style) parfaitement lisible.
Mais je me trompe peut être, j'avoue avoir un peu de mal avec les régles sur l'accessibilité.

Sinon je confirme que cette intégration reste un "jeu"

floatLeft a écrit :

Mais je me trompe peut être

Oui. La structure de titrage est défectueuse, les contenus textuels dupliqués sont un problème majeur, il doit se passer des choses intéressantes dans des contextes de désactivation des couleurs, etc. Autant de problèmes (pour les deux derniers) artificiellement créés par ce choix.

floatLeft a écrit :

Sinon je confirme que cette intégration reste un "jeu"

C'est bien comme cela qu'elle était comprise en général. Mais une réaction comme celle de mathiasZ montre que ce n'est pas aussi simple.
Modifié par Laurent Denis (24 Jun 2007 - 17:43)

Belle performance technique ! je me demande comment tu as fait pour recréer les logos en 100% css jolie maitrise de la CSS... que seuls ceux qui s'y connaissent un peu peuvent apprécier (tu dois être frustré quand tu le montre à des gens qui te dise "bah, j'ai vu des sites plus beau". c'est un peu geek quand même )

sinon je suis d'accord qu'il faut le prendre en tant que jeu, et j'adhère à 100% avec laurent denis.

ça n'est "qu'une" démo technique et ça n'est pas du tout l'exemple à suivre pour un vrai site.

@mathiasZ je te conseille d'éviter ce genre de design. Ce que tu peux par contre faire c'est reprendre la forme (pas très compliquée) et remplacer les "déformations css" par des images, ainsi tu auras un code sémantique, accessible et valide, tout en profitant d'un graphisme agréable.

Reprendre ce site tel quel pour un site qui va être visité est un non-sens. en plus tu te complique la vie, penses au jour ou tu voudra faire des modifs de graphisme...

yosh a écrit :
en plus tu te complique la vie, penses au jour ou tu voudra faire des modifs de graphisme...

Pas seulement pour les modifications de graphisme mais aussi pendant la création même de l'interface.

Quand on est webdesigner et que l'on bosse sur la création d'une interface, il n'est pas rare qu'on fasse un essai de tel ou tel élément avec telle couleur, puis de revenir en arrière parce que l'effet voulu ne donnait pas aussi bien qu'on l'aurait imaginé.
Tout ça est faisable en quelques clics avec des logiciels comme Illustrator ou Photoshop, par contre, faire la même chose avec du code, ça devrait pousser les concepteurs à suivre des séances chez le psy pour s'en remettre.

a écrit :
@mathiasZ je te conseille d'éviter ce genre de design. Ce que tu peux par contre faire c'est reprendre la forme (pas très compliquée) et remplacer les "déformations css" par des images

A La limite je conseille même de faire un screenshot et de repartir de zéro

a écrit :
tu dois être frustré quand tu le montre à des gens qui te dise "bah, j'ai vu des sites plus beau". c'est un peu geek quand même

Je le montre qu'à des développeurs. Ma copine n'a toujours pas compri l'intérêt...
Modifié par floatLeft (24 Jun 2007 - 22:44)

a écrit :
Je le montre qu'à des développeurs. Ma copine n'a toujours pas compris l'intérêt...

oh comme je compatis ma copine ça va, elle est infographiste, mais quand je venais de valider mon site et que je l'ai montré autour de moi enthousiaste, ça n'a pas eu l'effet escompté (pas sur le code en tout cas). Je ne te parle même pas de mon collègue développeur flash qui est resté de marbre en m'arguant qu'en flash le site aurait été terminé depuis longtemps, avec des animations en plus

ton projet me rappelle un peu quand je fais du vectoriel photo-réaliste et que les gens restent de marbre en disant "bah t'as mis un filtre photoshop sur une image, tout le monde sait le faire..."

Salut,

c'est très sympa comme idée, je suis impressionné. Par contre je n'ai absolument rien compris au code qui m'a paru extrêmement concis .

Même si ce n'est qu'un jeu, ça doit valoir le coup de l'étudier.

bonsoir ,

Vraiment très intéressant comme 'approche ' et utilisation des attributs CSS
(notamment les largeur de bordure ) ...
On sent une certaine aisance graphique (pour s'en persuader suivre le lien 'astuces') ...

Comme d'autre je suis un vrai nul pour les mises en pages , alors je reste toujours un peu plus longtemps sur ce 'genre' de site , histoire d'en saisir (au moins un peu ) le pourquoi cela semble bien équilibré et agréable quand j'ai l'impression que mes tentatives s'écroulent au moindre clic trop brutal

De plus j'suis tombé sur du code html et php dans un de tes articles ... faut que j'imprime
Je retourne étudié tes astuces

Hello,

Vous (Laurent et Yosh) ainsi que l'auteur (floatleft) avez l'air unanime pour me déconseiller cette approche. Vous avez surement de bonnes raisons pour cela. Merci pour ce conseil.
En fait la partie qui m'intéresse principalement dans cette page est celle du div "haut" avec ses 3 styles o1, o3 et o4 et l'effet visuel qu'ils produisent en jouant avec les valeurs du "border".
En l'absence de logo et d'un concept graphique général, cette approche reste pour moi une solution temporaire valable. Par ailleurs je ne la trouve pas si figée que cela (cf Yosh) dans la mesure ou je peux jouer avec les valeurs de width et color de la bordure pour obtenir un look différent (bien que similaire).
Il est clair que la simulation des "stampfel" du W3C ou la production des effets graphiques en regardant la lettre "o" au microscope (classe o6) ne présentent pas pour moi un intérêt majeur.
En tous cas floatleft aura eu le mérite de déclencher quelque passion...

mathiasZ a écrit :

En l'absence de logo et d'un concept graphique général, cette approche reste pour moi une solution temporaire valable.

Excellente remarque, qui pointe très justement l'une des dérives majeures possibles de ces techniques : un logo (ou tout autre motif graphique identitaire) ainsi généré n'a aucune existence "réelle": n'ayant qu'une vie simulée via CSS, il constitue bien une ressource Web (une css est une ressource), mais son degré d'interopérabilité est nul (seul un agent utilisateur implémentant CSS peut l'exploiter sans qu'aucune alternative ne soit possible). Une image "réelle", elle, sera une ressource interopérable.

Bref, le problème habituel des pseudos contenus CSS.

(once again, tout le monde est bien d'accord ici pour savor qu'il de dérives, mais l'expérience me conduit à l'écrire en gros et en gras pour les générations futures, parfois moins expériementées ).

Laurent Denis a écrit :

[ ... ] mais l'expérience me conduit à l'écrire en gros et en gras [ ... ]

L'écrire en gros et gras ? Je suis curieux de voir comment tu fais ça, surtout s'il faut que ça reste pour les générations futures. Montre voir un peu ?
Modifié par Lanza (26 Jun 2007 - 09:25)

Cette démarche me fait tout à fait penser à la vidéo qui circule ces temps à propos du dessin en html, c'est à dire créer une image à l'aide d'un tableau html et autant de cellules que l'image comportera de pixels... Sympatique passe-temps mais à qui cela viendrait à l'idée de l'utiliser, voire même de s'en inspirer dans le monde professionnel?

A mon avis, la démarche de floatLeft doit être comprise dans ce sens, mais surtout également présentée dans ce sens pour éviter toute confusion.