Prevoir un blog confortable aussi pour l'iPad

bonjour,

je suis en train de mettre en place un blog wordpress
un de mes amis à un iPad et me supplie de le rendre compatible pour son bel appareil
quels conseils pourriez vous me donner (je suis un peu plus que debutant seulement...)

deja je pensais

- largeur en 1024 (vaudrait-il choisir un peu moins ?)
- gros boutons (pour les gros doigts !)

connaitriez vous d'autres points obligatoires pou l'iPad ?

Merci pour votre aide

PS: mon blog est développé en local actuellement je n'ai pas encore de lien à vous proposer

Hello,

Un iPad n'est rien d'autre qu'un gros iPhone en terme de support du média mobile :
- tu peux partir du principe que dans 80% des cas (sauf design très spécial), ça s'affichera correctement sur l'iPad à partir du moment où le site est prévu pour être casé dans 980px de large.
- il détecte le meta tag "viewport", il est donc judicieux de l'employer dans ton code HTML
- il détecte les media queries. Sa largeur (device-width) est de 768px et sa hauteur de 1024px... sans dans le sens "paysage" (landscape).

Pour le reste, je pense avoir fait le tour sur ce sujet (le point 6 n'étant pas indispensable pour l'iPad).

Bonne chance.

Merci c'est une bonne base de travaille !

Il ne faut pas perdre de vue que la surface d'un iPad est tout de même relativement grande, surtout en terme de résolution d'écran. Il n'y a donc pas en principe à revisiter son site.

Les seules choses à bien penser (mais qui finalement s'appliquent aussi au média plus traditionnels) c'est qu'ils faut aéré le contenu (utilisation à bon escient des white-space) et ne pas trop serrer les éléments clicable (en réalité rien ne sert de les grossir outre mesure, faut juste qu'ils soient aisément accessible).

Sinon ne pas oublier de mettre l'icone de raccourci!

<link rel="apple-touch-icon" href="/custom-icon-name.png"/>

L'image doit faire 57x57, sinon il y a aussi des générateurs :
http://www.flavorstudios.com/iphone-icon-generator
Modifié par ClementRoy (26 Jul 2010 - 12:46)

au depart je partais sur 1024px de largeur (mais dans une réponse je lis 980px conseillé...), ça vous semble trop ?

billboc a écrit :
au depart je partais sur 1024px de largeur (mais dans une réponse je lis 980px conseillé...), ça vous semble trop ?

Le Viewport de l'iPad est de 980px je crois (même si sa résolution effective est de 1024), donc il vaut mieux s'en tenir à ce maximum.

Raphael a écrit :
Le Viewport de l'iPad est de 980px je crois (même si sa résolution effective est de 1024), donc il vaut mieux s'en tenir à ce maximum.

Et un

<meta name="viewport" content="width=device-width" />

n'est d'aucun effet ?

Victor BRITO a écrit :

Et un

<meta name="viewport" content="width=device-width" />

n'est d'aucun effet ?

Si si, ça contredira alors le viewport "estimé" (980) et le remplacera par la largeur physique de 768px
Modifié par Raphael (27 Jul 2010 - 16:00)

Raphael a écrit :
Si si, ça contredira alors le viewport "estimé" (980) et le remplacera par la largeur physique de 768px

Y compris en mode paysage ?

Victor BRITO a écrit :

Y compris en mode paysage ?

Dans ce cas, il sera remplacé par la valeur de 1024px.

Le principe est le suivant :
- si pas de meta tag viewport, alors la valeur calculée du viewport est de 980px (pour ipad, iphone et ipod)
- si meta viewport = max-device-width alors il s'adapte aux vraies largeurs du device, selon l'orientation

OK. Merci pour ces précisions.