faire un Template pour les Mobiles ?!

Stefpei · 11/10/2011 14:46:46

Bonjour,

je n'ai pas un besoin particulier dans ce domaine, mais j'aimerais essayer de faire un site consultable sur un mobile...
Est-ce que vous avez des conseils, des pistes ?
- détecter le navigateur pour envoyer le bon CSS... ou rediriger vers un domaine spécifique ?
- un CSS particulier... ou un Template dédié ?
- un site visitable sous tout... ou 2 sites ? (1 pour mobiles + 1 pour moniteurs)

Si on peut centraliser nos expériences et trucs, pour faire de Zite un Cms encore plus pratique ?
... J'avance de mon coté sur le template et css... mais le Php je peux pas

Super_chemist · 11/10/2011 16:58:08

Salut

Pour ma part, je me suis arrangé pour que mon site soit extensible. Cela signifie qu'il s'adapte aux grandes, mais aussi aux petites résolutions !
Mettre des div avec des dimensions en % ou en em permet de bien s'en sortir.
Le souci viens en fait des images. Dés que l'image est trop large, ça foire tout sur un mobile. Or la résolution des mobiles est assez basse...

Sur mon site pelles.chalonnaises.free.fr , ça passe à peu près correctement, mais les images sont un peu lourdes et trop larges sur un portable non prévu pour aller souvent sur internet... Je ne pense pas qu'il y ait des soucis sur iPhone.

snypi · 12/10/2011 08:35:36

salut,
je me suis jamais penché dessus
je développe mes sites en 980px pour une optimisation en 1024 et en regardant mes sites sur plusieurs smartphones j'ai pas vue de problème particulier
quelque fois des soucis de css à corriger (et les effets accordéons rende difficile le surf sur smartphone) sinon l'affichage s'adapte à l'écran des tels !!

sur le site de la ferme du web y'a pas mal d'info regarde ceci cela pourrais peut être t'être utile !!
http://www.lafermeduweb.net/billet/the- … -1201.html

Dernière modification par snypi (12/10/2011 08:39:08)

Stefpei · 11/09/2012 16:51:26

Je me suis penché un peu plus à fond sur le problème...
2 solutions :
- on fait un template par type d'écran que l'on cible...
- on fait un seul template, mais en "Responsive design" (qui s'adapte, et va chercher les css qui vont bien)...

Utilisant la 2eme solution (Responsive) j'arrive au résultat suivant :
--> http://www.avantage-web.net/zitesmartphone/

à tester sur grand écrans, smartphones, ou réduisez la taille du navigateur pour tester...

Des copies-écrans seraient sympas pour se rendre compte des différents rendus, suivant les systèmes.
Tout vos avis sont bons à prendre, pour avancer plus loin et arriver à quelque chose de pro et solide.

Dernière modification par Stefpei (11/09/2012 16:53:21)

Christian · 11/09/2012 22:43:12

Bonjour

Tu va devenir le roi du déterrage mon cher Stéphane

Mais le sujet étant de plus en plus d'actualité, le sujet me parait intéressant.

J’ai testé (mais je ne peux pas faire de copie d'écran) mes commentaires :
1) pour que ce soit facile il faut une url courte !! La voici : http://goo.gl/n4co9
2) je vois bien la page avec en rouge la phrase pour les Smartphones
3) l'image de la page index est bien réduite
4) pas facile de naviguer avec les menus qui se retrouve en bas

Voila pour mes premiers tests, un bon début !

Connais tu
- http://ready.mobi/launch.jsp et
- http://www.emulateurmobile.com/
Ils permettent de voir le résultat, mais ne prennes pas en compte la détection

Il y a aussi ca :
https://developer.blackberry.com/html5/download/ripple
http://ripple.tinyhippos.com/

A+
Christian

PS : Tu pourrais me filer les codes que je regarde t'a détection php et les css que tu utilise ?

Super_chemist · 12/09/2012 09:58:17

