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