Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

impératifs d'écriture pour les nouveaux médias ?

57 réponses
Avatar
docanski
Bonjour la foule,

Quelle différence y a-t'il entre la création de pages pour iPhone et
autres iPod et la création de pages HTML + CSS destinées au Web ?
Quels sont par ailleurs les impératifs de mise en page pour ces médias
où l'affichage est nettement plus réduit en taille ?

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/

10 réponses

1 2 3 4 5
Avatar
rm
Bonsoir,
Le mardi 19 janvier 2010 à 02:56, SAM a écrit :

Le 1/18/10 10:09 PM, rm a écrit :
Le lundi 18 janvier 2010 à 18:01, SAM a écrit :

(ton site champignons ne passe pas si mal, au moins les fiches)
(bien qu'on puisse y oublier de lire le commentaire)



Pas en mode Mobile View (Tools > Settings) où il suffit de faire défiler de
haut en bas, un peu comme le mode « Petit écran » de la version Desktop.



Heu ... pas essayé (ni vu ce view-tool)



Voir quelques petites démos animées alors :
http://files.getwebb.org/index.php?mode=view&id=cre66fkn
http://files.getwebb.org/index.php?mode=view&id=cre66fkm
(réalisées via Opera Mini 5 sous MicroEmulator pour Windows)

mais va t-on scroller tout le vide avant d'aariver au commentaire ?



Non, le mode Mobile View ou « simple colonne » permet justement d'éviter de
trop zigzaguer dans une page... on monte, on descend et pis c'est tout :)

@+
--
rm
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Olivier Masson ecrit ce qui suit en ce 19/01/2010 17:43 :

Ne cibler l'iPhone, sauf volonté commercial, c'est idiot. Autant que ce
fut à l'époque de faire des sites "optimisés Internet Explorer 6".



Ah mais ce n'est pas le but ! Le but est d'offrir la possibilité de
consultation de pages dans les meilleures conditions d'affichage pour la
majorité des médias portables, y compris les GSM de nouvelle génération
capables aujourd'hui d'offrir une résolution de 320 pixels de largeur.

Par contre, créer une version pour le profil "handheld", c'est tout à
fait recommandé : créer une navigation adaptée, une charte graphique
plus légère,



Encore faudrait-il que je comprenne ce que signifie "handheld" :-)
Ceci dit, il est évident qu'il faut adapter la navigation à ces médias.
Pour ce qui est de la légèreté, il n'y a pas de problème : les pages
existantes le sont déjà. Il s'agit donc uniquement d'adaptation et, pour
certaines d'entre elles, d'une réécriture pour permettre une
convicialité parfaite ... ou presque.

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Avatar
SAM
Le 1/19/10 5:43 PM, Olivier Masson a écrit :
Le 19/01/2010 16:39, SAM a écrit :

Je ne vois pas pourquoi, sous prétexte d'être compatible mobiles, il
faut que les grands écrans se contentent de petites images :-(



Ça me parait être effectivement une grosse erreur.
Créer un jeu d'images dimensionnées spécialement pour les "handheld" est
nettement mieux.



Y a peut-être kke chose qui m'a échappé dans l'exposé de Dc n Ski
et c'est ce qu'il veut dire ? faire ?

On envoie telle ou telle image suivant qui la demande
(par une des + belles négociations du serveur, savamment concoctée)

D'où l'intérêt de styler la taille en %
ou peut-être ne pas stipuler de taille du tout ?
(et c'est le MobileView qui se charge de l'adaptation ? nosè)



Et faire charger inutilement des ko et des ko alors qu'il vaut mieux
limiter le poids (et les requêtes) sur réseau GSM.



D'autant que j'ai vu que les FAI limitaient le débit.

Tu changes Stéphane, tu changes et c'est pas bo...



Tu es bien sûr que t'as fini de faire le ménage dans tes images ?

Ceci étant, j'ai vu une option dans le Mobil-Opera :
choix qualité image : basse , moyenne, bonne
Comment ça se négocie ?
Comment le navigateur requête-t-il ? et qu'attend le serveur ?
(quel Apache faut-il ? qu'il comprenne ce que lui veut l'bidule)

Est-ce que les autres navigateurs-mobiles ont aussi cette option ?

L'iPhone n'a pas le monopole, même s'il monopolise. Et comme c'est un
gadget vendu à prix d'or (alors que d'autres font nettement mieux pour
moins cher)



Des noms, des noms !

