J'ai lu un certain nombre de sources qui indiquent que la première conception du mobile est presque essentielle, ce que je ne peux pas nier, cela a des avantages évidents tels que des temps de chargement plus rapides pour les mobiles qui ont généralement des vitesses de téléchargement plus lentes via la 3G et la 4G.

Mais que se passe-t-il si vous créez un site Web plus petit avec très peu d'images.

J'aimerais entendre d'autres opinions sur ce sujet et savoir si les gens pensent ou non qu'il y a des exceptions. Personnellement, je préfère d'abord concevoir / coder pour le bureau et réduire à partir de là. Mais est-il vraiment si important de concevoir / coder pour le mobile en premier ou les résultats finaux ne sont-ils pas suffisamment significatifs pour déranger dans certaines situations?

D'un point de vue purement design, commencer par la version mobile est tout d'abord logique.

La partie la plus difficile du processus de conception est toujours l'élagage, jamais l'ajout. Ainsi, plus l'espace d'écran que vous vous permettez est petit, plus vous devrez penser à ce qui est important dans votre conception, aux informations que vous devez vraiment montrer. De plus, vous vous forcerez également à penser à l'accessibilité, car le texte et les autres éléments seront plus petits.

Une fois que vous avez conçu la version «légère», vous pouvez ensuite ajouter des éléments supplémentaires tels que des éléments de conception et agrandir les choses à mesure que vous gagnez de l'immobilier. Comme l'a souligné @Django, vous ne devez jamais omettre les fonctionnalités de la conception.

Pour votre site, un exemple pourrait être le menu. Vous avez décidé de quitter les éléments du menu et de le remplacer par une icône de hamburger, ce qui est la procédure standard. Mais si les éléments de menu sont l'une des choses les plus importantes de la page, vous ne voudriez pas les cacher derrière un clic.

sidenote: Le rouge sur bleu sur votre site est vraiment mauvais pour les daltoniens, pensez à changer cela.

Le mobile d'abord est la meilleure pratique - ce n'est pas la loi, et si vous comprenez pourquoi vous "devriez" l'utiliser, vous pouvez décider en connaissance de cause pourquoi vous ne voulez pas l'utiliser sur un projet particulier, et c'est très bien.

Il convient de noter que «le mobile d'abord» concerne la conception / UX et la construction elle-même. La première conception mobile n'accélérera pas votre site pour les utilisateurs, mais le premier développement mobile le sera .

Regardons les deux.

Mobile premier dans la conception

La première conception mobile consiste à vous aider à réduire vos fonctionnalités et votre convivialité à ce dont vous avez besoin . La pensée derrière cela se passe comme suit: Plutôt que de concevoir d'abord un ordinateur de bureau, puis de lutter pour mettre toutes les fonctionnalités que vous avez développées dans un écran large de 320 pixels et conserver une bonne expérience utilisateur, commencez par le mobile d'abord ...

Si l'UX devient encombré ou endommagé par toutes vos fonctionnalités sur mobile, alors il est censé vous demander si l'utilisateur en a vraiment besoin. Pouvez-vous vous en débarrasser et améliorer réellement l'expérience? Si oui, pourquoi en avez-vous? Peut-être qu'ils ne sont pas essentiels après tout, et peut-être qu'ils ne devraient pas être sur votre site.

La théorie est que cela vous aide à réduire vos fonctionnalités à ce dont vous avez absolument besoin , puis vous pouvez évoluer vers le haut dans une belle expérience de bureau.

Mobile premier en développement

Avec le premier développement mobile , il s'agit d'écrire d'abord la version mobile, puis de mettre des exceptions pour des écrans plus grands. La raison pour laquelle cela est meilleur (et plus rapide) pour les utilisateurs mobiles est la suivante: vous avez deux images pour un site Web, une grande pour le bureau et une plus petite pour le mobile. Si vous codez d'abord le bureau, votre CSS ressemblera à ceci:

.test2 {
    background-image:url('images/verylargeimage.png');
}

// If on a smaller screen...
@media all and (max-width: 600px) {
    .test2 { 
      background-image:url('images/smallimage.png');
    }
}

Cela signifie que l'utilisateur mobile télécharge réellement large.jpgavant que le CSS ne l'éteigne. C'est très mauvais.

Le mobile ressemble d'abord à ceci:

.test2 {
     background-image:url('images/smallimage.png');
}

// If on a larger screen
@media all and (min-width: 600px) {
    .test2 { 
        background-image:url('images/verylargeimage.png');
    }
}

L'utilisateur mobile ne télécharge jamais large.jpg.

J'espère que cela aide à rendre les choses un peu plus claires, si vous ne les avez pas comprises auparavant!

L'origine du «mobile d'abord»

L'idée de «mobile first» en ce qui concerne le Responsive Design vient d'une époque où les navigateurs pour appareils mobiles étaient beaucoup moins performants que ce que vous trouveriez sur un appareil de bureau. Beaucoup d'entre eux ne prennent pas du tout en charge les requêtes multimédias, donc l'idée de créer un design de bureau sophistiqué, puis de coller des styles à l'aide de requêtes multimédias pour une fenêtre étroite, tombe à plat sur le visage.

