Responsive Web Design

La notion de Responsive Web Design (conception de sites web adaptatifs) regroupe différents principes et technologies mais il indique globalement qu'un site est conçu pour s'adapter aux différentes tailles d'écran et aux différents terminaux permettant d'afficher le site (navigateur, tablette, mobile, télé connectée, ...)
Source : http://fr.wikipedia.org/wiki/Responsive_Web_Design

 

Détecter un mobile en javascript

Insérez ce code dans le header de votre page pour rediriger vers un site spécifique

 

Les media queries 

Dans la page HTML

Dans le fichier CSS :

Tutoriel vidéo : comment utiliser les media queries dans vos fichiers CSS pour adapter vos designs aux différents médias qui peuvent être utilisé pour naviguer sur votre site.

 

La balise meta viewport

Comprendre le Viewport dans le Web mobile
Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de "fenêtre" réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile.
La suite sur Alsacréations...

En complément, ce tuto vidéo d'Elephorm

Liens

fleche The responsinator
Un émulateur de smartphones ou de tablettes.
En fait, cela permet juste de voir le rendu d'un site internet dans différentes configurations d'écran.
NB : iPad et iPhone acceptent les animations flash.

fleche Adaptive Images
Deliver small images to small devices
Une méthode pour retailler les images afin qu'elles s'adaptent à l'écran.

flecheThèmes WordPress responsive

fleche jQuery mobile
Une librairie, presque un framework, pour construire vos sites pour les mobiles.

fleche Tutoriel vidéo : créer une version mobile pour votre site internet en utilisant la librairie jquery mobile

fleche Responsive Nav : un menu responsive

 

Exemples de sites web qui s'adaptent à l'écran

fleche Responsive Webdesign : 30 exemples de sites web adaptables

fleche Le site du BonCoin dédié aux mobiles

Le boncoin.fr a fait le choix de 2 sites séparés, l'un pour être vu sur un ordinateur et l'autre sur mobile, accompagnés de 2 applications : l'une pour Android et l'autre pour IPhone.

 

menu tutoriaux