Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
Formation continue contrat de p...
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 ...
Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
Où et quand ?
1 rendez-vous tou...
Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
L’expert du Partner’s Day
Passi...
Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
Face à la multitude de périphér...
Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
Un site dit responsive est un s...
Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
Les systèmes de grilles comme 9...
Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
Le responsive web design
> Tech...
Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
Le responsive web design
> Tech...
Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
Le responsive web design
> Tech...
Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
Bien qu’avantageuse, cette solu...
Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
Le responsive web design
> Les ...
Nextformation 55 avenue Hoche 75008 Paris 9 avenue de Paris 94300 Vincennes 01 42 03 77 00
Formation « HTML 5 et CSS 3 »
2...
Toujours plus d’actualités et de rendez-vous sur
www.nextformation.com
@nextformation.com/nextformation
/company/nextforma...
Prochain SlideShare
Chargement dans…5
×

Résumé Partner's Day : Le responsive web design, réussir la conversion de son site pour le mobile

787 vues

Publié le

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

Publié dans : Formation
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
787
Sur SlideShare
0
Issues des intégrations
0
Intégrations
194
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Résumé Partner's Day : Le responsive web design, réussir la conversion de son site pour le mobile

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. Toujours plus d’actualités et de rendez-vous sur www.nextformation.com @nextformation.com/nextformation /company/nextformation

×