Le Responsive Design
Nouvelles exigences – Nouvelle Techno
Une définition!!
IL S’AGIT D’UNE TECHNIQUE QUI PERMET DE CRÉER UN SITEQUI SOIT COMPATIBLE AVEC TOUS LES TERMINAUX, UN SITEFLUIDE POUR UNE EXPÉRIENCE UNIQUE SUR DIFFÉRENTS
SUPPORTS.
LE PRINCIPE DU RESPONSIVE DESIGN EST DE TENIR COMPTE EN
PRIORITÉ DE L’EXPÉRIENCE UTILISATEUR.
Contexte
LES USAGES DIGITAUX EVOLUENT…
…LES SUPPORTS SE MULTIPLIENT
Contexte
LES SITES DOIVENT S’ADAPTER
Enjeux… Si nous ne tenons pas compte des résolutions et tailles d’écran
Enjeux…Si nous ne tenons pas compte des supports
Démonstration
Démonstration
Démonstration
Démonstration
Comment est-ce que cela fonctionne?
Les Responsive Design est composé de 3 éléments indispensables
- Une grille flexible. Cible/Contexte = Résultat- Des images flexibles (ou plus précisément des image
adaptables dans un contexte flexible)- Media Queries (interroger le média sur son identité. Ex:
iPad, PC…)
Responsive design
Media Querie
s
Image Flexibl
e
Grille Fluide
Comment est-ce que cela fonctionne?
Comment est-ce que cela fonctionne?
Observations pratiques Réflexion préparatoire
Donner des priorités
Temps de chargement
Capacité technologique
Observations pratiques
Regardons ceque cela
donne sur notre
téléphone!
Le remplissage sur un
PC
Observations pratiques
1. Une mini-émission « Bienvenue chez les P’tits 2. Un plan presse : tout au long de l’année, les lectrices de Magazine
Parents pourront retrouver des astuces et l’actualité de TIGEX dans leur magazine préféré.
3. Un blog www.tigexblog.fr (Conseils et astuces des parents bloggeurs)4. Un jeu concours « Mon Choix Tigex ».
=> Une campagne Cross-Media bien menée, la marque a su offrir du divertissement et de l’information…
TIGEX cherche à séduire de nouveaux parents
Un partenariat
avec « Magazine Parents »
Une campagne
Cross-Media
Dans un plan média
Merci pour votre attention!
Webographie – Pour en savoir plus… http://designspartan.com/tutoriels/quels-choix-de-navigation
-en-responsive-design/ http://www.slideshare.net/livefront/responsive-design-78774
12 http://www.slideshare.net/yiibu/pragmatic-responsive-design http://www.slideshare.net/bytte/responsive-web-design-1038
9263 http://www.slideshare.net/yiibu/adaptation-why-responsive-d
esign-actually-begins-on-the-server http://www.slideshare.net/agencedagobert/le-responsive-des
ign-par-dagobert http://www.slideshare.net/rudyrigot/responsive-web-design-
but-for-real