Nico's dreams - Blog et pensées d'un intégrateur/développeur web - Nicolas Hoffmann

Retour sur la Kiwiparty édition 2012

contact@nicolas-hoffmann.net (Nico) — Thu, 17 May 2012 11:18:59 +0200

La Kiwiparty a eu lieu le 4 Mai à Strasbourg, cet événement a été organisé par Alsacréations. C'était la première fois que je me rendais à cet événement, et qui plus est la première fois en tant qu'orateur.

Si j'avais à reprocher quelque chose à l'organisation et les conférences, je dirais
je dirais

Bref, j'ai beau chercher, je ne trouve pas quoi que ce soit à leur reprocher ! :)

En prime, en tant qu'orateur, j'ai été vraiment choyé : entre l'accueil cordial, la prise en charge du moindre de vos soucis que ce soit pour la présentation ou purement logistique, c'est ni-ckel. Et encore, je ne parle pas de la tablette Play offerte par RIM (Blackberry), de la jolie peluche Cut the Rope offerte par Microsoft (trop mignonne), les livres offerts par Eyrolles ou Dunod, etc. être gâté à ce point-là, c'est proprement indécent !

Côté conférences, le moins qu'on puisse dire, c'est que c'était varié et très intéressant, voici celles que j'ai suivies (et j'aurais bien suivi les autres, malheureusement, le clonage n'existe pas encore) :

Le référencement sur Google par Olivier Andrieu : les choses à faire et à ne pas faire, les retours sur les différentes mises à jour (Panda, Penguin, etc.), bref, une bonne vision globale de ce domaine qui évolue constamment,
Une présentation des divers profils de handicaps par Laurie-Anne Bourdain, efficace et concis, qui permet de réfléchir à améliorer l'accessibilité des sites pour ces derniers.
Les applications web avec Phone Gap et Sensha Touch, un domaine également très intéressant qui évolue vite,
Les effets graphiques très avancés, par Vincent de Oliveira, qui donne un aperçu des futures possibilités monstrueuses que CSS va nous offrir dans quelques temps (imaginez un Photoshop dans un navigateur cela n'a rien d'extravagant, d'ailleurs Adobe travaille beaucoup sur HTML5),
L'industrialisation des bonnes pratiques et des savoir-faire du web, par les incontournables Élie Sloim et Delphine Malassingne, toujours à la pointe de la gestion de la qualité web,
Les solutions de tests automatiques par Karl Dubost, toujours prompt à partager sa grande expérience du web en toute simplicité,
L'état de l'art et les aspects méconnus de l'image, par Frédéric Kayser, un sujet étonnant et très instructif,
et enfin Jérémie Patonnier qui clôt cette journée avec les transitions et animations CSS3.

S'en est suivi un petit concours, after très sympathique, et un after-after tout aussi agréable au bord de l'eau.

Reste encore une fois le plaisir de rencontrer plein de nouvelles personnes (connues ou moins connues), d'en revoir certaines très appréciées, d'avoir des discussions de grande qualité je connais peu d'endroits où il m'arrive dans la même journée de discuter avec Karl Dubost, David Rousset, Elie Sloim, Corinne Schillinger, etc. (j'en oublie, et je vous invite à vous renseigner sur ce que font ces personnes si vous êtes intéressé par le web)

Un point qui me fascine à chaque événement web : même si certains d'entre nous ne bossent pas du tout dans les mêmes structures, ne se sont jamais rencontrés dans aucune des 5 dimensions (espace, temps et Internet), nous nous posons les mêmes questions, nous réfléchissons aux mêmes problématiques à peu de choses près en même temps (sans compter que nos anecdotes se ressemblent beaucoup).

D'un côté, cela fait sourire, même si je code dans mon petit village ou dans une agence web, je me dis que je ne suis pas seul à me casser la tête sur des problèmes d'intégration CSS ou à réfléchir sur le web mobile, etc.

De l'autre, je me dis que partager son savoir, ses expériences, ses questions, etc. est vraiment un choix qui me donne du bonheur à l'état le plus brut qui soit. Sans aucun artifice de bisounours, je pense qu'il est difficile de mesurer l'enrichissement de ces échanges.

En conclusion, définitivement : Alsacréations, vos id ont de la class !

P.S : je crois que j'ai oublié quelque chose dans l'élan.
La présentation que j'ai utilisée pour ma conférence est disponible : jQuery Mobile et applications web.
L'exemple que j'ai créé pour cette présentation est également consultable en ligne : le site de la KiwiParty refait avec jQuery Mobile. N'hésitez pas à me donner des retours sur la présentation ou sur l'exemple via le formulaire ou autre.

Nouvelle convention d'intégration des réseaux sociaux

contact@nicolas-hoffmann.net (Nico) — Tue, 15 May 2012 14:31:29 +0200

Nouvelle convention d'intégration personnelle : désormais sur les intégrations que j'aurai l'occasion de faire, les trucs de partage des réseaux sociaux seront autant que possible contenus dans une div nommée ainsi : div id="rsalc" (ou une classe le cas échéant).

Pourquoi ce mot ? Très simple, pour Réseaux Sociaux À La Con.

Disons-le franchement, je n'ai rien contre en particulier contre les réseaux sociaux, j'en suis un utilisateur à peu près comme tout le monde.

Toutefois, en tant qu'intégrateur un poil soucieux de web design, des performances, etc. je constate une tendance actuelle à transformer les sites en guirlandes de Noël avec ces boutons de partage qui sont partout ! Plus grave, certains sites préfèrent supprimer ou diminuer la place du contenu pour afficher ces guirlandes.

Des boutons « j'aime » sur la moindre portion de contenu, des +1 de partout, des widgets Facebook/Pinterest à plein d'endroits différents trop c'est trop !

Mon travail d'intégrateur soucieux des performances est parfois ruiné via une profusion de boutons like et autres widgets, et accessoirement, cela n'apporte RIEN à la plupart des sites. Et encore, je n'aborde même pas la qualité desdits boutons, certaines portions de code sont proprement vomitives.

Aux décideurs, est-ce que votre business a réellement un besoin capital d'autant d'outils de partage de vos sites ? Est-ce que vous pensez réellement que votre site sera plus apprécié parce qu'il propose 42 façons de le partager sur les réseaux sociaux ? Est-ce que vous croyez que Facebook, Pinterest, Google Plus, etc. vous apporteront autant de publicité que vous leur en faites ?

Et surtout est-ce vraiment le point le plus critique à traiter ? Ne serait-il pas plus intelligent de d'abord proposer un contenu très intéressant AVANT de proposer aux internautes 42 façons de le partager ?

Quelques enseignements d'accessibilité

contact@nicolas-hoffmann.net (Nico) — Sun, 13 May 2012 10:56:30 +0200

Chose promise, chose due (même avec un peu de retard), voici quelques enseignements ou confirmations de bonnes habitudes à prendre, suite à la Conférence Romande sur l'accessibilité. Elles ne sont pas très difficiles à faire, donc n'hésitez pas. J'ai pu en voir le bénéfice direct et net en démonstration durant la conférence.

J'espère sincèrement enfoncer des portes ouvertes pour la plupart des points ci-dessous.

Les synthèses vocales proposent plusieurs façons d'aborder un document web (et ce afin de faciliter et d'accélérer la navigation), notamment via la structure des titres et des sous-titres. Si vous doutiez encore de l'utilité d'avoir une structure Hx correcte et explicite, ne doutez plus.
Autre possibilité, ces synthèses vocales peuvent sortir la liste des liens de la page. Hors contexte, l'utilité d'avoir des liens avec des énoncés pertinents est donc importante dans ce cas (imaginez si tous les liens sont de type « lire la suite ».

Côté navigation, il est également possible de naviguer en utilisant la touche de tabulation, j'en ai déjà parlé plusieurs fois ici. Il faut garder à l'esprit qu'une synthèse vocale va lire séquentiellement chaque page, donc pour le dire simplement, la personne va devoir supporter à chaque changement de page la lecture de tout le contenu ! C'est également valable pour ceux qui naviguent au clavier bien sûr. On parle dans ce cas de navigation séquentielle (littéralement « à la suite »).
Si vous doutiez de l'utilité des liens d'évitements, n'en doutez plus. Dans le cas de sites ayant un nombre de liens conséquent en navigation (notamment les sites d'e-commerce), l'économie de tabulations (et donc de temps) peut être vraiment importante. Certains sites pourraient faire économiser pas moins de 4 à 500 tabulations à leurs visiteurs en ajoutant quelques « pauvres » liens d'évitement.

Une bonne habitude toute simple pour les formulaires : quand un utilisateur de synthèse vocale soumet un formulaire, et en supposant que certains champs n'aient pas été remplis correctement, le formulaire va indiquer dans son contenu un message du style « les champs suivants doivent être remplis ». Seul souci, l'utilisateur de synthèse vocale n'a pas de retour immédiat sur ce problème (en supposant qu'il en ait un, de retour !), il doit attendre que sa synthèse arrive sur ce message d'erreur, ce qui risque d'être gênant : l'utilisateur peut croire que son formulaire a été correctement soumis. Pour éviter ce risque, une solution toute simple existe : il faut indiquer clairement dans la balise title de la page qu'il y a une erreur, ainsi, l'utilisateur est tout de suite prévenu qu'il existe un problème. C'est également valable si le formulaire a été correctement soumis : il faut informer rapidement l'utilisateur.

