Make it Responsive !

These slides are not completed yet;
I may modify/add some at any time.

Responsive Web Design ?

Manière de concevoir une page web pour que son affichage s'adapte à différentes tailles d'écrans

Fluidité et flexibilité de l'affichage

Mobile friendly: expérience utilisateur

Recommandation de Google (SEO)

Réduction des coûts de développements

Principalement par l'utilisation du CSS pour définir le comportement des éléments de vos pages web selon le type de support d'affichage.

Flexible Layout

Media Query

Flexible Media

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Permet d'ajuster les dimensions et l'échelle de la page à la largeur de l'appareil qui l'affiche.

User-friendly !

@media screen and (min-width: 600px) {

    /*
     * CSS : largeur écran >= 600 px
     */    
}

Les requêtes média sont de simples filtres qui peuvent être appliqués à des styles CSS.

Utilisez des requêtes média CSS pour appliquer des styles différents aux grands et aux petits écrans.

N'utilisez pas d'éléments de largeur fixe de grande taille, mais plutôt de bloc de largeur relative.