zoom
Je surfe régulièrement avec un terminal mobile, comme ma mini-tablette Archos ou mon iPod. Ces appareils ont un tout petit écran (4 pouces ou 10 cm) et les pages s’affichent donc en tout petit.

Si la page web est bien conçue, la disposition des éléments de la page est optimisée pour les petits écrans : une page web classique est tout à fait lisible dans un terminal mobile en combinant les possibilités du CSS pour les pages et la fonction zoom des navigateurs.

Quelques jours plutôt je tombe sur cet article résumant les principales façons d’optimiser son site pour les smartphones.

Et je vois ceci dedans, qui est quelque chose qui malheureusement se retrouve un peu partout, principalement sur certains thèmes mobiles très moches de Wordpress :

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />


Ok, c’est un code destiné à Android qui ne détecte pas encore le CSS et le redimensionnement fluide. Mais ce qui m’embête c’est ça :

user-scalable=no


Ce code empêche d’utiliser la fonction zoom incluse dans tous les navigateurs mobiles.
Je trouve que c’est une idée à la con : il m’est arrivé plusieurs fois de tomber sur un thème mobile écrit en pattes de mouche sans pouvoir zoomer.

Voilà. Juste pour rabâcher encore une fois : lors de la création d’une page web et de son thème graphique, attardez-vous un peu sur l’accessibilité, et surtout laissez l’internaute maître de son navigateur.

J’en ai vraiment marre des magouilles de ce genre :
  • interdiction de zoomer à ma convenance (vous voulez pas qu’on vous lise ?)
  • interdiction de faire les clics droits (vous vous croyez ou là ?)
  • interdiction d’enregistrer une image (sérieux : désactiver le clic droit ou l’affichage de la source ne m’empêchera pas de la récupérer votre image)
  • interdiction d’activer un bloqueur de publicité.

Je suis désolé : si vous voulez pas qu’on prenne vos images, alors ne publiez pas sur le net. Déjà, c’est chiant, et ensuite c’est illégal pour vous de m’empêcher de prendre vos images.
Si si : la loi française stipule clairement que l’auteur ne peut empêcher qu’on duplique une œuvre pour un usage privé à partir du moment où il est diffusé (Art L. 122-5 2° du CPI).

image de Chrismar

22 commentaires

gravatar
Nicolas Fritz a dit :

J'ai encore eu récemment un client qui a insisté lourdement pour un anti click droit...

J'ai fait une fonction javascript "anti_click_inutile_mais_bon_jai_du_le_coder()" rapide, et puis voilà...

Ca me dégoute d'ajouter ça dans mes créations, mais le client est roi... :(

Alors quand je vois des développeurs ajouter ça de leur plein gré, ça m'irrite encore plus ! :I

gravatar
Manitou a dit :

Pour un usage privé, aucun problème, mais quand tu retrouves tes photos utilisées par d'autres et que ces personnes se font de l'argent dessus, y'a de quoi vouloir les protéger ! Depuis quand c'est illégal de protéger son travail ?

J'ai plus de 5.000 photos sur Internet et comme je ne vois pas l'intérêt de l'anti-clic droit pour bloquer l'enregistrement d'une photo (d'ailleurs, au passage, un div en opacité à 0 est beaucoup plus élégant), j'ai été jusqu'à inclure un copyright en plein milieu car je retrouvais mes photos sur d'autres sites (avec parfois le copyright de l'autre dessus !). A ma demande, certains les ont retirées.
Pour comprendre ça, il faut être un auteur ou un artiste, et arrêter de croire que tout ce qui est sur Internet est gratuit. Si on ne crée rien ou qu'on ne peut tirer profit de ses créations, on ne le comprend peut-être pas. Encore qu'avec un petit effort...

Concernant le user-scalable=no, je l'utilise en mettant width=device-width et en adaptant le site pour afficher peu de choses sur un mobile. Je trouve ça super, au contraire, de voir le site s'adapter automatiquement à la taille de l'écran (même si les anciens appareils ne le reconnaissent pas). Je le conseille fortement, plutôt que d'avoir un affichage illisible.

