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

Bonjour, j'ai testé avec mon iPhone, je trouve que ça fonctionne très bien

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

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...