L'absence de prise en charge des requêtes média est en fait la première requête média.

- Bryan Rieger

Le mobile d'abord est-il toujours pertinent?

Malgré le fait que les navigateurs pour appareils mobiles ont rattrapé leurs homologues de bureau, "mobile first" est toujours le moyen le plus logique d'écrire vos styles.

Je préfère penser en termes "éviter d'annuler les déclarations de style précédentes". Une approche additive, plutôt que d'écrire des styles et de les remplacer plus tard, conduira presque toujours à une feuille de style plus compacte. Les styles appropriés pour la plupart / tous les appareils doivent être trouvés en dehors des requêtes multimédias, tandis que les styles qui ne s'appliquent qu'à une fenêtre spécifique doivent être derrière une requête multimédia.

Comparez une approche «bureau d'abord»:

.column {
    float: left;
    width: 50%;
}

@media all and (max-width: 50em) {
    .column {
        float: none;
        width: auto;
    }
}

Vers une approche "mobile first":

@media all and (min-width: 50em) {
    .column {
        float: left;
        width: 50%;
    }
}

Les résultats sont les mêmes, mais le dernier est plus compact. Exemples de styles copiés sans vergogne à partir des 7 habitudes de requêtes médiatiques hautement efficaces de Brad Frost .

Il y a quelques rares exceptions où "le bureau d'abord" est plus approprié que l'inverse. Le plus notable d'entre eux est lorsque vous faites des choses comme des tableaux réactifs. Les fenêtres plus larges voudront les styles par défaut pour les tableaux, mais une fenêtre étroite voudra remplacer tout cela afin que le contenu puisse être empilé verticalement.

Ne cassez pas vos feuilles de style

Une chose que vous ne devez absolument pas faire est de diviser vos styles réactifs en fichiers CSS individuels et d'utiliser l'attribut media sur l'élément de lien. Cela a pour conséquence indésirable que l'UA télécharge toutes les feuilles de style liées (c'est-à-dire qu'il n'y a pas d'amélioration de la vitesse pour le faire).

<!-- this is bad, don't do this -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

Le code doit donc d'abord être mobile, mais qu'en est-il de l'approche de la conception?

Je suis d'avis que cela n'a pas d'importance. Les dispositions pour toutes les fenêtres pertinentes pour la conception doivent être effectuées (cela peut impliquer aussi peu que 2 ou autant que 5 une fois que vous avez pris en compte les points d'arrêt mineurs dont vous pourriez avoir besoin!), L'ordre n'a pas d'importance à la fin. De nombreux concepteurs manquent de discipline pour commencer avec une disposition de bureau et trouvent que partir d'une disposition mobile est plus facile.

Si vous souhaitez commencer à partir d'une disposition de bureau, vous devez éviter la tentation de remplir tous ces magnifiques espaces blancs avec un encombrement qui n'améliore pas le contenu de cette page. Avez-vous vraiment besoin de cette photo 800x600 d'une femme souriante tenant un téléphone? Cela coûte simplement de l'argent supplémentaire à l'utilisateur mobile pour télécharger des vidéos inutiles, et n'est qu'une distraction visuelle qu'un utilisateur de bureau peut ignorer.

J'ai testé votre site Web www.cosmosdesign.co.nz sur différentes tailles d'écran et son bon fonctionnement sur tous les écrans. En ce qui concerne votre question pour la première conception mobile, je voudrais dire que votre approche de conception doit prendre en compte votre public cible ainsi que de nombreux autres facteurs tels que les images, le contenu, etc. Si votre public cible utilisera ce site Web principalement sur des ordinateurs de bureau / portables, alors vous pouvez Continuez certainement votre approche, mais s'il s'agit d'un site Web qui sera principalement consulté sur les téléphones et les onglets, vous devez alors réfléchir à votre stratégie.

Vous pouvez également envisager de concevoir votre site Web réactif à l'aide de Bootstrap (de nombreuses autres options sont également disponibles) et vous pouvez également optimiser vos images pour un site adapté aux mobiles, ce qui réduira également le temps de chargement.

Pour moi, la principale raison de faire du mobile d'abord est d'éviter une situation où votre site mobile ne fait pas tout ce que fait la version de bureau. Il y a des tonnes de sites Web où je dois demander la version de bureau sur mon téléphone pour faire quelque chose parce que même si le téléphone peut le faire, leur version mobile ne le fait pas. Cela me dérange.

Cela dit, je pense que le bureau d'abord est bien tant que vous ne lésinez pas plus tard sur les fonctionnalités mobiles comme le font la plupart des entreprises.

En outre, de nombreux cadres de conception rendent cela assez simple. J'ai utilisé Material Design Lite pour créer une application de bureau d'abord assez complexe, et je n'ai vraiment dû changer que quelques choses lorsque je l'ai révisée pour une version adaptée aux mobiles - la plupart du travail était déjà fait.