gravatar
Nicolas Fritz a dit :

@Manitou : "(d'ailleurs, au passage, un div en opacité à 0 est beaucoup plus élégant)" Non c'est pas élégant. Sérieux. Quoi que tu fasses niveau client c'est stupide ET pas élégant.

Si tu ne veux pas partager ta création, et la faire payer par exemple, alors tu ne proposes qu'une partie de l'image en aperçu, et tu vends l'autre en "clean".

Si c'est simplement des photos à afficher sur un site web, si c'est pour coller par dessus un gros "COPYRIGHT" en opacité réduite, autant ne pas mettre l'image sérieux.

J'ai déjà aussi été repris/copié sur plusieurs sites.. Et alors? Ca prouve seulement que mon travail a été apprécié. Il n'y a que moi qui suis capable de le reproduire, ou d'en faire une nouvelle version. Pourquoi chercher toujours à faire chier les gens pour rien? (désolé d'être si violent, mais c'est ça !)

gravatar
piero-la-l'une a dit :

En parlant de thème mobile, ton blog est illisible avec un iPhone depuis quelques jours : la police de caractère est maintenantbien trop grosse... Les mots ne tiennent pas sur une ligne et impossible de dézoomer...

gravatar
Le Hollandais Volant a dit :

@Manitou : je sais qu'on veuille protéger son boulot.
Mais ce n'est pasun anticlic droit qui au passage me supprime d'autres fonctions qui va l'aider.

Si ton travail est utilisé de manière non légale, il te reste et tu as toujours eu les droits d'auteurs dessus.

@All-o : étonnant. Je n'ai pas mon iPod ici lais je vais corriger ça. Visiblement ce qui marche sous android ne marche pas sous iOS...

gravatar
julien a dit :

Personnellement, je n'ai pas de problème avec le css3 avec le thème de mon blog sous android donc je pense que ça dépend surtout de comment on code.

gravatar
Androc a dit :

Exemple concret : la version mobile de Korben. C'est relativement lisible mais écrit suffisamment petit tout de même pour que lorsqu'on est fatigué ou dans chahuté dans les transports ça devienne illisible.

J'ai moi même horreur des "contraintes" imposées lors de la navigation.
Comme les liens cliquables en JavaScript qui ouvrent le nouveau lien dans la page courante alors qu'on aurait voulu ouvrir en onglet avec le clic du milieu

gravatar
Reihar a dit :

@Manitou

Le copyright en plein milieu de la photo me donne en général envie soit de mettre un filtre adblock sur la photo soit de quitter la page et de ne jamais y revenir.

C'est exactement la même chose que les DRM, on fait bien plus chier les utilisateurs honnêtes que les méchants pirates pédonazis qui savent utiliser photoshop/gimp/mspaint pour arranger le copyright.


@Androc

Alors là, je suis complètement d'accord, les liens javascript qui t'empêche d'ouvrir le lien de la manière que tu aurais souhaité c'est horrible. J'ai essayé de chercher et j'ai trouvé ça sur greasemonkey mais ça ne marche pas…

gravatar
Paul a dit :

Tout à fait d'accord, c'est pénible. Pour la même raison, je n'aime pas les <a target="new_window"> (déconseillées par le W3C) : je veux choisir moi-même si j'ouvre une nouvelle fenêtre. Pour les mesures de protection, c'est désagréable comme tu le dis et c'est illusoire: même l'utilisateur qui ne sait pas désactiver le JavaScript peut toujours faire une capture d'écran (idem pour les vidéos). Ça ne fait que rendre la navigation moins confortable pour les visiteurs normaux...

Pour reprendre ce que dit Piero, j'ai le même problème, mais depuis longtemps, avec mon téléphone mobile (ou "natel" comme on dit en Suisse ^_^). J'ai pris une photo:
http://static.tcch.ch/2012_03/IMG_0385_Ericsson_small.jpg

