1485 sujets

Web Mobile et responsive web design

Bonjour,

Je suis étudiant en informatique, et je suis en ce moment en stage dans une société de création de sites internet.

Je viens sur votre forum pour vous exposer mon problème, donc si vous avez ne serait-ce qu'une piste, je suis preneur.

Voila ce que j'ai fait :

J'ai pour directive d'adapter un site plutôt imposant au format mobile, évidement, je me suis renseigné et j'ai déjà souscrit à cette solution (le site en question tourne sous EZpublish) :

-Appel des feuille de style dans le template :

<link rel="stylesheet" type="text/css" href={"stylesheets/styles.css"|ezdesign} media="screen" />
<link rel="stylesheet" type="text/css" href={"stylesheets/mobile.css"|ezdesign} media="handheld" />


-Création d'une feuille de style styles.css :

@import url("stylesPc.css"); 
@import url("mobile.css") handheld;
@import url("antistyle.css") only screen and(max-device-width:480px);


-Création d'une feuille de style mobile.css incluant la feuille de style pour les mobiles.

-Création d'une feuille de style stylesPc.css incluant la feuille de style originale du site.

-Création d'une feuille de style antistyle.css qui annule la feuille de style stylesPc.css.

Évidement, selon les sites qui ont orientés mes recherche, ça devrait marcher...mais non Smiley ohwell en effet, j'ai fait plusieurs test sur dotMobi et sur mon portable, mais aucune feuille de style n'est chargée.

A mon avis, le problème vient du fait que le site est plutôt gros, et au final j'ai un chargement long ou parfois interminable pour ne tomber que sur le message que je hais tant : "Sorry, page cannot be displayed (status code : 0)".

Merci de m'éclairer, parce que jusque là je savais à peu près où aller, mais là j'ai épuisé toutes mes idées Smiley decu .
Modifié par heiso (14 Sep 2009 - 12:26)
Administrateur
Bonjour et bienvenue,

heiso a écrit :
J'ai pour directive d'adapter un site plutôt imposant auX formatS mobileS,

petite correction ci-dessus Smiley rolleyes

Si tu penses que l'émulateur dotMobi trouve ton site trop lourd, teste avec un autre site ou adresse de test beaucoup plus légère. Smiley cligne
Pour commencer, teste avec la page de tests CSS de Raphaël pour tout plein de surprises malvenues et non documentées Smiley biggrin
Puis ton site allégé de toutes les images et JS et 90% du code HTML ...

Les émulateurs et SDK sur ton ordi c'est bien:
- Blackberry (testé par dew mais je sais pas si on en a parlé sur Alsacreations ? Installation lourdingue si je me souviens bien)
- Androïd
- iPhone simulator sur Mac, si tu n'as pas négocié un iPhone de fonction pour ton stage Smiley lol

EDIT: voir le [ Sujet unique] de ce Salon pour les émulateurs Smiley confused
Modifié par Felipe (14 Sep 2009 - 12:31)
Pour les emulateurs, je ne suis passé que par dotMobi. Par contre j'ai testé avec mon portable perso (un sony ericson K770i) et j'ai le même problème sans le message d'erreur (chargement interminable).

Je vais voir pour le reste, et je vous donnerais des news.
Bon,
Après installation d'android :

Je vais sur le site en question, et là, je remarque que la feuille de style chargée est celle chargée normalement pour les écran pc. Pourtant, mes conditions empêche ce problème. J'ai déjà testé le concept sur un site comportant une page html, et ça marchait nikel.

Je suis un peu paumé là ^^ ça fait un bout de temps que je suis là dessus, et je me rends compte que la théorie s'éloigne un peu trop souvent de la pratique...
Tu as bien appliqué les règles de cet article?

Sinon ce site est aussi optimisé pour les petits écrans, regarde le code source... Smiley cligne
Modifié par Patidou (14 Sep 2009 - 14:58)
aaa cet article ^^ oui, je me suis basé dessus même. Par contre je ne peut pas toucher des masse au code html/php, mais je suis complètement libre au niveau du css.

A mon avis le problème vient de la taille du site (sur cms EZpublish).
eum je ne saurais répondre à ta question Smiley confused
mon téléphone n'est pas très récent, je ne sais pas quel navigateur y est implanté, mais en tout cas, il tout à fait basique (je suis chez orange si ça peux aider).

De plus, je viens de rajouter une ligne dans le template d'appel de style :

