Créer un template « Responsive Web Design »

Depuis l’avènement des terminaux mobiles, des tablettes, des smartphones et les micros pc. Les sites sont de plus en plus à être conformes avec les différentes tailles d’écrans des terminaux.

Le « Responsive Web Design » est un concept, un ensemble de processus permettant d’avoir un seul template adaptable pour les différents média et écrans.

Nous vous proposons ici une démonstration d’un template minimaliste qui respecte le concept : « Responsive Web Design« .

  1. Structure en HTML5
  2. Feuille de style CSS
  3. Sélection des médias

   [stextbox id= »download » caption= »Démo »]Démo[/stextbox]

Le résultat obtenu sur un navigateur desktop : Safari, Firefox, Opera, Chrome et IE9
Page complète avec CSS

Le résultat obtenu sur un écran Iphone :

L’exemple est inspiré du tutoriel 

 

1 Comment Add Yours

Leave a comment