La technologie de développement de sites Web est un processus à multiples facettes. Mais encore, toutes ses étapes peuvent être divisées en deux composants principaux - la coque fonctionnelle et la coque extérieure. Ou, comme il est de coutume chez les webmasters, respectivement back-end et front-end. Les personnes qui commandent leurs sites Web auprès de studios de développement Web croient souvent naïvement qu'il vaut la peine de se concentrer uniquement sur les fonctionnalités, et ce sera la bonne décision. Mais cela est vrai dans des cas très, très rares, généralement pour les projets de démarrage au stade des tests bêta. Sinon, la conception graphique et l'interface utilisateur sont simplement nécessaires pour se conformer aux normes de développement Web et être pratiques.
La première pierre angulaire à laquelle le concepteur d'interface, ou concepteur, fait face est la largeur de la mise en page du site. En effet, pour cela il faut dessiner les interfaces. De manière purement intuitive, deux approches se présentent: soit créer des mises en page distinctes pour chaque résolution d'écran populaire, soit créer une version du site pour tous les écrans. Et les deux options seront fausses, mais tout d'abord.
Largeur standard du site Web en pixelspour Runet
Avant le développement de la mise en page adaptative, le développement d'un site d'une largeur de mille pixels était un phénomène de masse. Ce chiffre a été choisi pour une raison simple - pour que le site s'adapte à n'importe quel écran. Et cela a sa propre logique, mais supposons qu'une personne ait encore au moins un moniteur HD sur un ordinateur de bureau. Dans ce cas, votre mise en page ressemblera à une petite bande au milieu de l'écran, où tout est collé en un seul tas, et sur les côtés, il y a un énorme espace inutilisé. Supposons maintenant qu'une personne accède à votre site Web sur une tablette avec un écran large de 800 pixels et que "Afficher le site Web complet" est coché dans les paramètres. Dans ce cas, votre site s'affichera également de manière incorrecte, car il ne rentrera tout simplement pas dans l'écran.
D'après ces considérations, nous pouvons conclure qu'une largeur fixe pour la mise en page ne nous convient certainement pas et nous devons chercher un autre moyen. Analysons l'idée d'une mise en page distincte pour chaque largeur d'écran.
Dispositions pour toutes les occasions
Si vous avez choisi comme stratégie de créer des mises en page pour toutes les tailles d'écran du marché, alors votre site sera le plus unique sur tout Internet. Après tout, il est tout simplement impossible aujourd'hui de couvrir toute la gamme d'appareils, en essayant d'affiner chaque option. Mais si vous vous concentrez sur les résolutions les plus populaires des moniteurs et des écrans d'appareils, l'idée n'est pas mauvaise. Son seul inconvénient est le coût financier. Après tout, quand un designer d'interface, un designer et un codeur sont obligés de faire le même travail 5 ou 6 fois, le projet coûteradisproportionnellement plus élevé que le prix initialement budgété.
Par conséquent, seuls les sites d'une page peuvent se vanter d'avoir une abondance de versions pour différents écrans, dont le but est de vendre un produit et d'être sûr de le faire bien. Eh bien, si vous n'avez pas l'un de ces atterrissages, mais un site de plusieurs pages, alors vous devriez réfléchir plus loin.
Tailles de sites les plus populaires
Un compromis entre les deux extrêmes rend la mise en page pour trois ou quatre tailles d'écran. Parmi eux, l'un doit être une mise en page pour les appareils mobiles. Le reste devrait être adapté aux petits, moyens et grands écrans de bureau. Comment choisir la largeur du site ? Ci-dessous, nous présentons les statistiques du service HotLog pour mai 2017, qui nous montrent la répartition de la popularité des différentes résolutions d'écran de l'appareil, ainsi que la dynamique de cet indicateur.
Dans le tableau, vous pouvez découvrir comment déterminer la taille du site que vous souhaitez utiliser. De plus, on peut conclure que le format le plus courant aujourd'hui est un écran de 1366 par 768 pixels. De tels écrans sont installés sur des ordinateurs portables économiques, leur popularité est donc naturelle. Le deuxième plus populaire est le moniteur Full HD, qui est la référence en matière de vidéos, de jeux et donc de création de mises en page de sites Web. Plus loin dans le tableau, nous voyons la résolution des appareils mobiles 360 par 640 pixels, ainsi que diverses options pour les écrans de bureau et mobiles après cela.
Conception de la mise en page
AlorsAprès analyse des statistiques, nous pouvons conclure que la largeur de site optimale a 4 variations:
- Version pour ordinateur portable avec une largeur de 1366px.
- Version Full HD.
- Une mise en page de 800 pixels de large pour un affichage sur de petits écrans de bureau.
- Version mobile du site - 360 pixels de large.
Disons que nous avons décidé de la taille à utiliser pour la source générée pour le site. Mais un tel projet serait encore coûteux. Examinons donc plus d'options, cette fois sans utiliser de largeur fixe.
Rendre la mise en page flexible
Il existe une approche alternative, lorsqu'il vaut la peine de s'adapter uniquement à la taille minimale de l'écran, et les tailles du site elles-mêmes seront définies par des pourcentages. Dans le même temps, des éléments d'interface tels que les menus, les boutons et le logo peuvent être définis en valeurs absolues, en se concentrant sur la taille minimale de la largeur de l'écran en pixels. Les blocs avec du contenu, au contraire, seront étirés en fonction du pourcentage spécifié de la largeur de la zone d'écran. Cette approche permet de ne plus percevoir la taille des sites comme une limitation pour le concepteur et de battre habilement cette nuance.
Qu'est-ce que le nombre d'or et comment peut-il être appliqué à la mise en page d'une page Web ?
Même à la Renaissance, de nombreux architectes et artistes ont essayé de donner à leurs créations la forme et les proportions parfaites. Pour obtenir des réponses aux questions sur les valeurs d'une telle proportion, ils se sont tournés vers la reine de toutes les sciences - les mathématiques.
Depuis l'antiquité, on a inventé une proportion que notre œil perçoit comme la plus naturelle et la plus élégante,car il est omniprésent dans la nature. Le découvreur de la formule d'un tel rapport était un ancien architecte grec talentueux nommé Phidias. Il a calculé que si la plus grande partie de la proportion est liée à la plus petite alors que le tout est lié à la plus grande, alors une telle proportion aura l'air la meilleure. Mais c'est le cas si vous souhaitez diviser l'objet de manière asymétrique. Cette proportion fut plus tard appelée le nombre d'or, ce qui ne surestime toujours pas son importance pour l'histoire mondiale de la culture.
Retour à la conception Web
C'est très simple - en utilisant le nombre d'or, vous pouvez concevoir des pages qui seront aussi agréables que possible à l'œil humain. En calculant selon la définition de la formule du nombre d'or, nous obtenons le nombre irrationnel 1, 6180339887 …, mais pour plus de commodité, nous pouvons utiliser une valeur arrondie de 1, 62. Cela signifiera que les blocs de notre page doivent être 62 % et 38 % de l'ensemble, quelle que soit la taille de la source générée pour le site que vous utilisez. Vous pouvez voir un exemple dans ce diagramme:
Utiliser les nouvelles technologies
Les technologies modernes de mise en page de sites Web permettent de transmettre avec précision l'idée d'un planificateur et d'un concepteur, vous pouvez donc maintenant vous permettre de mettre en œuvre des idées plus audacieuses qu'à l'aube des technologies Internet. Vous n'avez plus besoin de réfléchir sérieusement à la taille du site. Avec l'avènement d'éléments tels que la mise en page adaptative en bloc, le chargement dynamique du contenu et des polices, le développement de sites Web est devenu beaucoup plus agréable. Après tout, ces technologies sontmoins de restrictions, même si elles sont toujours là. Mais comme vous le savez, sans limites il n'y aurait pas d'art. Nous vous suggérons d'utiliser une approche de conception vraiment créative - le nombre d'or. Avec lui, vous pouvez remplir efficacement et magnifiquement l'espace de travail, quelles que soient les tailles de site que vous définissez dans vos modèles.
Comment augmenter l'espace de travail du site
Il y a de fortes chances que vous n'ayez pas assez de place pour intégrer tous les éléments de l'interface utilisateur dans une petite mise en page. Dans ce cas, vous devrez commencer à penser de manière créative ou même plus créative qu'auparavant.
Libérez un maximum d'espace sur le site en masquant la navigation dans le menu contextuel. Il est logique d'utiliser cette approche non seulement sur les appareils mobiles, mais également sur les ordinateurs de bureau. Après tout, l'utilisateur n'a pas besoin de regarder tout le temps les rubriques de votre site - il est venu pour le contenu. Et les souhaits de l'utilisateur doivent être respectés.
Un exemple d'un bon moyen de masquer le menu est la mise en page suivante (photo ci-dessous).
Dans le coin supérieur de la zone rouge, vous pouvez voir une croix, en cliquant dessus, le menu se cachera dans une petite icône, laissant l'utilisateur seul avec le contenu du site.
Cependant, ceci est facultatif, vous pouvez quitter la navigation, qui sera toujours en vue. Mais vous pouvez en faire un bel élément de design, et pas seulement une liste de liens populaires sur le site. Utilisez des icônes intuitives en plus ou même à la place des liens de texte. c'est le mêmepermettra à votre site d'utiliser plus efficacement l'espace de l'écran sur l'appareil de l'utilisateur.
Le meilleur site Web est responsive
Si vous ne savez pas quelle mise en page choisir pour le site, alors tout est simple pour vous. Pour économiser sur les coûts de développement et en même temps ne pas perdre votre public en raison d'une mauvaise mise en page pour certains appareils, utilisez un design réactif.
Le design réactif est un design qui s'adapte à différents appareils. Cette approche permettra à votre site d'être compréhensible et pratique même sur un ordinateur portable, même sur une tablette, même sur un smartphone. Cet effet est obtenu en modifiant automatiquement la largeur de la zone de travail de l'écran. En utilisant des feuilles de style réactives pour votre site, vous prenez la meilleure décision possible.
Quelle est la différence entre le responsive design et les versions de site Web
Le responsive design diffère de la version mobile du site en ce que dans ce dernier cas, l'utilisateur reçoit un code html différent de celui du desktop. C'est un inconvénient en termes d'optimisation des performances du serveur ainsi que d'optimisation des moteurs de recherche. De plus, il devient plus difficile de calculer des statistiques pour différentes versions du site. L'approche adaptative ne présente pas ces inconvénients.
La réactivité pour divers appareils est obtenue grâce à une mise en page avec un pourcentage de la largeur spécifiée ou en transférant des blocs vers l'espace disponible (dans le plan vertical sur un smartphone au lieu dehorizontal sur le bureau), ou en créant des mises en page individuelles pour différents écrans.
En savoir plus sur la conception et le développement réactifs dans nos tutoriels.
