RESPONSIVE DESIGNTWITTER BOOSTRAPJean-Noël Aubry@jnaubry

Concepts=> Responsive Design

=> Frameworks

=> Open Source

Etat actuel du web

Le responsive design, c’est quoi ?

https://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html

Le Responsive Web design est une approche de conception Web qui vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur quelle que soit sa gamme d'appareil (téléphones mobiles, tablettes, liseuses, moniteurs d'ordinateur de bureau).

Eléments du Responsive Web Design (RWD)

• Grille fluide• Images et médias flexibles• CSS3 Media Queries• Adaptations conditionnelles basées sur

Javascript ou jQuery

Les grilles

Les grilles

Les grilles

Fonctionnement du système de grille

12 colonnes

Images redimensionnablesimg {max-width: 100%;height: auto;}

Media Queries

• Spécification CSS3 Media Queries qui définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. 

• On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS.

• Devenu un standard en Juin 2012

Résolution MédiaMédia Taille du layout

Smartphones 480px et en dessous

Tablettes en mode portrait 480px à 768px

Tablettes en mode paysage 768px à 940px

Défaut 940px et au dessus

Ecrans larges 1210px et au dessus

Framework• Pré-requis :• Système de grille fluide

• Redimensionnable

• Qui offre plus qu’une grille (styles prédéfinis pour la typographie, les tableaux, les boutons, les barres de navigation, les éléments de formulaire, etc.)

Framework• Documentation très fournie

• Maintenu régulièrement par la communauté et les créateurs du framework

• Open Source (gratuit)

Twitter Bootstrap• Framework libre et gratuit pour le design de sites ou

d’applications web

• Basé sur HTML5, CSS et Javascript

• Supporte tous les principaux navigateurs

• 1ère release sur GitHub en Août 2011

Twitter Bootstrap• Créée par :

Twitter Bootstrap : Pourquoi ?• Raison #1 : nombreuses fonctionnalités

Twitter Bootstrap : Pourquoi ?• Raison #2 : support de nombreux navigateurs

Twitter Bootstrap : Pourquoi ?• Raison #3 : jeu d’icônes Glyph

Twitter Bootstrap : Pourquoi ?• Raison #4 : système de grille

• Système de grille 960 http://960.gs/• Blue Print CSS http://www.blueprintcss.org/ • Système Golden Grid http://goldengridsystem.com/

Twitter Bootstrap : Pourquoi ?• Raison #5 : Les composants

Les boutons

Les onglets

La navigation (breadcrumb)

La pagination

Les notifications

La barre de progression

Twitter Bootstrap : Pourquoi ?• Raison #6 : Javascript/jQuery

Twitter Bootstrap : Pourquoi ?• Raison #7 : Personnalisation

Twitter Bootstrap : Comment ?• Télécharger Bootstrap et un éditeur de texte (Sublime, Notepad++)

• Installer l’éditeur de texte

• Extraire les fichiers Bootstrap dans un répertoire de votre projet

• Créer un fichier exemple et intégrer le framework :

Ressources

• http://bootswatch.com/

• https://startbootstrap.com/

• http://bootsnipp.com/

• http://bootstrapbay.com/

Merci !

• Jean-Noël Aubry

• @jnaubry

• https://www.linkedin.com/in/jnaubry