Du coup, je dois dézoomer à fond : rien que le titre "Le Hollandais Volant" prend 5 lignes et 2 tailles de mon écran… par contre, le problème est peut-être spécifique à mon modèle "à l'ancienne", vu que ça n'a pas changé récemment contrairement à Piero?

gravatar
Paul a dit :

PS @ Androc / Reihar: Pour les liens en JavaScript, je fais clic droit -> ouvrir dans un nouvel onglet. On perd une seconde, mais chez moi c'est la seule chose qui marche :-) à condition qu'il y ait un lien normal par-dessous le JS.

gravatar
Androc a dit :

@Paul: je sais, je sais pareil mais j'ai le réflexe du clic central, du coup ça s'ouvre mal, je me dis "meeeerde", retour arrière, clic droit, etc. Bref, c'est pénible

gravatar
Le Hollandais Volant a dit :

@piero-la-lune :
@Paul :

Concernant l’affichage de mon site ça devrait être amélioré maintenant.

J’ai testé :
- sous iOS 3.1.3 avec Safari
- sous android 2.2 avec le navigateur par défaut, et avec Opera Mini.

Le résultat est là : http://www.zupmage.eu/up/1332598663.png (avec des captures d’écran).

Chaque fois j’ai un affichage correct.

Concernant la taille de la police, il y’a une différence d’interprétation assez important entre Safari et tous les autres, donc j’ai fais un compromis : une valeur qui fait que ce n’est ni trop trop gros sous iOS ni trop petit sous Android.

@Paul : Concernant ton problème, oui c’est possible que ça soit un problème très ancien. Sur ces tout petits écrans je pense qu’il faille mieux que je désactive totalement les CSS.

@Piero : que le problème soit récent c’est normal : j’ai changé les CSS mercredi dernier. Ça devrais être résolu sous peu.
Je ne sais pas sous quelle version de iOS (iphone) tu es, mais je n’ai pas accès à iOS 4 ni iOS 5 dans l’immédiat (je peux voir avec le portable d’un ami, mais bon…).

Au pire, si je ne trouve qui aille, je désactiverais la disposition à la "mobile" et laisserais l’utilisateur zoomer tranquillement par lui même.

gravatar
Manitou a dit :

@Nicolas Fritz : "J'ai déjà aussi été repris/copié sur plusieurs sites.. Et alors? Ca prouve seulement que mon travail a été apprécié."
-> Sans t'offenser, tu as pensé au fait qu'on ne jouait peut-être pas dans la même cours ? Je ne te parle pas de photos amateurs, mais de milliers de photos prises avec un petit studio, un bon appareil photo.
Il ne s'agit pas de ne pas partager justement, il s'agit de ne pas se faire voler bêtement son travail par le premier venu qui va les mettre sur son site, augmenter ainsi ses visites (l'un des voleurs m'a copié 1200 photos et elles sortaient dans les micro formats de Google).

@Le Hollandais Volant : "Si ton travail est utilisé de manière non légale, il te reste et tu as toujours eu les droits d'auteurs dessus."
C'est ce que j'ai fait et ça a fonctionné. Mais ça me semble paradoxal car je croyais que tu étais contre les droits d'auteur ? Je me trompe ?

Petite question : comment fais-tu pour tester ton site sur téléphone ? J'ai Opera Mobile Emulator et je teste avec Safari sur Windows, mais je cherche des moyens plus proches de la réalité sur PC.


@Reihar : "Le copyright en plein milieu de la photo me donne en général envie soit de mettre un filtre adblock "
Bof. Le filtrage ne gênera que toi visuellement (adblock ou pas, c'est pas le sujet, surtout qu'il y a beaucoup mieux depuis longtemps). J'étais aussi contre un gros copyright, mais j'ai changé d'avis. Une fois que tu a été volé, tu comprends plus vite !! Et puis on s'y habitue. Il faut trouver un bon compromis de couleur.

gravatar
Le Hollandais Volant a dit :

@Manitou :


