Un site web "responsive" sous Spip

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

Article publié le 31 janvier 2014  Mot(s) clé :   Graphisme  Enregistrer au format PDF   Version PDF

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

Cliquez sur l'image pour afficher un diaporama

Accueil ancien site Accueil nouveau site Ancienne page "Réalisations" Nouvelle page "Réalisations"

Ces articles peuvent vous intéresser