Création d'un site adapté pour mobile

Bonjour,


Il me semblait qu'il y avait dans cette rubrique, des post-it qui mettait plusieurs informations importantes pour la création d'un site mobile !

Le problème c'est qu'ils n'y sont plus !

Donc je voudrais savoir quelles sont les choses à ne surtout pas manquer lors de la création d'un site mobile (par exemple le doctype etc...)

Puis pour le viewport comment le "configurer" correctement ?

Est-ce que c'est correct de réaliser un site mobile en HTML 5 ? ou cela va poser des problèmes ?

Merci à vous !!

Salut,

Avant toute chose, le doctype importe peu : tu peux très bien te contenter du bon vieux XHTML 1.0 (une preuve : mon site dont le lien est indiqué par le bouton WWW à la fin de mes messages et qui est adapté aux supports mobiles, tout en étant codé en XHTML 1.0 strict) si tu ne comptes pas utiliser les nouveaux éléments et attributs HTML 5.

Pour le reste, des éléments de réponse parmi les articles et astuces suivants :
* Les media queries CSS 3,
* Une feuille de styles de base pour le Web mobile.

D'accord merci,

mais si j'utilise HTML 5 et CSS 3... parce exemple avec les balises, section, header, nav etc... ça ne pose pas de problème pour les mobiles ?


Sinon pour le viewport j'ai beau lire l'article présente sur ce site à se sujet, et je ne comprends toujours pas comment l'utiliser, je l'applique à mon site, et sur mon portable finalement la largeur du site est trop grande par rapport à la largeur du téléphone !

Crousti2 a écrit :
mais si j'utilise HTML 5 et CSS 3... parce exemple avec les balises, section, header, nav etc... ça ne pose pas de problème pour les mobiles ?

La plupart des navigateurs équipant par défaut les mobiles utilisant WebKit comme moteur de rendu. Il n'y a donc aucune contre-indication à utiliser HTML 5 et CSS 3 si tu en as envie.

Crousti2 a écrit :
Sinon pour le viewport j'ai beau lire l'article présente sur ce site à se sujet, et je ne comprends toujours pas comment l'utiliser, je l'applique à mon site, et sur mon portable finalement la largeur du site est trop grande par rapport à la largeur du téléphone !

Tu as la solution dans cette astuce déjà mentionnée. Il faut lire attentivement.

Sans indication du nom du navigateur (et de la version) ou sans lien vers la page incriminée, difficile de t'aider.

Voici l'adresse -http://mobile.montpasab.fr !

Pour le portable sur lequel il y a un problème : Samsung jet ayant comme navigateur le samsung dolfin browser v1.0

Et sur le HTC desire HD ça fonctionne !!

Si vous pouvez essayer sur vos portables... si vous en avez un !
Modifié par Crousti2 (22 Nov 2011 - 06:01)

J'avais un min-width de 290 ... je l'ai mis à 250 et ça marche.... je me suis dis c'est tellement peu, autant l'enlever, mais quand je l'enlève c'est encore plus petit donc je le laisse comme ça maintenant !

Mais bon c'est surement le même problème pour les portables ayant un écran inférieur à 250px...
Modifié par Crousti2 (26 Oct 2011 - 18:40)

Bonsoir,

Sous iPhone, je ne rencontre pas de problème de scroll.
Par contre tes titres sont "un peu" gros, et ton formulaire de contact est rogné à gauche...

Cordialement,
Sylvain

Bonsoir,

Merci à toi d'avoir testé !

Pour les titres je vais les réduire, et le formulaire je ne l'ai pas encore traité on va dire ^^ Je viens à peine de commencer la version mobile... je fais page par page !! Mais ça avance !

Si d'autres personnes peuvent tester sur leur portable... ce serait gentil !

sur mon iphone l'affichage est correct, seulement les lines News Plan du site... sont sur 2 lignes (est-ce ce que tu veux?)

aussi les titres sont trop gros

Merci à vous d'avoir testé

Pour la ligne News Plan du site etc... je sais pas trop comment l'intégrer donc elle se place comme elle peut

Pour les titres je vais les réduire, tu n'es pas le premier à le dire

Bonsoir,

Le site est prévu pour les mobiles exclusivement ? Quand est-il des résolutions d'écrans classiques ?

Sous un ordi de bureau le texte s'étire à 100% dans le sens de la largeur. J'ai un écran Mac 21 pouce, le confort de lecture n'est pas bon (et encore : sous Mac on met rarement les fenêtres en plein écran, d'ailleurs perso je ne le fait jamais). Il faudrait définir une largeur maximale sur les balises concernées par le texte à l'aide d'un "max-weight"...

Bonjour,

Oui je vais mettre un max weight.... mais la version mobile est prévue pour les..... mobiles... donc si on a autre chose on va sur la version de bureau ! D'ailleurs il n'y a pas de raison de tomber sur la version mobile avec un ordi de bureau... à la base !
Modifié par Crousti2 (23 Nov 2011 - 06:12)

Mmmm... perso je trouve bien de pouvoir servir un même contenu à tous les types de médias... Bien à vous

Le contenu est le même !

Crousti2 a écrit :
Le contenu est le même !

Donc il s'agit de 2 thèmes pour un même site que l'on sert en fonction du résultat de la détection de l'user agent... J'entends souvent dire que c'est une mauvaise pratique du web, et du coup je ne l'utilise pas. Ceci dit les pontes du web que sont Google et Yahoo ne se gênent pas pour l'utiliser, alors...

Oui j'ai aussi vu que c'était une mauvaise pratique..... après l'avis des gens est complètement différent... c'est peut-être mieux de le faire avec des media queries... j'me lancerai là dedans une autre fois, d'ici là je sortirai la version 2 pour les mobiles.

Mais pour l'instant je n'ai pas rencontré de problème à utiliser cette manière.