Étiquette : web

Catégories
Technologie

le « Responsive design », c’est du travail

Le «Responsive Design» est un ensemble de techniques qui consiste à faire en sorte qu’un site s’adapte à toutes sortes de supports : ordinateur, tablette, téléphone, télévision, console, papier.

À l’origine, ce n’est pas un problème : la plupart des sites sont consultables sur tout type de support, le confort du site, en revanche, est plus que discutable, si aucun travail d’adaptation n’est fait.

Et pourtant, le principal problème que je rencontre, lors de la réalisation, c’est que le graphiste n’a réalisé qu’une maquette et donc le client n’a validé qu’une disposition. En général, la situation est accompagnée d’une phrase lapidaire dans le cahier des charges : «il faut que le site s’adapte sur iPhone et iPad».

En fait, ça revient à dire que pour cette fonctionnalité, qui est attendue, il n’y a pas eu de conception : nous sommes passés directement de la demande du client à la réalisation.

Pour vous rassurer, ce problème n’existe quasiment pas si vous fonctionnez plus ou moins avec des méthodes agiles, ainsi vous pourrez améliorer rapidement le site par de courtes et nombreuses itérations. Le chef de projet est le mieux à même, étant donné sa visibilité sur le projet, de coordonner ces allés-retours et de prendre rapidement les bonnes décisions.

Dans tous les cas, au travail initial qui est de réaliser une page web, il faut ajouter le travail qui consiste à anticiper ces transformations là où elles sont nécessaires, en fonction des changements d’orientation ou des changements de dimensions.

Vous avez fait une maquette en 1500x700px ? Faites-la rentrer dans un petit échantillon de dimensions courantes : 320×480, 360×640, 768×1024, 800×1280, 980×1280, 1280×600, 1920×600… sans oublier d’envisager l’orientation : portrait ou paysage…

Alors, comment concevoir un site «responsive» ?

Le designer (au sens concepteur, donc celui qui fera une maquette fil de fer), s’il a la double compétence de développeur «front end», sera plus à même de comprendre les problématiques, les capacités et les enjeux liés à la technique.

Voici quelques pistes.

Un design simple est facile à adapter.

Si vous avez optez pour une architecture de l’information de votre site simple, voir minimaliste alors, de part la quantité d’information réduite à afficher en même temps, votre site sera facile à adapter à différents supports.

Ou par l’absurde : si vous mettez trop d’informations, ça ne rentrera jamais sur le petit écran d’un téléphone portable.

Corollaire : la surface de l’écran d’un téléphone est plus petite que celle d’un ordinateur de bureau.

La barre de scroll, est votre ami !

Passer d’un écran panoramique à un téléphone portable est à peu près équivalent à tourner une feuille de paysage en portrait. Il est donc inutile de concevoir un site en 16/9ième : tous les internautes ont un écran différent.

Par contre au niveau confort de consultation, faire défiler le contenu selon un axe, de préférence vertical, est le meilleur moyen de pallier à l’inconnu de la taille de l’écran. Ainsi mettre deux éléments l’un à côté de l’autre peut paraître évident, mais sur un smartphone il sera peut-être plus judicieux de les mettre l’un en dessous de l’autre. Le graphisme ne doit pas gêner cette transformation.

Pensez mobile puis enrichissez.

Comme nous venons de voir, le mobile est le plus contraignant, alors pourquoi ne pas hiérarchiser l’information pour ce support, pour ensuite s’enrichir en fonction de la place gagnée ? Think Mobile First !

Faites disparaître le contenu secondaire.

Dans le cas où vous avez un site existant ou que la conception est déjà trop avancée, il faudra surtout chercher à s’adapter au mobile. C’est le cas inverse du précédent, que je rencontre le plus souvent. L’idée est alors de conserver le contenu essentiel, le seul que l’on aurait mis si nous avions été dans la démarche «mobile first» et de retirer les autres par des méthodes plus ou moins subtiles : le mettre à la suite ou le faire apparaître sur une action de l’utilisateur (la navigation notamment).

Les éléments décoratifs sont-ils essentiels ?

Un certain nombre d’éléments peuvent être supprimés pour les écrans les plus petits, au passage c’est souvent ceux qui ont le moins de bandes passantes. Par exemple, une image de fond très grande qui ne peut être rendue sur un petit écran a tout intérêt à être supprimée. Dans la même idée, des boutons illustrés peuvent se passer de leur illustration ou de leur libellé selon les cas.

