Le site se refait une beauté en HTML5 et CSS3

Publié par Gui dans CSS, Général, Internet

Ça ne se voit peut être pas mais le site a subi pas mal de changements ! Welcome HTML5 et CSS3, un affichage adapté à différentes résolutions, un bon refactoring et la création de custom post types (portfolio).

HTML 5 et CSS3

Il faut vivre avec son temps ! Même si la norme HTML5 n’est pas encore réellement entrée en vigueur, bon nombre de navigateurs en supportent ses nouvelles balises (header, article, footer, figure …). Et pour les autres (IE 7,8), il y a toujours Modernizr pour les fallbacks !

Medias Queries

Il est maintenant possible d’adapter notre feuille de style css en fonction de la résolution d’écran de l’internaute grâce aux medias queries. Cette nouvelle spécification permet donc d’ajuster l’affichage d’un site selon qu’il est consulté depuis un téléphone mobile, un petit écran ou un écran large.

@media screen and (max-width: 640px) {
  .bloc {
    display:block;
    clear:both;
  }
}

Affichage du site sur un écran large

Affichage du site pour une résolution large

Une colonne supplémentaire apparaît sur la gauche du site, comprenant des widgets.

Affichage du site sur un écran moyen (1024×768)

Il correspond à la version normale du site :

Affichage du site pour une résolution de 1024

Affichage du site sur un iPhone

Affichage du site pour les mobiles (iPhone)

Là, les colonnes disparaissent pour ne laisser place qu’au contenu de l’article. Les textes s’ajustent automatiquement à la résolution du mobile.

Refactoring et améliorations

J’ai réorganisé le code de mon thème, qui accueille maintenant une nouvelle page consacrée aux images, sur laquelle on peut également laisser un commentaire (même si cela représente parfois peu d’intérêt).

La colonne de gauche, de droite ainsi que le footer sont maintenant des zones de widgets (plus facile à administrer).

J’ai ajouté quelques raccourcis ergonomiques comme le « back to top« , entièrement CSS3 (transitions, rotation).

Bouton de retour en haut de la page

Custom post types

Depuis WordPress 3.0, nous pouvons ajouter d’autres types de contenu (custom post type) autre que les pages et articles. J’ai donc créé une entité Projet. On retrouvera donc ces projets dans la page portfolio.

Commentaires et bugs

N’hésitez pas à me signaler tout disfonctionnement (en prenant soin de mentionner votre navigateur, système d’exploitation et résolution d’écran) ainsi que des remarques et suggestions !

6 commentaires

  1. ze0ne

    Très sympa, il y a des choses intéressantes :)

  2. Yannick

    C’est de la bombe ce visuel ! 😉 Félicitation et merci de partager

  3. Florian Brochard

    Énorme ce design, je viens de le tester sur PC, Tablette (Eee Pad Transformer réso 1280×800 donc grand écran) et sur iPhone :)

    Seul hic : l’iPhone. L’affichage du slide show en haut du site me parait un peu bizarre. On voit l’image suivante et la flèche de nav vers la droite n’est pas affichée.

    De même, le passage du mode portrait au mode paysage ne remet pas le site à la bonne largeur (effet trop zoomé). Par contre aucun problème pour passer du paysage au portrait.

    Good job en tout cas 😉

    A plus

Laisser une réponse


Post shadow