Développement, test & web - Responsive Design, créer des interfaces Web adaptables
Un parcours pratique consacré à Responsive Design, créer des interfaces Web adaptables. Les participants structurent leurs acquis autour de trois priorités : Les terminaux, Introduction au Responsive Design, MediaQueries.
Programme détaillé
Les terminaux
- Types de terminaux (mobile, tablette, tv, liseuse...) et leur résolution.
- Périphériques, OS, navigateurs.
- Le marché mobile et parts de marché.
- Standards HTML, HTML5, CSS3 (API, sélecteurs...).
Travaux pratiques
- Détection du type de terminal en PHP JavaScript.
Introduction au Responsive Design
- Qu'est-ce que le Responsive Design ?
- Concept de Marcotte, Mobile First.
- Séparation contenu/contenant.
- Approche portrait/paysage, tactile, impact sur l'ergonomie.
- Créer un plan de tests.
- Différence entre design Web et design Mobile.
MediaQueries
- Adaptation des CSS aux caractéristiques du terminal.
- Règles conditionnelles (orientation, device-width...).
- JavaScript et les anciens navigateurs.
- Réglage complémentaire de rendu visuel (Viewport).
- Médias queries orientées appareils.
Travaux pratiques
- Construction de CSS selon les modes portrait/paysage, résolution du terminal.
Principe de grille, layout
- Conception classique versus conception selon une grille.
- Le positionnement par grille.
- Unités de mesure (% em px, vh, dvh), ecrans haute définition mode Retina.
- Eviter les débordements. Points de rupture.
- Organiser l’information sur la page.
- Répartition du contenu dans les blocs.
Travaux pratiques
- Construire une ergonomie basée sur une grille flexible.
Composants graphiques
- Images flexibles : images de fond, adaptation HTML5, adaptation de la qualité graphique selon le terminal.
- Contenu responsive : rupture texte, multicolonnes. Césure et découpe.
- Polices fluides : format des polices, taille.
- Marges et espaces flexibles.
- Menus, Carrousel, Tableaux : comment les afficher sur un petit écran ?
- Organisation des éléments en fonction d'une grille.
- Créer des images et des vidéos adaptées.
Travaux pratiques
- Mise en oeuvre de solutions.
Framework et librairies responsive
- Détecter les ressources avec "Modernizr".
- La syntaxe de templates.
- Le framework Bootstrap.
- La bibliothèque de composants Material-UI.
- Autres Frameworks CSS 960 grid, Foundation, Semantic UI, Skeleton, UIKit...
Travaux pratiques
- Utilisation de frameworks.
Optimisation et performance
- Mesurer la performance de chargement, optimisation de bande passante.
- Répartition Client/Serveur.
- Optimisation des ressources graphiques.
- Gestion du cache.
Travaux pratiques
- Audit de pages Web, corrections conceptuelles et techniques.
Parlez-nous de votre projet
Nos bureaux
- Exceev Consulting
61 Rue de Lyon
75012, Paris, France - Exceev Technology
332 Bd Brahim Roudani
20330, Casablanca, Maroc