S'INSCRIRE
Nos formations :
> formation Technologies numériques > formation Technologies Web > formation Développement Front-End > formation Responsive Design, créer des interfaces Web adaptables
Toutes nos formations Développement Front-End
Formation Responsive Design, créer des interfaces Web adaptables
Vidéo de présentation
Stage pratique
Best
Durée : 2 jours
Réf : RPO
Prix 2020 :
1490 €
H.T.
Pauses et déjeuners offerts
- Programme
- Cycles certifiants
- Participants / Prérequis
- Intra / sur-mesure
Programme
Les concepteurs de sites Web doivent dorénavant revoir leur approche pour que leurs interfaces s'adaptent à la diversité des terminaux. Cette formation apporte des réponses pratiques aux problématiques de conception ergonomique et de gestion des contraintes liées au Responsive Design.
Objectifs pédagogiques
- Concevoir et développer des interfaces Web pour tous types de terminaux
- Adopter une approche de conception ergonomique Mobile First
- Découvrir les composants graphiques, les frameworks et les librairies Responsives
- Optimiser les performances d'affichage des pages sur mobiles et ordinateurs
PROGRAMME
DE FORMATION
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.
Démarche de conception
- 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).
Travaux pratiques
Construction de CSS selon les modes portrait/paysage, résolution du terminal.
Principe de grille flexible, fluide
- Conception classique versus conception selon une grille.
- Importance des blocs, approche contenu/contenant.
- Unités de mesure (% em px), mode Retina.
- Eviter les débordements. Points de rupture.
- Principe des box, layout avec CSS3.
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 adaptables, carrousel adaptatif.
- Création de layout avec flexbox (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.
Cycles certifiants
-
Cycle certifiant Développeur d'applications Front-End
Réf : KFE - 16 jours
Participants / Prérequis
» Participants
Développeurs, designers, chefs de projets et Webmasters.
» Prérequis
Connaissances de base en HTML et CSS.
Intra / sur-mesure
Pour vous inscrire
Cliquez sur la ville, puis sur la date de votre choix.
[-]
PARIS
Horaires
Les cours ont lieu de 9h à 12h30 et de 14h à 17h30.
Les participants sont accueillis à partir de 8h45.
Pour les stages pratiques de 4 ou 5 jours, les sessions se terminent à 15h30 le dernier jour.
Thème associé
