RESPONSIVE WEB DESIGN

Introduction

• Le Responsive Web design d'Ethan Marcotte
• Règles de colorimétrie adaptée aux terminaux
• Technologie Mobile First
• Penser grilles fluides
• Les différents terminaux
• Navigateurs PC, Smartphone, Tablettes

Les tailles d'écran d'un mobile

• Les résolutions des principaux mobiles
• Taille réelle ou taille en pixels CSS ?
• Screen-width ou device-width
• Comment définir les points de rupture ?
• Le Viewport d'Apple !
• Initial-scale maximum-scale
• La recommandation W3C @viewport CSS

HTML5 - CSS3

• La nouvelle sémantique HTML5
• Compatibilité avec IE - Hack
• Compatibilité avec les anciens navigateurs
• Les nouveaux éléments
• Les nouvelles propriétés CSS3 (ombres, transitions, coins, bordures, dégradés)

Grilles Fluides :

• Unités de mesure : % em pixel !
• Mise en page avec les colonnesLes propriétés
• CSS3 des grilles fluides : position - float - clear - width - max-width - overflow
• Optimiser la taille et la résolution des images

Média Queries CSS3

• Ajouter des conditions avec Media Queries
• Les critères pour mobiles (width, height, device-width, orientation, etc.)
• Compatibilité Media Queries IE - Hack
• Faire disparaître ou apparaître des éléments en fonction des points de bascule
• Gérer la taille de police
• Gérer les contrastes

Bibliothèques JavaScript

• Modernizr :
• Dépister les éléments non pris en charge par les navigateurs (HTML5, CSS3, MQ, Tactile …)
• Responsive avec Modernizr
• JQuery :
• Les composants UI
• JQuery responsive

Concepteur : ENI SERVICE – Diffuseur : Groupe ARKESYS