Dans ce tuto Dreamweaver et HTML5, de plus de 3h nous allons voir comment réaliser un site internet en responsive webdesign. Le responsive webdesign permet au site internet d'être correctement visualiser sur différents supports mobiles comme l'iPhone ou l'iPad ou tout autre type d'écran. À l'aide des media queries nous transformeront littéralement les versions "smartphones" du site internet pour adapter de la meilleure des façons l'utilisation finale de l'internaute.
Nous allons aussi nous efforcer de créer la structure du site en HTML5 valide W3C pour un projet "tourné vers l'avenir" et "dans l'air du temps".

Les points suivant seront développés :

• HTML5 (header, nav, article, section, footer, hgroup)
• CSS2 & CSS3
• Image resizing (propriété box-sizing en CSS3)
• Appliquer une image en background cover (background-size en CSS3)
• Réaliser une transition de couleur sur du texte (transition en CSS3)
• Réaliser une partie contact avec vérification de champs (placeholder, required,... en HTML5)
• Les médias queries (screen, min et max-width)
• Les polices texte en em (et non pixel)
• Les tailles en pourcentage (%)
• Créer un menu en select pour les versions smartphones (jQuery)

Ce tutoriel demande un niveau intermédiaire en HTML et CSS pour suivre sans encombres celui-ci. Les fichiers sources sont fournis.