Une autre bonne idée : parfois, on vous impose un bouton submit pas très explicite, le classique « envoyer ». Il pourra être intéressant d'ajouter un attribut title sur ce submit indiquant un complément d'action, par exemple, « envoyer mon message ».

Côté ARIA, des possibilités assez simples sont d'ores et déjà implémentables, et notamment une : les landmarks.

Sous ce nom bizarre se cache quelque chose d'extrêmement simple et pourtant très puissant : ce sont des attributs role qui permettent de définir le rôle (!) de certaines portions de codes. ainsi, cela permet à l'utilisateur d'une synthèse vocale de pouvoir mieux appréhender la précieuse vue d'ensemble qui lui manque. En pratique, cela consiste à indiquer par exemple les rôles suivants :

role="contentinfo" indique des notes de pages, un copyright, un lien vers la déclaration de confidentialité, etc.
role="main" indique le contenu principal du document.
role="navigation", comme son nom l'indique, indique des liens de navigation (internes ou externes).

Pour une liste beaucoup plus complète, je vous invite à consulter : Introduction à WAI-ARIA.

C'est par exemple implémenté sur ce site, et c'est très facile à prévoir sur un site, il suffit d'ajouter quelques attributs sur son template de base.

Autre idée facile à prévoir, il arrive d'avoir une zone qui se met à jour toute seule (une zone qui affiche des nouvelles, etc.). Pour l'indiquer à la synthèse vocale, il suffit d'utiliser l'attribut aria-live. La valeur spécifiée indique à la synthèse quand elle doit notifier le changement à l'internaute, aria="polite" va attendre que l'utilisateur ait fini ce qu'il est en train de faire pour indiquer le changement.