Je parle de l'iPhone parce que je l'ai eu entre les mains, mais je
suppose bien qu'il n'est pas seul à avoir le multi-touch et des
muli-fonctionnalités.
Après ... mieux ... moins bien ... ça doit dépendre du cahier des
charges de l'utilisateur.

il ne conservera pas longtemps cette part de marché qui
s'effrite peu à peu.



J'ai vu le contraire, mébon.

D'autant plus qu'on constate que bcp d'utilisateurs
d'iPhone... ne l'utilise pas (ne l'exploite pas) :)



Moi je sais pô ... j'ai déjà assez de mal avec mon phone de base ...
mais j'ai l'impression que tt l'monde a un iPhone, j'en vois de partout.

Il y a des PDAPhone à 640 voire 800px max.



dans 7/10/1cm ? sont pliables en 12 ?
Bon ...
je vois qu'il y aurait au moins le Nokia n810 (840/480 pour 7/13/1,5)
226 g tt de même !

Ne cibler l'iPhone, sauf volonté commercial, c'est idiot. Autant que ce



Dc N'ski parlait surtout d'autres formats.

fut à l'époque de faire des sites "optimisés Internet Explorer 6".



de ttes façons tt à l'heure on aura une oreillette et ça passera direct
au nerf optique par la trompe d'eustache. Plus de problème de dimension.
Et tantôt le multimédiaphone sera sur la puce de la CB autopayante en
magasins robotisés. Plus de problème de batterie.
(puce faisant aussi carte d'identité et inoculée avec le vaccin
multi-toutes-grippes obligatoire sous peine de majoration d'impôts)


Par contre, créer une version pour le profil "handheld", c'est tout à
fait recommandé : créer une navigation adaptée, une charte graphique
plus légère, peut-être bien utiliser de l'AJAX afin de minimiser les
requêtes, profiter des possibilités de certains téléphone comme la
détection de l'orientation, voire la boussole, le GPS...



La puce greffée nous dira à tt instant où est le nord et à quelle
distance on est de la maison. Oh! Joie !
On aura l'air malin quand, jouant à FlightSimulator, on dodelinera de la
tête, ou qu'on sera à parler et gesticuler tt seul.
On ne naitra et vivra qu'en hopital psychiatrique.


--
sm
Avatar
SAM
Le 1/19/10 7:49 PM, docanski a écrit :
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
SAM ecrit ce qui suit en ce 19/01/2010 16:39 :

Pour les
champis,par exemple, si le visiteur a le bon réflexe de taper "guide des
champignons" sur Gogol, il tombera en première ligne sur le site.



J'ai l'impression que ce n'est pas la page index du site ?

Un nouveau site quoi.



Pas nécessairement pour toutes les pages. Du moins, c'est ce que je
souhaite.



On a déjà les fiches qui passent bien si on est dans le bon mode
c'est le principal.
Normalement, pour revenir en arrière sur le menu (la liste)
on n'y a pas besoin du bouton-lien, on pousse la page en lecture pour
re-glisser celle de la liste.
Mais là ça ne fonctionne pas :-/

tu devrais vraiment tenter d'essayer cette démo.



J'ai essayé (j'ai une bonne connexion pour le moment) mais je n'ai rien
compris à leur truc.
Tu parles bien de la démo Opera, hein !?



celle-là :
<http://www.opera.com/mini/demo/>

Peut-être faut-il un peu de feeling toutch ?
;-)

et de tte façons, normalement c'est Safari le navigateur dans l'iPhone.



Il n'existe pas pour Linux ou Ouine, ce navigateur ?



Pour ouine c'est sûr.
Mais là ça doit être un Safari spécial, comme l'Opera-mobile doit l'être
(ou Fennec/Fx-mobile pas encore au point et jamais pour iPhone)
Avatar
bruno666
docanski a écrit :

[...]
Par contre, créer une version pour le profil "handheld", c'est tout à
fait recommandé : créer une navigation adaptée, une charte graphique
plus légère,



Encore faudrait-il que je comprenne ce que signifie "handheld" :-)




Je pense qu'Olivier fait allusion au media="handheld pour les feuilles de
styles. Ce qui permet d'adapter la mise en page aux petits écrans mais je ne
sais pas si cet attribut est réellement bien pris en charge par tous les
navigateurs utilisés sur les ordinateurs de poche et téléphones portables.



Ceci dit, il est évident qu'il faut adapter la navigation à ces médias.
Pour ce qui est de la légèreté, il n'y a pas de problème : les pages
existantes le sont déjà. Il s'agit donc uniquement d'adaptation et, pour
certaines d'entre elles, d'une réécriture pour permettre une
convicialité parfaite ... ou presque.