En résumé, si votre soucis est le contenu, sa hiérarchisation et le confort de son accès ; alors ce sera facile et utile de faire un site «responsive».

Catégories
Technologie

les limites des performances web

Je déteste les sites qui rament… d’ailleurs, comme beaucoup de monde, je fuis au bout de quelques secondes d’attente.

C’est une des raisons qui me pousse à optimiser les sites que je fais, en tout cas dans certaines limites !

En effet, en utilisant le service de google «PageSpeed», qui au passage est très bien fait et grâce auquel j’ai beaucoup appris, j’ai pu me retrouver bloqué dans mes optimisations par des composants hors de mon champ d’action ou de mon domaine de responsabilité.

Aucune maîtrise des composants externes

Sur un de mes sites perso (www.citation-et-proverbe.fr), j’ai installé google analytics, un bouton +1, google adsense et d’autres publicités. Les seuls éléments d’amélioration que je puisse apporter sur le site concernent ces éléments externes dont :

  • l’expiration n’est pas précisée dans de header HTTP
  • ces ressources sont servies avec des redirectionz
  • les javascript ne sont pas compactés

… et quelques autres dans le même style.

Rien que je ne puisse améliorer, sinon de retirer ces outils. Fort heureusement ce site est très rapide et pour peu que vous utilisez un plugin firefox comme ghostery, ces ressources ne seront même pas servies…

Note, ici c’est de la pub, ailleurs un widget de réseau social… les ajouts sont multiples et ont leur utilité.

Conclusion : intégrer un élément externe sur un site le ralenti.

Aucune influence hors de mon domaine de responsabilité

Sur d’autres sites, le problème est tout autre. Le contenu sur lequel le commanditaire veut communiquer et la présentation que le graphiste veut en faire rendront impossible toute volonté d’optimisation.

Typiquement, des sites comme le Hi Hôtel ou Areco sont lents pour ces deux raisons :

  • Trop de contenu à afficher
  • L’ensemble de ce contenu sur une même page

La lourdeur qui en résulte fait que le site rame et qu’il est long à charger. Certes, on peut moduler les lenteurs de chargement en ajoutant un «loader» qui vous fera patienter tranquillement, ou en chargeant certains éléments après coup… cela ne résoudra pas le problème in fine : trop de contenu en même temps.

Conclusion : ce n’est pas le fait du seul «développeur front» d’assurer la performance d’un site.

Les autres points importants du projet

Cela recoupe un peu la remarque précédente, mais dans les diverses techniques d’optimisation certaines vont avoir des effets sur la vie du site : la maintenance, le marketing et le référencement.

Ainsi, combiner et compresser les javascript et les CSS doit être refait à chaque mise à jour, l’idéal étant de l’automatiser.

Également, le chargement différé d’éléments textuels ne sera pas pris en compte dans le référencement naturel…

Et si, ajouter un widget relié à votre page facebook peut avoir une certaine utilité d’un point de vue communication et marketing, mais pas d’un point de vue de la performance web.

Au final, l’optimisation absolue, la quête de la performance n’est pas possible et vient se loger avec les différentes spécificités du projet. Les outils comme PageSpeed et YSlow permettent d’améliorer ses compétences, de trouver des points de blocage… mais pas nécessairement de faire un site rapide.

 

Catégories
Technologie

comment je navigue sans me faire tracker

Les sites nous espionnent, tentent d’en savoir le plus possible sur nous afin de nous vendre ce dont nous avons potentiellement besoin, de nous pousser à la consommation en nous affichant les publicités de produits qui pourraient nous intéresser.

Où est le problème avec le tracking ?

Comme nous le rappelle Duck Duck Go dans cette présentation, les mots que l’on recherche sont conservés pour établir un portrait robot de vous. Ces informations sont transmises au site cible, et potentiellement peuvent être vendues à d’autres organismes. Le but ici est de faire de l’argent en proposant des publicités ciblées.

Mais cela n’est pas le pire. Ces informations sont enregistrées et peuvent donc être compromises :

  • l’administrateur du système peut voir ces données, dès lors il vous connait précisément.
  • Le système peut être compromis par une personne mal intentionnée et ces informations se retrouver publiques.
  • Ces données peuvent se retourner contre vous, si par exemple un état ou une instance judiciaire les exige.