La liste est très loin d'être exhaustive, toutefois, je me suis limité à des choses vraiment très faciles à implémenter. Ce ne sont que quelques bonnes habitudes à prendre, et quelques choses à savoir. Chose intéressante, le bénéfice est immédiat pour les utilisateurs d'aides techniques, donc faites-le !

Conférence Romande sur l'Accessibilité du Web, j'y étais !

contact@nicolas-hoffmann.net (Nico) — Sun, 29 Apr 2012 08:09:07 +0200

J'ai eu le plaisir d'assister à la Conférence Romande sur l'Accessibilité du Web, un événement organisé par Telono, une société de conseil en expérience utilisateur basée à Genève.

C'était le premier événement du genre en Suisse, juste à côté de chez moi donc.

Ne tournons pas autour du pot : pour une première fois, c'est une réussite !

Je le dis souvent : en matière d'accessibilité, je refuse de croire que les développeurs ou les intégrateurs comme moi s'en foutent.
Nous ne demandons qu'à bien faire. Par contre, nous faisons mal par méconnaissance, et simplement car nous ne pouvons pas toujours deviner tous les problèmes qui peuvent se poser, selon les technologies d'assistance.

Donc, je le redis encore et encore aux personnes qui surfent autrement : montrez-nous ! Expliquez-nous ! Nous sommes les handicapés, car incapables d'utiliser vos aides techniques. Pas de grandes paroles, mais du concret.

Et là, à mon humble avis, la journée remplit son rôle, partant d'une simple introduction à l'accessibilité, j'ai pu apprécier une gamme très étendue du domaine :

les classiques préjugés du domaines,
la navigation avec une plage braille et/ou une synthèse vocale,
la navigation avec un agrandisseur/lecteur d'écran,
les recommandations WCAG 2.0 et ARIA, ainsi que les nouvelles technologies,
le côté législatif en Suisse,
les convergences entre l'ergonomie et l'accessibilité,
et l'intégration de l'accessibilité dans les projets.

Reste le plaisir de voir de mes oreilles, bref, de comprendre ce que peut impliquer de faire des sites accessibles.

La grosse surprise de cette journée a été de rencontrer Jean-Pierre Villain. De nombreux experts en accessibilité m'avaient confié que sa présence justifiait à elle seule le déplacement. Ils avaient raison.

Quelle énergie durant les deux présentations qu'il a animées, plein de choses apprises pour ma part, et même certaines dont je ne soupçonnais pas l'existence. En prime, le personnage ne se prend pas au sérieux une seconde, ce qui ne gâche rien.

Quelques moments forts :

Des exemples avec ARIA utilisé à bon escient, la synthèse vocale prend le relai, et tout semble tellement simple que je me demande pourquoi cela n'a pas été fait avant !
La synthèse vocale fait sauter aux oreilles les petits détails qui n'en sont pas du tout. Le diable se cache dans les détails en matière d'accessibilité.
Le débit de la synthèse vocale est parfois impressionnant.
Certaines démos, notamment les aides techniques sur smartphone, sont étonnantes, j'étais loin d'imaginer toutes ces possibilités.

Reste le plaisir des rencontres, Carine Rivière, Laetitia Giannettini, Victor Brito, Jean-Pierre Villain, Romain Gervois, Muriel de Dona, etc. Sans oublier les intervenants qui vous impressionnent par leur utilisation d'internet.

Un second billet devrait arriver d'ici peu, sur des enseignements techniques que je tiens à partager, facilement déployables et avec un bénéfice immédiat, que j'ai pu voir lors de cette journée.

Chambé-Carnet, j'y serai également !

contact@nicolas-hoffmann.net (Nico) — Tue, 24 Apr 2012 12:43:37 +0200

Jamais deux sans trois : après une participation à la Kiwi Party, après une autre participation à Sud Web, j'aurai le plaisir de co-animer une conférence à Chambéry le 7 Juin.

L'événement est organisé par l'association Chambé-Carnet, son titre est Mobile W.A.R : Web mobile, Applications et Responsive design.

Comme vous l'aurez deviné à la lecture de ce titre évocateur, nous allons parler de web mobile, sous toutes ses formes. Le prix est très modique, donc n'hésitez pas une seconde.

Le site de Chambé-Carnet présente brièvement mon parcours et comment j'en suis venu aux problématiques du web mobile (ça c'est si vous êtes curieux).

8 ans, en temps web, c'est

contact@nicolas-hoffmann.net (Nico) — Sat, 21 Apr 2012 13:22:25 +0200

Il y a 8 ans, jour pour jour, je relançais la base de ce site. 8 ans, en temps web, ce n'est pas rien. Cela représente une quantité d'ajouts, de modifications, de nouvelles technologies assez étonnante. Et curieusement, certains choix mis en perspective font sourire.

La sélection des points abordés ci-dessous est totalement subjective.

2004

J'ai vite ajouté un fil RSS, mais au tout début, je doutais de sa réelle utilité. De ce que je peux voir, il a été consulté plus de 850 000 fois depuis son lancement. Je consulte maintenant des sites via fil RSS sur iPad, en widget sur le bureau, via mon client mail, etc. ainsi. Encore des doutes ?

Un peu plus tard, je lançais notamment un petit projet, un générateur de formulaires. J'imaginais pas que ce projet finirait par intégrer des nouveaux types HTML5.

