– Types de terminaux et leur résolution.

– Périphériques, OS, navigateurs.

– Le marché mobile et parts de marché.

– Les standards du web
Travaux pratiques
Détection du type de terminal en PHP JavaScript.

– Une conception Mobile First

– Problématiques d’affichage

– Prendre en compte l’orientation et le tactile

– Les outils de conception

– Les plans et outils de tes

-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.

– Différences avec un positionnement classique

– Les blocs

– Les problèmes de débordements de contenus ou de médias

– Les points de rupture

– Gérer les écrans Retina

– Présentation des Framework de grilles responsives (Boostrap,
Foundation, etc.)

Travaux pratiques

Création d’une ergonomie basée sur une grille flexible.

– Images de fond, adaptation HTML5, adaptation de la qualité graphique selon le terminal.

– Rupture texte, multicolonnes. Césure et découpe.

– Format des polices, taille. – Marges et espaces flexibles.

– Menus adaptables, carrousel adaptatif.

– Organisation des éléments en fonction d’une grille.
Travaux pratiques
Utilisation des composants graphiques

– Détecter les ressources avec « Modernizr ».

– Librairies de substitution

– Frameworks CSS 960 grid, HTML5 BoilerPlate, Bootstrap, Foundation, Skeleton, 320…
Travaux pratiques
Utilisation de frameworks.

– Outils de mesure

– Rapidité, importance majeure pour Google

– Optimisation des CSS, des fichiers JavaScript

– La minification (minify.js)

– Les images

– Les sprites CSS

– Côté serveur, bonnes pratiques
Travaux pratiques
Audit de pages Web, corrections conceptuelles et techniques.