Mickaël Floc’hlay

 

Adapter un site SPIP à un terminal mobile

Le site vient d’être mis à jour et utilise un thème et un squelette ZPIP pour SPIP qui permet un rendu adapté aux dimensions de l’écran du terminal utilisé pour le consulter.

J’en parlais ici, j’ai mis à jour ce site en utilisant le triple principe de fluid grids, fluid images et media queries.

Pour cela j’ai créé un thème et un squelette ZPIP qui utilisent des outils communs à la plupart des webmasters :
- Feedburner pour le flux RSS
- les derniers tweets d’un compte Twitter pour dynamiser le contenu du site
- Google Analytics pour la mesure d’audience

Pour améliorer le graphisme du site, j’ai aussi utilisé :
- ce set de sketched icons
- cet autre set de sketched icons
- l’application iPhone ShakeItPhoto pour donner un rendu sympa aux icônes

Le même site pour consultation sur iPhone

Ainsi, avec une instance de SPIP et sans configuration Apache, le contenu du site s’adapte automatiquement aux dimensions de l’écran sur lequel il est consulté. Voici par exemple le rendu de la home page sur un iPhone en orientation portrait et en orientation paysage :

A propos de ZPIP

J’utilise donc le plugin ZPIP pour le CMS SPIP pour lequel j’ai créé un thème et un squelette. Je viens de mettre à disposition ces 2 composants, pour le moment destinés à fonctionner ensemble. Vous pouvez donc les utiliser dès maintenant pour votre site ! Pour cela, cliquer ici !

N’hésitez pas à me fournir vos remarques à son sujet sachant que j’ai déjà identifié quelques bugs que je corrigerai bientôt dans une seconde version :
- le formulaire de recherche est absent de la version mobile (ne trouvant pas de façon agréable de l’intégrer, j’ai choisi de ne pas l’afficher pour le moment, ce sera fait bientôt)
- premier espace de taille aléatoire pour les listes quand le texte est justifié
- le zoom n’est plus possible sur Safari pour iOS
- le site désactive le rendu des flux syndiqués dans SPIP

mardi 24 août 2010
Site en travaux

Site en travaux

Attention : un problème technique (serveur SQL) empêche l'accès à cette partie du site. Merci de votre compréhension.

Blog

Quels répertoires occupent de l’espace disque ?

Il est parfois nécessaire de faire de la place sur son disque dur mais il n’est jamais facile de savoir par quel bout prendre cette opération. Voilà une petite astuce pour les systèmes interprétant (...)
26/04/2011

Quatrième TP d’Information Design

Les matches de l’équipe de France sont toujours l’occasion de m’entraîner à l’information design. Je pense en être arrivé à une étape décisive. En attendant sa publication (il me reste 2, 3 trucs à régler (...)
23/03/2011

What fonts for iOS ?

Fonts are a major element of webdesign. And when you talk about webdesign nowadays, you can’t just skip mobile devices. The problem is that iOS only comes with a limited numbers of fonts, and (...)
23/02/2011
Site under construction

Site under construction

Warning: a technical problem (SQL server) prevents access to this part of the site. Thank you for your understanding.

Morning Coffee

Horrible Jeu sur iOS

ou comment défier la loi du marché avec des in-app products médiocres à 100$. iPhone Garbage: Super Monster Bros by Adventure Time Pocket Free Games – YouTube.
30/04/2013

Mon coeur de Brestois est triste

Mon coeur de Brestois est triste, mais il faut aussi voir les choses en face : Brest est la plus faible équipe de L1 et sa relégation est on ne peut plus logique. via PIERROT FOOTBALL BLOG – (...)
29/04/2013

La différence entre James et Durant

J. A. Andade comparant James et Durant : James est une superstar à plein temps. Durant, un basketteur à plein temp (Via L’Equipe.fr Actu Basket)
12/04/2013

Copé et la transparence du patrimoine selon James

Jour 340: (Via Je veux travailler pour le canard enchaîné)
11/04/2013

Quelques principes de design par les développeurs de Polar

4 Surprising App-Design Principles, From The Instagram Of Quick Quizzes | Co.Design: business + innovation + design: Analyse de 4 principes de design de l’application Polar : - Design For (...)
09/04/2013

Tweets