Mais ça me semble paradoxal car je croyais que tu étais contre les droits d'auteur ? Je me trompe ?



Je ne suis pas contre le droit d’auteur, mais contre le détournement actuel qui en est fait.
Voir là pour les détournements : http://lehollandaisvolant.net/index.php?2012/02/10/16/45/42-

Ce que fait l’industrie de la culture aujourd’hui, c’est justement une industrie : ils embauchent des chanteurs pour chanter et vendre les CD ensuite. Rien de plus, l’auteur n’est pas récompensé pour ses chansons ou pour son apport à la culture mais pour un labeur. Et ça, je suis contre.

Un auteur doit – s’il le souhaite – bien évidement être crédité de son travail quelle qu’il soit : une musique, un article de blog, un design automobile, une recette de cuisine…

Et ça va aussi dans le sens de l’utilisateurs : moi même utilisateur de Youtube ou de divers blogs, combien de fois je ne tombe pas sur une vidéo avec une belle musique de fond, et dont je ne vois le titre marqué nul part ? C’est vraiment agaçant (c’est pour ça que je met aussi la source des images sur mon blog, pour les autres qui la voudraient en grand et pour le créateur qui s’en voit crédité).
-----

Comment j’ai fait pour tester ?
Simple : je dispose d’une tablette Tactile Archos sous Android et d’un iPod touch sous iOS (vieille version par contre).

Sinon, il me semble qu’il y a des sites comme BrowserShots qui permettent de tester sur un grand nombre de navigateurs d’un coup. Peut-être y en a t-il pour mobile aussi ?

gravatar
Androc a dit :

Le problème de BrowserShot, c'est que ça te prend des screens des sites, pas génial pour tester la navigation, d'autant que le simple screen n'est pas instantané, du coup, c'est très lent.

Mieux vaut tester avec le SDK Android, si on ne dispose pas d'un téléphone Android.

gravatar
Manitou a dit :

Assez d'accord : pas facile de tester avec Browsershot.

Quelqu'un a essayé en machine virtuelle (http://virtualboximages.com/Android+OS+2.6.29+x86+Virtual+Appliance) ?

gravatar
Manitou a dit :

Je me réponds à moi-même et pour ceux que ça intéressent : une machine virtuelle sous Android est parfaitement réalisable. En 2 minutes c'est dispo. Et, n'en déplaise à Timo, le viewport fonctionne parfaitement. ;)

gravatar
Paul a dit :

@Le Hollandais Volant : chez moi pas de changement, mais c'est pas grave: j'ai pris l'habitude du dézoomage!

@Manitou : merci pour ton retour d'expérience. Pour ceux qui ont Photoshop / Illustrator, Adobe Device Central est sympa, avec ses centaines d'appareils en émulation, à condition d'avoir le temps de l'utiliser ;-) Capture d'écran ici:
http://static.tcch.ch/2012_03/Capture_Device_Central.png

Bon, la vraie machine virtuelle comme tu as insatllé c'est le top. À part qu'on n'a pas le véritable écran de l'appareil, qui peut avoir un rendu différent des couleurs...

@Androc : Browsershots est justement intéressant pour la diversité des écrans, avec leurs ratios, leurs couleurs. Petite astuce: dans "Queue", on peut repérer les ordis pas trop surchargés (ils sont en bas: c'est classé par "pending requests").

Pour les iPhones, il y a http://iphonetester.com/ ou http://www.testiphone.com/, mais je ne suis pas certain que ce soit très fiable. J'avais fait un script pour faire ce genre de validations en série mais il faut que je le "répare"...

gravatar
Nicolas Fritz a dit :

@Manitou : Ce n'est pas en rajoutant "Sans t'offenser", que tu paraîtras moins arrogant ou moins arrêté sur ton opinion. Mais bon, tant que tu restes dans ta cour de chamailleries, ça me va, on ne se croise pas. ;)

gravatar
Hegurka a dit :

Super prise de position Le Hollandais !
J'apprécie beaucoup !!!!!

Les commentaires sont fermés pour cet article