Design et site SPIP

La question est simple : comment se fait
l’organisation du design d’un site à l’aide de css dans spip ?

Et la réponse : En fait tu fais ce que tu veux.
on fait le design puis spip interviendra après !

Toute la présentation des pages publiques du site est faite en simple html !

Spip propose une base de départ, structurée en pages de squelettes, avec une organisation css (plusieurs fichiers, au final compactés si besoin). Mais rien n’oblige à les utiliser. [1]
L’exemple pédagogique actuel -un fichier html principal par maquette de page-type-, qui sert le plus souvent de support à tout nouveau projet de débutant, est squelettes-dist/ : tout y est, html, css, img de maquette, etc.
En gros il suffit de créer un dossier ./squelettes et de surcharger (modifier en copiant un fichier se trouvant dans Squelettes de la "dist") : voir comment MODIFIER un JEU de SQUELETTES.

Il faut commencer par comprendre la correspondance entre les informations à afficher, et les noms des pages gérées par La construction des URL pour identifier Quel squelette modifier ?, ce qui est plus facile sur un site Web déjà rempli : ensuite SPIP propose un outil interne &var_mode=inclure, vite indispensable au Webmestre débutant, étendu par le plugin SkelEditor..
Plus précisément, s’il y a un os dans un squelette, le webmestre SPIP utilise les outils d’aide au debuggage de SPIP.

Spip est très souple et il est possible de pratiquement tout surcharger ou partir de zéro. Il faudra certainement quand même apprendre un peu le principe des boucles, balises et critères de la terminologie. Mais le faire à partir d’un design déjà maquetté en html est très facile, et ce qui est bien, c’est que l’on manipule que du fichier html. Pas ou peu de php. Accessible à n’importe qui, même aux graphistes ;)

La démarche d’un professionnel

Reprenons les étapes comme proposées par un professionnel du Web :

1. Maquette image : validée auprès du client (images et wireframes si besoin)
2. Création de d’un prototype html (permet de peaufiner les css, régler les problèmes de compatibilité de navigateurs etc..
3. Préparation de l’architecture interne à SPIP pour générer ces maquettes html (rubriques / articles / création d’un nouvel objet éditorial via La Fabrique / requêtes spéciales via la boucle DATA / etc..)
4. Remplissage d’un contenu propre au site (arborescence des rubriques, textes, logos et photos)
5. Creation du jeu de squelettes SPIP à partir des pages prototypées html (à noter qu’il faut avoir anticipé dans la maquette html le risque de collision des styles css maison et de ceux de spip) : il suffit alors de remplacer les textes des pages prototypées par des boucles et balises SPIP

A chaque étape un objectif précis, donc c’est plus simple à contrôler.

Vous pouvez disposer d’une organisation Zpip ou Z, Zcore et Thèmes plus performante pour vos travaux : Passer à Zpip (pratique).
Si le site a une architecture classiques entete+contenu central+colonne(s)+pied de page, utilisation de z-core comme framework de création des templates.
Si tu manques de temps (budget réduit, soyons clair), alors il faut utiliser un squelette par défaut (et bien le connaitre pour aller vite) alors z-dist et SPIPr sont d’excellents départs car ils sont basés sur un framework de type layoutgala très souple

SPIP permet vraiment de générer n’importe quel rendu, et d’en changer uniquement avec les CSS [2] il faut en profiter !!