Introduction au Responsive Design

32
FÉVRIER 2012 DEC 2012 INTRODUCTION AU RESPONSIVE WEB DESIGN

Transcript of Introduction au Responsive Design

Page 1: Introduction au Responsive Design

FÉVRIER 2012

DEC 2012

I N T R O D U C T I O N A U

R ESPONS IVE WEB DES IGN

Page 2: Introduction au Responsive Design

LE USAGES DIGITAUX ÉVOLUENT…

Page 3: Introduction au Responsive Design

… LES SUPPORTS SE MULTIPLIENT

Page 4: Introduction au Responsive Design

LES SITES DOIVENT S’ADAPTER

2,73% 2,79% 4,64% 4,96% 5,88% 8,29% 8,47% 12,23% 12,4% 15,7%

… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS

Libstat.com, aout 2011

Page 5: Introduction au Responsive Design

LES SITES DOIVENT S’ADAPTER

… AUX ORIENTATIONS

… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS

Page 6: Introduction au Responsive Design

LES SITES DOIVENT S’ADAPTER

… AUX ORIENTATIONS

… AUX SUPPORTS

… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS

Page 7: Introduction au Responsive Design

LES SITES DOIVENT S’ADAPTER

… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS

… AUX ORIENTATIONS

… AUX SUPPORTS

… À LA PERFORMANCE

Page 8: Introduction au Responsive Design

SI L’ON NE FAIT RIEN… ON ARRIVE A CA

… DES BORDS SUR LES GRANDES RESOLUTIONS … DES SITES ILLISIBLES SUR LES PETITES RESOLUTIONS

… OBLIGATION DE NAVIGUER AVEC LE ZOOM

Page 9: Introduction au Responsive Design

IL FAUT DONC REPENSER LE WEBDESIGN

Page 10: Introduction au Responsive Design

…POUR ÊTRE COMPATIBLE AVEC PLUSIEURS TERMINAUX

Page 11: Introduction au Responsive Design

EST-ON OBLIGÉ D’EN ARRIVER À ÇA ?

ET/OU 1 APPLICATION IPHONE

1 SITE SMARTPHONE ANDROID ET/OU ET/OU

1 APPLICATION IPAD

ET/OU APPLICATION ANDROID

1 SITE WEB PETITE RESOLUTION

1 SITE WEB GRANDE RESOLUTION

+ + + + +

1 APPLICATION ANDROID

1 SITE IPHONE 1 SITE IPAD 1 SITE ANDROID

Page 12: Introduction au Responsive Design

PLUTÔT QUE DE CONCEVOIR DES SYSTÈMES DÉCONNECTÉS LES UNS DES AUTRES EN AUGMENTANT LE NOMBRE DE DISPOSITIFS INTERNET, CES SYSTÈMES PEUVENT ÊTRE CONSIDÉRÉS COMME LES FACETTES D’UNE EXPÉRIENCE COMMUNE GRÂCE AU

RESPONSIVE DESIGN

Page 13: Introduction au Responsive Design

LE RESPONSIVE DESIGN

Page 14: Introduction au Responsive Design

LE RESPONSIVE DESIGN

C’EST QUOI

Page 15: Introduction au Responsive Design

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.

Page 16: Introduction au Responsive Design

DES EXEMPLES ?

Page 17: Introduction au Responsive Design

POSTE DE BUREAU(1024)

CE SITE EST FLUIDE…

THE BOSTON GLOBE

Page 18: Introduction au Responsive Design

POSTE DE BUREAU(1024)

… IL PEUT S’ADAPTER FACILEMENT SUR TABLETTE TABLETTE (768PX)

THE BOSTON GLOBE

Page 19: Introduction au Responsive Design

POSTE DE BUREAU(1024)

… SUR SMARTPHONE TABLETTE (768PX)

SMARTPHONE (320PX)

THE BOSTON GLOBE

Page 20: Introduction au Responsive Design

POSTE DE BUREAU(1024)

… ET SUR UN ÉCRAN À PLUS HAUTE RÉSOLUTION TABLETTE (768PX)

SMARTPHONE (320PX)

POSTE DE BUREAU(1600PX)

THE BOSTON GLOBE

Page 21: Introduction au Responsive Design

SMARTPHONE (320PX)

TABLETTE (768PX)

NETBOOK(1024)

POSTE DE BUREAU(1600PX)

UN AUTRE EXEMPLE : FOODSENSE

Page 22: Introduction au Responsive Design

SMARTPHONE (320PX)

TABLETTE (768PX)

NETBOOK(1024)

POSTE DE BUREAU(1600PX)

OU ENCORE : JON WHITE

Page 23: Introduction au Responsive Design

MAIS COMMENT ÇA MARCHE ?

Page 24: Introduction au Responsive Design

COMMENT ÇA MARCHE ?

PARLONS TECHNIQUE…

GRILLES FLUIDES IMAGES FLEXIBLES MEDIA QUERIES

3 éléments indispensables

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.

Page 25: Introduction au Responsive Design

LE RESPONSIVE DESIGN …

… Solution MIRACLE

Page 26: Introduction au Responsive Design

LES CLEFS POUR CHOISIR

LE 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-mesure MAIS É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

Page 27: Introduction au Responsive Design

ET VOUS ?

Page 28: Introduction au Responsive Design

QUEL ÉCO-SYSTÈME VOUS CORRESPOND ?

1 DISPOSITIF UNIQUE POUR MAXIMISER L’ACCÈS ET MINIMISER LES COÛTS ?

Page 29: Introduction au Responsive Design

QUEL ÉCO-SYSTÈME VOUS CORRESPOND ?

DES DISPOSITIFS DÉDIÉS POUR MAXIMISER L’EXPÉRIENCE ?

Page 30: Introduction au Responsive Design

QUEL ÉCO-SYSTÈME VOUS CORRESPOND ?

UN ÉQUILIBRE ENTRE LES DEUX ?

Page 31: Introduction au Responsive Design

PARLONS-EN !

POUR OBTENIR LES SLIDES DE CETTE PRESENTATION [email protected] Dagobert 39 rue des Mathurins, 75008 Paris 01 56 03 99 80 [email protected] www.dagobert.com www.facebook.com/agencedagobert www.twitter.com/agencedagobert