Blanche de Peuterey.com, création web à Grenoble

L’internet au service de la Communauté

Site en pleine refonte. J'utilise les squelettes de base de Spip le temps de produire quelque chose de mieux

Accueil > Articles > Un site web "responsive" sous Spip

Un site web "responsive" sous Spip

vendredi 31 janvier 2014, par Eric Le Meur

L’utilisation de plus en plus importante des smartphones et tablettes nous pousse à adapter nos sites et à les rendre "Responsives". C’est ce que nous venons de terminer avec notre site principal.

Une mise à jour régulière

La maintenance d’un site demande une mise à jour régulière, tant pour des questions techniques (améliorations de sécurité, nouvelles fonctionnalités, liens avec les réseaux sociaux, utilisation de "Icon fonts", des polices d’images plutôt que d’images directement...) que pour des questions graphiques. Il y a des modes, des styles, qu’il n’est pas indispensable de suivre à tout prix, mais en être trop éloignés n’est pas un gage de crédibilité.

Mon site avait besoin d’une petite mise à jour.

Une conception souple ou responsive

Pour que votre site s’adapte au mieux aux différentes tailles d’écrans, le point de départ reste une conception "souple" : éviter les tailles absolues en pixel, privilégier les tailles de site en pourcentage, éviter les tailles de polices fixes.

On trouvera de nombreux articles à ce sujets. J’en cite simplement deux :

- Alsacréation : prévoir un site pour toutes les résolutions

- Nicolas Hoizey : Lâchez prise sans perdre le contrôle grâce à l’unité CSS em

- Conception de site mobile : pensez "Mobile first". Pensez d’abord au site mobile pour concevoir correctement votre site responsive. Une fois de plus, Alsacréation explique tout parfaitement. Regardez l’article Web mobile : introduction et glossaire

Indications techniques

Mon site blanche-de-peuterey.com a été repris selon ces indications : un design souple et l’utilisation des media queries en CSS. Deux feuilles de style, une pour l’affichage sur écran de plus de 600 px, l’autre pour affichage sur écran de moins de 600 px.

Différence ancien - nouveau

La différence n’est peut être pas frappante, je vous assure qu’elle l’est néanmoins.

Avec la mentalité "mobile first", j’ai supprimé la colonne de gauche ; j’ai doté le site d’une largeur de 80% de l’écran, avec une marge de 10% de part et d’autre.

Les balises <li> de listes (page d’accueil, page de réalisation, etc) sont également définies en %.

J’ai supprimé des images, j’ai utilisé une police de caractère "Sosa Icon Font".

Le pied de page a également été repris.

Par la même occasion, j’ai repris le contenu de certains articles, pour travailler le contenu du site, et pour proposer quelque chose de plus pertinent.

Les images du portfolio vous permettent de voir la différence.

Portfolio