A propos de la mise en page sur mobile

[Alorsladaccord]

Bonjour,

Je programme un site là. Evidemment, il va falloir une version mobile. Mais justement, je ne veux pas me prendre la tête à faire une "version mobile".
Donc si je fais une mise en page très simple, avec seulement des div horizontales superposées les unes sur les autres (même pas de float, pas de colonne rien), Est-ce que les mobiles vont naturellement redimensionner cela à leur format ?

D'ailleurs, y-a-t'il des choses à éviter impérativement lors de la création de la version mobile d'un site ? Existe-t'il un "code HTML" spécial mobile ?

Merci d'avance

 

[niap]

Si c'est un site nouveau ou une nouvelle charte graphique, le plus simple est de travailler en mobile first. C'est à dire commencer par la version mobile.
C'est une logique de travail, tu commence par la version la plus petite pour aller ensuite vers les versions plus grandes, pas le contraire.
Tu ne pas faire moins que 0 pixel de large alors que tu trouveras toujours des écrans plus grand.
Donc commence par le plus petit ce sera beaucoup plus simple que de devoir surcharger les styles par la suite.

Donc si je fais une mise en page très simple, avec seulement des div horizontales superposées les unes sur les autres (même pas de float, pas de colonne rien), Est-ce que les mobiles vont naturellement redimensionner cela à leur format ?

Si tu définit les dimensions en % il n'y a pas de problème.
Mais c'est dommage d'avoir la même logique d'affichage sur un écran de 320 pixels et sur un écran de 1900 pixels.

D'ailleurs, y-a-t'il des choses à éviter impérativement lors de la création de la version mobile d'un site ?

Quand tu bosse sur une version mobile il faut tenir de la densité.
Ton pictogramme, qui sera joli sur ton écran à 72 dpi, sera flou sur un écran de mobile / tablette ou écran haute def.
Donc il faut prévoir le coup. Soit en doublant les dimensions d'origine du picto et en les réduisant via la feuille de style (et surtout pas l'HTML), soit en faisant deux versions et en affichant l'un ou l'autre selon la densité de l'écran.
Ensuite si tu veux bien faire les choses, tu peux tenir compte de l'orientation de l'écran. Portrait ou paysage. Au moins pour la photo de fond si tu en utilise une.

Existe-t'il un "code HTML" spécial mobile ?

Spécial mobile pas vraiment, mais il existe pas mal de meta pour les appareils iOS et Android. Ça dépend de ce que tu veux.

Il faut déjà définir l'affichage

<meta name="viewport" content="width=device-width, maximum-scale=1.0" />

Tu peux définir l'icone d'affichage si l'utilisateur enregistre le site en favori :

<link rel="icon" href="[chemin vers une image PNG]" />
<link rel="apple-touch-icon" href="[chemin vers une image PNG]" />
<link rel="apple-touch-icon" sizes="[largeur en pixel]x[hauteur en pixel]" href="[chemin vers une image PNG]" />

Tu peux définir un mode de fonctionnement façon application (pleins écran si tu veux) :

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />

https://developer.chrome.com/multidevice/android/installtohomescreen

Tu peux définir la couleur de la barre supérieure

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Tu peux définir un titre d'application

<meta name="apple-mobile-web-app-title" content="[le titre à afficher]" />

Tu peux définir un écran de démarrage

<link rel="apple-touch-startup-image" href="[chemin vers une image PNG]">

Pour faire la même chose sur Chrome il faut créer un manifest :
https://developers.google.com/web/updates/2015/10/splashscreen

Bonne adaptation ;-)

 

[Alorsladaccord]

Merci pour cette intéressante réponse, Niap. Et une reco, une !

En fait, je ne peux pas bosser sur mobile (j'en ai pas), donc je ne peux pas tester. C'est pour ça que je veux faire simple. De toute façon, le site est simple (un dico), pas de fioriture. Je note toutefois ta remarque à propos de la densité, effectivement j'avais pas pensé à ça. Mais ça me concerne pas en fait.

Et pour les form, les trucs comme ça ? Un menu en input select fonctionnera-t'il aussi bien sur mobile que sur pc ? Et quid de la génération automatique de .pdf ?

 

[niap]

Si tu n'as pas de mobile sous la main, je te conseille deux choses :
- La vue adaptative sous Firefox / Chrome ou Safari. Les résultats sont très proches de ce que tu as sur mobile (même si ça ne remplace pas un mobile pour valider).
- le site http://viewportsizes.com/ pour regarder les dimensions disponibles à l'affichage sur mobiles. Les dimensions sont bien différentes de la résolution de l'appareil. Souvent les appareils divisent leurs résolutions par deux sous le lecteur web.

Pour les formulaires :
- Un menu sélect va s'afficher automatiquement en plein écran
- Quand sur grand écran je place le texte à gauche dans un label et le champ input à droite, sur mobile je place le champ au dessous du texte. Sinon : ton texte est écrasé, et ton champ est ridiculement petit. Ou alors tu utilise l'attribut placeholder d'HTML 5. Ça dépend de tes choix en terme de compatibilité.

La génération de PDF, normalement ce fait côté serveur non ? Donc aucun problème. Par contre pas de téléchargement automatique sur appareil iOS, même avec les entêtes Content-Disposition: attachment;

Une dernière chose : les effets de survol ne fonctionnent pas. Enfin disons qu'ils fonctionnent mais sont appellé lorsque l'utilisateur va taper sur l'élément. Et si c'est un lien, ton survol ne va s'afficher lorsque le lien sera activé.

 

[nendo]

Bonjour Alorsladaccord

Tiens voici un site qui te permettra de voir le comportement de ton site en émulant différent écran de Terminal mobile

--> http://www.emulateurmobile.com/

 

[Alorsladaccord]

Okay, je vois, merci à vous pour vos réponses. Je vais un truc simple, comme ça après vérification, ça limitera le nombre des inéluctables retouches... "Vue adaptative sous Firefox", c'est quand on réduit la taille de la fenêtre, c'est ça ?

 

[niap]

C'est dans les outils de développement web / Vue adaptative :
https://developer.mozilla.org/fr/docs/Outils/Vue_adaptative

 

[Alorsladaccord]

Merci pour le lien (trois jours après mais c'est l'intention qui compte).