Marie-eve TREMBLAY GROUPE B. Rapport de synthèse : Le responsive web design, CSS3 et HTML5. Apprentissage autonome 582-FXA-06

Transcription

1 Marie-eve TREMBLAY GROUPE B Rapport de synthèse : Le responsive web design, CSS3 et HTML5 Apprentissage autonome 582-FXA-06 Département des Techniques de communication Programme des Techniques d'intégration multimédia Cégep de Sainte-Foy 25 mars 2013

2 1.INTRODUCTION DEVELOPPEMENT SYNTHESE DES TRAVAUX LA PHILOSOPHIE DU RESPONSIVE WEB DESIGN (SEMAINE 1 ET 2) Les medias queries (semaine 2 et 3) Les vieux navigateurs (semaine 4) Introduction à HTML5 et CSS3 (semaine 5) La typographie en responsive (semaine 6) Les formulaires html5 (semaine 6) Les grilles flexibles (semaine 6) Les types de navigation (semaine 7) Le jquery mobile (semaine 8) BILAN DE LA PROGRESSION DU TRAVAIL Semaine Semaine Semaine Semaine Semaine Semaine Semaine Semaine Le programme Altimaitre TECHNOLOGIES EMPLOYEES PERSPECTIVES CONCLUSION MEDIAGRAPHIE LES IMPRIMÉS WEB

3 1.INTRODUCTION 4 «Le responsive est mort! vive le responsive!» dit au Web à Québec par Étienne Lemay, cofondateur de Heliom. En fait, durant les dernières années, on a vu l'émergence du reponsive web design. Le terme était sur toutes les lèvres des artisans du web, mais aujourd'hui, ce n'est plus une mode ou un artifice, le responsive devrait être LA technique de base pour construire un site web. Accompagné du HTML5 et des nouveautés CSS3, les possibilités du web ont dépassé toutes les attentes et ne cessent de nous impressionner et d'innover. J'ai dirigé mon apprentissage vers ces pratiques qui, pour moi, étaient essentielles pour un futur développeur web. Par cet apprentissage, je voulais faire la lumière sur des points particuliers. Pour ce qui est du responsive web design, je voulais posséder le plus de matière possible, tant au niveau de la technique et de l'intégration que du côté de la philosophie du concept. Pour ce qui est du HTML5, je voulais faire l'apprentissage des nouvelles balises comme la balise Canvas et les balises de formulaires ajustées pour le mobile. Pour ce qui est des CSS3, je voulais surtout voir les effets de transition et d'animations. Par cette recherche, je visais à développer une spécialité orientée vers l'adaptation des sites de table vers les sites mobile. Connaître les bonnes pratiques du mobile, l'ergonomie, les éléments d'interface et permettre la meilleure des expériences utilisateurs possible. De plus, je voulais voir les différentes grilles, l'interactivité sur mobile et les trucs pour l'intégration HTML5 et CSS3. Mon contexte d'application est ciblé vers les entreprises modernes désireuses de diffuser leur contenu sur le web de manière adaptée et efficace. Ce sont des entreprises qui osent les nouveautés. Donc, l'application de mes nouveaux apprentissages s'adresse à eux. De nos jours, il n est plus rare de voir les entreprises développer directement dans une formule de responsive dès le départ d un projet. Donc, pour un développeur, il est de très bonnes pratiques de connaître toutes les étapes du responsive web design, mais il y a plusieurs éléments à considérer. Les risques, les contraintes et les limites du responsive sont surtout au niveau du temps de développement qui doit être ajusté à la hausse pour permettre un travail de qualité et les nombreux ajustements sur les différents navigateurs. C est un peu la même chose pour le HTML5 et les CSS3. Malgré les petites embrouilles que l on peut retrouver, leurs avantages sont beaucoup plus importants que leurs désavantages

