Le web mobile. et le responsive web design. Pourquoi. Pascal Waeber - décembre 2015 / février 2016 Pourquoi cette présentation?

Dimension: px

Commencer à balayer dès la page:

Download "Le web mobile. et le responsive web design. Pourquoi. Pascal Waeber - décembre 2015 / février 2016 Pourquoi cette présentation?"

Marie-Hélène Pauline Lessard
il y a 7 ans
Total affichages :

1 Pourquoi Le web mobile et le responsive web design Pascal Waeber - décembre 2015 / février 2016 Pourquoi cette présentation? Centre informatique 1 wormig - Fotolia

2 2000 U.S. smartphone use in 2015 PEW research center vitesse affichage -> site mobile dédié chalabala - Fotolia 2014 vitesse +affichage + -> site unique senai aksoy - Fotolia 5 6 Pourquoi 800 x 600 Netscape vs 1024 x 768 vs Internet Explorer jorisvo - Fotolia la genèse du web 7 8

3 HTML = Hyper Text Markup Language HTML = Hyper Text Markup Language <html> <html> titre de page <head> <title>ma page</title> </head> en-tête <head> <title>ma page</title> </head> <body> <h1>bienvenue</h1> <p>bla bla, ma page c'est du bla bla</p> </body> </html> 9 corps <body> <h1>bienvenue</h1> <p>bla bla, ma page c'est du bla bla</p> </body> </html> 10 titre de niveau 1 paragraphe Pourquoi les anciens contre les modernes zlikovec - Fotolia Le "web des imprimeurs" 11 12

4 <html> <head> <title>ma page</title> </head> <body> <h1>bienvenue</h1> <p> <font face="arial"> <font size="6"> bla bla, ma page c'est du bla bla </font> </font> </p> </body> </html> styles locaux tableaux html styles locaux 15 16

5 Les standards web avant les standards web: HTML + CSS + Javascript meilleure indexation contenu présentation > html avec styles locaux meilleure accessibilité plus simple à entretenir orientés vers le futur avec les standards web: contenu présentation > html > css Exemple de css Campagne en faveur des standards web

6 vitesse + affichage Pourquoi HTML CSS Javascript... WML wireless markup language WAP wireless application protocol l'essor des standards web Jeffrey Zeldman Pourquoi de l'iphone au responsive design

7 2007 Sortie de l iphone vitesse capacités graphiques interface tactile et intuitive 2007 mise en page "tout CSS" sur nos sites Jahia 2008 premier site web mobile de l'unil : m.unil.ch (annuaire + actualités) Sites distincts (détection par le serveur) Applications natives device detection complexité technique (>24'000 modèles Android) coûts développement et maintenance "trouvabilité" coûts développement et maintenance 27 Dmitry - Fotolia 28 viperagp - Fotolia

8 HTML Keep the flow Les bases du RWD Innovated Captures - Fotolia Le flux HTML par défaut avec float Le RWD: officiellement conceptualisé en 2010 par Ethan Marcotte texte texte image image texte texte débuts de l «elastic design» largeur spécifiée en pixels ou % 31 32

9 L icône hamburger Pixels réels - pixels CSS - viewport résolution de l iphone en pixels réels largeur en pixels CSS de l'iphone iphone 3 : 320 x 480 iphone 4 : 640 x 960 iphone 5 : 640 x 1136 iphone 6 : 750 x 1334 iphone 3 : 320 iphone 4 : 320 iphone 5 : 320 iphone 6 : 375 "largeur d'écran" que prétend avoir l iphone (3-4-5): 980 pixels = viewport Balise meta "viewport" 320 px <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 980 px 35 36

10 Media queries Règles CSS s'appliquant conditionnellement en fonction de la taille, de l'orientation, de la densité de pixels de l'cran Pourquoi de Bootstrap au Mobilegeddon > 2012 Unicom lance l'application SmartCampus pour ios tous les thèmes que nous proposons pour nos sites WordPress sont responsive

11 Bootstrap CSS adaptée à 4 tailles : xs - small - medium - large système de grille à 12 colonnes composants Javascript (jquery) disponible via téléchargement ou CDN Influence des réseaux sociaux les réseaux sociaux se consomment de plus en plus sur mobile ils proposent de nombreux liens vers des sites web Evolution du web design importance images textes temps 43 44

12 Influence du mobile sur le web design en général Interface tactile mousover -> textes + courts (content strategy) - de colonnes icônes -> ( 44px) + d'espace blanc images + grandes adaptation au tactile sites «one page» 45 Card design 46 version «grid» Dejan Jovanovic - Fotolia

13 version «masonry» Material design Mobilegeddon avril 2015 version "responsive light" de nos sites Jahia développement de MyUNIL 3 avec Bootstrap 51 52

14 Gudellaphoto - Fotolia La performance Décalage entre attentes et réalité > 2 MB poids moyen d'une page > 100 nombre moyen de requêtes par page 70 % visiteurs qui attendent un affichage sur mobile au moins aussi rapide que sur desktop 70 % sites "responsive" aussi lourds sur mobile que sur desktop, malgré réseau plus lent

15 Plusieurs solutions à mettre en oeuvre images responsive (déjà dans WordPress 4.4) conditional loading lazy loading limitation du nombre de requêtes (application-like, en javascript)

16 Pourquoi > passage à Bootstrap de nos sites Jahia > d'amp à l'infini (et au-delà) Google accelerated mobile pages HTML simplifié CSS restreint Javascript limité cache chez Google

17 Montres connectées Apple Watch 65 wormig - Fotolia 66 Web pages themselves are no longer the center of the Internet experience, which is why designers need to move on to the next challenges products and ecosystems if they want to stay relevant. Sergio Nouvel templates web standardisés + d'infos via moteurs de recherche et réseaux sociaux assistants personnels et web services internet of things (IoT) 67 68

18 Pourquoi > Conclusion web mobile = option par défaut performance + accessibilité = facteurs clés diffusion de l information = sur appareils multiples, en majorité mobiles information stockée dans les sites, les médias sociaux, les services web En conclusion Présentation et liens people.unil.ch/pascalwaeber/rwd 71

Documents pareils

Optimiser pour les appareils mobiles

chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...