À peine quelques semaines après la sortie du .com de CreativeJuiz, la pression de la navigation sur mobile m’a poussé à faire des efforts de compatibilité pour rendre ce site consultable sur les smartphones.
Il s’agit d’une humble version beta que je vous invite à tester sur vos plateformes 🙂

Le site n’étant initialement pas prévu pour passer sur mobile, le défi me semblait intéressant en passant uniquement par une déclinaison des styles via les media queries de CSS3.

Il n’était pas question pour moi de retravailler la structure complète du site. Une telle restructuration aurait été bien trop chronophage aussi bien dans sa réalisation que dans sa maintenance.

N’ayant pas utilisé ni de CMS ni de contenu dynamique (hormis quelques includes syndicaux), l’idée était de n’avoir qu’un site à maintenir.

Bref, pour moi il n’y avait pas d’autre solution que de passer par les media queries, puis au passage y injecter deux ou trois meta propriétaires Apple pour les fanatiques du Touch !

Aperçu du rendu

Bien, pour commencer voici quelques captures d’écran sorties de mon iPhone 3GS (iOS 4.2.1) sur le navigateur Safari installé par défaut sur iPhone (et qui se débrouille plutôt bien !)

Trois visuels de la version mobile

L’aperçu est visible directement depuis votre navigateur (Firefox, safari, chrome, enfin, un récent quoi) en redimensionnant simplement la largeur de la fenêtre.

La méthode

Concrètement, on ne navigue pas sur internet sur un mobile comme on navigue sur un bureau. Le contenu doit être ciblé, court, et le design doit être plus léger.
Et il ne suffit pas de faire un site en largeur fixe ! (320px… par exemple)

Dès le départ je me suis demandé si un portfolio est une chose qu’on peut être amené à visualiser sur mobile.
Ma première réponse a été « non ». Cela me semblait trop limité visuellement (puis pour présenter des travaux sur Flash ce n’est pas évident…)

Puis je me suis finalement dit qu’un portfolio peut aussi présenter succinctement des travaux avec un contenu ciblé et représentatif.
C’est dans ce sens que la v2 – après épuration de la v1.5.2 (ouais déjà tout ces chiffres) – présente les choses.
L’accueil ne présente qu’une simple navigation, les informations qui me semblait trop redondantes ont été supprimées. Je pense qu’il en resterait encore à supprimer, mais pour le moment la différence est assez flagrante. Le tri prochain sera fait en fonction des retours des utilisateurs (point important à ne jamais oublier).

De la version « bureau » à la version « mobile », le site ne change en rien sur sa structure, pas de modification du DOM grâce à PHP ou autre tour de magie en JavaScript.

La CSS me permet de :

  • cibler le mode d’affichage
  • adapter le site en largeur (ainsi que la taille des fontes)
  • adapter la navigation (suppression de liens redondants)
  • adaptation de l’ergonomie (reordonnement des blocs de contenu)

Pour bien faire les choses j’aurais dû m’attarder un peu sur le JavaScript utilisé sur la version bureau pour en désactiver des morceaux sur mobile, mais celui-ci n’est pas réellement dérangeant dans l’utilisation du site.

HTML5, bien pratique !

Petite parenthèse sur le DOCTYPE utilisé pour ce site. HTML5 n’est pour le moment qu’à l’état de brouillon (dans son ensemble) mais promet d’offrir énormément dans l’évolution du Web.
Simple petit exemple sur ce formulaire, l’un des input est d’un type"email".
Comme vous pouvez le voir sur l’image de gauche, ce type de champs permet de faire apparaitre le clavier de type email sur l’iPhone. Tout comme un champs de type tel fait apparaitre le clavier téléphonique, ou le champs de type numeric le clavier numérique.
Quelques bonnes info sur cet article : 24ways – Have a field day il y a tellement de bonnes choses à venir :p

Le petite icône qui va bien…

Apple permet de mettre en lien sur vos pages de « bureau » de terminaux mobiles tels que l’iPhone ou l’Ipad les pages Web que vous appréciez.
Pour se faire il vous suffit de placer ce code entre les balises <head> :

<link rel="apple-touch-icon" href="/images/icon_apple.png">

L’image doit être au format carré avec un minimum de 57px de côté si ma mémoire ne me fait pas défaut.
La machine gère ensuite les angles arrondis, le reflet et l’ombre portée comme une grande 🙂
Démonstration avec une image originale de 129px de côté :

Je reste à votre écoute pour des tests sur vos mobiles, des screenshots ou des avis plus généraux.

Merci pour votre lecture !

Liens utiles

Partager la publication "CreativeJuiz.com, le site Web sur mobile"

  • LinkedIn
  • Twitter
  • WhatsApp
  • Pocket
  • Reddit