Curieusement, j'expliquais déjà l'intérêt des standards, notamment sur des questions de performances qui a dit que ce sujet ne prendrait jamais d'importance ?

D'ailleurs, toujours à la même époque, je vantais les mérites des CSS destinées à l'impression. Encore actuellement, je vois des gens se prendre la tête avec ça.

Toujours dans la même période, très féconde en qualité web, un projet nommé Opquast me donnait quelques bonnes idées d'améliorations à prodiguer sur mon site. La version 1.0 a suivi en septembre 2004. D'ailleurs, de nombreux billets suivants ont montré que je me suis approprié ces bonnes pratiques. Qui a dit que 8 ans après, ce projet aurait tellement grandi ?

Un forum a ouvert sur un site très sympathique nommé Alsacréations. A l'époque, je me disais que ces petits gars iront loin

Un navigateur nommé Firefox sortait en version 1.0. 8 ans après, c'est devenu un tout grand. D'ailleurs, son alter ego en client mail Thunderbird sortait quelques mois plus tard.

Insérer du flash proprement ? Mais voyons ma bonne dame, qui a dit que Flash ne serait pas supporté un jour et qu'il faudrait prévoir une solution de repli !

2005

En Mars 2005, un projet fantastique nommé Openweb fêtait ses deux ans, avec pas moins de 4 articles. C'est là que j'y ai publié mon premier article, article qui proposait l'idée des CSS alternatives. Même si l'idée des CSS alternatives a un peu évolué depuis 7 ans, les conseils de structure sont toujours valables.

L'idée d'une CSS pour les petits écrans était un truc de geek. Certes, c'est revenu sous une autre forme, mais qui a dit que les petits écrans devraient rester sans CSS ?

Adobe rachetait Macromédia, ou la fusion de deux géants du web. Oui Dreamweaver n'était pas un produit Adobe à la base.

Rions un peu, IE7 annonçait des nouveautés que tous les autres navigateurs avaient déjà.

Les performances web, c'est surtout une histoire de gros sous. Et dire qu'on me riait au nez au boulot quand je disais ça.

Opera offrait une license gratuite de son navigateur, oui, Opera a été sponsorisé par la pub et payant pendant une longue période.

2006

Alsacréations, et vos id ont de la class. Je mets encore régulièrement le t-shirt avec ce slogan.

La validation du code étant du bon sens, je décidais de servir mes pages en application/xhtml+xml. 6 ans après, elles utilisent toujours ce principe, mais avec le pendant HTML5. Ce qui m'a permis de faire évoluer mon site de 4 versions d'XHTML, vu qu'il est passé de XHTML 1.0 à XHTML5.

Firefox 2.0 sortait avec plein d'améliorations. D'ailleurs, Installer Firefox règle de petits conflits familiaux.

2007, 2008

Là, le rythme s'est un peu tassé sur mon site personnel, néanmoins beaucoup de réalisations côté professionnel, des boutiques en lignes, des sites tout plus variés les uns que les autres.

Ceci dit, j'aurai mis un certain temps pour migrer mon site vers UTF-8.

Un navigateur nommé Google Chrome fait beaucoup parler de lui, quoi qu'il en soit, Firefox restera mon favori, et cela n'a pas changé au fil de ces années. Et d'ailleurs, je remarque que Tristan Nitot apparait souvent dans mes billets, j'espère quand même avoir le plaisir de le saluer en vrai une fois. :)

Des initiatives pour le web mobile arrivent, mais le domaine n'est pas encore totalement mûr.

Je commence à triturer une bibliothèque nommée jQuery. Si on m'avait dit que cela deviendrait un quasi-standard dans mes projets 5 ans plus tard, et que les premiers effets que j'ai pu faire avec se feraient avec des CSS quelques années plus tard, je crois que j'aurais été surpris !

2009

En 2009, je réalisais un très gros site quasiment tout seul, après avoir eu une année 2008 plutôt difficile point de vue santé. Je présenterai PNL Coach, le site de BrieF'R Formations au tout début de 2010. C'est resté longtemps le plus gros site que j'ai pu créer. Et cela reste une expérience unique d'aventure humaine notamment grâce à Floriane Briefer. J'évoquerai d'ailleurs quelques bribes de cette expérience lors d'un hommage quand elle a rejoint les anges.
A une période où l'on me faisait douter de moi, vous m'avez montré que les seules barrières qu'on a sont celles que l'on se pose. Encore merci Floriane.

2010

De gros bouleversements sont sur le point d'éclore, je fais mes armes dans le domaine des performances web. Une première CSS spéciale iPhone arrive sur mon site. C'est très imparfait, mais c'est là, le web mobile prend un goût très concret.

En parallèle, je fais également mes armes sur HTML5. En résultera un tutoriel fleuve sur la migration d'un site vers XHTML5. Et mes animations Terragen viendront s'inviter sur mon site grâce à la balise video d'HTML5.

Cause, conséquence ou simple coïncidence, je change de travail à cette époque. Et je me suis mis à Twitter, mais ça c'est une autre histoire. C'est d'ailleurs le seul réseau social que je trouve réellement indispensable.

Le CSS Summer Refresh d'Alsacréations aura été l'occasion pour moi de tester les media-queries. Non pas pour adapter un site aux smartphones, mais pour l'agrandir ! Même si à l'époque le terme responsive web design était peu répandu.

D'ailleurs, mes premières réalisations avec des media-queries en milieu professionnel arrivent à cette période.

2011

Firefox 4 arrive, et c'est un vrai bonheur. Je suis adepte de Panorama, qui m'aide beaucoup dans mon travail.

