Introduction au minimalisme axé sur le contenu dans la conception web

1. Introduction: Hey, les gars, sur Joshua Stone aujourd'hui, je vais vous montrer quelques-unes des choses que j'ai apprises au fil des ans sur le développement sites Web autour des concepts de minimalisme axé sur le contenu. Qu' est-ce que ça veut dire exactement ? Eh bien, il s'agit d'équilibrer la structure et le style pour vraiment faire du contenu une place centrale. Il s'agit de concevoir et de développer un site Web facile à comprendre et à naviguer. Les utilisateurs finaux ont donc confiné exactement ce qu'ils recherchent sans tracas. Il s'agit de concevoir un site Web qui fonctionnera à peu près partout où il est chargé et de rendre réactif à la fois qu'il s'adapte à différentes résolutions. Et puis il répond réellement à l'entrée de l'utilisateur en temps opportun. Donc, dans cette classe couvrira quelques choses de décider quel contenu inclure. Décider de la façon de présenter ce contenu. Que prioriser, nous trouvons où nous pouvons mettre le flyer dans le style sans aller par-dessus bord et être trop artistique. Distraire les utilisateurs du contenu aussi aller à un peu plus de détails sur différentes façons. Vous pouvez essayer d'éviter la confusion et la frustration pour les personnes utilisant votre site et aussi quelques considérations techniques et d'accessibilité que vous pourriez vouloir faire maintenant tout au long de cette classe , je vais en fait montrer un monde réel car j'ai besoin de faire une mise à niveau. Mon site web maintenant. Je vous recommande également de suivre et de construire ou au moins de concevoir un site Web suivant ces concepts. Maintenant, ce type de classe brouille la ligne entre la conception Web et le développement Web. Donc, au moins une compréhension de base de H. Melon CSS est recommandée. Mais de toute façon, je suppose que ça couvre essentiellement tout. Donc, si vous êtes prêt à commencer, allons-y et sautez droit. 2. Commencez par le contenu: Chaque fois que je commence à construire un nouveau site, La première chose à laquelle je pense est le contenu. Le contenu est la raison pour laquelle les gens sont là. C' est ce qu'ils cherchent. C' est toute la raison pour laquelle le site existe en général. Donc, en raison du fait que le contenu est l'objectif numéro un du site, tout ce que nous faisons à partir d'ici va être de veiller à ce qu'il garde cette attention dans la mesure où il améliore l'expérience utilisateur et facilite la recherche de l'information dont l'utilisateur a besoin. Alors, comment pensons-nous au contenu ? Eh bien, vous devriez déjà avoir une idée de ce que sert le site ISS, mais commençons à réfléchir à la façon dont nous pouvons le décomposer en éléments constitutifs de base Maintenant, pour vous donner une meilleure idée de ce que je veux dire par là, Je vais vous montrer mon processus pour trouver le contenu de mon nouveau site Web. Bon, donc mon site Web est essentiellement une page de portefeuille, donc la première chose dont j'ai clairement besoin est une bio. Quelque chose à propos de qui je suis. J' ai besoin d'informations sur la façon de me contacter ainsi que sur mes liens sociaux. La prochaine chose que je voudrais est de présenter mon travail actuel. J' aimerais également avoir une liste de mes travaux précédents, mes jeux et de divers projets, et j'aimerais aussi avoir des informations sur l'aide, contribuer sur ma page d'accueil que j'ai mise en place. Mais maintenant qu'on a compris ça, et ensuite ? Eh bien, nous devons prioriser les choses, et ce que je veux dire par là, c'est quand vous pensez à ce que nous voulons que les gens découvrent d'abord sur notre site et s'ils partent tôt, quelle première impression voulez-vous laisser ? Et que pourraient-ils chercher en premier lieu de toute façon ? Essentiellement, nous voulons juste nous assurer que l'utilisateur voit les choses correctes en premier et que tout est généralement dans un ordre logique. Donc, pour mon site Web, j'ai un peu obtenu cela déjà dans un ordre décent parce que fondamentalement, la première chose que je veux que les gens voient est des informations sur qui je suis, comment me contacter et sur ce sur quoi je travaille actuellement qui seront tous sur le front page. Puis je suis allé pages sur mes jeux par les projets de Miss Lane et une page sur la contribution. Maintenant, il est temps que nous commencions à réfléchir à l'endroit où les choses entrent. Ce genre de chevauchement avec les priorités, honnêtement. Mais fondamentalement, ce que je veux dire est affaiblir les choses en bas de deux pages et nous pouvons décomposer les choses dans la page allaient généralement faire les deux à moins que ce soit un site que cela arrive juste construit pour adapter réellement tout dans une page. Mais en général, vous aurez les choses classées ensemble sur des pages distinctes, et à l'intérieur de cette page tout sera regroupé de manière logique, et nous voulons certainement nous assurer que tout est équilibré ici. Bien que nous voulions utiliser l'espace efficacement et que nous ne voulons pas que tout soit étalé sur un tas de pages différentes ou simplement vraiment dispersé dans chaque page, nous ne voulons pas non plus qu'il soit trop compact et dense avec des données. 3. Style et structure: Alors maintenant que nous avons compris quel contenu nous allons avoir sur notre site Web et comment il va généralement être mis en page, il est temps de réfléchir à ce que cela va ressembler spécifiquement. Alors maintenant que nous avons compris quel contenu nous allons avoir sur notre site Web et comment il va généralement être mis en page, Et il s'agit en grande partie de décider d'un thème cohérent. Nous voulons un thème qui correspond au contenu et, comme je l'ai dit, est cohérent maintenant revenir au sujet original Le minimalisme axé sur le contenu consiste garder les choses simples, donc nous voulons garder l'accent sur le contenu. Mais nous utilisons le design et le style global pour compléter le contenu. Nous voulons simplement améliorer l'expérience d'utilisation de notre site. Donc, en découvrant tout cela, je commence généralement par une mise en page de base, une structure simple qui contiendra le contenu. Encore une fois, pour vous donner un exemple, je vais vous montrer ce sur quoi je travaille à mes yeux. Je vais essentiellement avoir tout centré. Mais avec les arrière-plans débordant de chaque côté, j'aurai une barre latérale avec le logo et les liens de navigation, et nous aurons le contenu juste là. La barre latérale reste fixe lorsque vous faites défiler la partie principale du contenu, et lorsque vous affichez sur un appareil mobile ou les sourcils. Quand on sait quelque chose, c'est assez mince. Ill swap, aussi, la navigation étant en haut et qui défilera avec la page afin qu'il ne bloque pas le contenu de la vue. Mais dans l'ensemble, c'est un leurre assez simple. Et la raison pour laquelle j'ai décidé d'aller avec cela est due au thème que j'ai décidé depuis que je suis un développeur de jeux que ce serait intéressant si ma vue ressemblait un peu à un menu dans un jeu. Maintenant que le vol n'est pas nécessairement un rôle strict. Mais dans l'ensemble, ce thème semble vraiment bien fonctionner avec ce que je vais faire. Mais de toute façon, maintenant que nous avons une mise en page et une structure de base pour notre contenu, nous devons trouver des modèles de conception cohérents qui se réfèrent à la couleur et à la forme. Il s'agit aussi des polices, toutes ces petites choses qui vont vraiment beaucoup pour créer un thème cohérent. Et encore une fois, nous essayons de garder les choses simples et de ne pas distraire. Donc, il y a toujours un acte d'équilibre d'essayer de s'assurer que le contenu est accessible, facile à trouver et où il devrait logiquement être que tout semble bien et fonctionne bien , donc je vais aller de l'avant et vous montrer ce que j'ai fait. En ce moment, vous pouvez voir cette mise en page sous-jacente juste ici. Tout est centré en arrière-plan. Épaler sur les côtés, et la navigation est fixe. Mais j'ai mis beaucoup de flair là-dessus, mais pas trop. Tout est encore très simple, pas distrayant, mais cela aide à ajouter un peu de ce style. Et encore une fois, il correspond au thème d'être un menu de jeu vidéo. Il y a encore beaucoup de travail, tout à dio. Clairement, ces airs sont censés être des images. Je n'ai pas mon email ici dans mon tout à fait sûr sur le reste de tout cela. Mais dans l'ensemble, cela fait passer l'idée. Et, oui, j'ai aussi la version mobile. Rien de trop compliqué. Il s'effondre. Et comme vous pouvez le voir, il n'y a pas beaucoup à ça. Ce sont des éléments très simples que vous commencez à le décomposer. Maintenant, en construisant une page comme celle-ci, il y a beaucoup de choses à penser, et la plus grande qui tend à arriver est la compatibilité du navigateur. Autrement dit, différents navigateurs prennent en charge un ensemble différent de fonctionnalités, et il y aura toujours des fonctionnalités plus récentes que les anciens navigateurs que les gens utilisent toujours ne prennent pas en charge. Et cela revient à une décision que vous devez prendre sur les fonctionnalités que vous devez réellement utiliser et les autres façons de faire certaines choses. Non, bien sûr, compatibilité importe mawr, dans certains cas dans moins et d'autres, et cela dépend en grande partie de votre public. Si vous construisez quelque chose qui a absolument besoin d'utiliser certaines des dernières fonctionnalités, et c'est bien, sachez simplement que vous ne serez pas en mesure d'atteindre autant d'utilisateurs. Mais si vous construisez quelque chose dont vous avez besoin pour être aussi compatible que possible, vous devrez faire quelques sacrifices, et d'habitude j'essaie de trouver un terrain d'entente là-bas. 4. Restez Restez réactif: Maintenant que j'ai couvert la conception du contenu et du style et de la structure de notre site, je veux parler de quelques petites choses. Et la première chose dont je parlerais, c'est la réactivité. Nous voulons nous assurer que notre site peut être consulté depuis autant d'endroits différents que possible, surtout si l'on considère qu'environ la moitié de votre trafic va probablement être des dispositifs de démoulage. Bien sûr, cela dépendra de votre public cible, mais en général, cela va être vrai. Alors comment on fait ça ? Eh bien, le concept général à garder à l'esprit est que nous voulons que notre site soit fluide. Nous voulons que la structure s'adapte de différentes manières, selon le type de structure que nous avons l'intention d'avoir. J' ai brièvement parlé de cela dans la dernière partie quand j'ai montré comment mon site prend la navigation venant sur la gauche pour être sur le dessus quand je fais la fenêtre trop étroite, et c'est ce que je vais faire sur Mobile. Maintenant, comment je fais beaucoup de ça ? Eh bien, la première chose serait sur le dimensionnement parce que, comme vous le savez peut-être, beaucoup de téléphones ont un écran qui est 12 80 par 7 2019 20 mois en 80 ou même quatre résolutions K . Comment pouvons-nous nous assurer que notre contenu ne semble pas extrêmement petit sur leur appareil ? Maintenant, il y a quelques façons compliquées qui ont été faites dans le passé, mais de nos jours, c'est vraiment simple et très bien soutenu. Et c'est les balises Meta Vieux Port qu'on appelle. Il s'agit de définir quelques propriétés ici qui ajustent la façon dont le navigateur va rendre. Le contenu de la page effectue essentiellement un zoom avant automatiquement sur un niveau raisonnable pour cet appareil. Ainsi, par exemple, mon téléphone utilise un écran 12 80 par 7 20. Mais la taille du contenu qui rend réel, est comme si elle était seulement 420 pixels de large, pas 720. Donc, tout semble être à une taille plus raisonnable que je m'attendrais sur un moniteur avec résolution plus typique. Maintenant, il existe différentes propriétés que vous pouvez utiliser ici. Ces air juste les trois que j'utilise que j'ai appris d'ailleurs, et cela aide à adapter le contenu spécifiquement à ce qui est sur la page, pas ce qui est débordé maintenant. Bien sûr, ça ne gère pas tout effondrer. Alors comment on fait ça ? Eh bien, nous utilisons des requêtes média, qui sont une autre fonctionnalité qui est encore assez nouvelle, mais toujours bien supportée. Vous utilisez cette syntaxe et vous passez un paramètre, et ici je vérifie une largeur maximale d'un peu moins de 640 pixels afin que sous cette taille je vais m'effondrer dans la vue mobile. Et à l'intérieur, je pourrais juste définir des règles comme je le ferais normalement, pour tout ajuster de la normale pour permettre que cela s'adapte mieux pour mobile. Et puis j'ai un couple de plus pour ajuster la taille, les ings et l'espacement des différents éléments. Donc, ces deux méthodes différentes, la méthode Vieux port tag et les requêtes média vont beaucoup pour rendre votre site mobile convivial. Maintenant, nous savons aussi que vous pensez à la façon dont les données sont faites. Et ce que je veux dire c'est sur un ordinateur. Vous allez généralement utiliser une souris, ce qui signifie que vous serez en mesure de survoler les liens sur mobile. De toute évidence, vous ne pouvez pas passer de la souris sur ce genre d'écrans, donc vous ne devriez vraiment pas révéler d'informations sur un événement de vol stationnaire, et je l'ai fait dans le passé sans le savoir. Je vais aller de l'avant et vous montrer sur ma page de jeux actuelle. J' ai ces jolies tuiles représentant chacun mes jeux, et quand je passe la souris sur eux, ils révèlent le nom et c'est tout génial. Mais je ne peux pas les survoler sur mobile, donc je ne peux pas vraiment révéler le nom. Non, il pourrait y avoir d'autres choses et vous pensez à votre site sur mobile. Mais en général, cela couvre à peu près tout. Donc je suppose que c'est à propos de ça pour l'instant. Passons donc à la partie suivante. 5. Prévenir la confusion et la frustration: maintenant, je veux parler un peu de la prévention de la confusion et de la frustration pour les utilisateurs de votre site, et le premier point que je veux faire est que la prévisibilité est très importante. Ce que je veux dire, c'est que, surtout lorsqu'il s'agit d'éléments interactifs, ces interactions devraient se comporter comme les gens l'attendent à nouveau. Tout est de retour pour s'assurer que tout est intuitif. Le prochain point que je veux faire est sur les devinettes. Vous ne voulez pas que l'utilisateur ait à deviner ce que certaines choses font. Par exemple, si vous allez utiliser des icônes pour la navigation, si leur but n'est pas extrêmement clair et même si c'est le cas, vous voulez probablement une sorte de taxe pour pouvoir expliquer ce que c'est. Et la prochaine chose serait que vous voulez minimiser les temps de chargement et maximiser la compatibilité . temps de chargement comptent dans le fait que les gens ne veulent pas attendre vos vues et votre chargement. Il est bon de penser à l'endroit où vous avez réellement besoin d'images ou d'autres médias et où vous pouvez vous en sortir sans. Il y a plusieurs façons de styling et CSS qui ont l'air vraiment sympa qui ne nécessitent pas d' images. Il y a beaucoup de techniques pour garder ces fichiers petits, même si vous avez besoin de beaucoup d'images des moyens les plus simples, bien sûr, penser aux types de fichiers et méthodes de compression. Par exemple, la plupart du temps, vous allez utiliser J Pegs ou P et G sont bons pour images plus simples, celles avec des couleurs plus unies ou des transparences partielles. Bien sûr, tu ne peux pas faire ça avec J Pegs maintenant avec P et G. Si vous utilisez 256 couleurs sont moins nombreuses et vous n'avez pas besoin de transparences partielles. Vous pouvez réellement utiliser l'indexation comme un Jiff, mais c'est en fait une taille de fichier plus petite qu'un Jeff, et j'utilise beaucoup cette technique. Et, bien sûr, avec J Pegs, il s'agit de déterminer les niveaux de compression avec lesquels vous pourriez échapper ne détruira pas trop la qualité de l'image de toute façon. Il y a quelques autres techniques que je n'ai pas vraiment explorées, mais elles sont utiles pour être au courant, et il s'agit de charger différentes versions de l'image qui sont différentes tailles, en fonction de la résolution de l'appareil. Votre visualisation sur une autre chose qui se rapporte à cela est des polices personnalisées. Il pourrait être vraiment agréable du point de vue de la conception, construit une charge, vos propres polices à utiliser sur la page. Mais si vous n'êtes pas prudent, peut obtenir un peu hors de la main. Donc, en général, ce que j'ai essayé de faire est de le garder comme une ou deux polices personnalisées. Et si vous pouviez vous en sortir, utiliser des polices système peut être une très bonne idée. Il y a une nouvelle technique qui utilise cette pile de polices système. Il peut sembler un peu long et hors de l'ordinaire, mais c'est une nouvelle façon de gérer les fonds qui utilisera les meilleures polices que les systèmes d'exploitation et les navigateurs que vous connaissez, y compris maintenant, bien sûr, si vous veulent qu'il soit le même partout. Les obligations douanières sont encore une chose importante pour cela. Et en ce qui concerne la compatibilité entre les différents navigateurs. Ça revient à toutes les choses dont j'ai parlé tout à l'heure. Parce que si quelqu'un utilise un navigateur, ce n'est pas vraiment si obscur et le site ne fonctionne pas trop bien pour eux. Ce ne sera pas une très bonne expérience utilisateur. Vous voulez vous assurer que le plus grand nombre de personnes peuvent utiliser votre site, mais bien sûr, une mesure raisonnable 6. Prenez des questions de l'accessibilité: Maintenant, il y a un dernier concept que je veux aborder, à savoir l'accessibilité. Maintenant, cela couvre un très large éventail de sujets, mais je vais essayer de passer en revue quelques-unes des choses que j'essaie de garder à l'esprit. Le premier point concernerait l'invisibilité du contraste, et cela revient à la couleur, la taille et la forme des objets dans la page. Quand il s'agit de choix de couleurs, vous voulez penser à la différence entre l'arrière-plan au premier plan. C' est aussi une bonne idée de s'assurer que les couleurs ne sont pas trop vives et audacieuses et simplement flagrantes et difficiles à voir. Vous voulez penser à la cécité des couleurs. Il existe différents outils que vous pouvez utiliser pour émuler le daltonisme, et puis, ce qui concerne la taille et la forme des objets, est juste généralement de s'assurer que les polices que vous choisissez notre corniche à base de plantes à la taille que vous avez l'intention pour eux de l'être. Maintenant, ces concepts s'appliquent aux choses du texte pair, mais c'est généralement la chose principale qui vous préoccupe. Une autre chose que vous voudrez peut-être examiner est de prendre en charge les lecteurs de page sur votre site. Il existe plusieurs techniques différentes que vous pouvez utiliser pour vous assurer que le contenu est lu correctement pour les utilisateurs aveugles qui doivent compter sur des programmes pour lire à haute voix le contenu de la page. Je ne me suis pas trop inquiété à ce sujet, parce que le contenu que je fais tend à être visuellement orienté au début. Mais c'est quelque chose à penser maintenant. Une autre chose serait de ne pas exiger de mouvements de précision et de navigation. Vous ne voulez pas exiger que quelqu'un ait à étudier une main, et cela ne touche même pas seulement les personnes handicapées ou les personnes âgées. C' est vraiment ennuyeux pour tout le monde d'avoir à naviguer dans un menu qui ne cesse de se cacher si vous bougez de la mauvaise façon, Oh ! 7. Dernières réflexions: d' accord. Je suppose que ça couvre à peu près tout. Donc, à ce stade, vous devriez avoir une bonne compréhension de la raison pour laquelle j'ai conçu des sites Web comme je le fais. Et rappelez-vous juste qu'il n'y a pas de règles difficiles et rapides quand il s'agit de concevoir quoi que ce soit . Il s'agit simplement de garder certains points à l'esprit et de déterminer ce qui est le mieux pour votre projet. Maintenant, si vous avez construit ou conçu quelque chose en cours de route, vous seriez formidable pour vous de le partager ci-dessous. Donc tout le monde peut voir ce sur quoi vous travaillez, et vous n'avez même pas à attendre que vous ayez fini pour pouvoir le partager. Vous pouvez le mettre à jour en cours de route, a fait des progrès et obtenir les commentaires d'autres personnes suivant cette classe. Et vous pouvez même me poser des questions et j'essaierai d'être aussi réactif que possible. Souviens-toi, je ne sais pas tout quand il s'agit de tout ça. Je ne fais que partager les points que j'ai appris au cours des années de création de mes propres sites Web. J' espère que j'ai assez bien partagé ces points. Et si vous êtes intéressé à voir les futures classes que je poste ici. Assurez-vous de me suivre ci-dessous qui seront grandement appréciés et n'hésitez pas à faire demandes sur des choses que vous m'aimez pour vous montrer si c'est plus sur le développement de la conception Web ou quelque chose sur l'os de jeu. Mais de toute façon, je suppose que ça va devoir être quatre aujourd'hui, alors oui, je te verrai dans le coin. Au revoir.