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

50 %
50 %
Information about A la découverte du Responsive Web Design par Mathieu Parisot - Soat
Technology

Published on February 28, 2014

Author: soatexpert

Source: slideshare.net

Description

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

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 !

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

A la découverte du Responsive Web avec Math - YouTube

A la découverte du Responsive Web avec Math ... Soat - Le renouveau du Web - Mathieu Parisot ... Balsamiq Mockup par Mathieu Parisot ...
Read more

[Quickies] Balsamiq Mockup par Mathieu Parisot - YouTube

A l'occasion d'une Soirée Quickies Soat, Mathieu Parisot, ... L'impact du Responsive Web Design ... A la découverte du Responsive Web ...
Read more

Mathieu Parisot, Expert Java & Web | SOAT

Mathieu Parisot est développeur Java et Web et s'est ... sur les process autour du Responsive Web Design ... A la découverte du Responsive Web Design.
Read more

SOAT Blog » Mathieu PARISOT

SOAT. LA VIE CHEZ SOAT ... Articles de l'auteur : Mathieu PARISOT ... principalement aux problématiques web : HTML5, CSS3, Responsive Web Design, ...
Read more

Responsive Web Design par Mathieu Parisot, expert ...

Le « Responsive Web Design ... initialisation du projet pour assurer la migration de ... de sites « responsive » arrivent. Mathieu Parisot, ...
Read more

L’impact du Responsive Web Design dans votre entreprise ...

responsive web design. ... MWC 2016 : Quelles ruptures avec la 5G ? ... MWC 2016: Etat des lieux de l’économie du mobile.
Read more

Nos Publications - Site principal de Soat

L’impact du Responsive Web Design dans votre entreprise Mathieu Parisot, Expert Front. > Lire le livre blanc sur le RWD
Read more

aYaline - Offre Mobilité - Responsive Web Design - Design

Site web responsive - Site mobile dédié - Application mobile - E-mail responsive. Docslide.fr. ... Design; aYaline - Offre Mobilité - Responsive Web Design;
Read more