4 et leur maintenance sur les nouveaux modèles de mobile sera plus facile et flexible 5 2.Développement Les sujets exploités pour mon apprentissage autonome sont d actualités dans le domaine du web donc, les références sont nombreuses. Je me suis vite rendu compte dans les étapes de mon apprentissage que la vraie matière de recherche se trouvait directement sur internet. Les opinions sont partagées sur les méthodes de travail face à mes sujets et internet me permettaient de trouver et comparer facilement les opinions. 2.1.Synthèse des travaux La philosophie du Responsive web design (Semaine 1 et 2) Lors d une recherche comme celle-ci, il est important de commencer par le vrai commencement, c est-àdire l idée derrière la technique, le concept, les avantages et les désavantages d une nouvelle technique. Pour bien appliquer un concept, on se doit de maîtriser son sens et son fondement. J ai donc commencé mon apprentissage par des lectures sur les valeurs du responsive web design avec le livre de Ben Frain «Le responsive web design with HTML5 and CSS3». J ai compris par mes lectures que le responsive est d intérêt et qu on se doit en tant que développeurs d instruire les gens et les clients sur le sujet et faire changer les approches face au web. Mais c est quoi le responsive en fait? Pour résumer un peu, il s agit de produire un site web dont les contenus seront gérés avec des pourcentages, la typographie en em et utiliser des bases de largueur et hauteur qui permettent au site d être construit en proportions ajusté pour toutes tailles d écran. On utilise également les medias queries dans la pratique. Il y a plus d avantages que de désavantages à développer le responsive, mais parfois, le budget et/ou le temps ne le permet pas. De nos jours, les gens sur les vieux navigateurs ne représente qu un très petit pourcentage d utilisateur ( 3% pour ie6 et environ 5% pour ie7 ) par rapport à l énorme explosion d utilisateurs sur mobile. De plus en plus de gens utilise que leur mobile pour tout leur accès sur internet alors que d autres ce procures des écrans d ordinateurs gigantesques. Les proportions d écrans sont à l extrêmes. Il est donc beaucoup plus avantageux de déboursser pour le développement du responsive que vers un fonctionnement sur les vieilles versions de navigateurs.

5 6 D après Monsieurs Frain, il existe mieux que le responsive et c est le web adapté. Si le développeur en a la chance, il devrait développer un site pour table et un site pour mobile. Avec le même contenu biensûr, mais le site mobile serait beaucoup plus adapté à la réalité de l utilisateur et de ses besoins. Il m a aussi été suggéré de lire le livre «Responsive web design» d Ethan Marcotte. Par ses nombreuses lectures et par rapport à mon contexte d utilisation, je peux en conclure que le responsive est une nouvelle aire révolutionnaire qui ne peut qu évoluer. Il faut penser à comment l utilisateur va avoir accès à son contenu et le contexte d utilisation. Le responsive est inévitable et de plus en plus les développeurs devront s adapter au principe du «mobile first» lors de la production d un site. J ai appliqué les techniques présentées par Monsieur Marcotte sur quelques structures HTML5 durant les premières semaines de mes recherches. Les conclusions furent très positives et constructives. Le responsive c est repenser sa structure constamment, c est écouter la structure du site pour l adapter à chaque moment qu elle en à besoin. C est aussi un cycle constant entre le développement et la conception. Lors de la création d une page, les éléments ont beaucoup d influences entre eux (éléments parent / éléments enfants). On doit prendre en considération les pourcentages des éléments parents, de la taille de typographie déclarée au départ, des largeurs maximum et minimum Dans le meilleur des cas, lorsque l on construit une structure en responsive, on devrait commencer avec le positionnement de boîtes dans l espace, de cette manière il est plus évident d adapter son contenu et de voir comment il pourra s adapter. En conclusion, je crois qu il est bien pratique de commencer une structure en resposonive avec papier et crayon pour calculer et noter toutes les dimensions! Les medias queries (semaine 2 et 3) Avant la recherche, j avais déjà une connaissance de base sur le sujet et fonctionnement des medias queries. C est principalement mes lectures «responsive web design with HTML5 and CSS3» de Ben Frain et «responsive web design» d Ethan Marcotte qui ont été utilisés dans l amélioration de mon apprentissage sur ce sujet. Je voulais comprendre et améliorer ma pratique des medias queries. J ai appris sur les compatibilités des medias queries et comment les optimiser. Premièrement, ils ne sont pas compatibles avec des versions antérieures à ie9. Deuxièmement, il est important de faire attention aux nombreuses feuilles de styles que l ont appele lors de la création d un site. Faire des feuilles séparées pour les medias queries est une très mauvaise pratique, car chaque feuille sera chargée au départ et sera

