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

Les consoles portables (3DS, NDS, GBA, GBC, GB, et même Virtual Boy et Game & Watch) sont à l'honneur dans ce salon.

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

Messagepar StyphaX » Jeu 03 Sep 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...

:coin: 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!

:coin: 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:
Image
Dernière édition par StyphaX le Sam 05 Sep 2009 - 14:23, édité 10 fois au total.
StyphaX
Baby Mario
Baby Mario
 
Messages: 23
Inscrit le: Mar 28 Nov 2006 - 00:05
Localisation: Marseille, FRANCE
Status: Hors-ligne

Messagepar StyphaX » Jeu 03 Sep 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 :)
StyphaX
Baby Mario
Baby Mario
 
Messages: 23
Inscrit le: Mar 28 Nov 2006 - 00:05
Localisation: Marseille, FRANCE
Status: Hors-ligne

Messagepar Miacis » Jeu 03 Sep 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. :uhuh2: )
J'ai pas trop compris le topic, mais je vous fais un gros hug à tous !
Image
Avatar de l’utilisateur
Miacis
Modérateur
Modérateur
 
Messages: 7635
Inscrit le: Sam 21 Juil 2007 - 15:31
Localisation: Far away, On the other side
Status: Hors-ligne

Messagepar dread » Jeu 03 Sep 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.
Dernière édition par dread le Jeu 03 Sep 2009 - 23:55, édité 1 fois au total.
Avatar de l’utilisateur
dread
Silver Mario
Silver Mario
 
Messages: 5866
Inscrit le: Sam 10 Déc 2005 - 22:44
Localisation: dans la zone...
Status: Hors-ligne

Messagepar StyphaX » Jeu 03 Sep 2009 - 23:51

Waaa j'adore ton message en bleu :love:

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 :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 ;)
StyphaX
Baby Mario
Baby Mario
 
Messages: 23
Inscrit le: Mar 28 Nov 2006 - 00:05
Localisation: Marseille, FRANCE
Status: Hors-ligne

Messagepar dread » Jeu 03 Sep 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.
Avatar de l’utilisateur
dread
Silver Mario
Silver Mario
 
Messages: 5866
Inscrit le: Sam 10 Déc 2005 - 22:44
Localisation: dans la zone...
Status: Hors-ligne

Messagepar StyphaX » Ven 04 Sep 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
StyphaX
Baby Mario
Baby Mario
 
Messages: 23
Inscrit le: Mar 28 Nov 2006 - 00:05
Localisation: Marseille, FRANCE
Status: Hors-ligne

Messagepar dread » Ven 04 Sep 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.
Avatar de l’utilisateur
dread
Silver Mario
Silver Mario
 
Messages: 5866
Inscrit le: Sam 10 Déc 2005 - 22:44
Localisation: dans la zone...
Status: Hors-ligne

Messagepar StyphaX » Ven 04 Sep 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
StyphaX
Baby Mario
Baby Mario
 
Messages: 23
Inscrit le: Mar 28 Nov 2006 - 00:05
Localisation: Marseille, FRANCE
Status: Hors-ligne

Messagepar 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
Avatar de l’utilisateur
Eleglin
Docteur Mario
Docteur Mario
 
Messages: 1951
Inscrit le: Ven 28 Mai 2010 - 18:54
Status: Hors-ligne

Messagepar 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?
Avatar de l’utilisateur
Yasuke
Super Mario
Super Mario
 
Messages: 839
Inscrit le: Ven 11 Juil 2008 - 15:31
Status: Hors-ligne

Messagepar 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. :)
Avatar de l’utilisateur
Eleglin
Docteur Mario
Docteur Mario
 
Messages: 1951
Inscrit le: Ven 28 Mai 2010 - 18:54
Status: Hors-ligne

Messagepar 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 ... :roll:

Edit : certes ça ce l'est plus indiqué mais c'est du bon sens.
Si vous ne prenez pas le temps, c'est lui qui vous prendra ...
Avatar de l’utilisateur
Argone
Silver Mario
Silver Mario
 
Messages: 6517
Inscrit le: Sam 09 Mars 2002 - 01:44
Status: Hors-ligne

Messagepar 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.
Avatar de l’utilisateur
Eleglin
Docteur Mario
Docteur Mario
 
Messages: 1951
Inscrit le: Ven 28 Mai 2010 - 18:54
Status: Hors-ligne

Messagepar Argone » Dim 01 Août 2010 - 15:55

:roll:
Si vous ne prenez pas le temps, c'est lui qui vous prendra ...
Avatar de l’utilisateur
Argone
Silver Mario
Silver Mario
 
Messages: 6517
Inscrit le: Sam 09 Mars 2002 - 01:44
Status: Hors-ligne

Suivant

Retour vers Consoles portables Nintendo

Qui est en ligne ?

Utilisateur(s) parcourant ce forum : Aucun utilisateur inscrit et 1 invité

cron