Testé sous android.
La page s'affiche avec un zoom arrière, comme si l'écran faisait dans les 900px... Donc pas de redimentionnement :-( et la ligne rouge ne s'affiche pas.

Je pense que ce soucis sera résolu avec la balise <meta name="HandheldFriendly" content="true" /> dans le header.
Cette balise sert à dire aux navigateurs "intelligents" de nos smartphones que le site est conçu pour eux (sinon ils s'adaptent et simulent un écran d'ordi)

Adrien

Stefpei · 12/09/2012 17:30:45

Super_chemist :
- je viens de modifier le header...
- pas facile de tester quand on a pas de Smartphone.

Christian :
- tu dis "pas facile de naviguer avec les menus en bas"... mais si je les mets en haut, ils prennent une grande partie de la surface utile, et je préfère privilègier le contenu plutot que la navigation...
- peut-ètre trouver un moyen de les faire apparaitre à la demande ?

Christian :
- Pour les "codes php de détection"... il n'y en a aucun : ce n'est que le CSS (Média queries) qui se charge des choix d'affichage

Dernière modification par Stefpei (12/09/2012 17:34:16)

Super_chemist · 12/09/2012 17:44:45

Le site se comporte comme prévu sous smartphones désormais.
Pour les menus, je suggère un lien d'évitement en haut de la page, qui mène à une ancre sur le menu...

Stefpei · 12/09/2012 18:37:09

J'ai mis un lien d'évitement.
Il n'apparait qu'en version Smartphone (tester le redimensionnement de l'écran)

snypi · 12/09/2012 20:17:48

une image de mon androphone

Stefpei · 22/09/2012 11:18:59

pour ceux qui veulent étudier, améliorer, utiliser le principe du Responsive design,
j'ai mis le ZitePlus de démo en téléchargement ici :
--> http://www.c-too.com/cms/ziteplus.9.2-Responsive.zip

berticoyote · 26/09/2012 10:51:16

Salut à tous !...
Bon j'arrive un peu en retard sur la discussion mais j'y vais de mon petit commentaire car je suis aussi en ce moment en train de me rencarder sur le responsive design.

Et ce n’est pas pour lui faire de la pub (je n'ai rien à y gagner), mais je vous conseille de lire l'excellent bouquin de Ethan Marcotte : "RESPONSIVE WEB DESIGN". Il y a plein de "trucs" pour créer des design fluide. ça m'a bien éclairé.

En fait le problème c'est qu'il existe des dizaines voire des centaines de supports différents (tablettes, smartphones, ordis de bureau, portables) et avec chaque fois des définitions d'écrans différentes.
Donc si je peux me permettre. L'idée n'est pas de réfléchir à une approche "portable" mais bien multi support !...
De toutes façons rien qu'entre le portable X et le portable Y (pour ne pas citer de marques) les dimensions et définitions d'écrans sont différentes...

Donc pensons "design fluide" et multi support.

Ce que j'ai compris du bouquin (mais ai je bien compris ) c'est que la marche à suivre pour créer un design fluide qui fonctionne sur tous type d'appareils sans trop trop se prendre la tête et avoir à faire "plusieurs sites" pour chaque support, c'est de commencer par créer une "Grille fluide" : le squelette du site doit être entièrement exprimé en pourcentages, que ce soit pour les colonnes, les div, les textes, les marges, les polices de caractères etc... bref tout.

Et même les images et les vidéos !... avec la règle "max-witdh : 100%"

ça c'est la base et ça suffit en général pour adapter notre site à la majorité des écrans d'ordis, voire certaines tablettes.

Ensuite il faudra créer plusieurs css pour adapter certaines règles si nécessaires. Et pour cela on peut utiliser les mediaquery !...
Mais de toutes façons, à un moment donné il faudra faire des tests pour chaque grande catégorie de support, en se basant sur quelques définition de référence (concernant la largeur écran par exemple) :

- 320 px pour téléphones en mode portrait - 480 px en mode paysage
- 600 px voire 768px pour les tablettes en mode portrait et 1024 px en mode paysage
- 1280 pour les écrans de bureau
- 1600 pour les grands écrans

Bref dans le pire des cas ça fait trois ou quatre css à adapter !... en même temps je dis ça mais je n'ai pas encore réussi à faire un site total "responsive" pour tous ces supports

Pour info, la dernière version de mozilla propose un module qui permet de voir son site en développement sous plusieurs tailles, formats, définitions et rotation !... je m'en sers de plus en plus.

Et voilà voilà pour ma petite contribution (histoire de bien embrouiller les esprits )

Super_chemist · 26/09/2012 12:07:45

Comme je le disais, sur mon site pelles.chalonnaises.free.fr , tout le design est fluide avec des pourcentages.
Pas de mediaquery ni css3, je sais pas faire !
Par contre, il marche plutot bien quel que soit la taille de l'écran.

Je suis assez fier du résultat (sauf niveau design, mais je ne suis pas graphiste), vous pouvez vous en inspirer si vous voulez (attention, le template n'est pas celui d'un ziteplus de base. J'ai retravaillé tous les div).

berticoyote · 26/09/2012 14:14:10

Super_chemist a écrit :

Comme je le disais, sur mon site pelles.chalonnaises.free.fr , tout le design est fluide avec des pourcentages.
Pas de mediaquery ni css3, je sais pas faire !
Par contre, il marche plutot bien quel que soit la taille de l'écran.

Effectivement, il passe très bien !...
les mediaqueries, c'est vraiment dans le cas où il faille spécifier une règle bien particulière à un type de support. Mais tu nous prouve bien avec ton exemple qu'on peut s'en sortir très bien sans !... bravo beau travail.

Concernant le template spécial mobile de zite. il ne passe pas en 768x1024 et en 800x1280 (résolution "tablette"), mais est parfait pour un affichage smartphone. C'est pour ça que je parlais d'avoir une approche plutôt "multi supports" !...

On aurait un template zite qui fonctionnerai en total responsive et pour tous les appareils !.. .ce serait top !

Stefpei · 26/09/2012 14:35:36

berticoyote a écrit :

Concernant le template spécial mobile de zite. il ne passe pas en 768x1024 et en 800x1280 (résolution "tablette")

t'aurais pas une copie d'ecran de ces 2-là à me fournir, pour me guider ?
... c'est vrai que je n'ai pas travaillé ces résolutions-là, je m'étais concentré sur SpartPhone.

Dernière modification par Stefpei (26/09/2012 14:37:16)

berticoyote · 26/09/2012 17:31:03

Et voilà !...

www.dixit-rc.com/zite_responsive

En 800x1280 c’est quasiment la même chose, on voit juste un poil plus de menu à droite.
En fait c'est pas grand chose, je pense qu'en passant sur des pourcentages, ça devrait passer sans problème sans avoir à toucher au design

jpg · 26/09/2012 23:46:06

Bonsoir Stéphane,
J'au voulu testé ... mais site de démo injoignable
a+
Jean-Paul

jpg · 27/09/2012 10:51:32

Ce matin, ça marche
Sous android aussi, j'ai le même aspect que ce que Snypi a posté précédement
a+
Jean-Paul

Stefpei · 27/09/2012 20:54:23

jpg a écrit :

Sous android aussi, j'ai le même aspect que ce que Snypi a posté précédement

J'ai ajouté la version Android / Tablet...
Si quelqu'un veux tester (sous appareils réels, pas des émulateurs/simulateurs) ?

Si c'est bon je rajouterai au Zip.

Dernière modification par Stefpei (28/09/2012 09:10:43)

jpg · 02/10/2012 00:13:10

Bonsoir,

dans le même ordre d'idée,

pouvez vous me dire comment sort le site officiel sous votre smartphone android ou ios ?

bon, il reste des choses à creuser et a améliorer: le menu en particulier.

mais c'est une ébauche avec un css très (trop ?) simple

a+
Jean-Paul

Super_chemist · 02/10/2012 10:54:00

JPG : le site officiel est devenu TRES large sur un ordinateur... Pense au max-width peut être ?
Je te suggère également de faire ce genre de test sur un site différent du site officiel, si tu ne veux pas rebuter les visiteurs de ton site. (et accessoirement, pour éviter que les caches des navigateurs fassent n'importe quoi avec les fichiers css...)

Je signale au passage que si sur pelles.chalonnaises.free.fr, j'ai mis le menu en haut, c'est aussi pour avoir un design extensible simple, car j'avais pas trouvé comment bien gérer les float sinon...
Si le design est tout vertical, c'est plus simple !

Stefpei · 02/10/2012 17:52:08

voila ce que ça donne sur petit ecran :

jpg · 02/10/2012 19:08:18

Merci pour le test Stéphane,
c'est sur quel type de smartphone ?
car j'ai fait mes tests en android 4 et je n'ai aucune barre
a+
Jean-Paul

Super_chemist · 02/10/2012 19:39:57

Sous android 2.3.6, je ne vois pas le menu, et surtout je ne peux pas défiler vers le bas ! Je ne sais pas à quoi c'est dû, mais le scroll est bloqué...

Forum ZitePLUS

#1 11/10/2011 14:46:46

faire un Template pour les Mobiles ?!

#2 11/10/2011 16:58:08

Re : faire un Template pour les Mobiles ?!

#3 12/10/2011 08:35:36

Re : faire un Template pour les Mobiles ?!

#4 11/09/2012 16:51:26

Re : faire un Template pour les Mobiles ?!

#5 11/09/2012 22:43:12

Re : faire un Template pour les Mobiles ?!

#6 12/09/2012 09:58:17

Re : faire un Template pour les Mobiles ?!

#7 12/09/2012 17:30:45

Re : faire un Template pour les Mobiles ?!

#8 12/09/2012 17:44:45

Re : faire un Template pour les Mobiles ?!

#9 12/09/2012 18:37:09

Re : faire un Template pour les Mobiles ?!

#10 12/09/2012 20:17:48

Re : faire un Template pour les Mobiles ?!

#11 22/09/2012 11:18:59

Re : faire un Template pour les Mobiles ?!

#12 26/09/2012 10:51:16

Re : faire un Template pour les Mobiles ?!

#13 26/09/2012 12:07:45

Re : faire un Template pour les Mobiles ?!

#14 26/09/2012 14:14:10

Re : faire un Template pour les Mobiles ?!

#15 26/09/2012 14:35:36

Re : faire un Template pour les Mobiles ?!

#16 26/09/2012 17:31:03

Re : faire un Template pour les Mobiles ?!

#17 26/09/2012 23:46:06

Re : faire un Template pour les Mobiles ?!

#18 27/09/2012 10:51:32

Re : faire un Template pour les Mobiles ?!

#19 27/09/2012 20:54:23

Re : faire un Template pour les Mobiles ?!

#20 02/10/2012 00:13:10

Re : faire un Template pour les Mobiles ?!

#21 02/10/2012 10:54:00

Re : faire un Template pour les Mobiles ?!

#22 02/10/2012 17:52:08

Re : faire un Template pour les Mobiles ?!

#23 02/10/2012 19:08:18

Re : faire un Template pour les Mobiles ?!

#24 02/10/2012 19:39:57

Re : faire un Template pour les Mobiles ?!

Pied de page des forums