6 7 comptée dans le poids du site. Les medias queries sont utile pour permettre au site d accéder à des règles de style dépendamment de la largeur de l écran de l appareil, mais il faut bien comprendre qu il n y a pas de chiffres magiques et c est seulement quand le site en a besoin qu ont appele les medias queries. On doit permettre un changement flexible et non drastique. Comme expérimentations, j ai ajouté les medias queries à mes structures faites précédemment et pensé au design que mon site aurait dépendamment du modèle d appareils. J ai tenté d ajuster les medias en conséquence de la brisure du contenu et ajuster le visuel et la structure pour le mieux. J ai testé de la vidéo en responsive avec la librairie javascript FitVids qui fut très concluante et facile d utlisation. Pour ce qui est de son utilité dans ie8, on peut faire une feuille de style spécifique mais sans responsive Les vieux navigateurs (semaine 4) Par mes lectures et expérimentations, je voulais voir à quels points les navigateurs en général sont différents et doivent comprendre des spécificités différentes. Il est donc important pour un développeur de bien connaître les outils avec lesquels ses clients et utilisateurs vont évaluer son travail. Dans mes lectures, j ai pu prendre connaissance des différentes technologies et leurs influences sur les vieux navigateurs. J en conclus, avec mon expérience, qu il est important que le contenu soit accessible et bien lisible sur tous les navigateurs et versions, mais que de nos jours, l important c est l amélioration progressive. On construit notre site de base et on ajoute des couches pour suivre les nouvelles technologies. De cette manière, notre travail est adapté pour les différents types de navigateurs. Problématiques, c est sûr que certaines options ajouter sur les nouvelles plateformes ne seront pas prises en compte par les anciennes versions, mais de plus en plus on voit les fameux prefixes et moderniz qui aide pour la constance. Durant mes lectures et expérimentations, j ai porté une attention particulière aux versions et compatibilités des navigateurs, testé mes structures sur diférents navigateurs, utilisé moderniz, mais il y a beaucoup de différences et d instabilités à ce niveau. J ai surtout testé sur Firefox, Chrome et Safari Introduction à HTML5 et CSS3 (semaine 5) Par cet apprentissage, je voulais découvrir les nouveautés liées au HTML5 surtout du côté du balisage et sémantique. Pour ce qui est des CSS3, je voulais également voir les nouvelles possibilités. Avec l aide de certains tutoriels, j ai poussé mes apprentissages sur les balisages de bases, sections et vers la balise canvas et ses possibilités. Elle se trouve à être la nouvelle fenêtre flash du HTML5. La balise est capable

7 8 de gérer son contenu en pixels. Chaque pixel du canvas possède 4 valeurs de couleurs et peut être géré. Pour cette raison, on peut faires des animations de toutes sortes, des changements de couleurs, du dessin, de la 3D et des effets multiples. J ai testé le dessin d élément dans la balise canvas, le traitement de courbe ainsi que celui des images avec changement de couleurs. De plus, j ai lu, testé et appliqué les nouvelles balises de HTML5 très perfermantes pour le référencement comme header, section, nav et aside. Malheurement, les balise HTML5 ne sont pas toutes prises en compte par les anciens navigateurs et la balise canvas n est pas particulièrement simple d utilisation et est souvent dépendante du Javascript. Pour ce qui est des CSS3, j ai testé des effets de transformation efficaces et utiles, comme des transformations de background, de duration, de déplacement et des transformation de textes. Les CSS3 permettent de faire des animations qui avant n étaient possibles qu avec du code. Malheureusement, les CSS3 ne sont pas tous pris en compte par les anciens navigateurs La typographie en responsive (semaine 6) Je voulais comprendre comment la typographie réagie dans les pages en responsive web design. Au départ, toute la base des proportions typographiques des CSS du site repose sur une caractéristique : fontsize. Tout le texte du site repose et est influencé par cette déclaration au html. En général, on déclare le site en 16px=1em, car par défaut, c est la taille de plusieurs navigateurs comme étant la norme acceptable et confortable pour la lecture sur le web. J ai donc créée une page HTML5 avec différents jeux de balises influencés par des medias queries. Au changement de taille, la taille général de la fonte est changée sur le HTML et tout est influencé. J ai inséré des balises <span> à l intérieur des mes balises textes qui affichent la taille de ma typo pour aider à comprendre. De cette manière, on voit bien comment les tailles de typographie s influencent entre elles. Problématiques : la majorité des navigateurs mettent par défaut la taille de la typographie à 16px mais il y des exceptions. Malgré le fait de déterminer la taille au départ, certain navigateur on des préférences qui malheureusement influenceront notre site Les formulaires html5 (semaine 6) Ma nouvelle trouvaille. Je voulais voir les nouvelles options que le HTML5 offre dans les balises de formulaire. Il y a de nombreuses nouvelles caractéristiques et attributs. De plus, une fois sur mobile, la majorité de ses attributs influences la présentation des choix offerts par le formulaire. Il y a possibilité de faire des petites validations directement dans les balises un peu comme les regex font avec les balises

