résumé partner's day : le responsive web design, réussir la conversion de son site pour le...

Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00

Formation continue contrat de professionnalisation Formation en congé individuel de formation

Mise a niveau artistique et informatique Master Infographiste Multimédia

Résumé de l’événement du 10 avril 2014

animé par Julie Franck

Le responsive web design, réussir la conversion de son site web vers le mobile


Qu’est-ce que le Partner’s Day ?

Le Partner's Day s'inscrit dans la gamme de séminaires participatifs de Next Formation, vous permettant de découvrir des sujets porteurs autour d'un domaine technique ou organisationnel.

Il se déroule dans cadre privilégié autour d'une conférence participative animée par un expert sur une thématique liée à l'entreprise.

Les objectifs

+ Trouver des clés+ Enrichir sa curiosité+ Découvrir de nouvelles pistes+ Acquérir des méthodes

Prochain événement le 25 septembre « La révolution de l’impression 3D ».Inscrivez-vous dès maintenant en écrivant à [email protected] ou par téléphone 01 42 03 77 00.

mailto:[email protected]


Où et quand ?1 rendez-vous tous les 3 mois sur notre site parisien situé au 55 avenue Hoche, 75008 Paris,

Prochain événement le 25 septembre « La révolution de l’impression 3D ».Inscrivez-vous dès maintenant en écrivant à [email protected] ou par téléphone 01 42 03 77 00.

mailto:[email protected]


L’expert du Partner’s Day

Passionnée par le Web et le graphisme en général, Julie Franck est Directrice artistique & Designer web et mobile pour "leboncoin.fr"

Elle intervient dans différents domaines, de la Création Graphique au développement Front-Office.

Son site : http://www.xbition-art.fr/

http://www.xbition-art.fr/

http://www.xbition-art.fr/


Face à la multitude de périphériques connectés, le responsive web design permet de rendre un contenu web compatible entre différents écrans : ordinateur de bureau, portable, smartphone, tablette, consoles de salon, etc.

Le terme de « Responsive web design » a été introduit par Ethan Marcotte dans un article de A List Apart publié en mai 2010. (1)

Dès cette année, la consultation des sites internet s’effectuera majoritairement depuis un appareil mobile.

(1) voir slide Ressources

Le responsive web design> Aspect et définition


Un site dit responsive est un site avec une mise en page et des contenus flexibles. Cela concerne :

-Le webdesign

-Les images et vidéos

-Les typographies

-Le javascript

Le responsive web design> Techniques (1/5)

Crédit image : http://dbmwebdesign.fr/


Les systèmes de grilles comme 960.gs ou 1140px ont grandement contribué à l’évolution du design des sites internet.

Mais ce sont les media-queries dans les feuilles de style (CSS 3) qui ont offert aux développeurs le moyen d’adapter la mise en page selon la résolution du périphérique de consultation utilisé.

Le responsive web design> Techniques : le web design (2/5)

Crédit image : alsacreations.com


Le responsive web design> Techniques : le code (3/5)

La balise « viewport » dans le code HTML indique au navigateur comment afficher le site web.

Exemple : <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Les media queries dans le CSS vont ajouter des critères supplémentaires pour adopter le web design, les images, le texte, etc. selon la taille de l’affichage.

Exemple : @media screen and (max-width: 640px) { .bloc { display:block; clear:both; } }


Le responsive web design> Techniques : les images (4/5)

Il existe différents moyens de redimensionner les images.

Exemple : img { display: block; margin: 0 auto; max-width: 100%; }

Pourtant une problématique résulte : le poids de l’image sera le même peu importe la dimension de l’image affichée.

Crédit image : en.blog.wordpress.com


Le responsive web design> Techniques : le Javascript (5/5)

L’intégration du Javascript doit être réfléchie en amont car elle a un impact sur le comportement des éléments.

Exemple : menu (2)

Configuration du Javascript pour sites responsifs selon Google

Dans cette configuration, tous les appareils reçoivent le même contenu HTML, CSS et JavaScript. Lorsque le code JavaScript est exécuté sur l'appareil, l'affichage ou le comportement du site est modifié. (3)

(2) et (3) voir slide Ressources


Bien qu’avantageuse, cette solution technique a cependant des limites :

-Coût et durée de développement

-Créativité limitée

-Temps de chargement des contenus

Le responsive web design> Les limites


Le responsive web design> Les ressources

Le Responsive Design (EN)(1) http://alistapart.com/article/responsive-web-design

Grilles de mise en page pour le webhttp://1140px.com/http://960.gs/

Solutions Javascript pour les sites responsifshttp://speckyboy.com/(2) http://slicknav.com/(3) https://developers.google.com/webmasters/smartphone-sites/javascript?hl=fr

http://alistapart.com/article/responsive-web-design



http://1140px.com/

http://1140px.com/

http://960.gs/

http://960.gs/

http://speckyboy.com/

http://speckyboy.com/

http://slicknav.com/



https://developers.google.com/webmasters/smartphone-sites/javascript?hl=fr




Formation « HTML 5 et CSS 3 »2 jours à Paris

Consulter le programme >

Aller plus loin

Prochaines dates d’actions de formation

du 22/05 au 23/05

du 26/06 au 27/06

du 07/07au 08/07

Formation « L'ergonomie d'un site web »5 jours à Paris

Consulter le programme >

Prochaines dates d’actions de formation

du 12/05 au 16/05

du 02/06 au 06/06

du 28/07au 01/08

Toujours plus d’actualités et de rendez-vous sur

www.nextformation.com

@nextformation.com/nextformation

/company/nextformation

résumé partner's day : le responsive web design, réussir la conversion de son site pour le...

Education