récent possesseur d'une Dsi et ayant installé le Dsi browser, j'ai constaté pas mal de choses: même les versions mobiles des sites internet sont trop larges pour notre ptite console^^
On ne peut pas y faire grand chose, la DS ayant une faible résolution...
Choses à savoir pour votre design:
- la Ds n'affiche qu'au maximum 260000 couleurs, donc pour vos dégradés ne voyez pas trop haut, et enregistrez vos images en gif 256 couleurs (avec tramage pour compenser le manque de couleurs)
Attention également à sa taille! Voir le point suivant. - La résolution de l'écran est de 256x192 pixels. En gros, pour être sur de ne pas avoir de scrolling horizontal, vous devez dire au navigateur de la DSi que le site ne dépasse pas cette largeur.
Comment? Grace à une simple balise dans votre page. (et aussi en limitant la largeur de vos images!!)
Entre les balises <head> et </head>, placer la balise meta "viewport" qui vas dire à votre navigateur d'utiliser la largeur max de l'écran et de la bloquer ainsi. De plus, nous allons lui permettre de rendre votre page scrollable sur les deux écrans. En effet, de base, l'écran du dessus vous affiche une vue de la page complète. Grace à cette modification, la page lorsque vous la ferez défiler s'affichera aussi sur le haut de l'écran comme si vous aviez un seul grand écran vertical.
Ca vous donnera: (la première ligne est en théorie obligatoire pour une page web standard)Code : Tout sélectionner
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=false; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; width = device-width" />
</head>
Ce faisant, votre page sera donc scollable en hauteur mais pas en largeur, ce qui permettra de longues pages où un simple scroll vers le bas sera nécessaire. De plus les deux écrans de votre DS ne feront plus qu'un, c'est à dire que l'écran du haut sera le prolongement de celui du bas, comme si vous aviez un grand écran vertical.
Pour les images, il vous semblera logique de les limiter à 255 pixels de large.
Cependant cela provoquera un scroll horizontal. Pourquoi?
Il y a des marges sur les côtés de l'écran!! De base elles sont assez grandes, je recommande de les réduire à 5px de chaque côté. Cela vous laissera donc 255 - 10px soit 245px. Mais en fait NON. En effet, la DS lorsque l'on utilise ses deux écrans en même temps pour afficher la page ajoute une barre de scroll bleue sur la droite de l'écran. Elle prend grosso-modo 15px.
Vous aurez donc une limite max de 230px pour vos images et vos tableaux!
Pour limiter les marges à 5px sur les côtés, dans votre CSS, la balise body doit avoir ces propriétés:Code : Tout sélectionner
body {
margin-bottom: 4px;
margin-top: 4px;
margin-left: 5px;
margin-right: 5px;
}
Note: bottom et top sont les marges hautes et basses, réglez les comme bon vous semble
left et right correspodent aux côtés gauche et droit. - La DSi a un bon navigateur WEB, il supporte le javascript basique et donc les fonctions de type ajax. N'hésitez donc pas à les utiliser pour rendre vos pages dynamiques. Cependant, évitez de l'utiliser pour des animations, le processeur de la DSi est trop peu puissant pour ça!
Notez que le navigateur supporte le css2 et l'xhtml 1...
Par ailleurs, évitez aussi les gif animés, là encore, le processeur serait trop sollicité. - La taille du texte...
La encore, quelques spécificités. Le texte le plus petit affichable est de 11px. Une taille inférieure sera affichée à 11px. Ensuite, de 12px à 14px, la taille à l'écran sera la même. A partir de 15px, c'est la taille la plus grosse. Au dessus, ça ne grossira plus.
En gros, utilisez uniquement les tailles 11, 12, 14 et 15.
Voilou, pas grand chose de plus!
Pour finir, un exemple pratique que je me suis fait
La page est petite, mais ça fonctionnerait aussi bien s'il y avait plus de choses
Évidemment, le design a été très...vidé :p
(la page mobile est à regarder depuis la Dsi)
- page originale ( :qblock2: Internet explorer 6 et 7 sont interdits sur ce site, seul le 8 passe)
- page mobile ( :qblock2: accédez-y avec la DSi, sinon ça vous redirige sur la version normale)
--------------
Anexe: Dans le cas ou vous ne voudriez pas que l'écran du haut serve de prolongement de celui du bas, et pour gagner quelques px de large pour vos images/tableaux, il suffit de remplacer la ligne du début.
Remplacez donc
Code : Tout sélectionner
<meta name="viewport" content="user-scalable=false; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; width = device-width" />
par
Code : Tout sélectionner
<meta name="viewport" content="width =255;" />
Votre page sera bloquée sur 255px, et avec des marges de 5px, vous pourrez mettre des images de 245px de large sur votre page.
Ce pendant, vous perdez biensur l'utilisation de l'écran du haut qui redeviendra une version apercue de votre page complète.
Comparaison des deux modes: