Blackberry et media Handheld ?

Bonjour tout le monde,

Ayant pu tester la V3 d'Alsacreations.com sur un Blackberry bold 9000, j'ai eu la désagréable surprise de constater que l'affichage était déplorable, malgré nos efforts de créer une feuille de style spéciale handheld.

Pour info, les styles d'Alsacreations.com sont insérés sous cette forme :

<link rel="stylesheet" type="text/css" href="http://www.alsacreations.com/css/styles.css" media="all" />
  <link rel="stylesheet" type="text/css" href="http://www.alsacreations.com/css/handheld.css" media="handheld, only screen and (max-device-width: 480px)" />

La feuille handheld.css corrige ou supprime les règles CSS de la feuille styles.css.

Selon l'article d'A List Apart (eh oui, on n'a pas - encore - les moyens d'acheter tous les PDA existants), le Blackberry comprend le media Handheld (et uniquement lui, c'est à dire pas les medias queries).

... Or, il se trouve que tous nos tests diraient le contraire : la feuille handheld.css est à chaque fois ignorée.
En tout cas, nous n'avons pu tester que sur un émulateur et on ne sait pas ce qu'il vaut.

Quelqu'un s'y connaît un peu ? Quelqu'un dispose d'un Blackberry de test ?

Note : en passant, si vous avez des soucis d'affichage sur d'autres PDA, n'hésitez pas à nous communiquer des captures d'écran

Note 2 : bien entendu, tous les sites en tableaux, sans feuille prévue pour mobile et avec un code tout pourri s'affichent parfaitement sur Blackberry

Note3 : pour info, l'affichage désiré sur handheld est de promouvoir le contenu, donc la sidebar et la recherche sont censées passer tout en bas de la page pour laisser 100% de largeur au contenu (= présentation monocolonne).

A priori c'est OK sur Opera-mini et iPhone.
Modifié par Raphael (09 Mar 2009 - 18:47)

Raphael a écrit :

En tout cas, nous n'avons pu tester que sur un émulateur et on ne sait pas ce qu'il vaut.

Salut Raphaël,
juste un petit message pour te signaler que j'ai eu exactement le même type de problème
avec un émulateur d'Iphone (qui ne lisait pas les media queries je crois), a priori je pense qu'on ne peut pas trop se fier au support du media sur des émulateurs de mobiles.

Hermann a écrit :

priori je pense qu'on ne peut pas trop se fier au support du media sur des émulateurs de mobiles.

Certes, c'est ce qu'on pense également. Sauf que j'ai pu le tester brièvement sur un vrai Blackberry bold 9000.

J'ai testé sur un Nokia e71 avec Opera Mini et le navigateur par défaut (basé sur Webkit il me semble).

Je ne dirais pas que c'est catastrophique mais j'ai clairement 2 affichages différents.

Navigateur par défaut
* affichage standard (comme dans un bon Firefox des familles)
* la bannière est coupée en haut à droite ; elle s'arrête un peu avant la rubrique "Emploi"
* la transparence est mal gérée (tachetée de points blancs)

Le reste est OK.

Opera Mini
* utilisation de la feuille handheld (bandeau sur fond noir mais avec une légère marge blanche à droite)
* présentation mono-colonne (voulu il semblerait) mais qui déborde à l'horizontale (donc scrolling à droite)
* la taille de police dans les "agenda" (du style "Mar 5") est un poil petite par rapport à la taille de l'image (probablement dû au fait que j'ai réglé "taille de police petite" dans le navigateur pour avoir davantage de texte à l'écran)
* la recherche est toute en bas du site

Le navigateur de l'iPhone est également basé sur Webkit (Safari oblige) et de mémoire, il se considère comme "screen" donc ne lit pas du tout le media handheld.
Paradoxe : le navigateur par défaut de Nokia rend la détection auto des sites comme un mobile (certains sites font la détection pour diriger automatiquement vers la version mobile) alors qu'Opera Mini ne subit pas ce traitement de (dé)faveur.

Hermann a écrit :
juste un petit message pour te signaler que j'ai eu exactement le même type de problème
avec un émulateur d'Iphone (qui ne lisait pas les media queries je crois)

il n'y a actuellement pas d'émulateur d'iPhone/iPod touch, hormis ce qu'il est possible de faire avec le SDK officiel d'Apple. les autres ne sont que des "simulations" qui reprennent l'apparence extérieure de la bête, mais qui font appel à un navigateur classique pour le rendu interne.

Oncle Tom a écrit :
Le navigateur de l'iPhone est également basé sur Webkit (Safari oblige) et de mémoire, il se considère comme "screen" donc ne lit pas du tout le media handheld.

tout à fait, mais il interprète heureusement les media queries.
Modifié par dew (09 Mar 2009 - 18:52)

Si je ne me trompe pas, on peut choisir dans les options du browser quel "emulateur" il utilise.
Je peux faire diverses test demain si tu veux

Disons que l'idéal est que cela passe "par défaut" sans avoir besoin de modifier les options

Je viens de tester sur un vrai Bold.
Effectivement, le site est rendu comme sur le un ordinateur classique et pas comme sur l'iPhone par exemple.

J'ai trouvé dans les options du Browser la possibilité de choisir Blackberry, internet explorer ou firefox, j'ai testé les 3, mais pas de changements, même en vidant le cache à chaque fois. Je ne sais pas si cette option change le oteur de rendu ou si il envoi simplement un autre user agent.

Par contre, en faisant une recherche sur le web, j'ai l'impression que tu n'est pas le seul à avoir le soucis;
Il faudrait peut-être faire une page en php qui récupère toute les données du browser et handeld en utilisant le user agent pour détecter quand un bold se connecte. ça permettrait peut-être de comprendre pourquoi le rendu n'est pas celui escompté.

PS : dindon ici, Dimdes sur twitter

Dindon a écrit :
Il faudrait peut-être faire une page en php qui récupère toute les données du browser et handeld en utilisant le user agent pour détecter quand un bold se connecte.

Merci pour les tests,

Le problème c'est que même en détectant qu'il s'agit d'un Bold, on ne saurait à priori quand-même pas quoi en faire puisque nos tests semblent indiquer, contrairement à l'article d'ALA, que le Bold ne détecte ni le media Handheld ni les media queries.

La question demeure la même : comment indiquer des styles spécifiques à un Blackberry ?

Et c'est quoi comme navigateur? Une version spéciale d'IE? Sinon j'ai lu quelque part que les acheteurs de smartphone avec Windows Mobile (des personnes assez au courant des dernières technologies en général) se dépêchaient d'installer Opera et laissaient tomber IE.

Patidou a écrit :
Et c'est quoi comme navigateur?

Je n'ai pas fait attention, mais c'est forcément le navigateur proposé par défaut.

Bon effectivement le media handheld n'est pas reconnu sur le Blackberry, ainsi que d'autres petites subtilités.

En faisant un test sur le User Agent et des styles CSS en ligne, ça fonctionne. Par contre avec un User Agent + une feuille CSS linkée, ça ne fonctionne pas. On continue à tester...

EDIT : bon ben on a finalement fait ça à la barbare, avec les styles CSS en ligne directement dans le header en detectant le user agent. Si quelqu'un a une méthode plus propre, on est preneur :

if(strstr($_SERVER['HTTP_USER_AGENT'],'BlackBerry')!=false) {
	echo '
	<style type="text/css">
	#page, #footer, #footer-menu {
		background:#fff;
	}
	#header-sep, #evitement, #sous-menu .homeitem, #rss, #footer, #header #recherche, #footer-end, #sidebar .adsense, #sidebar .minipub {
		display:none;
	}
	#header {
		background:#000;
	}
	... etc ...
	</style>
	'."\n";
} else {
	echo '<meta name="viewport" content="width=device-width" />';
} 

