BP 3.07Concevoir vos sites en Mobile First

Sujet

Le "Mobile First" est une stratégie de conception qui, due à la surface d'affichage réduite et l'utilisation en mobilité, se focalise sur l'essentiel (du contenu) et sur la rapidité d'affichage (la performance). Le design du site sera ensuite décliné sur desktop En employant ce mot, on parle plutôt d'ordinateur (desktop computer, signifiant ordinateur de bureau). . Il s'agit là d'une approche possible du [[responsive-design|responsive design]]. Ainsi, un site pensé "Mobile First" est, de base, optimisé, sans contenus superflus, ayant une navigation claire et adaptée et avec des assets Les assets sont des fichiers utilisés par votre site web et qui ne sont pas du code (.php, .js, html, etc.). Ce sont plutôt des fichiers comme les images, les icônes, les polices de caractères, etc. (illustrations, pictogrammes, polices, photographies, etc.) adaptés, plus légers et surtout utilisés pour ajouter une réelle plus-value pour l'utilisateur et non pour "remplir l'espace blanc" nécessaire à la bonne respiration du design. Que serait une musique, un discours et un design sans pause pour reprendre son souffle ? Techniquement, ces sites utiliseront une bande passante réduite.

Les sites conçus en Mobile First, auront de ce fait un impact écologique plus réduit comme ils sont, de base, légers, optimisés et répondant à l'essentiel !

Cette stratégie de conception est en accord avec les usages exponentiels actuels du web qui s'effectuent majoritairement sur mobile (applications et sites web confondus).

Pour les concepteurs d'interfaces web, faire du Mobile First évite le casse-tête de devoir réagencer tous les éléments que la grande surface d'un écran d'ordinateur a permis d'afficher dans une surface plus réduite.

Cela questionne dès le début les donneurs d'ordres et les force à se focaliser sur l'essentiel de leur contenu/informations qu'ils pourront publier et éviter la frustration de devoir, lors de la conception mobile, "écrémer" les interfaces.

GreenIT vous conseille

• Sensibiliser vos clients à ce sujet ;
• Débuter votre phase design en ne créant que des artboards Les **Artboards** ou **Plans de travail** sont l'équivalent de la feuille, de la planche à dessin du web designer. Ils ont la taille de l'écran cible (desktop, tablette, mobile) et le designer va y poser tous les composants de la page web. au format mobile ;
• Si vous utilisez du papier, pour vos sessions de réflexion, découpez vos A4 en 3 bandes verticales.

L'objectif étant de se restreindre à l'espace disponible et de le garder restreint le plus longtemps possible.

Dans un second temps, déclinez vos écrans vers les versions plus grandes, tablettes puis desktop En employant ce mot, on parle plutôt d'ordinateur (desktop computer, signifiant ordinateur de bureau). .

Exemples

• Les sites d'actualités, blog, etc. qui sont consultés dans les transports.
• Les sites principalement utilisés en mobilité pour trouver une information répondant au besoin immédiat, comme ceux de la restauration, des boutiques physiques ou digitales, contenant des informations touristiques, etc.

Principe de validation

Le nombre	est inférieur ou égal à
de pages ou templates de pages non adaptés au mobile	0