Faire une version mobile de son site en 5 minutes

Vous voulez avoir une version de votre site internet adaptée aux appareils mobiles comme les iphones, blackberry ou encore les tablettes comme l’ipad ou la galaxy tab. Quand je parle de version adaptée je pense à l’ergonomie et l’expérience utilisateur qui sur ces appareils n’est pas la même que sur un ordinateur. Aujourd’hui vous avez plusieurs possibilités : faire une application iphone/ipad mais quid des autres appareils (android and co), faire une version spécifique du site pour les mobiles (avec une détection de l’appareil…) ou encore utiliser du CSS3.

Vous l’avez compris je suis plutôt parti sur le CSS3 qui me semblait plus simple et surtout beaucoup plus accessible (n’oublions pas que je ne suis pas webdesigner non plus). Donc en CSS3 il y a une fonction appelée Media Queries qui va faire la détection de la taille du navigateur et ainsi afficher une mise en forme spécifique. Cela a l’air complexe mais finalement il faut comprendre qu’en fonction de conditions vous allez dire au navigateur d’appliquer des styles particuliers.

Prenons par exemple 2803.fr, le blog a un menu, un header, un container principal, une sidebar et un footer. Et bien pour les devices mobiles j’ai décidé de ne pas afficher le menu en haut, idem pour la sidebar et le footer. Donc voici mes premières règles. Ensuite il a fallu adapter la taille des images en fonction de mes conditions de taille d’écran, deux lignes et c’est modifié. Après j’avais de truc qui gênaient l’affichage dans la version mobile, j’ai donc ajouté par endroit deux types de style « mobileon » et « mobileoff » qui me permettent de gérer ce que je veux afficher ou non.

Voici le code ajouté en bas de ma feuille de style avec le détecteur @media screen :

/* Version mobile */
@media screen and (min-width: 600px) and (max-width: 900px) {
	body{background-image:none}
	#wrapperpub {padding: 5px 10px;margin: 15px;width:auto}
	#wrapper {margin: 15px;width:auto;}
	#header{margin:0 auto;width:auto;}
	#container{width:auto;margin:0 0 0 0;-moz-border-radius-topleft:6px;border-top-left-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-moz-border-radius-bottomleft:6px;border-bottom-left-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;}
	#headertop,#access,.adsensehaut,#footer,.wp-pagenavi,.mobileoff,.sidebar,.blogtitle,.description{display:none}
	.mobileon{width:auto;}
	.navigation_mobile{display:inline}
	#logo img{height:auto;max-width:500px;width:auto;}
	#logo {margin:0 0 0 -1em}
	#content img{height:auto;max-width:500px;width:auto;margin:0;}
	#content .attachment img{height:auto;max-width:500px;width:auto;margin:0;}
	#content .attachment-thumbnail {height:auto;max-width:90px;width:auto;margin:0;}
	#content .wp-caption{max-width:500px;width:auto;}
	#content .wp-caption img{max-width:480px;width:auto;}
	#content .dp40 .postthumbimg-ds img{max-width:150px;width:auto;}
}

@media screen and (max-width: 600px),screen and (max-device-width: 480px) {
	body{background-image:none}
	#wrapperpub {padding: 5px 10px;margin: 15px;width:auto}
	#wrapper {margin: 15px;width:auto;}
	#header{margin:0 auto;width:auto;}
	#container{width:auto;margin:0 0 0 0;-moz-border-radius-topleft:6px;border-top-left-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-moz-border-radius-bottomleft:6px;border-bottom-left-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;}
	#headertop,#access,.adsensehaut,#footer,.wp-pagenavi,.mobileoff,.sidebar,.blogtitle,.description{display:none}
	.mobileon{width:auto;}
	.navigation_mobile{display:inline}
	#logo img{height:auto;max-width:300px;width:auto;}
	#logo {margin:0 0 0 -1em}
	#content img{height:auto;max-width:280px;width:auto;margin:0;}
	#content .attachment img{height:auto;max-width:280px;width:auto;margin:0;}
	#content .attachment-thumbnail {height:auto;max-width:50px;width:auto;margin:0;}
	#content .wp-caption{max-width:280px;width:auto;}
	#content .wp-caption img{max-width:260px;width:auto;}
	#content .dp40 .postthumbimg-ds img{max-width:100px;width:auto;}
}

Et ajouter ceci dans votre header :

Si vous souhaitez aussi transformer votre site en site mobile, voici une ressource en anglais pour comprendre un peu plus en détail le principe du CSS3 Media Queries.

Une idée du rendu sur blackberry torch et galaxy tab :

Pour faire un test, sous Safari ou Google Chrome redimensionnez votre fenêtre ou cliquez sur ce lien depuis votre iphone!

Publié le novembre 26, 2010 par . Cette article a été publié dans Logiciel et taggé , , , , , . Enregistrer le lien de l'article.

6 commentaires sur “Faire une version mobile de son site en 5 minutes”

Les commentaires sont fermés.