Souvent on se dit que ce n’est pas grave, que c’est le prix à payer pour le service rendu. Attention, les services mettent en place un fichier privé d’informations vous concernant et l’histoire nous dit tout qui faut nous méfier.

Avant la seconde guerre mondiale, IBM était en charge du référencement de la population des Pays Bas. Référencement très efficace et qui contenait entre autre information la religion des habitants, information indispensable pour que l’état puisse apporter une contribution à la construction des lieux de culte au pro-rata de la population concernée. Les Nazi, en envahissant le pays, ont récupéré, de grès ou de force, ces informations et ont décimé la population juive.

Voilà pourquoi il ne faut pas faire de fichier de population. Dans la pratique, de petits fichiers ne contenant que les informations nécessaires et qui sont détruits dès qu’ils n’ont plus d’utilité peuvent faire l’affaire, mais globalement, si on peut faire sans, il faut s’abstenir.

Comment s’en prémunir ?

Bloquez les systèmes de tracking tel que google analytics, évitez les services qui ne s’engagent pas à respecter votre vie privée.

Je passe sur les informations que vous donnez sciemment à Facebook et autre consort, est-ce vraiment utile de détailler autant votre profil ? Pensez que toutes les données que vous publiez sur Internet sont publiques ou peuvent le devenir en quelques secondes.

Mes solutions partielles et incomplètes

La solution la plus évidente consiste à dire que vous ne voulez pas être tracké, pour cela dans Firefox, allez dans les options, onglet « vie privée » et cochez « Indiquer au site web de ne pas me pister ». Ne vous faites pas d’illusion, personne ne respecte cette recommandation, mais ça n’empêche pas de le dire.

Bloquer les systèmes de tracking est assez simple, la première extension Firefox venue fait tout à fait l’affaire, mieux que ça, elle vous informe en vous disant qui nous track et qui elle a pu bloquer : Ghostery (nécessite quelques minutes à installer et à configurer).

Ensuite, bloquer les pub qui elles-mêmes track pour affiner votre profil, n’est pas inutile, pour cela : Adblock Plus.

Jusque-là ce n’est pas bien compliqué, la suite est malheureusement plus difficile. Personnellement j’ai désactivé flash et java, je n’ai jamais installé silverlight… et j’évite tout plugin dont l’utilité est plus que douteuse.

Ok, cela veut dire que bien souvent je ne peux pas accéder à une vidéo sur dailymotion par exemple, pas de soucis, pour cela j’utilise un autre navigateur, ça me prend quelques secondes à peine de copier l’URL. Cet autre navigateur, c’est chrome, qui démarre directement en mode « incognito », c’est-à-dire qu’il n’enregistre rien et dès que je l’aurai refermé, il aura tout oublié.

En effet, ces tracker, sont très malins, en plus de chercher à savoir ce que vous allez voir, ils ont l’indiscrétion de laisser des informations (un cookie) pour que la fois suivante ils puissent dire : je suis passé par là, cet utilisateur avait fait ceci est cela avant….

Avec Firefox, pour se prémunir de ce défaut, dans les options de « vie privée » vous pouvez configurer pour qu’il supprime les cookies à la fermeture. Le petit désagrément sera de devoir ressaisir votre mot de passe des services auxquels vous êtes inscrit à chaque fois que vous ouvrez votre navigateur (email, forum…).

Un autre plugin intéressant, c’est HTTPS Everywhere, il permet de passer automatiquement et systématiquement sur une version chiffrée d’un site si elle existe. Cela permet d’éviter qu’un intermédiaire sache ce que vous échangez avec le site.

Pour aller plus loin

La suite est bien plus compliquée, il s’agit de s’abstenir d’utiliser des services centralisés tels que facebook ou google. En effet, ces entreprises sont soumises au droit et rien n’empêche à un juge américain d’exiger qu’ils fournissent les informations de telle ou telle personnes, et la probabilité qu’un gouvernement autoritaire s’en empare de force n’est pas négligeable non plus.

Des armes de guerre plus lourdes

Cela sort du cadre de cet article, mais sachez que si la nature de vos communications mettent des vies en danger, il existe des moyens redoutables pour éviter toute forme d’espionnage quel qu’en soit le but.