8 9 Pattern. J ai créé un formulaire HTML5 complet que j ai testé sur mobile. Malheureusement, beaucoup de ses balises ne sont pas très stables entre mobile et table, mais je crois qu il est quand même intéressant de les utiliser vue leurs bénéfices sur les navigateurs qui les acceptent. Ils permettent une meilleure expérience utilisateur Les grilles flexibles (semaine 6) Au départ, je n étais pas convaincu par l application des grilles flexibles, mais dès sont utilisations, j ai changé d avis. J ai téléchargé «columnal» et j ai été surprise par sa qualité. J ai pu déformer la structure et l adapter à mon goût de manière à ce qu elle réagisse à mes dimensions et mes medias queries. Il y a possibilité de gérer des colonnes dans des colonnes et tout indépendamment. J ai reçu plusieurs propositions pour utiliser d autres types de grilles flexibles plus complètes et j ai bien l intention de les essayer. Aucune problématique trouvé dans l utilisation des grilles flexibles, sauf la surcharge d éléments générés par la structure. Beaucoup de fichiers télécharger au départ et non utilisés Les types de navigation (semaine 7) Pour les types de navigation, j ai trouvé un site extrêmement complet qui parle de tous les types de navigation présentement utilisées en responsive. Le responsive est un prétexte pour revoir le bon fonctionnement de sa navigation! Il nous décrit en détail les caractéristiques, les avantages et les désavantages de chaque type de navigation. Il y a deux grandes familles de naviagation, les simples qui ont un seul niveau et les complexes à plusieurs sous niveaux. Je m intéressais particulièrement aux aspects techniques des navigations en responsive et leur côté utilisabilité. J ai tenté de tester un type de navigation complexe que je trouvais très intérressant et complet, mais je ne suis pas arrivé à rendre un prototype fonctionnel. J ai plutôt testé un type de navigation simple avec toggle en javascript. J ai donc perdu un peu de temps sur des expérimentations, mais çà ma permis de voir les difficultés techniques de certains types de navigation Le jquery mobile (semaine 8) Pour moi le jquery mobile est très nouveau. De ce que j avais entendu parler, ce n était pas très au point et pas bien fonctionnel. De ce que j ai lu sur le sujet, le jquery mobile semble être un processus plus

9 10 complexe, géré comme un système MVC (modèle, vues, contrôleur) et qui peut être très utile pour la gestion des pages et de contenu pour une application. De plus, il y a possibilité d avoir accès à des bibliothèques de code et de styles qui génère énormément de choses pour le développeur. Je n ai malheureusement pas testé de manière approfondie le jquery mobile, mais il y a beaucoup de spécificité qu il faut vérifier lors de son utilisation. J ai testé quelques librairie de génération de code pour des formulaires en jquery mobile. 2.2.Bilan de la progression du travail Semaine 1 La semaine était une introduction au sujet. Plus consacrée à de la lecture que des expérimentations. Je voulais lire trois chapitres de mon fameux livre «Reponsive web design with HTML5 and CSS3» mais j ai réussi en lire deux et demi. J ai respecté les heures d apprentissage demandées, mais j étais un peu insatisfaite de l avancement de mes lectures. Étant un livre seulement en anglais et mon niveau intermédiaire, je trouvais assez difficile de bien saisir tous les propos. La comparaison entre les heures prévues et celles réellement utilisées est assez équivalente. J ai conssacré mon temps à la lecture du livre, mais j aurais aimé comparer mes lectures avec d autres lectures. J avais estimé mes apprentisages axés vers de la lecture Semaine 2 Parce que je me suis faite suggéré environ trois fois le livre d Ethan Marccotte (le précurseur du principe du responsive web design) et que j étais encore au niveau de la compréhension du sujet, j ai décidé de m attaquer au livre numérique «Responsive web design». Ce choix a fait décaler toute la structure établie dans ma planification d étape, mais d après moi, cela en valait la peine. Côté temps, je suis entré dans les délais demandés de 12 heures et j ai fait des expérimentations sur des structures de base en responsive. J étais assez satisfaite du résultat et la compréhension du livre plus facile. La comparaison des heures est assez équivalente. J ai passé un grand pourcentage de mon temps à la lecture et un petit pourcentage à des expérimentations de base.