Modifié par Raphael (10 Mar 2009 - 18:04)

tu veux que je reteste demain pour te confirmer que c'est ok ou c'est bon?

Par contre avec cette solution, ça fait sauter tous les autres blackberry qui réagissaient peut-être correctement, non?

Dindon a écrit :
tu veux que je reteste demain pour te confirmer que c'est ok ou c'est bon?

Par contre avec cette solution, ça fait sauter tous les autres blackberry qui réagissaient peut-être correctement, non?

Je veux bien quelques tests supplémentaires, vu qu'on n'a pu tester que sur un émulateur de blackberry storm 9530 (donc très très récent).

En fait il y'a plus ou mois 3 générations de Blackberry en terme de reconnaissance des CSS :
- la version 3.5 (et avant)
- la version 4.2 (et avant)
- la version 4.6 (et après)

Depuis la version 4.2, le support CSS est pas mauvais du tout. Depuis la version 4.6, la plupart des propriétés CSS 2.1, les pseudo éléments et même les sélecteurs "complexes" sont pris en charge... tant que ces CSS sont dans une feuille de style classique destinée au média Screen.

Le problème se pose quand une propriété est mal reconnue (sur Alsa.com c'est le cas de background-position qui semble déconner avec des valeurs en % et en mot-clés associés) : impossible de proposer une feuille alternative pour Blackberry : il ne reconnait ni handheld, ni les media queries. Il faut donc ruser en détectant le user-agent.

Mais à priori ça fonctionne de la même manière depuis plusieurs générations de Blackberries.

D'autres tests de Quirksmode confirment que le Blackberry (et d'autres) appliquent le media screen à la place du handlheld :
http://www.quirksmode.org/m/table.html#t30

