1 / 19

Le Responsive Design

Le Responsive Design. 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, UN SITE FLUIDE POUR UNE EXPÉRIENCE UNIQUE SUR DIFFÉRENTS SUPPORTS .

hateya
Download Presentation

Le Responsive Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Le Responsive Design 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 FLUIDEPOUR 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. Démonstration

  9. Démonstration

  10. Démonstration

  11. 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…)

  12. Comment est-ce que cela fonctionne?

  13. Comment est-ce que cela fonctionne?

  14. Observations pratiques • Réflexion préparatoire • Donner des priorités • Temps de chargement • Capacité technologique

  15. Observations pratiques Regardons ce que cela donne sur notre téléphone! Le remplissage sur un PC

  16. Observations pratiques Dans un plan média • Une mini-émission « Bienvenue chez les P’tits • Unplan 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é. • Un blogwww.tigexblog.fr  (Conseils et astuces des parents bloggeurs) • 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

  17. Merci pour votre attention!

  18. Webographie – Pour en savoir plus… • http://designspartan.com/tutoriels/quels-choix-de-navigation-en-responsive-design/ • http://www.slideshare.net/livefront/responsive-design-7877412 • http://www.slideshare.net/yiibu/pragmatic-responsive-design • 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/agencedagobert/le-responsive-design-par-dagobert • http://www.slideshare.net/rudyrigot/responsive-web-design-but-for-real

More Related