Nouvelles exigences – Nouvelle Techno. Une définition!! IL S’AGIT D’UNE TECHNIQUE QUI PERMET DE CRÉER UN SITE QUI SOIT COMPATIBLE AVEC TOUS LES TERMINAUX,

Présentation au sujet: "Nouvelles exigences – Nouvelle Techno. Une définition!! IL S’AGIT D’UNE TECHNIQUE QUI PERMET DE CRÉER UN SITE QUI SOIT COMPATIBLE AVEC TOUS LES TERMINAUX,"— Transcription de la présentation:

1 Nouvelles exigences – Nouvelle Techno

2 Une définition!! IL S’AGIT D’UNE TECHNIQUE QUI PERMET DE CRÉER UN SITE QUI SOIT COMPATIBLE AVEC TOUS LES TERMINAUX, UN SITE FLUIDE 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.

3 Contexte LES USAGES DIGITAUX EVOLUENT… …LES SUPPORTS SE MULTIPLIENT

4 Contexte LES SITES DOIVENT S’ADAPTER

5 Enjeux … Si nous ne tenons pas compte des résolutions et tailles d’écran

6 Enjeux …Si nous ne tenons pas compte des supports

7 Démonstration

8

9

10

11

12 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 Queries Image Flexible Grille Fluide

13 Comment est-ce que cela fonctionne?

14

15 Observations pratiques  Réflexion préparatoire  Donner des priorités  Temps de chargement  Capacité technologique

16 Observations pratiques Regardons ce que cela donne sur notre téléphone! Le remplissa ge sur un PC

17 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)www.tigexblog.fr 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

18 Merci pour votre attention!

19 Webographie – Pour en savoir plus…  http://designspartan.com/tutoriels/quels-choix-de-navigation-en-responsive- design/ http://designspartan.com/tutoriels/quels-choix-de-navigation-en-responsive- design/  http://www.slideshare.net/livefront/responsive-design-7877412 http://www.slideshare.net/livefront/responsive-design-7877412  http://www.slideshare.net/yiibu/pragmatic-responsive-design http://www.slideshare.net/yiibu/pragmatic-responsive-design  http://www.slideshare.net/bytte/responsive-web-design-10389263 http://www.slideshare.net/bytte/responsive-web-design-10389263  http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually- begins-on-the-server http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually- begins-on-the-server  http://www.slideshare.net/agencedagobert/le-responsive-design-par- dagobert http://www.slideshare.net/agencedagobert/le-responsive-design-par- dagobert  http://www.slideshare.net/rudyrigot/responsive-web-design-but-for-real http://www.slideshare.net/rudyrigot/responsive-web-design-but-for-real