1485 sujets

Web Mobile et responsive web design

Administrateur
Un très bon article sur A List Apart : Return of the Mobile Style Sheet

On y retrouve notamment les meilleures façons de déclarer les différents fichiers css externes afin qu'ils soient appliqués sur les multiples plate-formes existantes
Merci Dew pour ce lien.

Perso la solution Antiscreen.css de l'inoxydable Eric Meyer ne me semble pas très convaincante. Je suis de plus en plus persuadé que la notion de handheld est morte et enterrée avec celle de "feuille de style pour petits écrans" pour 2 bonnes raisons : la première c'est qu'entre un groooooos Blackberry et un tooooooout petit eeePC ben la différence n'est plus très pertinente, et du coup la notion même de "tenu à la main / handheld" ne l'est plus non plus, et la seconde c'est que "Apple m'a tuer" avec l'iPhone : en s'extrayant des outils normatifs existants et en essayant d'imposer sa façon de voir il va contraindre handheld à disparaître tôt ou tard, puisque son modèle risque de devenir "LE" modèle repris par tous. Exit handheld donc. RIP.

En revanche, si la notion de "taille d'écran liée à une taille d'outil" n'est plus guère pertinente, celle de taille "en deçà ou au-delà de laquelle il se passe ceci ou cela" reste plus que jamais d'actualité. La question est : où fixer la limite ?

Le débat récurrent sur Alsa (800x600 ou 1024) me paraît un peu en dehors de la vraie question qui est : on fait quoi en dessous de 5-ou-600px ??? L'arrivée des PDA "kingsize" amène sur le marché une ribambelle d'outils qui, additionné à ceux qui existent déjà, offrent une gamme d'écrans entre 240 et 5-600 pix avec lesquels on sait plus trop quoi faire.

Media Queries est une solution, effectivement. Encore faut-il savoir à quoi l'appliquer. Si la détection de viewport de telle ou telle taille a un sens au niveau de la négo de contenus, ce n'est pas dans celui d'opter pour des feuilles CSS spécialisées (comme le faisait handheld....) mais plutôt dans la détection au niveau du serveur du type de contenus à envoyer ou pas, et sous quelle(s) forme(s).

La problématique des mobiles, PDA et autres "small screens" (voir DS...) ne me semble pas tellement celle de servir un autre design (antiscreen ou pas) mais celle de servir autrement des contenus. Les outils de zoom, de scroll tactile, etc. vont se développer en même temps que se développeront les nouvelles habitudes utilisateurs (c'est vrai qu'aujourd'hui l'ergonomie mobiles n'est pas "naturelle", mais le couple souris-pointeur ne l'était pas plus en son temps). En revanche la question du contenu trop lourd (donc avec risque d'être incomplètement chargé...), du contenu trop complexe (avec risque d'être + facilement ignoré/zappé sur petits écrans...), du contenu trop riche (avec risque de plugin absent...) est en train de se poser de plus en plus précisément.

Je trouve donc personnellement que la question du handheld ou pas ne vaut même plus un article. En revanche, pousser une réflexion sur "comment construire un contenu multi-supports indépendamment du format de sortie" est étrangement absente de nos rayons Smiley smile

Sur ce bonne chance pour l'Alsa v.3 qui doit vous bouffer toutes vos bonnes résolutions (d'écran) 2009.
a+
Modifié par Arsene (07 Jan 2009 - 16:55)
Administrateur
Justement il y aura une version mobile pour la V3, en utilisant des media queries Smiley cligne
Modifié par dew (07 Jan 2009 - 17:20)
...en affichant les posts individuellement avec génération auto de boutons [post prec] Smiley suivant Smiley dernier [répondre] en bas de chaque post, plus outils [retour au sujet] [retour au salon] [retour accueil] également en bas de chaque écran ?
Administrateur
Non pas tout à fait, mais cela viendra...
C'est déjà le jour et la nuit entre une version "classique" et un soin apporté à la version mobile.
Arsene a écrit :
Le débat récurrent sur Alsa (800x600 ou 1024) me paraît un peu en dehors de la vraie question qui est : on fait quoi en dessous de 5-ou-600px ???

Et encore, même ça c'est une vue à court terme. Quid des terminaux à venir qui afficheront du 900x1600px (preque au pif) sur, disons, 4,5cm sur 8? Voire des résolutions bien supérieures. Faudra-t-il (et pourra-t-on) faire du media queries en cm? Et de l'intégration en pourcentages, pour le coup. Smiley smile

