Nextformation organise l'événement. Chaque mois, notre équipe vous convie à une rencontre sur une thématique porteuse animée par un expert. Participez à nos prochaines dates : http://formation.nextformation.com/evenements

1. 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

2. Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
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 à yleyondre@nextformation.com ou
par téléphone 01 42 03 77 00.

3. Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
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 à yleyondre@nextformation.com ou
par téléphone 01 42 03 77 00.

4. Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
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/

5. Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
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

6. Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
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/

7. Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
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

8. Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
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; } }

9. Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
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

10. Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
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

11. Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
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

12. Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
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 web
http://1140px.com/
http://960.gs/
Solutions Javascript pour les sites responsifs
http://speckyboy.com/
(2) http://slicknav.com/
(3) https://developers.google.com/webmasters/smartphone-sites/javascript?hl=fr

13. Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
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/07
au 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/07
au 01/08

14. Toujours plus d’actualités et de rendez-vous sur
www.nextformation.com
@nextformation.com/nextformation
/company/nextformation