Enfin, je refonds mon site perso avec la 25^ème CSS alternative, celle utilisée actuellement. Media-queries, CSS3, jQuery, Webperfs, tout y passe sans concession !

C'est cette année que je fais mon premier Paris-Web, et c'était de la balle. D'ailleurs, HTML5 continue son petit chemin, je teste de nouvelles possibilités comme le cache manifest.

2012

8 ans après, je me refais une interface d'administration via jQuery Mobile. Si on m'avait dit à ce moment que je ferai une petite conférence à la Kiwi Party cette année, je n'y aurais pas cru. Et je vais d'étonnement en étonnement avec jQuery Mobile et ce que j'arrive à faire avec pour un investissement très léger en temps.

Voilà, 8 ans en temps web, c'est :

La différence entre Firefox 1.0 et 11.0, ou entre IE7 et IE10.
C'est la longévité du forum Alsacréations.
Ce sont des milliers de trucs nouveaux, comme HTML5, CSS3, les performances, le web mobile, le responsive web design, etc.
Ce sont des connaissances accumulées pendant un quart de ma vie, relatées ici, même de manière très incomplète (je ne peux pas raconter tout ce que j'apprends faute de temps).
La différence entre CSS1 et CSS3.
Etc.

Et vous savez quoi ? Je pense que le meilleur est encore à venir, en tout cas, les projets sont légion, et j'en ai un à titre personnel qui risque d'être énorme.

8 ans, jour pour jour

contact@nicolas-hoffmann.net (Nico) — Fri, 20 Apr 2012 23:32:49 +0200

Cela fait exactement 8 ans que j'ai relancé la base de ce site. Et le moins que je puisse dire, c'est que 8 ans, en temps web, ce n'est pas rien.

Je prépare un petit best-of de ces huit années de bons et loyaux services

Un exemple de responsive web design

contact@nicolas-hoffmann.net (Nico) — Sat, 14 Apr 2012 16:25:01 +0200

Avant que je sache que ce que je faisais était du responsive webdesign (je voulais surtout tester les media-queries moi !), j'ai fait plusieurs petits sites ou j'ai pu m'exercer à ce type d'intégration un peu nouveau.

En voici un exemple relativement facile qui montre quelques grands principes : le site ProPulsion. C'est un exemple assez simple, car il a peu de contenu, une navigation simple (un seul niveau), néanmoins, il y a quelques pièges dans lesquels il ne faut pas tomber.

Le graphisme desktop ayant une disposition un peu « originale », il ne doit pas écarter un grand principe : c'est la structure HTML5 et l'ordre logique de lecture hors mise en page qui dicte l'intégration CSS, et certainement pas le contraire ! D'ailleurs, vous verrez que cette rigueur va rendre les versions smartphone et print bien plus faciles à produire par la suite.

Donc avant de se lancer dans du grand n'importe quoi, revenons aux bases, la page d'accueil étant un petit peu plus compliquée, étudions la page méthode de l'agence ProPulsion qui est très simple, en voici le code :


 



 

  
   
   
   ProPulsion - Agence Conseil en Communication
   
  


  
  
   
  

  


 


 
  

   Le bon sens, cest aussi une méthode de travail.

J'ai supprimé les contenus et les parties non intéressantes. On a donc une structure assez simple dans un ordre logique, le menu d'évitement, le titre avec le logo, la navigation, ensuite le contenu et le pied de page. Et ce même si la disposition du site n'est à priori pas dans cet ordre visuel sur un navigateur de type desktop.

Une fois ce code posé, appliquons les styles pour la version desktop : la navigation et le logo vont être sortis du flux pour être positionnés en bas en absolute, quelques propriétés pour les largeurs pour le contenu, et nous y sommes.

Note : j'aurais pu partir de la version mobile en premier, mais l'approche mobile first a certains inconvénients, entre autre de priver les anciens IE des propriétés CSS contenues dans les media-queries. IE étant plus important que les navigateurs mobiles dans ce projet, la version desktop et ses performances seront prioritaires.

La version smartphone va être directement déduite de la version desktop, on garde tout et on adapte seulement les propriétés nécessaires dans @media screen and (max-width: 800px){}

L'idée se résume à rétablir le flux normal, la navigation et le logo vont se voir attribuer un position:static, la page et le contenu voient leurs propriétés en quelque sorte remises à 0 via :

 width:auto;
 height:auto;  
 margin:auto; 
 background-color:#fff; 
 color:#000; 
 background-image:none; 
 padding:0;

Ainsi, ces derniers vont profiter de tout l'espace qu'ils auront à disposition, que le navigateur soit en portrait ou en paysage.

Petite particularité : dans un souci d'économie de requêtes HTTP, j'utilise le logo pour la version print et également pour la version smartphone, ça évite d'utiliser trop d'images.

La version print est très semblable, je rétablis le flux normal, je cache les éléments inutiles comme la navigation ou le menu d'évitement, quelques adaptations, et le tour est joué !

Comme vous pouvez le voir, produire une version mobile à été simple, surtout parce que le code de base était de bonne qualité ! En résulte une CSS très légère : 7 ko non compressée, et encore j'aurais pu la minifier pour gagner un peu plus. En version compressée, la CSS pèse 2 ko, ce qui est vraiment léger !

Même si l'approche n'est pas totalement de type mobile first, il est aisé de constater que le fait d'appliquer quelques grands principes des standards du web, notamment celui d'un contenu correctement linéarisé hors CSS a grandement facilité la tâche.

C'est la preuve s'il y en avait besoin qu'un principe de bonne conception correctement appliqué apporte des bénéfices ailleurs que dans son domaine propre. Là dans cet exemple, les bénéfices sont en l'occurrence pour l'accessibilité :

la navigation au clavier est facilitée,
l'ordre logique du contenu hors CSS facilite également la lecture par certaines synthèses vocales,
le document garde un sens logique, ce qui amène d'autres avantages,
etc.

mais également les bénéfices abordent d'autres terrains, comme la production d'une version smartphone et print dans le même fichier, ce qui sera appréciable pour les performances web.

Ajoutez à cela que des conseils basiques de performance web comme avoir des sélecteurs efficaces vont également vous faciliter la production d'une version print et smartphone, car vous pourrez réutiliser ces sélecteurs simples dans la media-query pour modifier les propriétés CSS.

Bref, je pourrais encore ajouter d'autres avantages, mais vous avez dû comprendre l'idée : tout est interconnecté dans la qualité web, les bénéfices d'un domaine dépassent très souvent ce domaine.

Note de lecture : CSS3 pour les web designers

contact@nicolas-hoffmann.net (Nico) — Sat, 07 Apr 2012 14:30:28 +0200

J'ai eu le plaisir de lire le deuxième tome de la collection « A book apart » : CSS3 pour les web designers, écrit cette fois par Dan Cederholm.

J'avais déjà vanté les mérites de cette collection via la lecture de HTML5 pour les web designers. Bis repetita placent, on retrouve ce qui fait le succès de cette collection, et c'est tant mieux :

le format peu volumineux qui permet de vite lire le bouquin,
le style simple et agréable à lire,
et on est toujours ancré dans la réalité, pas de délire ultra-expérimental !

De prime abord, on pourrait être tenté de penser que le sujet est traité un peu légèrement (ou alors j'ai de très solides connaissances en CSS3 !), il n'en est rien : à l'instar de la sémantique HTML5 dans le premier tome, l'auteur se concentre ici sur un sujet qu'il maîtrise, à savoir le design web, il reste donc dans cette optique tout le long du livre. Exit les nouveaux types de positionnements par exemple.

Et ce parti pris fonctionne bien : l'auteur maîtrise bien le sujet de l'amélioration progressive, et montre comment de petits détails bien travaillés peuvent améliorer des éléments aussi simples que des champs de formulaires. Il prône notamment une utilisation raisonnée et raisonnable des nouveaux effets et disons-le franchement, c'est une très bonne chose ! Déjà je me sens moins seul certains de mes clients devraient l'écouter et les exemples qu'il montre sont élégamment pensés.

Au final, c'est une lecture rapide et efficace que, comme vous l'aurez déjà compris, je vous recommande vivement.

Une micro-astuce CSS sur les input de type submit

contact@nicolas-hoffmann.net (Nico) — Wed, 04 Apr 2012 15:04:29 +0200

Voici un truc tout simple qui donne envie de cliquer sur un input de type submit :

input[type="submit"]{
 cursor:pointer;
}

Cela permet de changer le curseur de la souris quand on survole un input de type submit, comme pour les liens.

Évidemment, c'est extensible aux input de type reset, aux balises button, etc.

C'est tellement évident que je me demande pourquoi je ne l'ai pas mis en standard sur tous mes sites. Et histoire de se faire plaisir, ça marche partout sauf sur IE 6, donc ne vous en privez pas pour si peu !

Contexte, schizophrénie, CSS et préfixes constructeurs

contact@nicolas-hoffmann.net (Nico) — Mon, 02 Apr 2012 14:05:48 +0200

Faisant suite à mon billet qui indiquait de ne pas être sectaire dans ses approches des sites, je veux vous montrer que la même personne, en l'occurrence moi, peut faire des choix radicalement différents selon le contexte, en matière d'intégration CSS bien sûr !

Et tant qu'à prendre un sujet trollesque, prenons celui des préfixes constructeurs !

Imaginons deux cas de figure volontairement très différents :

dans le premier, je me place dans le cas de la création d'un site pour un client au travail,
dans le second, je vais parler des préfixes CSS dans mon admin jQuery Mobile.

Vous avez sûrement pu constater que dans le billet sur les préfixes, je conseille de tous les utiliser, pour tout un tas de raisons très valables :

garantir que tous les navigateurs auront leur préfixe et profiteront de la propriété,
éviter d'avoir à y revenir par manque de temps,
ne plus avoir à gérer les mises à jour des navigateurs et le support de ces propriétés, etc.

Typiquement, quand je conseille cette façon de faire, je suis dans le premier cas, à savoir la création d'un site au travail pour un client. Je n'aurais certainement pas la possibilité d'y revenir en détail, et donc je choisis d'alourdir un peu ma CSS pour être tranquille vis à vis de tous les navigateurs et des spécifications futures.

Second cas, je peux aisément constater dans les CSS de jQuery Mobile que certains préfixes sont omis volontairement pour certaines parties, les transitions utilisant CSS 3D transform et CSS animation. La raison est tout à fait valable : ces propriétés ne sont supportées à l'heure où j'écris ce billet que par les navigateurs utilisant WebKit et par Firefox. Comme il est stipulé sur l'annonce de jQuery Mobile RC 1.10, les développeurs ne mettront les préfixes que quand le rendu de ces propriétés sera jugé satisfaisant sur ces navigateurs. De leur côté, le raisonnement de ne pas mettre tous les préfixes se tient.

Au vu de mon billet sur les préfixes, vous pourriez être tenté de croire que je vais les ajouter pour le tas de bonnes raisons que j'ai énumérées ci-dessus. Et pourtant il n'en est rien : je n'utiliserai pas de préfixes supplémentaires dans ce cas !

Et voici les très bonnes raisons qui motivent cette décision dans ce cas :

j'ai le temps de tenir à jour cette administration basée sur jQuery Mobile,
je fais confiance à l'équipe de jQuery Mobile qui fait des tests poussés pour savoir si le support des propriétés est satisfaisant ou non,
et je peux ajouter que dans ce cas, je ne discrimine personne : cette admin est pour mon utilisation personnelle, et quand bien même j'utiliserais un navigateur différent, ces propriétés ne sont pas reconnues.

Quid de mon propos : double langage ? Schizophrénie ? Un coup je dis oui il faut mettre tous les préfixes constructeurs, et l'autre je m'en moque ? La même personne qui tient deux discours diamétralement opposés ?

Non bien entendu, je ne pratique pas le double langage ni ne suis schizophrène : c'est juste que le contexte est différent, mes buts sont différents dans ces deux cas, et les arguments annoncés dans ces deux cas sont tout à fait valables selon ces buts.

Tout ce propos pour dire : adaptez-vous à votre contexte. Je suis effaré des fois de voir des personnes qui tiennent tout le temps le même discours face à des choix ou des projets radicalement différents.

Que cela soit clair : il y a des réponses courantes aux sites internet, mais il n'y a pas de réponse type à tous les cas de figure rencontrables en matière de sites internet. L'éventail est bien trop large.

Revue de web

contact@nicolas-hoffmann.net (Nico) — Sat, 31 Mar 2012 18:17:06 +0200

Au menu, que du beau linge en matière de sites internet !

Olivier Nourry pose des questions l'évaluation de l'accessibilité des sites internet par le W3C. C'est un peu technique, mais c'est intéressant, surtout les réactions que cela suscite dans les commentaires.

Raphaël Goetter nous fait part sur son blog personnel des recherches qu'il fait sur les media-queries et les performances web, instructif !

Mozilla a présenté une démonstration technologique des possibilités techniques d'HTML5 et surtout du web en tant que plateforme. Ce jeu s'appelle Browser Quest. Et le résultat est bluffant, en résulte un jeu de rôle multijoueur ne nécessitant qu'un navigateur moderne pour fonctionner. Certes le jeu est sympathique avec un graphisme délicieusement rétro et se termine rapidement, mais quelle surprise de voir cela fonctionner aussi bien dans un « simple navigateur ».

Bonne lecture !

Je déteste les coups forcés

contact@nicolas-hoffmann.net (Nico) — Fri, 30 Mar 2012 21:25:52 +0200

Si vous jouez aux échecs, vous connaissez peut-être le terme dit des coups forcés. Ce terme indique que votre adversaire vous a mis dans une situation où quoi que vous fassiez, il vous mettra en échec et mat en un certain nombre de coups.

Comme vous vous en doutez, un joueur d'échec n'aime pas se retrouver dans cette situation. Je fais un parallèle avec le travail, avec un exemple totalement fictif, mais inspiré de la réalité.

Un client m'envoie en début de matinée une liste de contacts à importer dans une base mysql avec une demande formulée ainsi : « pouvez-vous importer cette liste dans notre base ? ». Étant littéralement débordé de travail urgent pour le même client et sans aucune autre précision, je réponds que oui, mais pas de suite. Aucune réponse de la part du client.

La journée se passe, je reçois un coup de fil de mon patron qui me relance sur le sujet. Surpris, j'explique à ce dernier que j'ai déjà répondu au client que ça serait fait, mais pas de suite vu que je n'ai aucune indication temporelle vu que je bosse déjà à fond pour eux. Il m'indique que c'est urgent, et que le client a hurlé comme quoi il en avait besoin ce soir, car la newsletter doit partir demain.

Ce n'est pas le fait d'avoir à gérer une urgence qui me dérange ça arrive souvent , c'est surtout de n'avoir aucune information précise en briefing, et qu'un petit job qui devrait se traiter sans stress doive être traité en priorité absolue où loi de Murphy oblige j'ai le moins de temps. Accessoirement, même si mon boss sait que j'ai été mal briefé comme lui, ça nous met les deux dans une situation désagréable qui pourrait être si facilement évitée.

Peut-être que certaines personnes ont besoin de stresser pour se sentir en vie, cela n'est pas mon cas, je pars de l'idée que tout stress qui peut être évité doit l'être.

La demande aurait été formulée ainsi : « pouvez-vous importer cette liste dans notre base mysql ? Nous en avons besoin pour demain. »

Ok, c'est peut-être court comme délai (c'est encore mieux si nous avons un délai plus long, mais je sais que cela n'est pas toujours possible), mais la différence est que je sais à quoi m'en tenir. Ajoutez à ça que comme toute personne humaine, j'aime rendre service autant que faire se peut, je vais arriver à trouver un moment dans une journée pour le faire.

Résultat, je serai content d'avoir rendu service, mon boss également, et le client le sera aussi. Il est aisé de constater que dans un cas tout le monde est frustré ou énervé, et dans l'autre tout le monde est content.

Autre exemple :
tu peux faire ça ?
oui je peux, dans deux heures ça te va ?
en fait j'en aurais besoin de suite.

Encore un coup forcé, tout simplement parce que le demandeur espère éviter d'avoir à contraindre celui à qui il fait sa demande et pense que l'autre amènera lui-même l'issue favorable sans que le demandeur ait eu à en faire la demande.

Moralité : au lieu de déléguer une angoisse ou une responsabilité et/ou au lieu d'être imprécis dans vos demandes, allez droit au but. Pensez-y quand vous formulez une demande ou quand vous serez victime de cette gaffe de communication ! :)

Pas un modèle d'accessibilité pour la bonne cause

contact@nicolas-hoffmann.net (Nico) — Wed, 21 Mar 2012 23:04:58 +0100

Qui aura penché regard sur mon curriculum,
verra en bas de ce dernier entre autre decorum,
une passion discrète et sensible pour les mythes,
discrètement logée au sein de celle des sites.

J'aimerais un jour rassembler ces deux hobbies,
si semblables à l'oreille, assez proches à l'écrit,
mais tout les oppose, comme Soleil et Lune,
si moderne pour l'autre, si ancienne pour l'une.

Il y a bien le héros qui a vaincu moult Troyens,
Ajax le grand, mais le rapport est assez moyen,
et je pense vraiment que l'acronyme en fasse fi,
je ne m'attarderai donc point sur cette homographie !

Je n'ai la prétention d'avoir la connaissance d'Ulysse,
tel un Prométhée qui serait pris en péché d'hybris,
sans technique et humble se veut mon propos,
partager le plaisir de l'illustre beau mot.

Je sais qu'un homme seul soulève montagnes,
alors je ne crains quolibets et autres bagnes.
Nulle Moire ne doit dicter le chemin d'un homme,
dût-il affronter Éris pour en détruire la pomme.

Du Tartare j'ai pu lentement remarcher,
la condition étant de ne pas se retourner.
Simple à comprendre : toujours regarder en avant,
Eurydice n'est jamais derrière mais loin devant.

Aller toujours plus loin, animé par une vision,
je ne m'explique pas cette étrange passion,
parfois je sens le poids de cette conviction,
Atlas, nos colonnes ont souffert à l'unisson.

J'ignore si ces mots seront immortels dans une odyssée,
sûrement plus fugaces, sitôt publiés sitôt oubliés,
mais je me prends à rêver en ce jour dédié à la poésie,
qu'un jour ces mots numériques franchissent l'oubli.

Alors en ce jour troublé ou Chronos agite et déforme,
je prends le temps de poser mot, avec la forme,
pas un modèle d'accessibilité, tant pis pour la cause,
heureux celui qui aura pénétré la raison de la prose !

P.S : Le 21 mars a été proclamé Journée mondiale de la poésie par la Conférence générale de l'Organisation des Nations-Unies pour l'éducation, la science et la culture, lors de sa trentième session, à Paris, en octobre et novembre 1999.

Il eut été dommage de ne pas se prêter au jeu, même si j'ai quelques doutes sur mes talents dans le domaine et sur l'intérêt qu'ils peuvent générer. :)

Ne soyez pas sectaires dans vos approches

contact@nicolas-hoffmann.net (Nico) — Sun, 18 Mar 2012 21:14:34 +0100

Certes il est bien d'avoir une habitude de méthode de travail heureusement d'ailleurs toutefois, je constate une curiosité. Elle n'est pas propre au web, mais comme c'est mon domaine, je la vois assez souvent dans ce dernier.

Ne le cachons pas, le domaine a pour avantage (ou inconvénient, c'est selon) de constamment devoir se remettre en cause. Les connaissances évoluent, les méthodes aussi, il faut inclure dans sa méthode régulièrement de nouveaux enjeux, penser à 4 choses en même temps quand on fait un template CSS par exemple, etc.

Vous avez déjà rencontré des personnes qui pensent avoir trouvé une technique, un outil, une méthode et qui ne savent plus faire autrement mais pour tout ?

Genre un site de 4 pages à pondre, et ils vous sortent un cahier des charges type de 60 pages parce que « c'est écrit dans ma méthodologie ! » Ou ils vont utiliser un énorme CMS pour un pauvre site statique qui aurait été tout aussi bien créé sans. Les exemples pourraient être nombreux.

Pire, quand ces habitudes interdisent d'augmenter la qualité de la prestation, sclérosent la réactivité au travail ou gênent l'ajout d'une nouvelle possibilité c'est un excellent indicateur de danger.

Ce propos m'inspire plusieurs conseils : le métier a la chance d'être extrêmement varié, c'est bien d'avoir une approche ou des méthodes, mais ne soyez pas sectaire ni borné. Il n'y a pas de réponse parfaite à une question, il y a plein d'approches. Au contraire, je trouve intéressant d'avoir plein de techniques à sa disposition, qui sait, si un jour un cas improbable se présente, vous serez ravi de dire : ah mais j'ai une idée/solution élégante pour ce cas.

Idem pour certaines astuces : relativisez. Aucun truc n'a force de vérité absolue ou intangible. Ce n'est pas parce qu'une astuce n'est pas idéale dans la majorité des cas qu'elle est bonne à jeter. Ni parce qu'elle est bonne qu'elle le restera indéfiniment. De ma petite expérience, il arrive d'être surpris de voir resurgir une technique ou une astuce là où on ne l'attendait pas du tout.

À mon sens, être sectaire dans un métier autant en mouvement, au mieux on n'évolue que très lentement, au pire, on est déjà hors jeu sans le savoir, comme dirait Ken le Survivant. Sachant que le deuxième cas est la conséquence directe du premier.

Si votre CMS chéri vous bloque dans certains cas, ou si un ajout relativement simple met un long moment pour se faire, il faut se poser des questions