Après de nombreuses rumeurs et spéculations, Apple vient de lancer l'iPad, fusion entre un iPod géant et un tablet PC (ou plutôt Mac). Outre l'objet innovant en soi, sur lequel nous serons probablement nombreux à poser un regard curieux et qui sera disséqué par de nombreux sites, penchons-nous sur les implications pour la conception web.
La résolution
Premièrement, l'iPad affiche une résolution native de 1024x768 pixels avec un écran LED. Ce sont des dimensions déjà relativement éprouvées, qui paraissent toutefois un peu décevantes, la plupart des netbooks récents parviennent à un niveau supérieur. Dans la majorité des situations, nous sommes tous habitués à prendre en compte ce paramètre et à concevoir des sites lisibles et confortables avec une largeur d'écran de 1024 pixels, par exemple en utilisant des grilles ou des frameworks CSS. Nous avons donc encore de nombreuses années devant nous à devoir considérer ces limites et notamment à penser à l'orientation de l'écran puisque l'iPad peut être utilisé horizontalement (1024 pixels de large) ou verticalement (768 pixels de large).
iTouch myself
Le navigateur embarqué est bien sûr Safari épaulé par le moteur Webkit. Le support de HTML5 et CSS3, pour les parties déjà implémentées à l'heure actuelle, est donc présent, c'est une bonne nouvelle. L'iPad continue sur la lancée de l'interface tactile multi-touch désormais courante sur les mobiles, et quelque peu expérimentée sur quelques PC de bureau classiques mais avec moins de succès. Tout site web se devra de posséder des contrôles assez larges pour recevoir le focus, c'est à dire tout simplement mettre en œuvre quelques bonnes pratiques de base en terme d'accessibilité.
La navigation se fait toujours avec le doigt, donc les contrôles présents sur la page ne doivent pas gêner le scroll ou déclencher d'action non désirée. Les éléments de formulaire notamment devront être suffisamment grands pour pouvoir être ciblés par le doigt qui offre une moindre précision que la souris. A priori, point de :hover ou drag & drop possible au sein du navigateur, c'est donc à éviter (je pense notamment aux frameworks JavaScript qui y font appel pour certains widgets). Notez qu'un clavier pourra être utilisable en option, mais cela restera anecdotique.
Formats
Point de surprise, l'iPad ne fait pas mieux que l'iPhone et l'iPod : le support de Flash est inexistant à l'heure actuelle. Il devrait le rester, car il est relativement difficile de concevoir contrôler du Flash avec le doigt dans une interface indépendante avec la même aisance que l'on connaît (c'est une zone devant recevoir et perdre le focus), et surtout car cela représenterait une concurrence face aux applications hébergées sur l'App Store notamment les jeux. Adobe rappelle par contre qu'il est possible d'exporter des applications complètes à partir de Flash, à l'aide de librairies spécifiques. En revanche il sera tout à fait possible de faire appel à JavaScript et SVG.
Les formats vidéo seront donc semblables à ceux déjà interprétés par l'iPhone et mis en avant par Mac OS X (H.264, M4V, MP4, AAC, Quicktime). Les players Flash ne pourront fonctionner donc le format de vidéo Flash FLV non plus. Pensez à des alternatives ou à des images cliquables pour permettre le téléchargement dans ces formats comme le font déjà les grands sites de partage vidéo.
Réseau
Du point de vue du réseau, l'iPad disposera du Wifi (802.11n) et de la 3G en option. La question de la réactivité et des débits se pose surtout dans le deuxième mode de navigation. Les utilisateurs surferont avec un débit moindre (7 Mb/s dans des conditions optimales, en réalité beaucoup moins), et avec une latence supplémentaire introduite par ce type de connexion mobile. Il convient donc toujours de concevoir des sites performants et légers.
L'App Store
Ceci ne concerne qu'indirectement le web, cependant l'iPad pourra télécharger/acheter des e-books, et exploiter les nombreuses applications déjà disponibles sur l'App Store et développées initialement pour l'iPod Touch et l'iPhone, avec un upscaling pour adapter leur résolution (le résultat risque de ne pas être très esthétique).
On pourra déplorer ce modèle très fermé et mercantile, qui oblige de nombreux éditeurs à concevoir une application spécifique développée avec le SDK (payant) alors qu'une simple application web pourrait convenir. Le modèle économique d'Apple ne l'autorisera probablement pas, tandis qu'il serait tout à fait possible de prévoir des applications web riches, facilement "installables" parmi les autres icônes, en HTML5 notamment permettant un stockage local si la connexion n'est pas établie. Ce point se résume à une décision politique en terme d'ergonomie pour l'installation, de création d'un catalogue d'applications web et de leur promotion auprès des utilisateurs. Bien entendu ce rêve n'aura que peu de chances de se réaliser car il empêche tout contrôle et toute vente directe. On voit mal Apple (avec plus de 3 milliards d'applications téléchargées sur l'AppStore) opérer un tel changement de cap.
Autres fonctionnalités
Un processeur à 1 GHz, une prise casque, des hauts-parleurs intégrés, un microphone intégré, un GPS, une boussole et un accéléromètre, le support de "nombreux" formats audio, vidéo et de documents (en consultation), une batterie avec une autonomie annoncée de 10 heures. Pour les applications on retrouve les grands classiques : Safari, Mail, Photos, iPod, iTunes, YouTube, iBooks, App Store, Maps, Notes, Calendar, Contacts, et la suite iWork.
Commentaires
Concernant la résolution, c'est plutôt une bonne nouvelle qu'ils aient choisi le standard de facto de 1024x768. Avec les notebooks d'aujourd'hui, les gens naviguent certes heureusement avec du 1024 de large, par contre la zone visible en hauteur est souvent amputée de 100-200 pixels par rapport à un desktop classique.
Navigation sans flash, c'est viable d'un point de vue maintenance si pour chaque feature HTML5 (qui marchera donc sur ce Safari), on a un fallback pour les browsers anciens (IE6-7-8). Pour ça, ce sont les concepteurs de librairies JS qui sont là pour ça mais qui tardent un peu :
http://jpv.typepad.com/blog/2010/01/features-...
Reste une question de taille : est ce que le cache du browser est aussi mal géré que sur l'iPhone (pas de cache sur des objets de + de 15k, taille TOTALE du cache de 1.5Mo...) ? Auquel cas l'expérience de navigation ne va pas être excellente sur la plupart des sites ...
Belle analyse.
Une petite précision cependant :
« le support de Flash est inexistant à l'heure actuelle. Il devrait le rester, car il est relativement difficile de concevoir contrôler du Flash avec le doigt (c'est une zone indépendante devant recevoir le focus) »
Avec le Flash Player 10.1, le multi-touch est géré : http://labs.adobe.com/technologies/flashplaye...
Donc c'est plus un choix stratégique de la part d'Apple de ne pas vouloir du FlashPlayer.
C'est quoi ce système de commentaire qui refuse mon entrée avec comme seule explication "Spam", en perdant mon long texte (heureusement que j'ai le bon réflexe d'enregistrer…), et avec en plus une image, contenant uniquement un texte ("Spam !"), qui ne s'affiche que sous Firefox et pas sous Safari ?? Argh, je suis sur AlsaCréations, la référence en terme de webdesign, oui ou non ??
@Alcmene : ah non, celui-là est passé… Seraient-ce les URL ? http://example.com/ .
Assez bonne analyse, juste quelques petits points :
- pour la partie contrôle touch, surtout penser au fait que le :hover ne fonctionne pas (enfin, est émulé, et du coup conflit s'il y a des événements au survol et au clic). Notamment, les menus drop-down !
- "pas de drag-and-drop" ? Si si ! Et même, beaucoup d'autres possibilités vu les événements touch : http://www.sitepen.com/blog/2008/07/10/touchi...
- certes, ça a été dit, support du CSS3, mais ce n'est quand même pas rien, surtout en parlant de l'absence de support de Flash ! Certes, on pourra utiliser JS et SVG… Mais combiné aux animations et transforms CSS, on peut aller vraiment très loin !
- "processeur à 1 GHz" : je ne pense pas que ce soit un point à mettre en avant, car ça ne veut absolument rien dire niveau performances… Il s'agit d'un nouveau type de processeur, Apple-made, et il semble être *extrêmement* performant : http://daringfireball.net/2010/01/ipad_big_pi... . Important à souligner, car ça laisse supposer qu'on n'aura pas à trop se limiter pour ce qui est des animations, vidéos…
- il faudra vérifier, peut-être que sur ce grand écran ce sera autorisé, mais penser que, sur l'iPhone, la propriété position:fixed est *ignorée* !! Attention à ne pas avoir de fonctionnalité cruciale dépendant de cela !
[…]
En revanche, je ne comprends pas du tout la partie sur l'App Store… Peut-être ai-je mal compris ce que tu voulais dire, mais Apple supporte tout à fait, et encourage les applications web ! On a même accès à la géolocalisation, par exemple.
On peut également "installer" une application web en l'ajoutant au springboard, au même titre qu'une application standard…
Il y a effectivement une différence dans l'indexation : les webapps ne sont effectivement pas listées _directement_ dans l'App Store, mais elles sont quand même proposées sur le site d'Apple ( http://www.apple.com/webapps/ ).
Il y avait quelques vraies différences, par exemple dans l'impossibilité d'utiliser des éléments position:fixed, ou encore dans la gestion du scroll… Mais on a maintenant accès à Pastry Kit : http://daringfireball.net/2009/12/pastrykit !...
Pour en rajouter sur la puissance et l'intérêt des WebApps, une analyse très différente de l'annonce de l'iPad (en anglais) : http://blog.wolfire.com/2010/01/Web-applicati... …
@Alcmene : Mais pas la référence en terme de spam (nous en recevons déjà assez ainsi). Notre intelligence artificielle anti-spam révolutionnaire - 2 lignes de PHP - n'a jamais été annoncée comme infaillible. Merci néanmoins pour la persévérance et les commentaires suivants ;)
@dew : je comprends que l'anti-spam ne soit pas forcément excitant à implémenter… Mais expliquer à l'utilisateur pourquoi son commentaire a été refusé, et ne pas supprimer son entrée, c'est plutôt du webdesign ! Enfin, des bonnes pratiques de webdesign… et j'ai comme l'impression que vous prônez ces principes ;)
Enfin, ne pas prendre ça comme "caynul", simplement "argh, attention !" :)
Au fait, pour ceux qui se demanderaient, c'était la longueur du message qui était limitée.
À noter que le format retenu pour les ebooks est epub, un format libre et ouvert. En fait un fichier zip contenant des fichiers xhtml, xml et css. :-)
ePub : http://en.wikipedia.org/wiki/EPUB
@dew vi, je me suis fait avoir par l'antispam aussi, j'ai du baisser le nombre de liens dans mon commentaire. Rien de grave car j'ai pu récupérer mon post, mais ça surprend et ça aurait été bien d'énoncer les règles avant :)
@Alcmeme grace à webkit, il y a plein de choses possibles, pour faire quasiment comme une application native (accès à certains hardwares en moins), mais ça me semble coûteux de ne penser une appli Web que pour iPad, surtout avec la résolution plutôt standard qu'il offre. Il vaut mieux compter sur le plus petit dénominateur commun en terme de features (les IEs ...) et rajouter par dessus des choses comme la géoloc, les mouvement au doigt, le drag&drop;natif ou de jolies animations
One Web bon sang :)
Merci pour tes liens vers des articles
Petite précision : de ce que je sais, le SDK devrait être gratuit une fois la version finale sortie (le SDK de l'iPhone OS 3.0 était payant seulement en beta) mais je peux me tromper.
Je suis impatient de voir si ce produit va percer et se faire une place dans le marché, en tout cas on ne peut qu'apprécier qu'il intègre WebKit, je suis juste un peu déçu de voir que Flash n'est pas supporté.
Merci dew pour cette très bonne analyse. :)
@jpvincent : attention, on parle bien, ici, de WebApp concurrençant les applis de l'AppStore hein ! Clairement, une WebApp iPhone n'est *pas* une application web standard. Il est bien évidemment possible de faire une application web compatible avec tout le monde, iPhone compris, qui se dégrade bien, mais ce n'est pas une WebApp iPhone. Une WebApp spéciale iPhone est conçue pour *ce* médium, en essayant de reprendre le layout d'une appli standard.
Exemples de WebApps iPhone : iphone.voyages-sncf.com, iphone.allocine.fr, iphone.pagesjaunes.fr…
Après ça, est-ce que c'est la meilleure chose à faire, je ne sais pas… Le mieux est, je pense, de suivre l'exemple de Google ou Wikipedia, qui offrent une vue différente, choisie automatiquement, la mieux adaptée à l'appareil utilisé par le visiteur.
@dew : ah tiens, il y a maintenant une explication des limites. Super ! :)
@Alcmene : d'accord avec toi, en somme les stratégies vont varier selon les spécificités du site. Pour les sites de contenu textuel comme google, wikipedia, les journaux et blogs, c'est techniquement assez accessible de faire et maintenir 2-3 versions en fonction de la surface disponible à l'écran.
Pour des sites comme voyage-sncf ou même facebook où il y a + d'interactions, maintenir plusieurs versions doit coûter quand même assez cher en temps de dev (bon ces 2 là peuvent se le permettre), mais en n'avoir qu'une seule qui n'est pas forcément adaptée partout, c'est prendre le risque qu'un concurrent fasse mieux ..
Juste deux petites remarques :
- Ce n'est pas un écran OLED, mais LED ;
- À ce que j'ai pu lire, il n'y a pas de GPS. C'est plutôt de la localisation via triangulation GSM.
Sinon, le webkit embarqué supporte les media queries ? Parce que ça serait un bon exemple grâce à l'orientation (1024px ou 768px).
Il y a un gps sur les modèles 3G. ;-)
Bonjour,
Moi j'ai ceci en bas de bloc de commentaire :
"Texte seul, les tags HTML seront supprimés automatiquement.
4000 caractères et 4 liens maximum."
Cela oriente pas mal sur le contenu d'un commentaire...
Autrement merci pour ces analyses et cet article.
Bonne continuation ;)
@Riku Asakura :
Oui, effectivement, maintenant que cela a été rajouté, ça oriente pas mal… :rolleyes:
Cf. http://www.alsacreations.com/actu/lire/948-ap...
J'aime bien ce débat sur le 1024 qui revient au galop avec l'arrivée de l'iPad.
Et puis il n'y a que les Webdesigner qui en parlent, normal me direz-vous.
J'ai vu un blog qui disait deux mots du 1024 de l'iPad également.
http://11speak.com/?p=361
Faut croire que ca ne fait quand même pas que des heureux !!
Moi j'hésites toujours entre me jeter dessus à sa sortie et adapter mes applis iPhone et attendre une version plus aboutie. Car on le sait, il ne faut théoriquement pas acheter les V1 de produits Apple... ;)