ORSYS formation
NOUS CONTACTER - +33 (0)1 49 07 73 73
NOUS CONTACTER - 📞 +33 (0)1 49 07 73 73    espace pro ESPACE PRO     inscription formation orsys S'INSCRIRE     drapeau francais   drapeau anglais

Nos formations :

Toutes nos formations Développement Front-End

Formation Responsive Design, créer des interfaces Web adaptables

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.

Framework et librairies responsive

  • Détecter les ressources avec "Modernizr".
  • Librairies de substitution (less, css3pie...).
  • Frameworks CSS 960 grid, HTML5 BoilerPlate, Bootstrap, Foundation, Skeleton, 320...

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.

Cycles certifiants
Participants / Prérequis

» Participants

Développeurs, designers, chefs de projets et Webmasters.

» Prérequis

Connaissances de base en HTML et CSS.
Intra / sur-mesure

Demande de devis intra-entreprise
(réponse sous 48h)

Vos coordonnées

En cochant cette case, j’atteste avoir lu et accepté les conditions liées à l’usage de mes données dans le cadre de la réglementation sur la protection des données à caractère personnel (RGPD).
Vous pouvez à tout moment modifier l’usage de vos données et exercer vos droits en envoyant un email à l’adresse rgpd@orsys.fr
En cochant cette case, j’accepte de recevoir les communications à vocation commerciale et promotionnelle de la part d’ORSYS Formation*
Vous pouvez à tout moment vous désinscrire en utilisant le lien de désabonnement inclus dans nos communications.
* Les participants inscrits à nos sessions de formation sont également susceptibles de recevoir nos communications avec la possibilité de se désabonner à tout moment.

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.
En poursuivant votre navigation, vous acceptez l’utilisation de cookies nous permettant de vous proposer des offres correspondant à vos centres d’intérêt.
En savoir plus sur l’usage des cookies…   ✖ Fermer
linkedin orsys
twitter orsys
it! orsys
instagram orsys
pinterest orsys
facebook orsys
youtube orsys
LA LETTRE DE
LA TRANSFORMATION DIGITALE
Recevez la newsletter