Responsive Web Design et Web MultiPlateforme : Créer des Sites

Responsive Web Design et Web MultiPlateforme : Créer des Sites Web adaptab
Responsive Web Design et Web MultiPlateforme : Créer des Sites Web adaptables
durée : 2 jour(s)
code formation : RWD
Description :
Cette formation enseigne aux webdesigners et développeurs front end comment prendre en compte l`aspect adaptable dès les
débuts d`un projet web.
Pré-requis :
Expérience de développement en HTML/CSS (mise en page sans tableaux)
Programme :
État des lieux du Web mobile
Périphériques, OS, navigateurs, moteurs, langages
Le marché mobile et ses statistiques
Vers l'infini et au-delà (standards, HTML5, CSS3)
Un design fluide
Faire du "Responsive Webdesign"
Tailles d'écran "critiques" (points de rupture)
Les unités pixel, em et % : pour quel usage ?
Colonnes fluides : les limites ergonomiques
Minimas et maximas
Un contenu fluide
Gérer les débordements de contenus (césures et autres coupures)
Gérer les débordements de médias (images, vidéos, flash, etc.)
Les tailles d'un mobile
Les mobiles mentent !
Taille d'écran : screen-width
Taille déclarée : device-width
Taille de fenêtre virtuelle : Viewport
Forcer le Viewport en HTML et en CSS
www.egilia.com • www.egilia.be • www.egilia.ch
0 800 800 900
Adapter le design : les CSS3 Media Queries
Les médias en CSS
Ajouter des conditions avec Media Queries
Les critères pour mobiles (width, height, device-width, device-pixel-ratio, orientation, etc.)
Compatibilité Media Queries
Exemple : passer sur une colonne
Prise en compte de l'orientation
Tableaux de données responsive
Repenser son design pour les petits écrans
RWD : les techniques avancées
dompter le modèle d'affichage tabulaire en CSS (display: table)
Exploiter les multicolonnes en RWD (CSS3 columns)
Découvrir CSS3 FlexBox et ses possibilités pour le Web mobile
Un design adapté à toutes les résolutions
Adapter le Viewport
Redimensionner les éléments
Gérer les débordements
Une seule colonne !
Supprimer le superflu et les lourdeurs
Optimiser la navigation et l'afficher conditionnellement
Le "problème du Retina"
Pixels indépendants (DIP)
Pixel-ratio
Gérer les images de contenu
Gérer les images d'arrière-plan
Responsive Vs Performances
Bande passante et bonnes pratiques
Testez vos performances mobiles
Optimiser pour le Web mobile
Généralités (adapter le contenu, parallélisation
HTML (conventions, formulaires HTML5, Web Storage, Web Offline)
CSS (CSS unifiés, Media Queries, Classes conditionnelles, minification)
Vers la feuille de style CSS optimale ?
Médias (compression d'image, sprites, Data URI, caractères spéciaux, chargement conditionnel, vidéos, audio)
Requêtes et chargements superflus (fichiers, images, scripts)
Think Mobile First et chargements conditionnels
JavaScript (ou pas ? asynchrone ou différé, jQuery, CSS3 ?)