Avec une feuille de style adaptée à ce type de média, il ne reste que le
problème des images trop grandes présentes dans les pages. On peut envisager
que le serveur envoie des images de tailles différentes suivant l'agent
utilisateur détecté.


--
Bruno
Avatar
Olivier Masson
Le 19/01/2010 19:49, docanski a écrit :

J'ai eu quelques infos : les GSM modernes peuvent afficher du 320 x 240,
les iPhone font du 640 x 480 et les iPod montent à 1024 x 768. Pour ces
derniers, il faut avoir une savrée vue !




Ouah ! Dis donc, t'es super bien informé ! Ça doit pas être facile à
obtenir comme info ;)
Mais sinon, l'iphone c'est 320x480 (oui, c'est une bouse). L'iPod aussi
d'ailleurs.
Tu dois avoir les infos top-secrètes d'Apple pour l'iPhone 3 et l'iPod
3e gen :)

Juste pour avoir une idée de la réalité du vrai monde, le site qui fait
référence : http://pdadb.net
Avatar
Olivier Masson
Le 19/01/2010 22:21, docanski a écrit :
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Olivier Masson ecrit ce qui suit en ce 19/01/2010 17:43 :

Ne cibler l'iPhone, sauf volonté commercial, c'est idiot. Autant que
ce fut à l'époque de faire des sites "optimisés Internet Explorer 6".



Ah mais ce n'est pas le but ! Le but est d'offrir la possibilité de
consultation de pages dans les meilleures conditions d'affichage pour la
majorité des médias portables, y compris les GSM de nouvelle génération
capables aujourd'hui d'offrir une résolution de 320 pixels de largeur.




Alors il serait opportun comme je le disais de créer un jeu d'image pour
ces clients avec une base à 480px par exemple (à toi de voir le meilleur
compromis) pour un bon affichage rapide.
240x320 est le minimum à considérer puisqu'en dessous, par grand monde
n'utilise (ne peut utiliser plutôt) le net.
En utilisant des image en 480px et en les affichant avec des %, ça
devrait être bien optimisé.

Encore faudrait-il que je comprenne ce que signifie "handheld" :-)



C'est le profil css, qui ne fonctionne pas forcément, pour cibler les
client portable.
<link rel="stylesheet" type="text/css" href="styles.css" media="handheld">

Ceci dit, il est évident qu'il faut adapter la navigation à ces médias.
Pour ce qui est de la légèreté, il n'y a pas de problème : les pages
existantes le sont déjà. Il s'agit donc uniquement d'adaptation et, pour
certaines d'entre elles, d'une réécriture pour permettre une
convicialité parfaite ... ou presque.




Il existe un plugin jQuery, http://www.jqtouch.com/, permettant
d'utiliser facilement les commandes webkit crées pour les téléphones.
C'est sûr, c'est un petit bonheur, mais tu cibles forcément Safari en
utilisant ça, donc c'est pas bien (dommage).
Avatar
Olivier Masson
Le 19/01/2010 23:57, SAM a écrit :
Le 1/19/10 5:43 PM, Olivier Masson a écrit :
Le 19/01/2010 16:39, SAM a écrit :

Je ne vois pas pourquoi, sous prétexte d'être compatible mobiles, il
faut que les grands écrans se contentent de petites images :-(



Ça me parait être effectivement une grosse erreur.
Créer un jeu d'images dimensionnées spécialement pour les "handheld"
est nettement mieux.



Y a peut-être kke chose qui m'a échappé dans l'exposé de Dc n Ski
et c'est ce qu'il veut dire ? faire ?

On envoie telle ou telle image suivant qui la demande
(par une des + belles négociations du serveur, savamment concoctée)

D'où l'intérêt de styler la taille en %
ou peut-être ne pas stipuler de taille du tout ?
(et c'est le MobileView qui se charge de l'adaptation ? nosè)



Et faire charger inutilement des ko et des ko alors qu'il vaut mieux
limiter le poids (et les requêtes) sur réseau GSM.



D'autant que j'ai vu que les FAI limitaient le débit.



Oui, très clairement car qd je vois la considérable différence qu'il
existe entre débit théorique du 3G+ et ce que j'obtiens, c'est comique,
mais tout à fait utilisable.
Par contre, en EDGE, l'obésité du web "moderne" rend son utilisation
impossible.


Tu changes Stéphane, tu changes et c'est pas bo...



Tu es bien sûr que t'as fini de faire le ménage dans tes images ?

Ceci étant, j'ai vu une option dans le Mobil-Opera :
choix qualité image : basse , moyenne, bonne
Comment ça se négocie ?
Comment le navigateur requête-t-il ? et qu'attend le serveur ?
(quel Apache faut-il ? qu'il comprenne ce que lui veut l'bidule)

Est-ce que les autres navigateurs-mobiles ont aussi cette option ?

L'iPhone n'a pas le monopole, même s'il monopolise. Et comme c'est un
gadget vendu à prix d'or (alors que d'autres font nettement mieux pour
moins cher)



