Introduction au Responsive Web Design

• Qu’est-ce que le Responsive Web Design ?
• Les navigateurs mobiles
• Autres considérations sur le web mobile
• Techniques de conception adaptée
• Éléments de Responsive Design
• Exemple de conception adaptée
• Alternatives à Responsive Design

CSS 3 et Responsive Web Design

• Amélioration progressive
• Mise en œuvre de l’amélioration progressive
• Types de support
• Style CSS « Reset »
• Styles conditionnels pour Internet Explorer
• Qu’est-ce que la fenêtre d’affichage ?
• Adaptation du Viewport
• Spécification du Viewport
• Les médias Queries
• Caractéristiques des médias utilisés dans les médias Queries
• La combinaison des techniques de conception adaptée
• Test Responsive Design

Atelier et cas pratique

Mise en page Responsive Web

• Les types de mise en page
• Les Layouts Responsive
• Les patterns les plus courant
• Le pattern de layout « Mostly Fluid »
• Le pattern de layout « Column Drop »
• Le pattern « Layout Shifter »
• D’autres techniques de layout
• La propriété CSS Float
• La combinaison de styles CSS
• Exemple de la mise en page fluide
• La technique de mise en page fluide
• Unités Taille de la police
• Pixel-Sized vs Em-Sized
• Les relations de l’unité Taille de la police
• Pixels à Em Formule de Conversion
• Autres considérations
• Regard sur l’avenir

Images réactives

• Images réactives
• Considérations sur les performances
• Images Shrinking
• Techniques traditionnelles de traitement des images
• Médias Queries ne pas toujours aider à améliorer les performances
• Avoir un pixel « fluide »
• Les fenêtres de l’appareil
• Pixels CSS
• La puissance de la simplicité
• Sencha.io Src Images Service Cloud
• Sencha.io Src Schéma
• Comment ça marche
• API Sencha.io Src
• Sencha.io Src Détails API
• Sencha.io Src API Détails suite
• Des exemples de l’API Sencha.io Src
• Savoir utiliser un service de manipulation d’image en cloud
• L’élément d’image
• L’attribut srcset
• Plus d’informations sur l’attribut srcset
• Des exemples de l’attribut srcset
• Qu’est-ce que le Picturefill?
• L’utilisation du Picturefill

Atelier et cas pratique

Boostrap, vue d’ensemble

• Qu’est-ce que Bootstrap
• Mots-clés de bower.js
• L’Histoire de Bootstrap
• Le Développement Web Responsive
• Mise en page d’une Grille Responsive
• Composants GUI réutilisables
• JavaScript
• La Philosophie Mobile
• Pourquoi le RWD
• Une vue Responsive
• Obtenir Bootstrap
• Bootstrap Content Delivery Network
• Autres options de configuration
• Bootstrap fichiers Core

Utilisation de Bootstrap

• Les fichiers CSS Bootstrap
• Les fichiers JavaScript Bootstrap
• Viewport Meta Tags
• Exemples
• Layouts
• La grille Bootstrap
• Explication de la grille
• La navigation
• Navigation (bureau)
• Navigation (Mobile)
• Source de navigation
• Éléments de navigation et Styles

Bootstrap, sujets divers

• Composants bootstrap
• Composants Bootstrap pour les Pages Web
• L’intégration de composants Bootstrap avec jQuery
• Identification de la version requise de jQuery
• Télécharger le Bootstrap Minimifié
• Utilisation de Customizer
• Le Customizer page Fragment
• Compilation et chargement personnalisé Bootstrap
• Personnalisation des composants Bootstrap

Atelier et cas pratique

Autres techniques

• Sprites
• Police d’icônes
• Code Emoji
• Graphiques vectoriels évolutifs (SVG)
• CSS3

Solutions côté serveur

• Images adaptatives
• Images réactives
• Solutions serveur tiers

Atelier Cas pratique