[DSi] Coder un site adapté à la largeur de votre écran

StyphaX · Message par **StyphaX** » jeu. 03 sept. 2009 - 14:01

Hello,

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:

StyphaX · Message par **StyphaX** » jeu. 03 sept. 2009 - 22:34

MAJ: ajout de précisions concernant les marges et les images ainsi que la taille du texte.

Ca intéresse pas grand monde on dirait hein

Pourtant ça peut être utile

Message par **Miacis** » jeu. 03 sept. 2009 - 23:44

Ouaaaaaiiiiii, lol kikoo, c'est génial !! J'adore merciiiiii !!!!! <3
(Ca, c'était une réaction pas du tout crédible pour ce type de sujet.)

Bah, écoute, merci de l'info, merci d'avoir pris le temps de présenter ça super bien, et ... en espérant que ça aide (je vois pas que dire de plus.

)

dread · Message par **dread** » jeu. 03 sept. 2009 - 23:50

Tu ferais mieux de poster ça sur un site de développement (genre sdz) où ton travail sera pris avec un meilleur intérêt qu'ici. Il te donneront même peut être des idées pour que ton code soit encore meilleur.

Après personnellement j'essayerai de faire une détection du useragent d'opera ds qui renverrai vers un css allégé si il est positif.

StyphaX · Message par **StyphaX** » jeu. 03 sept. 2009 - 23:51

Waaa j'adore ton message en bleu

Sinon bah ça peux toujours servir à certaines personnes

Je cherche encore des spécificités à utiliser sur ce navigateur, notamment celle de pouvoir rendre les deux écrans comme un seul. En gros que lorsque l'on fasse défiler la partie du bas, on al retrouve en haut comme si on avait un écran allongé.

C'est faisable mais je ne sais comment. Ebuddy l'utilise par exemple pour la liste de contacts.

dread a écrit :Tu ferais mieux de poster ça sur un site de développement (genre sdz) où ton travail sera pris avec un meilleur intérêt qu'ici. Il te donneront même peut être des idées pour que ton code soit encore meilleur.

Réaction à chaud: mais lol

Réaction un peu plus réfléchie:
Je ne pense pas qu'un mec cherchant à dev pour le browser de la DSi ira voir le SDZ. Ce forum concerne directement la DS.
Pour mon code, je ne file que des bouts de code, rien n'est à corriger, je vais peut être passer pour un mec prétentieux mais il est parfait

Pas parfait car je code super bien, mais parce qu'il est tellement simple que rien ne peut être optimisé ou raccourcis. Ce sont de simples propriétés CSS ou META de base avec une valeur.

bref

Sinon c'est mon taff le webdesign

Accessoirement

dread · Message par **dread** » jeu. 03 sept. 2009 - 23:58

Ba ici t'as presque aucune personne qui sera intéréssé par ton code quoi. A la limite tu peux essayer aussi sur gx-mod ou ils pourraient peut être trouver une application pour faire je ne sais quoi spécialement pour la dsi. (par exemple un agenda online spécialement optimisé pour la console ou je ne sais quoi d'autre)

Personnellement c'est mon taf aussi.

StyphaX · Message par **StyphaX** » ven. 04 sept. 2009 - 00:20

Bah au moins j'aurai posé la bête

Prendra qui voudra, et puis ça peux sortir sur google dans les résultats

Sinon ouep ça peut être sympa pour gx-mod même si je ne connais pas ce groupe

Ps: si c'es ton taff, pourquoi me dire d'essayer d'optimiser un truc inoptimisable? mwahaha

dread · Message par **dread** » ven. 04 sept. 2009 - 00:25

StyphaX a écrit :Bah au moins j'aurai posé la bête
Prendra qui voudra, et puis ça peux sortir sur google dans les résultats
Sinon ouep ça peut être sympa pour gx-mod même si je ne connais pas ce groupe

Ps: si c'es ton taff, pourquoi me dire d'essayer d'optimiser un truc inoptimisable? mwahaha

Si c'est optimisable, regarde mon conseil qui te dit de faire une detection de l'useragent d'opera ds. Il te permettra d'avoir qu'une seule page au lieu de 2.

StyphaX · Message par **StyphaX** » ven. 04 sept. 2009 - 01:04

LOL
Alors euh... ou est-ce que dans ce topic je parle du code de mon site?

Nullepars, on parlais de l'optimisation du code que je poste ici. Tu es HS.

Si je ne passe pas par User-agent c'est pour une simple et bonne raison que cette page est la seule du site à être prévue pour la DS donc je lai laisse à part...
Et je me sers déjà de cette détection pour autre chose

Dérive du topic là u_u

Eleglin · Message par **Eleglin** » sam. 31 juil. 2010 - 19:16

L'idéal est d'exploiter à fond les normes XHTML et CSS pour qu'un site soit correctement affiché sur tous les media.

Trois pistes importantes :
- éviter d'abuser des balises <table> à tout va et préférer les balises <div>

- lier des fichiers CSS distincts pour les différents media de sortie : PC, impression et portable.

Exemple pour l'impression :

Code : Tout sélectionner

<link rel="stylesheet"
	type="text/css"
	media="print" href="print.css" />

- ne pas faire de mise en page super high tech pour les portables. Tout le monde n'a pas un débit ou des forfaits de la mort qui tue

Yasuke · Message par **Yasuke** » dim. 01 août 2010 - 13:35

pourquoi tu nous ressors des articles vieux de je ne sais combien?
Si il n'a plus posté c'est qu'il a du trouver la solution tu crois pas?

Eleglin · Message par **Eleglin** » dim. 01 août 2010 - 14:12

Pourquoi tu demandes pourquoi je poste ? T'es modo lol ?
Y'a une date limite de consommation sur les sujets d'un forum ? XD

D'ailleurs, l'auteur de ce sujet ne cherchait pas une solution, mais proposait des solutions à un problème que pourraient rencontrer certaines personnes.
Les pistes que je propose n'intéresseront peut-être pas grand monde, mais ça peut toujours aider (..ou pas) quelqu'un, un jour.

Argone · Message par **Argone** » dim. 01 août 2010 - 15:01

Bah ouais, c'est bien dit d'éviter de déterrer les topics, surtout si ça sert à rien ...

Edit : certes ça ce l'est plus indiqué mais c'est du bon sens.

Eleglin · Message par **Eleglin** » dim. 01 août 2010 - 15:28

Au cas où quelqu'un estimerait que le message ci-dessus, en date du Sam 31 Juil 2010 - 19:16, n'apporte rien et devrait être supprimé, je l'invite à signaler le dit-message sur le topic de modération.
Autrement, je ne vois pas l'intérêt de deux ou trois messages pour dire : "ton message sert à rien".
Et puis, plutôt que balancer qu'un message est inutile, autant s'assumer et pousser la démarche jusqu'au bout.

Argone · Message par **Argone** » dim. 01 août 2010 - 15:55