Refonte du graphisme du site

Refonte du graphisme du site (le 27 septembre 2010)

L'idée était de proposer une idée d'amélioration progressive... plus qu'une dégradation gracieuse (même si certaines propriétés de CSS3 ont été utilisées). Le graphisme de base est prévu pour du 800*600 px... pensons aux petits écrans !

Toutefois, si vous avez un navigateur moderne (Firefox, Chrome, Safari, Opéra) qui supporte les médias-queries et que votre fenêtre fait plus de 1200 px de large, le site charge automatiquement un graphisme adapté (qui surcharge le graphisme de base). En fait, la média-query adapte certaines valeurs et certaines images de fond sur la condition d'une fenêtre de largeur supérieure à 1200px.

D'ailleurs, si vous réduisez la taille de votre fenêtre, vous allez voir le graphisme changer directement quand la résolution sera inférieure à 1200px de largeur.

Curieusement j'ai été très surpris de la relative facilité pour implémenter cela... le concept est extrêmement facile à saisir, et les propriétés à changer ne sont au final que peu nombreuses... vous pouvez étudier la CSS pour vous en persuader, je l'ai même commentée. Le concept est très certainement généralisable pour plus de résolutions différentes. On peut aisément imaginer une version iPhone, 800*600, 1280*1024, et une supérieure à 1600px de largeur (ce ne sont que des exemples bien sûr).

Sinon, j'ai utilisé une police d'écriture exotique pour les liens du bandeau, afin d'éviter l'utilisation d'images pour chaque rollover. Les titres utilisent aussi cette police, ce qui économise le poids des images.

Quand aux propriétés CSS3, ce sont principalement des coins arrondis, des effets sur les liens (ombrages)... mon idée était qu'Internet Explorer ne soit quand même pas trop pénalisé. Quelques PNG à transparence graduelle ont également été utilisés.
Je ne mentionnerai pas le fond fixe, car ce n'est pas une propriété récente !

Le code reste du (X)HTML5, juste un petit peu allégé pour la peine.

Et pour le choix de l'Egypte, j'aime tout simplement l'Antiquité et l'Egypte, et je trouve amusant de mélanger le côté civilisation ancienne et le web de maintenant (c'est un délire personnel). :)

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1336

1 commentaire

Posté par graphiste grenoble le 26/04/2011 à 20:18:08
Moi je trouve ca plutot réussi !

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.