Je ne sais pas ce qui va se passer au niveau des résolutions d'écran à proprement parler, mais il se peut que les résolutions augmentent à l'avenir au point de tuer la notion de pixels, du moins pour les designers et intégrateurs (pas pour les ingénieurs hardware et système). Wait and see.
Modifié par Florent V. (07 Jan 2009 - 21:22)
D'accord avec toi... disons qu'il existe une limite "humaine" (taille de lisibilité) qui nécessitera de déterminer à partir de quelle taille afficher un contenu comme ceci ou comme cela, et que la limite actuelle, technologique (résol en pixels), n'a plus tellement de sens. Du coup effectivement la notion même de pixels devient obsolete.

En théorie on devrait même pouvoir imaginer un jour afficher universellement l'intégralité de la page en vignette (donc calée en pourcentage - fontes, images, blocs, etc - dans l'espace disponible) qu'un dispositif de zoom adapterait aux besoins de l'utilisateur, besoins qui dépendent de facteurs tels que la taille de l'écran qu'il utilise, son acuité visuelle et/ou le degré d'information auquel il veut accéder : ne veut-il consulter que les grands titres pour se faire une idée du contenu (auquel cas un facteur d'agrandissement qui maintienne le texte courant à l'état de grisé est suffisant) ou veut-il lire confortablement toute une partie de l'article ? Ne veut-il prendre connaissance que de l'information générale transmise par une image ou veut-il en explorer chaque détail ?

C'est déjà ce que proposent beaucoup de mobiles où on affiche la page globale ; d'un coup d'ongle on agrandit la partie qui nous intéresse. Ce dispositif, en tant que concept de présentation universel, pourrait être étendu à tous les UA graphiques quelles que soient les tailles d'écran. Du coup la question de la résol/taille d'écran n'a plus aucune utilité, ni celle de feuille CSS spécialisée selon l'UA. Plus l'écran est grand, plus la "vignette" est grande... jusqu'au moment où elle est tellement grande qu'elle devient utilisable sans zoom.

Ce moment arriverait en fonction du volume d'informations proposé dans le document. Pour une "petite" page il arriverait dès 800x600, pour un doc plus conséquent il n'arriverait qu'en 2048x1536, tout ça dépendant à la fois de la résol, du dot pitch et de la taille physique. Une telle approche permettrait de s'affranchir définitivement de la question de l'écran de rendu. On règle aussi du coup la question du scroll qui n'a plus de raison d'être. Bref, rien que du bon Smiley smile

Peut-on se dire qu'avec l'arrivée sur le marché de grands écrans tactiles pour ordis on va s'orienter vers ce genre d'usage ? Wait and see, comme tu dis.
Modifié par Arsene (08 Jan 2009 - 09:33)
Salut !!

Je rentre rapidement dans le débat. Pour moi le débat de fond pour les périphériques mobile actuelles, n'est pas tellement la résolution (Prenons l'exemple d'opéra Mobile avec son zoom très pratique qui affiche la page en entier, puis d'un coup de doigt on adapte à notre vue).

Je parlerais plutôt du contenu des pages, qui pour mes périphériques mobile peuvent être très pénalisant.

Pour exemple précis, je suis sur une plateforme Windows mobile. Bon, j'ai 16go de mémoire, mais la mémoire Windows, elle ne fait qu'a peine 100 MO, une navigation quotidienne sur une semaine, me prends environ 6 mo.

Autant dire que ça va vite. Ce qu'il faut, à mon humble avis, penser lorsqu'on fait une version (CSS)(JS)(IMG) d'un site pour mobile, c'est le poids de la page. Et aussi et surtout, les script Javascript.

Prenons l'exemple de facebook. Heureusement que le site mobile existe, sinon, pratiquement impossible à naviguer avec un PDA ! Trop de javascript tue le javascript. Une page qui charge en 35 seconde en 3G+, c'est énorme !

CSS oui, mais le poids de tout le reste, ça compte énormément.

Après, un site adapté à une résolution d'écran si petite, et surtout, aux système tactile (police grande), là c'est le pied !

Pour parler rapidement de la V3, sur un Iphone, ça doit bien le faire, mais sur mon Samsung I900, j'ai une résolution moins large et du coup ... ça coince un tout petit peu.

Ci joint des screens, et pour l'équipe Alsa, un petit bug, le lien "Quizz" est à moitié couper Smiley ohwell

Résolution 240x400 (Opéra 9, Windows Mobile 6.1)
upload/3270-Screen01.png

Résolution 400x240 (Opéra 9, Windows Mobile 6.1)
upload/3270-Screen02.png

Résolution 400x240 (Opéra 9, Windows Mobile 6.1) (rezoomé à la main pour cadrer l'ensemble)
upload/3270-Screen03.png
Administrateur
Super_baloo8 a écrit :
Pour parler rapidement de la V3, sur un Iphone, ça doit bien le faire, mais sur mon Samsung I900, j'ai une résolution moins large et du coup ... ça coince un tout petit peu.

Ci joint des screens, et pour l'équipe Alsa, un petit bug, le lien "Quizz" est à moitié couper

C'est mieux maintenant ?