C’est dans l’Allemagne des années 20, alors que la technologie industrielle semble atteindre son apogée que l’auteur et illustrateur Fritz Kahn conçoit ses descriptions métaphoriques de la « machine anatomique humaine ». L’idée est très opportune et les  superbes illustrations qui en découlent seront abondamment commentées. En 2006 un jeune designer récupère le concept et réalise cette fascinante vidéo.

Je ne dispose pas d’informations précises sur le projet final, a part le fait qu’étant prévu pour être interactif avec le public, il y a de grandes chances que le montage soit élaboré en Flash ; l’on appréciera également l’habillage sonore. J’adore !

Si vous préférez les images à droite et les légendes à gauche, pas de problème ; les images sont positionnées en absolute. Vous définirez quatre zones d’interactivité complètes, incluant texte et image, dans une ancre <a></a>. Il faut donc quatre identifiants précis pour ces div ; le reste n’est qu’une affaire de décoration : couleur, typo, border.

On peut voir l’exemple ici ; débrouillez-vous pour récupérer la source…

Malheureusement, leur maîtrise demande une solide expérience. Qui n’a pas un jour, malgré une CSS a priori nickel, été confronté à une série de décalages flippants lors d’un changement de plateforme ou de navigateur ?

Au delà des contraintes graphiques, le bon fonctionnement de vos CSS est révélatrice de la qualité de votre site. Ces quelques conseils vous permettrons de gérer un affichage parfait et une bonne structuration de vos données, quelque soit le contexte utilisateur.

1. La remise à zéro en CSS (reset stylesheet)

Aucun navigateur ne gère ses paramètres de présentation de manière identique : marges, champs de saisie, hauteur de ligne, indentation et force de corps varient de droite à gauche ; pire, le phénomène s’amplifie encore sous Linux ou Mac OS. La solution réside en une feuille de style qui remet tous ces réglages à zéro. Quitte à faire au besoin une petite CSS sur mesure pour compenser tel ou tel défaut de  votre navigateur favori (ou abhorré).

Voici une version simplifiée que j’ai mis au point récemment contre une abominable galère de taille de caractères différente sous Vista et XP (et Firefox et IE7, sans parler de Safari sur Mac)…

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    font-size: 10px; line-height: 1;
}

Une version très complète est disponible sur le site d’Eric Meyer – CSS guru et auteur de référence en la matière.

Et si vous voulez voir vos sites affichés sous différents OS via les navigateurs les plus exotiques, un petit tour par là…

2/ Images .png : IE6 vs le reste du monde…

Malgré l’existence de plusieurs techniques - Javascript, hacks CSS – la gestion du format Progressive Network Graphic (et sa merveilleuse transparence alpha) reste très limitée pour les  utilisateurs d’Internet Explorer 6. Selon les statistiques, ils sont encore un bon paquet, particulièrement en milieu professionnel (PME, administrations).

Les patchs à base de JavaScript sont efficaces pour une ou deux images mais j’en ai fait l’expérience, IE6 pête les plombs lorsqu’on utilise des .png de grande taille ou en grand nombre. Comme c’est mon cas pour le présent site, voici ce que vous verrez si vous tentez l’expérience

La solution la plus radicale, qui peut valoir le coup pour réaliser un thème assez simple, est de doubler tous vos .png par des images au format .gif qui seront gérées dans une feuille de style spéciale pour IE6.

3/ Boîtes <div> et coins arrondis

Si vous avez marre des angles droits de vos boxes, il existe une propriété fort utile pour générer des border joliment arrondis : border-radius, qui accepte une valeur en px ou en em. On peut même la décliner pour chaque angle. Malheureusement, son emploi n’est valide que dans la norme CSS 3.0 et de plus, elle est ignorée par Internet Explorer.

La seule solution réellement clean, à condition d’avoir fixé une largeur précise pour ses boxes, est d’utiliser au moins deux images : la première servira à faire la partie supérieure de la box et pourra s’étendre en longueur, en fonction du contexte. La seconde servira pour l’arrondi inférieur.

Voici mon code pour la CSS, puis ce qu’il faut mettre dans la page HTML et enfin le résultat :

#mybox {
    width: 210px; height: auto;
}
.top_box {
    height: auto; min-height: 70px; max-height: 400px;
    background: url('top_box.png') no-repeat top left;
    background-color: #ffffff;
}
.bottom_box {
    height: 30px;
    background: url('bottom_box.png') no-repeat bottom left;
    margin-top: -14px;
}
#mybox h2 {
    font-size: 1.3em; font-weight: bold;
    color: #ffffff; padding: 2px 0 0 24px;
}
#mybox p {
    text-align: left; font-size: 1em;
    color: #404040; padding: 0 12px 0 24px;
}