10 Semaine 3 Je me suis consacré à l expérimentation du responsive dans sa structure, sa grille, introduction d une vidéo en responsive, typographie adaptive et tentative d image adaptive. Je voulais consacrer ma semaine à plus d expériences techniques. De plus, j ai fait des lectures sur le balisage HTML5 de base et application de ses principes. J ai respecté les heures annoncées de 12 heures, mais encore une fois, je n ai pas fait assez de comparaisons sur le web entre les différents points de vues des spécialistes Semaine 4 Une semaine beaucoup plus technique encore, j ai finalement lâché mon livre qui d après moi expliquait trop longuement des principes de base et faisait trop de références sur des anciennes méthodes. Donc, exploration de nouvelles structures plus adaptées au responsive et exercices de base sur les effets de transition en CSS3. D après mon horraire, je voulais voir plus d éléments comme les couleurs, tester davantage sur les navigateurs et faire de la comparaison entre les opinions des développeurs. J ai respecté les heures prévues de 12 heures, mais je n ai pas respecté la répartition des heures. J ai fait plus d expérimentations que prévu par les heures annoncées Semaine 5 Cette semaine fut un regain d énergie. Après avoir refait la structure de ma planification pour les dernières semaines, j ai aussi fait une petite remise en question sur les aspects à voir. J ai décidé de consacrer ma semaine à l apprentissage de la grande balise canvas dans le HTML5. J ai également consacré plus de temps dans mon horaire pour les expérimentations. J ai fait des tests avec le canvas, fait des tutoriels et j ai bien respecté les heures que je m étais fixées Semaine 6 Cette semaine fut consacré au formulaire HTML5 sur mobile et table. J ai construit un grand formulaire complet et je l ai testé sur mobile à chaque étape de la production. Avec l aide d un tutoriel qui expliquait chaque balisage et sa compatibilité sur les différents navigateurs, le sujet fût clos plus rapidement que

11 prévu. Je n ai donc pas respecté toutes les heures que je m était fixé cette semaine. J ai fait moins d heures que prévue par l horraire Semaine 7 Les types de navigations en responsive web design. Sujet super intéressant et beaucoup de documentations sur internet. J ai trouvé des sites qui expliquait les types de menus et navigations en détaillant leurs avantages et désavantages en plus de diriger vers de bons exemples concrets. Jai fait un peu moins d heure que prévue au calendrier. J ai des expérimentations qui ont prit plus de temps que prévue à l horraire, donc j ai décidé de continuer les lectures et de m en tenir des tests plus simples Semaine 8 J ai occupé une partie d un samedi à m introduire au Jquery mobile. Le sujet est aussi très intéressant, mais je sentais que je m éloignais un peu de mes sujets d apprentissage. Le Jquery Mobile est géré comme une application avec gestion plus complexe avec Ajax. J ai quand même testé un petit bout de code pour monter une page très simple en Jquery mobile avec tous les liens vers les librairies mobile. Çà semblait bien fonctionner, mais je n ai pas mis le temps mentionné à mon calendrier sur le sujet Le programme Altimaitre J ai adoré participer au programme Atimaitre. Sans jugement, mon mentor (Patrick Matte de la Sépaq) m a donné des conseils, m a sugeré des sites actuels et des sujets d intérêt en lien avec mon apprentissage. J ai senti un appui, un enthousiasme et un intérêt de sa part dans mon apprentissage. 2.3.Technologies employées Au départ, je voulais me consacrer sur la lecture complète de mon premier livre «Responsive web design with HTML5 and CSS3» mais je me suis vite rendu compte que ce n était pas le meilleur moyen pour moi d apprendre sur mes sujets ciblés. J ai donc décidé d aller chercher mes informations sur les blogs, les sites de spécialistes en date récente et les tutoriels. Internet est riche en information de qualité et très à jour. La technologie avance et change si rapidement qu un livre écrit il y a un an peu être dépassé. Si

