Les skins - CSS alternatives

Pourquoi proposer des skins du site ?

Tout simplement pour montrer la puissance de la mise en page via les CSS, tous les changements que vous verrez seront dûs uniquement au changement de feuille de style. La seule contrainte est que votre navigateur accepte les cookies, sans lesquels le changement de CSS ne sera pas possible (dans ce cas, vous vous cantonnerez au skin par défaut).
Pour info, le cookie durera deux semaines, donc le skin choisi sera affiché pendant deux semaines. Si vous supprimez le cookie, le site utilisera le skin par défaut.

Les premiers skins de chaque rubrique sont les plus récents.

Skins classiques

• ND Mobfirst : la dernière CSS alternative est construite via une approche de type mobile-first. Les media-queries, CSS3, des Data-URL, des web-fonts, etc. tout ce joli petit monde est utilisé pour une lisibilité et une rapidité maximales (sur des navigateurs récents, bien entendu). C'est désormais le skin par défaut ! Nouveau !
• ND new green : la dernière CSS alternative utilise les media-queries, CSS3, des Data-URL, Jquery, etc.
• ND : il était temps de faire peau neuve et de mieux présenter mon site... c'est désormais chose faite avec ce skin !
• Dissymétrie : ce skin est l'occasion de revenir à des couleurs un peu plus claires, un bon petit amusement pour ma part !
• Filezilla : Si vous ne connaissez pas cet excellent client FTP, je vous invite à essayer le logiciel... et ce skin !
• Summer Reboot : pour l'occasion du CSS Refresh, je vous propose ce skin, jetez un oeil au menu de droite...
• Winamp : je suppose que vous connaissez déjà ce logiciel, essayez donc ce skin, cela risque d'être déroutant... (800*600 conseillé)
• Industrial Red : on change radicalement de style (c'est le cas de le dire) avec ce skin : graphisme plus moderne/agressif, et couleurs différentes...
• Firefox : histoire de s'amuser un peu, si vous ne connaissez pas ce très bon navigateur, essayez donc ce skin !
• Open Office : si vous ne connaissez pas encore cette suite bureautique d'excellente facture, essayez donc ce skin ! Cela risque de vous amuser si vous en êtes un utilisateur fervent...
• Explorateur : les utilisateurs de Wintruc 98 ne seront pas trop dépaysés par ce thème... quant aux autres, c'est à voir...
• "Fixed nav" : je vous conseille de voir en 1024*768 ce thème, les utilisateurs de Mozilla auront un petit plus, le menu utilisera la propriété "fixed" des CSS, je vous laisse voir ce que ça donne...
• Quad attack ! : dans le même genre que le look de l'ancien site Teamquad 74 (normal, c'est moi qui l'a créé), s'adapte à votre résolution (800*600 minimum quand même).

Skins lourds et/ou démos technologiques

Cette nouvelle catégorie est uniquement là pour montrer diverses possibilités, soit pas encore officielles (CSS 3 par exemple), soit plutôt lourdes pour de nouveaux résultats de mises en page.

• ND Egypt : je combine plusieurs choses avec ce skin, à la fois l'utilisation de nouvelle propriétés comme les media-queries (redimensionnez la fenêtre...), et un petit clin d'oeil à une période historique qui m'intéresse beaucoup, à savoir l'antiquité. Je vous conseille vivement un navigateur moderne pour bien en profiter.
• Dissymétrie Reloaded : voici une version revisitée à grands coups de JQuery du skin Dissymétrie. Le bandeau, les news, et les titres profitent des possibilités de cette librairie javascript (coins arrondis, fondus dans le bandeau). Attention, le skin est un peu plus lourd que de coutume.

Expériences curieuses, autres manières de naviguer

Là, ce sont plutôt des délires ou d'autres façons de surfer... vous êtes prévenus !

• iND : voici la version revue et corrigée spécial iPhone du skin "ND". A noter, cette feuille de style a été celle par défaut pour le media handheld et pour les internautes navigant avec un iPhone.
• Old screen bis : Réservé au puristes, une navigation en mode texte, en blanc sur fond bleu. Si vous aimez naviguer au clavier sur un site en 3 couleurs, ne cherchez pas plus loin !
• Old screen : Réservé au puristes, vous aurez avec ce skin à peu de choses près l'équivalent d'une navigation en mode texte, et avec un texte vert sur fond noir, comme sur les très vieux écrans.
  Un pur délire d'informaticien, ne cherchez pas plus loin !
• Mini Blue : Encore quelque chose d'inhabituel : ce skin simule un rendu sur très petit écran (écran de téléphone portable par exemple). Je vous invite à essayer, c'est une curiosité !
• Random : Attention, il faut avoir le coeur bien accroché pour choisir ce mode : à chaque changement de page, un thème sera choisi aléatoirement parmi tous ceux disponibles. Vous pouvez donc passer d'un thème "léger" à un thème plus "graphique", avec la disposition qui change aussi.

Skins minimalistes (sans aucune image dédiée à la présentation)

Ces derniers sont particulièrement adaptés pour les très petites connexions, bref, pas de fioritures, on va à l'essentiel !

• Triangle Orange : un petit délire de disposition CSS, où j'ai mélangé le skin Orange avec une présentation un peu fafelue des liens du bandeau.
• Green : comme son nom l'indique, ce skin est dans les tons verts. A noter, les principaux liens de navigation (édito, news, etc.) sont disposés de manière différente par rapport à tous les autres skins, cela peut surprendre.
• Orange : dans des tons plus chauds que "Simple Blue".
  Je vous conseille Mozilla afin de pouvoir mieux profiter des possibilités de cette CSS. C'est en quelque sorte un mix de "Simple Blue" et de "Fixed Nav".
• Simple Blue : très simple, dans les tons bleus. S'adapte à toutes les résolutions, avec une accessibilité maximale.
• Simple Red : très simple également, dans les tons rouges (aucun rapport avec le groupe du même nom !). S'adapte à toutes les résolutions, avec une accessibilité maximale.
• Sans : pour ce dernier, la CSS est tout simplement... vide ! (juste pour vous amuser, désactivez l'affichage des images, vous verrez le site comme si vous étiez sous Lynx, néanmoins, le site reste navigable bien que spartiate...)