Des hauteurs mini et maxi ont été précisées pour la box, selon la taille des éléments graphiques. Le code complet et les deux images sont à télécharger ici. Enjoy !

La caractéristique commune de ces sites est d’être ego-centrés sur le web ! Bien loin de m’en plaindre, j’en tire un profit quasi-quotidien, ce qui me permet à mon tour de faire circuler les bons plans.

Un site joli et bien conçu, juste reflet de l’expérience de web-designer free-lance de sa propriétaire. Une grosse partie est consacrée au HTML/CSS mais on trouve aussi du design, un peu Flash et de code… et du bla-bla. La plupart des articles renvoient à des sites in english, mais la miss nous livre aussi ses trucs persos et nous invite à partager le fruit de ses expérimentations.

Stéphanie est une pionnière du blogging et du web social ! En ligne depuis plus de huit ans, ce site au look de journal chic déroule ses différents styles au fil de pages toujours trés bien rédigées, documentées… et commentées. Certains articles un peu anciens confinent à l’histoire du web ! L’aspect technique est bien présent : l’auteur est – entre autres – l’instigatrice du site de référence Pompage.net ; l’on trouve aussi des (trés) belles photos, des tas d’idées plutôt bon esprit et des récits d’expériences passionnantes. Le tout servi avec un style alerte, alternant la langue de Shakespeare et celle de Molière, ce qui n’est pas sans lui conférer un charme supplémentaire. A masterpiece…

Voici un site qui fournit d’excellentes bases : on est ici en plein dans le domaine de l’information stratégique et économique autour des NTIC. Indispensable si vous souhaitez connaître l’état du droit de l’internet ou les évolutions envisageables des métiers de la gestion documentaire. Le logo et l’habillage graphique sont un peu vieillot mais le site – entièrement cousu main en PhP – est agréable à l’usage : on dirait du WordPress !

L’ovni de la liste ! L’auteur annonce, nous sommes ici dans le domaine des « fulgurances diverses et variées »… Ce site d’un « collègue » (enseignant) est moins riche (et surtout plus récent) que les précédents, mais il fleure bon la liberté d’expression. Zackatoustra m’a séduit par son humour décalé, limite surréaliste, et son bon sens de citoyen-internaute attentif à l’évolution du monde. Un petit effort graphique améliorerait le look vraiment trop minimaliste à mon goût…

Là, on commence à s’éloigner du thème web 2.0 : ce blog est celui d’une illustratrice dont le talent à été remarqué par la presse pour enfants et qui collabore notamment à Astrapi. Ses bestioles me font marrer : mixées avec les photos, elles génèrent juste ce qu’il faut de décalage… Je suis admiratif du travail dans Photoshop : Clotilde doit avoir une sacré collections de brosses poilues ! Si les sites d’illustrateurs vous plaisent, vous trouverez tout plein de liens sympas ; et si vous aimez les p’tites bêtes, vous pourrez acheter de nombreux articles personnalisés.

Trouvé sur StumbleUpon, cette parodie des logos de quinze grandes entreprises internationales est révélatrice des incertitudes qui affectent le monde des affaires depuis quelques mois. L’exercice n’est pas trés compliqué, je me suis déjà amusé à ce genre de détournement mais pas avec le même sens ni le même objectif… Voici une petite sélection des meilleurs logos, les autres sont visibles sur le blog Business Pandit.

A considérer sous un nouvel angle, au moment ou l’interface privilégiée avec notre chère machine tend à évoluer…

Essayez la manip avec le pad d’un portable ou les doigts, sur l’écran de l’iPhone ou de la PSP : il y a parfois un « accidental click » mais la navigation, très intuitive, reste rapide et précise.

La recette tient évidement à la conception même du site, étudiée dans ses moindres détails. Les solutions retenues pour pallier l’absence de clic (contenus cachés + pop-up, scrollings et zooms multiples) sont parfaitement intégrées à la structure même du contenu. La recherche actuelle prône la limitation de l’interaction physique, comme le montrent les travaux réalisés à l’Université de Montfort ; ce type d’applications devrait donc connaître de nombreuses évolutions…

Bientôt la même chose en JavaScript + CSS ?