J'avais lu un article à ce sujet (mais je ne saurais plus donner le lien) qui disait (en résumé) que de nombreux fabriquand décidaient délibérément de ne pas faire reconnaitre le media handheld, parce qu'il considéraient que les développeur allaient fournir pour ce média une version plus moche et que donc il était préférable pour les utilisateurs que ce soit la feuille de style destinée à screen qui soit utilisée.

Laurie-Anne, je comprend cette idée.

Le problème se pose quand le support CSS du mobile est déficient et qu'il faut faire une version différente pour ce mobile pour corriger cette déficience.

De cette expérience j'ai pu conclure que :
- le blackberry, comme d'autres, ont un support CSS relativement correct
- ils appliquent uniquement le media screen (pas handheld ni media quieries)
- ils affichent très bien les sites avec tableaux de mise en forme et autre code lourd et non sémantique

Là où c'est gênant :
- certaines propriétés (notamment background-position) sont mal implémentées et il faudrait donc envoyer aux blackberries une feuille CSS spécifique qui corrigerait ou masquerait cette déficience
- à part en détectant le user-agent, nous n'avons pas réussi à mener notre mission à bien.

Une belle leçon... qui me conforte dans l'idée que si on développe vraiment pour Mobile, les media queries ne suffisent pas et travailler avec le user agent me semble plus sensé à l'heure actuelle.
Ici c'est différent, Alsa prends le défi d'être accessible au plus grand nombbre, mais ce ne serait pas dramatique que la restitution échoue sur 2/3 mobiles; Ce qui pourraient l'être beaucoup plus si on parle d'un vrai site dédié au mobile, commercial de surcroit.

j'ai fait encore 2/3 tests

*Bold (V4.5), je confirme, l'affichage est maintenant correct

*8120 (V4.3)(écran : 240 x 260 pixels), Bizzare, ici l'affichage par défaut donne des caractères beaucoup trop petits et donc illisible, j'ai du switcher une option de Page View vers Column View pour avoir qqch de correct

*8800 (V4.2) +/- Bon, mais toutes la partie Menu du haut ne me semble pas ( de mémoire) identique à ce qui apparait sur l'iphone.

*pas de Blackberry V3.6 ou en dessous à tester ici.

Raphael, par mon travail j'azi accès à une quantité innombrables de mobiles.. si tu as besoin d'un test supplémentaire, je suis dispo.
Modifié par Dindon (11 Mar 2009 - 14:02)

Dindon a écrit :
Raphael, par mon travail j'azi accès à une quantité innombrables de mobiles.. si tu as besoin d'un test supplémentaire, je suis dispo.

Ah ça c'est sympa.
De notre côté, on va devoir s'acheter un iphone ou deux, quelques blackberries et autres... pour le boulot bien-sûr

Raphael a écrit :
De notre côté, on va devoir s'acheter un iphone ou deux

Sinon il y a l'ipod touch ou l'émulateur avec xcode mais là il faut un mac...