12 13 c était à refaire, je crois que je passerais plus de temps pour la comparaison des données, d opinions, d exemples et tutoriels des spécialistes. En début de session, je me suis procuré un mobile dans le but de pouvoir tout tester mes exemples sur plateforme adaptée, mais la grande difficulté avec mes sujets c est qu ils sont très modernes et instables sur plusieurs types de modèles et supports numériques. J aurais aimé tester sur plus de supports technologiques. 2.4.Perspectives La suite est grande et large pour l évolution de mes sujets. Déjà on parle de CSS4, qui fait son entrée avec de nouveaux sélecteurs et des nouvelles caractéristiques pointues. Il y a beaucoup d améliorations et d ajustements possibles pour l ensemble de mes sujets, car il y a beaucoup d instabilités sur les navigateurs, mais la suite ne peut qu être positive et plus compatible. Les navigateurs, de leur côté, évoluent rapidement et s adaptent aux nouvelles technologies. Par cet apprentissage, je voulais développer un côté critique sur ces sujets, comprendre leurs fonctionnements, permettre une rapidité technique lors de la production et être au courant des dernières technologies face à l intégration. De par ma petite expérience, je constate que ces apprentissages seront profitables sur le marché du travail. Étant des sujets d actualité et populaires dans le domaine du multimédia, les clients et professionnelles demandent de plus en plus d avoir des sites reflétant les nouvelles technologies. 3.CONCLUSION Si je remonte le temps et que je compare mes connaissances face au responsive web design, je maîtrise plus le concept, ses avantages et ses désavantages. Dans mon contexte d application (site moderne) il y réflexion à avoir sur son utilisation. Mon opinion sur le sujet est favorable, je trouve qu il est préférable de mettre du temps et de d argent sur le développement du responsive que sur la conformité pour les anciens navigateurs, mais je comprends aussi que certains clients ne considèrent pas cette optique. Développer un site en responsive demande près de 40% ou 50% plus de temps qu un site standard. Si on donne le choix au client qui ne connaît pas bien le principe du responsive, il ne voudra pas d éboursser ce temps de production, mais s il est bien informé par un développeur face aux avantages côté maintenance et adaptif, il serait des plus gagnants à long therme.

13 14 En tant que développeur, il est difficile, mais il est de notre devoir, d expliquer les biens faits à long therme du responsive et de changer les mentalités. Malheureusement, ce ne sont pas tous les développeurs qui veulent prendre ce chemin. Dans mon contexte d application et dans ma future carrière, je tiens à exprimer mon désir d appliquer cette technique et d en parler ouvertement en expliquant bien ses avantages et désavantages. J aime le principe que plusieurs entreprises modernes font leurs sites seulement en responsive peu importe la demande et cela répond bien à mon contexte d application. Mes connaissances au niveau des CSS3 et du HTML5 était de base avant mon apprentissage. Je sens que le sujet pourrait être encore plus maîtrisé, mais que dans mon contexte d application il est acceptable. Pour moi, ces nouvelles technologies sont des petits miracles qui nous permettent de faire plus avec moins. Il faut quand même garder une réserve sur l emploi des nouvelles technologies, mais d après moi si on les emploie dans une optique d amélioration progressive, tous les utilisateurs, de toutes plateformes, de tous navigateurs, de toutes générations en seront gagnants. 4.MÉDIAGRAPHIE 4.1. Les imprimés RESPONSIVE WEB DESIGN WITH HTML5 AND CSS3, Community Experience Distilled, Birmingham, CNR, FRAIN Ben, Informatique, UK, Packt Publishing Ltd, coll. Livery Street, no , RESPONSIVE WEB DESIGN, A Book Apart, New-York, MARCOTTE Ethan, Informatique, NY, Mandy Brown, coll. A Book Apart, no , Web Adaptive Images / Les images adaptives zenika, Architecture informatique / HTML5 : le mode offline Usaddict, Ressource sur l ergonomie des interfaces(le blog Usabilis)/

14 Responsive webdesign : adapter un site à toutes les résolutions 15 Graphisme & Interactivité / 10 petits conseils en responsive design Les vendredis Webdesign/ Font-size, responsive et accessibilité : Le bon, La brute et la truand Les intégristes / le web c est pas juste en 72dpi! PXtoEM.com / conversion made simple alsacreations / Introduction à Canvas Scriptol / Canvas dans HTML5 MSDN / Utilisation de Canvas pour transformer des photos couleur en photo noir et blanc Site du zéro / Tutoriels Ben Joffe HTML5 Doctor / HTML5 Element index html5doctor.com/element-index/#output Luke W / web form innovations on mobile devices lukew.com/ff/entry.asp?1000 SimpleWeb.fr / À propos des formulaires mobiles narratifs simpleweb.fr/2010/03/23/formulaires-mobiles-et-narratifs New HTML5 Input and Attributes coreservlets.com/html5-tutorial/input-types.html Where to start

15 16 JSFIDDLE jsfiddle.net/leaverou/zwvny Stephanie Rieger Hongkiat.com /How to create a responsive navigation TechRepublic / Create navigation bars responsive web design techniques Webdesign tuts+/big Menus, small screens : responsive, multi-level navigation Responsive navigation patterns