A la découverte du Responsive Web Design par Mathieu Parisot - Soat
Upcoming SlideShare
Loading in...5
×
 

A la découverte du Responsive Web Design par Mathieu Parisot - Soat

on

  • 618 views

La présentation présentée par Mathieu Parisot chez Soat le 27 février sur le thème : A la découverte du Responsive Web Design

La présentation présentée par Mathieu Parisot chez Soat le 27 février sur le thème : A la découverte du Responsive Web Design

Statistics

Views

Total Views
618
Slideshare-icon Views on SlideShare
509
Embed Views
109

Actions

Likes
0
Downloads
13
Comments
0

5 Embeds 109

http://www.scoop.it 70
http://www.entreprise-marketing.fr 36
http://shakertechnologies.tumblr.com 1
https://twitter.com 1
http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

    A la découverte du Responsive Web Design par Mathieu Parisot - Soat A la découverte du Responsive Web Design par Mathieu Parisot - Soat Presentation Transcript

    • A la découverte du Responsive Web Design
    • Mathieu PARISOT Développeur Web et Java @matparisot https://www.google.com/+ParisotMathieu
    • Responsive what ?
    • Responsive Web Design, dimwit !
    • S'adapter à la taille de l'écran
    • S'adapter à l'ergonomie
    • S'adapter au contexte
    • Des milliers de combinaisons…
    • Tant que ça ?
    • Bah, ça ne me concerne pas tout ça !
    • "55 % des américains ont utilisés un smartphone pour accéder à internet en 2012" Source : http://www.pewinternet.org/Reports/2012/Cell-Internet-Use-2012.aspx
    • "Pour 31%, il s'agit de leur mode consultation principal" Source : http://www.pewinternet.org/Reports/2012/Cell-Internet-Use-2012.aspx
    • "Plus de 50% des clients Amazon ont acheté depuis leur mobile à noël 2013" Source : http://phx.corporate-ir.net/phoenix.zhtml?c=176060&p=irol-newsArticle&ID=1886961
    • "Walmart.ca en RWD : +20% de conversions +98% de vente sur mobile" Src : http://www.getelastic.com/how-walmart-cas-responsive-redesign-boost-conversion-by-20/
    • "75% des gens utilisent leur smartphone aux toilettes" http://www.11mark.com/IT-in-the-Toilet
    • "10% des gens américains utilisent leur smartphone pendant qu'ils font l'amour" http://mashable.com/2013/07/11/smartphones-during-sex/
    • Comment on peut supporter autant de trucs ?
    • 1 site dédié aux desktops !
    • 1 site dédié aux desktops ! 1 site dédié aux smartphones !
    • 1 site dédié aux desktops ! 1 site dédié aux smartphones ! 1 site dédié aux tablettes…
    • 1 site dédié aux desktops ! 1 site dédié aux smartphones ! 1 site dédié aux tablettes… 1 site dédié aux TV ?
    • 1 site dédié aux desktops ! 1 site dédié aux smartphones ! 1 site dédié aux tablettes… 1 site dédié aux TV ? Oups le PDG a acheté une montre connectée !
    • 1 site dédié aux desktops ! 1 site dédié aux smartphones ! 1 site dédié aux tablettes… 1 site dédié aux TV ? Oups le PDG a acheté une montre connectée !
    • 1 seul site !
    • Un code HTML unique !
    • Des tailles relatives ! % em vh rem vw
    • Des média queries !
    • Des grilles fluides !
    • Un exemple ? http://alistapart.com/
    • Le 1er site Responsive ! http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
    • Trop facile ! C'est tout ?
    • Content First
    • S'adapter à son environnement
    • Amélioration progressive
    • Amélioration progressive
    • Amélioration progressive
    • Amélioration progressive
    • Dégradation élégante
    • Dégradation élégante
    • Dégradation élégante
    • Dégradation élégante
    • Les problèmes que tout cela pose…
    • La performance
    • La maintenabilité
    • La compatibilité
    • Des composants graphiques adaptés
    • Des images adaptées 100ko 20ko 5ko
    • Wireframes Les processus de conception
    • Wireframes Maquettage Les processus de conception
    • Wireframes Maquettage Les processus de conception ??
    • Wireframes Maquettage ?? Les processus de conception site final
    • Les tests
    • Pas adapté pour tout
    • Trouver les compétences
    • Oh mon Dieu, on n'y arrivera jamais !
    • Un site unique
    • La flexibilité
    • Une meilleurs conception
    • Diminuer la frustration
    • Parlons argent !
    • ou pas…
    • Bluffer ou pas ?
    • Chaque projet est unique
    • Des estimations pour sortir du flou
    • Ceux qui ont essayé sont contents
    • Site Responsive Site mobile Site Desktop Apprentissage
    • Site Responsive Site mobile Site Desktop Apprentissage Equipe formée
    • Site Responsive Site mobile Site Desktop Milieu de projet Apprentissage Equipe formée
    • Site Responsive Site mobile Fin de vie Site Desktop Milieu de projet Apprentissage Equipe formée
    • L'apprentissage
    • Les révolutions sont souvent chaotiques
    • Vos process vont dérailler…
    • Stop à la bidouille !
    • L'internet fixe est (trop) rapide
    • Même pas peur, allons-y !
    • Par où commencer ?
    • Trouver les bonnes métriques
    • commencez PETIT !
    • Restreignez votre périmètre
    • http://smashingmagazine.com/2013/07/08/ choosing-a-responsive-image-solution/
    • Pour conclure…
    • Vos sites doivent être responsive par défaut !
    • @matparisot Merci !