Geek01 passe au responsive design sous wordpress

Je vous contais il y quelques temps la migration de ce blog vers wordpress , aujourd’hui nouveauté graphique, geek01 passe (modestement) au responsive design, autrement appelé site web adaptatif. Concrètement il s’agit d’un webdesign qui s’adapte à la taille de l’écran et à l’appareil sur lequel il est affiché. Ainsi nul besoin d’utiliser un site spécifique mobile, tablette  et un autre pour PC de bureau. Tous les appareils pouvant bénéficier d’un site unique.

geek01-theme-responsive-design-zalive

CSS3 et ses media queries  permettent en effet de faire varier l’affichage en fonction notamment de la résolution d’écran. On peut ainsi masquer des éléments mais aussi modifier les marges, les tailles, ainsi que tout autre attribut de style CSS… Pour faire simple il devient possible de gérer mobiles, tablettes et ordinateur sur une seule page HTML. Le rendu variant en fonction de l’écran du navigateur.
Exemple de classes CSS « adaptative » pour l’affichage spécifique aux résolutions d’écran comprise entre 980 et 1199 pixels

@media (min-width: 980px) and (max-width: 1199px) {
.content-two-columns {
    margin-right: 314px;
    width: 665px;
}
#sidebar {
    margin-right: -315px;
    width: 315px;
}
}

site web WordPress responsive design

Mais rassurez-vous nul besoin de se pencher sur ce genre de choses, pour profiter du responsive design dans wordpress : pour parvenir rapidement au résultat escompté j’ai utilisé le thème wordpress Zalive.

theme wordpress zalive
Il offre peu de personnalisation par rapport à d’autres thèmes, mais permet tout de même une surcharge CSS globale via les paramètres du thème (rubrique Custom CSS Style). Ainsi, il sera possible de personnaliser les couleurs (mais là pour le coup il faudra quelques connaissances HTML/CSS, et également l’aide de la fabuleuse extension firefox Firebug pour trouver plus facilement les classes à modifier dans la surcharge CSS)

En bref un coup de neuf visuel pour votre blog, et pour geek01!

edit du 7/12/2013 : j’ai collaboré avec Zenoven l’auteur de Zalive pour le traduire en français. Depuis la mise à jour 1.2.12 Zalive est donc disponible en Français!

Laisser un commentaire

* Copy This Password *

* Type Or Paste Password Here *