• Save
Introduction au Responsive web design
Upcoming SlideShare
Loading in...5
×
 

Introduction au Responsive web design

on

  • 37,763 views

Réponse concrète à la prolifération des formats d’écran, le responsive design est une approche radicalement novatrice dans la distribution de contenus et services en ligne. Dagobert vous en ...

Réponse concrète à la prolifération des formats d’écran, le responsive design est une approche radicalement novatrice dans la distribution de contenus et services en ligne. Dagobert vous en livre quelques clefs de compréhension.

Statistics

Views

Total Views
37,763
Views on SlideShare
20,107
Embed Views
17,656

Actions

Likes
132
Downloads
1
Comments
4

61 Embeds 17,656

http://www.influencia.net 10311
http://users-experiential.net 2808
http://blog.kinoa.com 765
http://www.levidepoches.fr 563
http://www.phileasweb.fr 549
http://notrelienquotidien.com 442
http://www.fittsize-me.com 365
http://www.lesbichettes.fr 344
http://www.xtense.be 224
http://nova-communication.com 197
http://www.extranet-cibles-strategies.com 178
http://www.scoop.it 176
https://us4.admin.mailchimp.com 81
http://www.adsaddict.fr 77
http://blog.websourcing.fr 67
http://www.webdesign2803.fr 66
http://www.levidepoches.blogs.com 66
http://www.entreprise-marketing.fr 52
http://feeds2.feedburner.com 35
http://feeds.feedburner.com 34
http://levidepoches.blogs.com 28
http://www.stonepower.fr 26
http://digitalshowcase.posterous.com 25
http://bloggm.posterous.com 18
http://phileasweb.fr 16
http://www.netvibes.com 14
http://us-w1.rockmelt.com 13
http://www.sebastienherault.com 13
http://a0.twimg.com 10
http://brchange.wordpress.com 9
http://www.twylah.com 8
http://t.co 7
http://www.linkedin.com 6
http://www.paperblog.fr 6
http://meltwaternews.com 6
http://pinterest.com 6
http://jl-integrateur-web.com 5
http://www.pinterest.com 4
http://www.newsblur.com 4
http://fittsize-me.info 3
http://pigeindexer2 3
http://translate.googleusercontent.com 3
http://ladyintheweb.blogspot.fr 2
https://www.rebelmouse.com 2
http://toolbox.intranet 2
http://pigeindexeroff 2
http://theoldreader.com 1
https://ca.linkedin.com 1
http://c2-studios.fr 1
http://www.pearltrees.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction au Responsive web design Introduction au Responsive web design Presentation Transcript

  • INTRODUCTION AURESP ONS IV EWEB DE SI GN DEC 2012 FÉVRIER 2012
  • LE USAGES DIGITAUX ÉVOLUENT…
  • … LES SUPPORTS SE MULTIPLIENT
  • LES SITES DOIVENT S’ADAPTER … AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS2,73% 2,79% 4,64% 4,96% 5,88% 8,29% 8,47% 12,23% 12,4% 15,7% Libstat.com, aout 2011
  • LES SITES DOIVENT S’ADAPTER… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS… AUX ORIENTATIONS
  • LES SITES DOIVENT S’ADAPTER… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS… AUX ORIENTATIONS… AUX SUPPORTS
  • LES SITES DOIVENT S’ADAPTER… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS… AUX ORIENTATIONS… AUX SUPPORTS… À LA PERFORMANCE
  • SI L’ON NE FAIT RIEN… ON ARRIVE A CA… DES BORDS SUR LES GRANDES RESOLUTIONS … DES SITES ILLISIBLES SUR LES PETITES …OBLIGATION DE RESOLUTIONS NAVIGUER AVEC LE ZOOM
  • IL FAUT DONC REPENSER LE WEBDESIGN
  • …POUR ÊTRE COMPATIBLE AVECPLUSIEURS TERMINAUX
  • EST-ON OBLIGÉ D’EN ARRIVER À ÇA ? 1 SITE SMARTPHONE 1 SITE IPHONE 1 SITE IPAD 1 SITE ANDROID ANDROID ET/OU ET/OU ET/OU ET/OU1 SITE WEB GRANDE 1 SITE WEB PETITE 1 APPLICATION 1 APPLICATION 1 APPLICATION APPLICATIONRESOLUTION RESOLUTION ANDROID IPHONE IPAD ANDROID + + + + +
  • PLUTÔT QUE DE CONCEVOIR DESSYSTÈMES DÉCONNECTÉS LES UNS DESAUTRES EN AUGMENTANT LE NOMBREDE DISPOSITIFS INTERNET, CES SYSTÈMESPEUVENT ÊTRE CONSIDÉRÉS COMME LESFACETTES D’UNE EXPÉRIENCECOMMUNE GRÂCE AURESPONSIVE DESIGN
  • LE RESPONSIVE DESIGN
  • LE RESPONSIVE DESIGNC’EST QUOI
  • C’EST QUOI? 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.
  • DES EXEMPLES ?
  • THE BOSTON GLOBECE SITE EST FLUIDE… POSTE DE BUREAU (1024)
  • THE BOSTON GLOBE… IL PEUT S’ADAPTER FACILEMENT SUR TABLETTE TABLETTE POSTE DE BUREAU (768PX) (1024)
  • THE BOSTON GLOBE… SUR SMARTPHONESMARTPHONE TABLETTE POSTE DE BUREAU(320PX) (768PX) (1024)
  • THE BOSTON GLOBE… ET SUR UN ÉCRAN À PLUS HAUTE RÉSOLUTIONSMARTPHONE TABLETTE POSTE DE BUREAU POSTE DE BUREAU(320PX) (768PX) (1024) (1600PX)
  • UN AUTRE EXEMPLE : FOODSENSESMARTPHONE TABLETTE NETBOOK POSTE DE BUREAU(320PX) (768PX) (1024) (1600PX)
  • OU ENCORE : JON WHITESMARTPHONE TABLETTE NETBOOK POSTE DE BUREAU(320PX) (768PX) (1024) (1600PX)
  • MAIS COMMENT ÇA MARCHE ?
  • COMMENT ÇA MARCHE ? PARLONS TECHNIQUE… 3 éléments indispensables GRILLES FLUIDES IMAGES FLEXIBLES MEDIA QUERIES Autrement dit, pour rendre un site adaptable il faut •  transformer les largeurs fixes en largeurs variables, •  gérer la taille des éléments, comme les images par exemple •  et interroger le média sur son identité (iPad, PC…) pour s’adapter à la résolution et aux usages du support.
  • LE RESPONSIVE DESIGN … … Solution MIRACLE
  • LES CLEFS POUR CHOISIRLE MEILLEUR RAPPORT ACCESSIBILITÉ / EXPÉRIENCE /COÛT•  Une expérience utilisateur unique sur différents terminaux•  Une ultra accessibilité : compatibilité quelque soit le support•  Coûts inférieurs à la création de plusieurs dispositifs•  Résiste aux « aléas » des évolutions de dispositifs sur-mesureMAIS ÉVIDEMMENT MOINS OPTIMISÉ QU’UN DISPOSITIF SUR-MESURE PENSÉ ET DÉVELOPPÉINDÉPENDANDAMMENT POUR CHAQUE SUPPORT•  Ergonomie non native qui sera toujours moins aboutie qu’un dispositif spécifique pour chaque support
  • ET VOUS ?
  • QUEL ÉCO-SYSTÈME VOUS CORRESPOND ? 1 DISPOSITIF UNIQUE POUR MAXIMISER L’ACCÈS ET MINIMISER LES COÛTS ?
  • QUEL ÉCO-SYSTÈME VOUS CORRESPOND ? DES DISPOSITIFS DÉDIÉS POUR MAXIMISER L’EXPÉRIENCE ?
  • QUEL ÉCO-SYSTÈME VOUS CORRESPOND ? UN ÉQUILIBRE ENTRE LES DEUX ?
  • PARLONS-EN ! POUR OBTENIR LES SLIDES DE CETTE PRESENTATION contact@dagobert.fr Dagobert 39 rue des Mathurins, 75008 Paris 01 56 03 99 80 contact@dagobert.fr www.dagobert.com www.facebook.com/agencedagobert www.twitter.com/agencedagobert
  • contact JÉRÉMIE ABRIC SOLANGE DERREY DIRECTEUR DE LA STRATÉGIE DIGITAL PLANNER jeremie.abric@dagobert.fr solange.derrey@dagobert.fr @jabric @SolangeDerreyDÉCOUVREZ AUSSI…LES AUTRES ÉTUDES DU PLANNING STRATÉGIQUE CONTACT 39 RUE DES MATHURINS 75008 PARIS + 33 (0)1 56 03 99 80