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…)

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érences 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)

Principe de grille flexible, fluide

 Conception classique vs 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
 Principes des box, layout avec CSS3.

Cas Pratique

 Réalisation d’une grille css fluide adaptative

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éer des images et des vidéos adaptées

Framework et librairies responsive

 Détecter les ressources avec « Modernizr »
 Librairies de substitution (less, css3pie…)
 Frameworks CSS 960 grid, HTML5 Boiler Plate, Bootstrap, Foundation, Skeleton,…

Optimisation et performance

 Mesurer la performance de chargement, optimisation de bande passante
 Répartition Client/Serveur
 Optimisation des ressources graphiques
 Gestion du cache

Présentation de JQuery

 Qu’est-ce que jQuery ? Pourquoi jQuery ?
 Rapport au Javascript simple

Notions de base Javascript

 Les variables
 Les fonctions
 Les boucles
 La concaténation

Les sélecteurs

 Présentation des sélecteurs jQuery
 Rôle des sélecteurs. Les différents types de sélecteurs
 Les pseudo-classes. Les combinateurs

Accès à l’arbre DOM

 Rappel sur DOM (Document Object Model)
 Accès direct aux éléments d’une page
 Manipulation de DOM avec jQuery
 Gestion des classes CSS (addClass(), removeClass() …
 Insertion d’éléments dans l’arbre DOM

La gestion des événements

 La notion d’événements en Javascript
 Gestion des événements avec la méthode bind
 Transmission de paramètres avec la méthode bind

Cas Pratique

 Réalisation d’un site web de 3 à 5 pages en responsive web design avec html 5, css3 et jQuery