Des noms, des noms !




HTC principalement (voir le site que j'ai précédemment donné : pdadb.net)


Moi je sais pô ... j'ai déjà assez de mal avec mon phone de base ...
mais j'ai l'impression que tt l'monde a un iPhone, j'en vois de partout.



C'est tristement vrai. On me demande même des sites "qui ressemble à
l'iphone", c'est dire...

La puce greffée nous dira à tt instant où est le nord et à quelle
distance on est de la maison. Oh! Joie !
On aura l'air malin quand, jouant à FlightSimulator, on dodelinera de la
tête, ou qu'on sera à parler et gesticuler tt seul.
On ne naitra et vivra qu'en hopital psychiatrique.




En fait, à mon avis les killer apps ne sont pas encore là. Il y a des
trucs en réalité augmentée qui vont faire grand bruit (du moins pour les
geeks comme moi au départ) et petit à petit, il sera normal d'aller sur
un site qui nous dira où bien manger près d'où on se trouve.

L'appli de Google capable de reconnaitre et commenter une oeuvre (archi,
monument, peinture, etc.) d'après une photo est déjà limite killer app
quand même... (et, à mon sens, intéressante, surtout quand ils auront
étoffé leur banque d'étiquettes de vins - si, si, ils sont dingues chez
GG -)
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Olivier Masson ecrit ce qui suit en ce 20/01/2010 11:30 :

Alors il serait opportun comme je le disais de créer un jeu d'image pour
ces clients avec une base à 480px par exemple (à toi de voir le meilleur
compromis) pour un bon affichage rapide.
240x320 est le minimum à considérer puisqu'en dessous, par grand monde
n'utilise (ne peut utiliser plutôt) le net.



Mes prévisions étaient donc dans la bonne ligne : les photos
indispensables sont taillées en 320 px de largeur et seules des photos
supplémentaires mais accessoires le sont en 480 px au maximum. Je suis
donc dans le bon de ce côté-là. Ouf ! :-)

En utilisant des image en 480px et en les affichant avec des %, ça
devrait être bien optimisé.



Ce nes sera donc, en principe, pas nécessaire et je pourrai garder mes
tailles en px.

C'est le profil css, qui ne fonctionne pas forcément, pour cibler les
client portable.



Si c'est "pas forcément", j'ai donc intérêt à oublier si je veux toucher
un maximum de visiteurs potentiels.

Il existe un plugin jQuery, http://www.jqtouch.com/, permettant
d'utiliser facilement les commandes webkit crées pour les téléphones.
C'est sûr, c'est un petit bonheur, mais tu cibles forcément Safari en
utilisant ça, donc c'est pas bien (dommage).



Et donc je risque de rater les autres, actuels et futurs, pour arriver à
ce que je veux ?
J'aurais donc également intérêt à oublier, dans ce cas.

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
SAM ecrit ce qui suit en ce 20/01/2010 00:35 :

J'ai l'impression que ce n'est pas la page index du site ?



Si. En première ligne, c'est la page d'index, en seconde (j'ai droit à 2
liens ! :-) ) c'est la page de recherche principale, celle qui permet
une reconnaissance visuelle et donc la plus appréciée par la majorité
des visiteurs.
PS : il est assez étonnant de constater que, selon le navigateur utilisé
pour la recherche, Gogol renvoie parfois des réponses différentes ! En
tout cas, sous Firefox, MSIE ou Opera, il renvoie actuellement les mêmes
premiers liens.

Normalement, pour revenir en arrière sur le menu (la liste)
on n'y a pas besoin du bouton-lien, on pousse la page en lecture pour
re-glisser celle de la liste.
Mais là ça ne fonctionne pas :-/



Reste le bouton ...

Peut-être faut-il un peu de feeling toutch ?
;-)



Va savoir ! Et pour un vieux con comme moi, c'est pas gagné ... ;-)

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
1 2 3 4 5