<link rel="stylesheet" type="text/css"  href={"stylesheets/mobile.css"|ezdesign} media="only screen and (max-device-width: 480px)"  />


j'avais déjà mis cette condition dans mon styles.css, mais pas en link, déjà un problème de résolu.
Mais le style final est encore bien brouillon... je vais me pencher sur ce problème et voir s'il n'y a pas des avancée du coté des autre emulateurs.
Si c'est le navigateur intégré et qu'il n'est pas basé au moins sur webkit ou Opera, laisse tomber... Les visiteurs auront une mise en page basique mais lisible (surtout si tu utilises les éléments xhtml sémantiquement), c'est ce qui compte. Les personnes qui utilisent vraiment leurs gsm pour surfer installent Opera. Smiley cligne
Modifié par Patidou (14 Sep 2009 - 15:38)
je suis d'accord, une mise en page sans style est mieux que rien, mais je n'en ai pas !! voila le problème ^^. La page ne se charge pas, (à part sur l'API android) j'ai le droit à une attente, interminable et enfin un message d'erreur apparait, d'ailleurs très peu explicite comme message "la page ne peut être affichée".
Administrateur
Teste l'émulateur avant de vouloir tester ton site Smiley cligne T'as bien un site de test sous le coude ?

Sinon un site de référence (ou comment perdre tout espoir d'être compatible "sur mobile") http://www.quirksmode.org/blog/archives/mobile/index.html billets de mars 2009 et le dernier 14/9 que j'ai pas encore lu.
Choisis et fait valider par ton tuteur pour quels mobiles ton site sera à peu près compatible et oublie les autres sauf si la solution est simple. Contrairement à PPK, tu n'auras pas 23 mobiles de test tout droit sortis de l'armoire d'un opérateur de mobiles ...
Astuce: inclus le mobile de ton tuteur, de son chef et du chef de son chef dans ta liste. Smiley idee
Si ton site s'affiche dans 15 navigateurs mais pas sur LE Blackberry du chef, tu auras des remarques concernant tes compétences et ton investissement et ... mais si ça s'affiche bien RAS Smiley ravi
Bon, tout fonctionne à merveille sur l'emulateur Android.
Par contre tout les emulateur dotmobi et mon téléphone perso ne chargent toujours pas la page...

Ma question est : est il possible qu'un site trop imposant surcharge la mémoire du téléphone ?
heiso a écrit :
Ma question est : est il possible qu'un site trop imposant surcharge la mémoire du téléphone ?


Oui la mémoire est limitée sur les non-smartphones. C'est pour ça que certains sites propose une version allégée de leurs pages. Exemple : page d'accueil de wikipedia en version normale et en version mobile. Smiley cligne
Je pense bien oui, mais en fait mon problème est, que je ne peut faire de second site en allégé.

J'ai entendu parler de la compression gzip sur certains serveurs, cela aiderait il à l'affichage sous mobile ?
La méthode n'est pas la bonne. Maintenir deux sites distincts est énergivore, source d'erreurs et économiquement rude pour les clients. Donc un seul site avec scripts ad hoc pour détecter qu'on est sur mobile et envoi de contenus en conséquence : images réduites, textes découpés autrement, etc. Le tout heureusement automatisable.
a écrit :
Maintenir deux sites distincts est énergivore


Exactement, mais j'ai déjà fait un système qui différencie le mobile du grand écran, et je ne pense pas que le problème que j'ai en découle, a mon avis cela vient d'une surcharge d'information pour le mobile.

J'ai constaté que l'emulateur Android supporte très bien le site avec la bonne feuille de style. Par contre aucun des petits emulateurs du style de ceux que l'on trouve sur dotMobi n'acceptent le site. Je n'ai pas pu testé le site sur d'autre emulateur/portables de ce type (emulateur blackberry qui ne se connecte pas au net Smiley fache )

Il se trouve que malheureusement, étant stagiaire, je n'ai pas les qualifications pour modifier le site à grande échelle, je suis particulièrement libre au niveau du css, et je me débrouille sur les template de la partie <head> du site.

Je sais aussi que le serveur qui héberge le site n'a pas de compression gzip, l'activer serait il un bonus pour les mobile et leur faible mémoire ?
Bonjour, j'ose faire un double post, et oui je sais, c'est mal Smiley langue .

J'ai vraiment besoin de connaitre votre point de vue sur la compression gzip :

a écrit :
Je sais aussi que le serveur qui héberge le site n'a pas de compression gzip, l'activer serait il un bonus pour les mobile et leur faible mémoire ?


merci