Bonjour, aujourd'hui, nous allons parler de la mise en page adaptative du site Web. Pourquoi est-il si nécessaire et doit-il être présent sur chaque site, en quoi est-il différent mise en page mobile de l'adaptatif. Beaucoup de gens confondent encore ou ne comprennent pas ce qu'est cette option de mise en page et en quoi elle diffère, par exemple, de la version mobile du site.

Il y a quelques années, ou plutôt avant la première entrée dans le monde d'un téléphone tactile de Pomme, cette question n'était pas si critique. Peut-être, bien sûr, je me suis trompé d'années, mais j'ai précisé l'heure approximative (à en juger par les répliques des auteurs des livres). Puis vinrent les tablettes, de nouveaux modèles téléphones tactiles et le nombre de résolutions d'écran a commencé à augmenter de façon spectaculaire. Après cela, les propriétaires de sites ont eu un nouveau problème.

Qui ne le sait toujours pas, à partir du 21 avril 2015, Google introduit de nouvelles méthodes de classement des sites, basées sur la conception de sites adaptatifs. Si votre site n'a pas de design réactif, votre ressource descendra dans les résultats de recherche moteur de recherche. Ici c'est un miracle appareils mobiles.

Votre site doit avoir la même apparence sur tous les appareils. Complètement pour tout le monde! du téléphone portable à haute résolution moniteur. Il n'y a pratiquement aucun problème avec les grands écrans, tout y est clair de toute façon, mais il y a un problème avec les tablettes et les téléphones portables. Les sites ne s'affichent pas correctement sur les petits écrans, ce qui cause beaucoup de désagréments à l'utilisateur.

Sur le moniteur, la page du site doit apparaître dans un format, sur la tablette dans un autre et sur le téléphone dans le troisième. En plus de cela, il ne devrait pas y avoir de barre de défilement horizontale. Le site doit lui-même s'adapter à l'écran de l'appareil, c'est la beauté de la mise en page adaptative du site.

A propos de quoi en général Dans la question, mise en page adaptative qu'est-ce que c'est. Votre site doit avoir UNE conception réactive utilisant UN code ajusté pour s'adapter à l'écran. Basculer vers version mobileça ne marche plus, ce n'est pas bien. peut ouvrir guide de google et lire les informations plus en détail.

L'utilisateur qui a ouvert votre site n'a pas besoin de zoomer ou de dézoomer. De tels cas fatiguent généralement les gens, ils deviennent mal à l'aise et ils veulent fermer rapidement votre site. De tels cas ne seront pas isolés, ce qui peut être très mal affiché sur facteurs comportementaux blog ou site web. Le même exemple s'applique au texte que le visiteur va lire. La mise en page doit changer d'échelle de sorte que lors de la visualisation du texte, il n'y ait pas de ligne de défilement horizontale.

À mon avis, le responsive design est mieux qu'une version mobile d'un site Web. Soit dit en passant, la deuxième option vous coûtera beaucoup plus cher que la première. Grâce à l'adaptabilité, vous pouvez vous-même décider de ce que l'utilisateur verra sous ses yeux à l'aide d'une tablette et quelle version du site sera affichée sur les téléphones mobiles.

Qu'est-ce que la mise en page adaptative ?

Bien sûr, nous n'avons pas tous un moniteur, une tablette et un téléphone à portée de main. Pour vérifier l'adaptation de votre site, il n'est pas nécessaire de disposer de tous les types d'appareils. Si vous utilisez Navigateur Google Chrome, vous pouvez installer vous-même une extension appelée Redimensionneur de fenêtre. Avec lui, vous pouvez tester rapidement la plupart de vos options de conception réactives.

Un bouton devrait apparaître en haut de votre navigateur, lorsque vous cliquez dessus, tous options possibles visualisation à l'écran. Je recommande de parcourir tous les points. Choisissez puis vérifiez à quoi tout ressemble sur votre site.

Je le répète, il NE DEVRAIT PAS y avoir de ligne de défilement horizontale. Tout doit s'adapter à n'importe quelle résolution d'écran. Ouvrez la page principale, vos articles et quelques autres pages supplémentaires.

Comme le montre l'expérience, vous pouvez critiquer presque tous les sites. Certains ont un logo tordu, d'autres ont un champ très étroit avec des commentaires, etc. Les sites sur lesquels il n'est tout simplement pas réaliste de laisser un commentaire depuis le téléphone sont particulièrement ennuyeux. Cela me donne envie de le fermer et de ne plus jamais l'ouvrir. Et c'est moins un commentaire, et il y a certainement plus d'une personne comme moi.

Voilà pour l'affichage normal de toutes les pages et pas seulement pour elles, la mise en page adaptative de votre site doit être faite sur tous les appareils. Toutes les sections, tous les blocs avec des commentaires, toutes les pages, l'en-tête du site, le pied de page du site et Attention particulière doit être laissé pour votre menu.

Exemples de mise en page

Je vais donner un petit exemple de site adaptatif, j'ai trouvé cette option spontanément par la méthode du poke scientifique grâce à la recherche. Je n'ai pas regardé de quel type de modèle il s'agissait et où il l'a obtenu, maintenant la question est différente. J'aime beaucoup cette option, toutes dans leur propre style. Sur le moniteur, le site apparaît sous une forme, sur l'iPhone, il est complètement différent.

Bien sûr, vous pouvez acheter un modèle approprié pour vous-même et cela vous évitera de nombreux problèmes supplémentaires, mais vous devez tout vérifier. Si vous trouvez plus tard une mise en page tordue, vous devrez apporter des corrections vous-même ou utiliser les services d'un maquettiste.

Dans cet exemple de site responsive, tout est à sa place, tout est fluide et beau. En haut se trouve un menu qui s'ouvre lorsque vous appuyez sur votre doigt, puis il y a une description du blog, une recherche de site, des rubriques et un abonnement aux mises à jour. Ci-dessous la liste des nouveautés. La beauté... vraiment tout est pensé.

Vous pouvez trouver vous-même des exemples de sites adaptatifs. Ouvrez n'importe quel blog et utilisez extension supplémentaire pour le navigateur. Ainsi, vous pouvez choisir n'importe quel exemple que vous aimez et vous tourner vers le concepteur de mise en page avec. Il effectuera tous les travaux nécessaires et votre site prendra un nouveau visage.

Leçons sur la réactivité du site Web

Si vous n'avez pas de connaissances particulières en mise en page de sites web, je vous dirai tout de suite que vous n'y parviendrez pas. C'est vrai, sans connaître la propriété et les valeurs en CSS, vous ne ferez rien vous-même. Vous devez d'abord suivre quelques leçons de base, apprendre les propriétés utilisées lors de la mise en page des pages.

Il y a toute une section sur mon blog que j'ai consacrée. Je viens tout juste de commencer à le remplir, à l'avenir, je prévois de continuer à y travailler également. Qui veut recevoir de nouvelles leçons par mail, je recommande de s'abonner. D'eux, vous pouvez découvrir:

1. Comment créer votre propre mise en page responsive.
2. Qu'est-ce qu'une requête média ?
3. Comment utiliser correctement les media queries.
4. Comment faire un menu responsive.
5. Comment faire une galerie responsive.
6. Et beaucoup plus.

Si vous avez décidé d'approfondir ce sujet et que vous souhaitez essayer de l'étudier, les leçons du livre de Ben Frein, intitulé Html5 and CSS3 Developing Websites for Any Browsers and Devices, sont tout à fait appropriées pour commencer. Vous y apprendrez tout sur le design réactif, grâce auquel les sites s'afficheront magnifiquement sur tous les appareils. Très bon bouquin, qui décrit l'ensemble du processus de A à Z.

Qu'est-ce que Media Queries ?

Requêtes multimédias- ce sont des media queries qui sont utilisées dans la mise en page adaptative du site. C'est d'eux qu'est évoqué le livre de Ben Frain. Si tu le dis en termes simples, est le code dans lequel les styles CSS pour la résolution d'écran donnée sont placés. Ainsi, toutes les options de conception possibles sont ajustées.

À l'aide des requêtes multimédias, vous pouvez spécifier la largeur minimale et maximale de la fenêtre du navigateur. En plus de cela, vous pouvez ajouter tout ce que vous voulez pour concevoir la page, ou vice versa changer. Par exemple, au lieu de trois colonnes, créez-en une, supprimez les blocs inutiles sur la page, raccourcissez le menu, modifiez l'en-tête du site, ajoutez plus d'informations au pied de page du site. Le plus important est que votre site soit pratique et agréable sur les plus petites tailles d'écran.

Le nombre de ces options possibles que vous pouvez faire dépend de vous. Vous ne devez pas prendre les mots au pied de la lettre et utiliser les requêtes multimédias pour toutes les options possibles. Choisissez quelques-uns des plus utilisés.

@media (largeur maximale : 1 010 px) et (largeur minimale : 992 px)

Exemple de mise en page responsive

Par exemple, nous avons une certaine section de la page qui, lorsqu'elle est ouverte sur une petite extension d'écran, nous devons réduire et adapter l'écran d'un téléphone ou d'une tablette. Dans ce cas, vous devez adapter tous les blocs, textes et autres contenus aux extensions d'écran spécifiées. En utilisant le plugin du navigateur, vous pouvez observer tous les changements.

Créez un nouveau fichier avec des styles (connectez-le à page d'accueil) ou ajoutez des requêtes multimédias à un fichier existant. @media (max-width : 770px) - La largeur d'écran maximale est de 770px. Et nous ajoutons à ce conteneur toutes les modifications nécessaires qui sont nécessaires pour une largeur d'écran donnée.

@media (max-width : 770px) ( body, html ( overflow-x:hidden; min-height: 960px; background-size: 100%; ) #mail_bg_horizontal div ( left: 274px; position: relative; top: 40px; width: 340px; ) #mail_bg_horizontal .module_subscribe figure ( padding-top: 46px; ) #footer_menu ( display: none; ) #header (background-size: 100%; padding-top: 48%;) #logo-site ( top : -60px; font-size: 7vw; width:100%; margin: 10px;) #logo-site span(display:inline-block; padding-left:10px;) #slogan( top: -77px; font-size : 3vw ; marge : 10px ;)

@media (max - largeur : 770px ) ( corps , html ( débordement -x : caché ; hauteur min : 960px ; fond - taille : 100% ; #mail_bg_division horizontale ( gauche : 274px ; position : relative ; haut : 40px ; largeur : 340px #mail_bg_horizontal .module_subscribe chiffre ( rembourrage - haut : 46px ; #footer_menu ( affichage : aucun ; #header (taille d'arrière-plan : 100 % ; rembourrage en haut : 48 % ;) #logo-site span(display:inline-block; padding-left:10px;)

Maintenant on passe à autre chose, le maximum de 770 pixels est passé, on passe à une largeur plus petite. @media (max-width : 650px) - nous ajoutons toutes les modifications nécessaires pour étendre 650px. Tout se passe de la même manière, uniquement pour une largeur maximale de 650 pixels. Toutes les modifications nécessaires sont ajoutées à un conteneur commun pour cette requête multimédia.

@media (max-width : 650px) ( #related_posts ( border-bottom : 1px solid #ccc ; border-top : 1px solid #ccc ; padding-top : 20px ; width : 545px ; ) border : medium none ; height : 28px ; gauche : 93 px ; position : relative ; haut : -12 px ; largeur : 159 px ; ) #header .wrapper ( largeur : 100 % ;) #header .wrapper > nav ul > li ( float : aucun ; largeur : 100 % ; marge -gauche : 0 ; aligner le texte : centré ; ))

@media (max - largeur : 650px ) ( #Articles Similaires ( rembourrage - haut : 20px ; largeur : 545px ; Bouton #mail_bg_horizontal .module_subscribe ( bordure : moyenne aucune ; hauteur : 28px ; gauche : 93px ; position : relative ; haut : - 12px ; largeur : 159px #header .wrapper (largeur : 100 % ;) #header .wrapper > nav ul > li ( flottant : aucun largeur : 100 % marge - gauche : 0 ; texte - aligner : centrer ;

Après cela, la transition vers la largeur suivante, par exemple 500 pixels. Nous ajoutons à ce conteneur toutes les propriétés nécessaires qui doivent tenir sur l'écran avec une largeur maximale de 500 pixels. @media (largeur maximale : 500px).

@media (max-width : 500px) ( body > #content > .wrapper .navigation > .next ( background : rgba(0, 0, 0, 0) url("images/bow_right.png") défilement sans répétition 0 0 ; affichage : aucun ; flottant : gauche ; hauteur : 30 px ; marge-gauche : 1 px ; marge-haut : -4 px ; largeur : 34 px ; ) #mail_bg_horizontal .bouton module_subscribe ( bordure : moyenne aucune ; hauteur : 28 px ; gauche : 96 px ; position : relative ; haut : -12px ; largeur : 159px ;))

@media (max - largeur : 500px ) ( corps> #content > .wrapper .navigation > .next ( fond : rgba (0 , 0 , 0 , 0 ) url ("images/bow_right.png" ) no - repeat scroll 0 0 ; affichage : aucun ; flottant : gauche ; hauteur : 30px marge - gauche : 1px ; marge - haut : - 4px ; largeur : 34px Bouton #mail_bg_horizontal .module_subscribe ( bordure : moyenne aucune ; hauteur : 28px ; gauche : 96px ; position : relative ; haut : - 12px ; largeur : 159px ) )

À la fin, nous réduisons également la largeur de la requête média à 400 pixels. Dans ce conteneur, nous indiquons tous les changements nécessaires pour une largeur donnée. @media (largeur maximale : 400px). Après chaque ajout, nous vérifions ce qui se passe. À tout moment, vous pouvez modifier et apporter vos propres ajustements au fichier avec des styles.

@media (max-width : 400px) ( #header ( padding-top : 61%;) #mail_bg_horizontal div ( top : 11px ; left : 37px ; width : 174px ; font-size : 13px ;) #mail_bg_horizontal . module_subscribe ( position :relative ; haut : -15 px ; gauche : -69 px ;) #mail_bg_horizontal .module_subscribe bouton (haut : -10px ; gauche : 18px ;) #mail_bg_horizontal (hauteur : 186px ;) #related_posts (border-bottom : 1px solide #ccc ; border-top : 1px solid #ccc ; padding-top : 1px ; largeur : 255px ; ))

@media (max - largeur : 400px ) ( #header (padding-top : 61 % ;) #mail_bg_horizontal div (haut : 11 px ; gauche : 37 px ; largeur : 174 px ; taille de la police : 13 px ;) #mail_bg_horizontal .module_subscribe ( position:relative; haut:-15px; gauche:-69px;) Bouton #mail_bg_horizontal .module_subscribe ( haut : -10px ; gauche : 18px ;) #mail_bg_horizontal (hauteur : 186px ;) #Articles Similaires ( bordure - bas : 1px solide #ccc ; bordure - haut : 1px solide #ccc ; rembourrage - haut : 1px ; largeur : 255 pixels

Même si vous avez tout fait correctement, assurez-vous de vérifier vos résultats dans service spécial, que votre site passe la version mobile ou non. Vérification de la convivialité sur les appareils mobiles. Entrez l'URL de votre site Web et voyez à quoi Google répond. Avec une forte probabilité, le service peut vous écrire que votre ressource n'a pas été vérifiée.

Après la mise à jour, Google recommande d'ouvrir l'accès aux fichiers css, aux fichiers de plug-in, aux thèmes, aux scripts et aux images pour le robot, après quoi vous pourrez réussir le test. Pour ce faire, vous devez ouvrir tous les chemins vers les fichiers nécessaires dans le fichier robots.txt pour que le robot puisse les voir. Voici un exemple de mon robots.txt :

/wp-content/themes/*. jpg

Autoriser : /wp-content/themes/*. png

Il y a eu un cas intéressant lorsque j'ai fait une mise en page adaptative du site au début de 2015. Le client a pris tous les mots très au sérieux et voulait un design adaptatif pour toutes les résolutions d'écran que je lui ai montré dans le module complémentaire Chrome. Je n'ai pas discuté avec le désir du client et l'ai ajusté complètement à toutes les options possibles. Le propriétaire - Barin, a payé la vérité deux fois plus cher.

Fichier psd de conception réactive

Si vous souhaitez commander un nouveau design unique pour vous-même, ce n'est pas absolument nécessaire, mais il est conseillé d'avoir avec vous une mise en page psd de vos envies. À Fichier PSD Il y aura une conception entièrement prête à l'emploi pour les appareils mobiles et les tablettes. Le maquettiste verra et comprendra ce que vous attendez de lui. Si vous ne pouvez pas dessiner vous-même une mise en page psd. tournez-vous vers des professionnels ou vers l'échange indépendant. En bourse, vous en trouverez beaucoup qui veulent faire ce genre de travail et pour une somme modique. Vous n'aurez pas besoin de dessiner une mise en page prête à l'emploi complètement à partir de zéro, la conception adaptative ne nécessitera pas beaucoup d'efforts.

Comment le menu du site sera affiché, ce qui le suivra, etc. Parfois, il n'est pas assez facile de faire la mise en œuvre de certains blocs, ce sera dommage si votre travail est gaspillé. Permettez-moi de vous rappeler une fois de plus, contactez ceux qui connaissent et comprennent leur travail.

Exigences de mise en page PSD

Avant de commander une mise en page auprès d'un designer, déterminez d'abord ce que vous voulez y voir. Afin de ne pas corriger le travail déjà effectué à l'avenir, décidez vous-même quoi et où sera situé. Où aurez-vous le menu du blog, où se trouvera la recherche du site (en avez-vous besoin dans votre version). Comme vous pouvez le voir chez les autres, beaucoup sacrifient leur barre latérale. En conséquence, un bloc avec un menu, une recherche et une liste de vos enregistrements s'ouvre sur le téléphone. Sur le ce moment c'est l'option la plus utilisée.

Bien sûr, vous ne comprenez rien aux retraits, aux bordures... quoi et comment devraient être selon les normes de la mise en page (vous n'en avez pas besoin), mais assurez-vous de faire attention à certaines choses. Cela vous aidera à vous repérer avant de rédiger le mandat du concepteur.

1. La mise en page doit être au format DSP(par lui-même).
2. Chaque élément de la conception doit se trouver sur un calque séparé.
3. Ne téléchargez pas trop de photos.
4. N'utilisez pas trop de polices.
5. Utilisez des polices standard.
6. Tout n'est que l'essentiel.
7. Rien de plus.
8. Créez votre propre menu déroulant.

Résolutions d'écran les plus courantes

Comme je l'ai décrit précédemment, il n'est pas nécessaire de personnaliser complètement le site pour toutes les résolutions d'écran. Il suffit de choisir les plus fréquents qui sont demandés. Bien sûr, tout dépend de vos envies... faites ce que vous voulez). Je vais essayer de donner quelques exemples qui indiquent les options d'affichage les plus courantes (Largeur minimale et largeur maximale). En fait, il faut prendre en compte non seulement les options indiquées, il y en a un peu plus.

• Smartphones portrait et paysage (minimum 320 px - maximum 480 px) ;
• Tablettes portrait et paysage (minimum 768 px - maximum 1024 px) ;
• Ordinateurs et portables (minimum 768 px - maximum 1024 px);
• Ordinateurs et portables (minimum 1824 px) ;

Après tout cela, la sortie sera une mise en page adaptative normale du site. Les pages auront fière allure sur les plus petits écrans. Toutes les pages seront évolutives et multi-navigateurs, elles n'auront pas l'air tordues sur les tablettes et les téléphones.

Grâce à l'insertion de certaines parties du code, la mise en page s'affichera normalement sur tous les navigateurs, y compris le toujours problématique IE. Et peu importe le moteur que vous avez, joomla ou wordpress. Au fait, c'est un plaisir pour moi personnellement de faire une mise en page de site Web adaptative sur le moteur WordPress.

Salutations, visiteurs occasionnels et lecteurs réguliers du site du blog !

Pendant l'existence de ce site, j'ai changé plusieurs fois de template et j'ai même créé le mien à partir de zéro.
L'une des principales tâches lors du choix d'un nouveau modèle est la mise en page adaptative du site pour toutes les résolutions d'écran.

Bref aperçu de l'article :

Dans un article précédent, j'ai déjà expliqué pourquoi il est nécessaire. Mais comment parvenir à cette adaptabilité même ?

Pour cela il y a différentes façons. Certains utilisent javascript, d'autres utilisent autre chose. Mais je pense que le plus simple et Le droit chemin est réactif avec CSS.

Comment faire une mise en page de site Web responsive

Premièrement, si vous avez entrepris de créer un site Web adaptatif, entre les balises collez le code suivant :

Quel imbécile j'ai été de ne pas l'avoir fait tout de suite lorsque j'ai essayé de faire une mise en page adaptative du site !!!
Le problème des navigateurs mobiles est leur mise à l'échelle de la mise en page du site, même adaptative.

Imaginez, je dessine un dessin, puis j'écris tous les styles et demandes nécessaires, je vérifie l'adaptabilité du site à différentes résolutions. Tout semble être bon ! Mais quand j'ouvre mon blog sur mon smartphone, je constate que le site s'est tout simplement rétréci. Il ne s'est pas adapté à l'appareil mobile, mais a simplement réduit la taille de la police, des images, etc.

Comment? J'ai commencé à revérifier tous les styles, si j'ai écrit les classes correctement, en conséquence, je suis arrivé au point que j'ai vérifié la largeur de la fenêtre du navigateur en px via javascript. J'étais choqué. Lorsque je l'ai vérifié sur un ordinateur portable, j'ai obtenu un résultat de 1024px, et j'ai obtenu à peu près le même résultat lorsque j'ai ouvert le site sur un smartphone !

Mais ce n'est pas possible !

Il s'avère que, si vous ne prescrivez pas le code que j'ai indiqué ci-dessus, navigateur mobile ne comprend pas que le site est responsive et essaie simplement de réduire la page du site pour qu'elle tienne dans le petit écran d'un téléphone portable.

A cause de ma bêtise et de mon incompétence, j'ai perdu beaucoup de temps. Mais maintenant je me souviens pour toujours))).

Requêtes média CSS réactives

Pour le rendre réactif avec CSS, vous devez utiliser des requêtes multimédias.

Comment est-ce? Oui, très simple. Dans le fichier CSS, vous devez écrire des requêtes telles que :

Écran @media et (min-width : 1440px) et (max-width : 1599px)( )

Ce code signifie que les styles entre "( ) " fonctionneront pour les écrans d'une largeur minimale de 1440px et maximale de 1599px.

Autrement dit, les styles d'éléments de site qui doivent être adaptés en fonction de la résolution de l'écran doivent être écrits séparément pour chaque largeur d'écran possible.

Les résolutions d'écran les plus importantes pour une mise en page réactive

• 320px- Appareils mobiles (orientation portrait);
• 480px- Appareils mobiles (orientation paysage);
• 600px- Petits comprimés;
• 768px- Tablettes (orientation portrait);
• 1024px- Tablettes (paysage) / Netbooks ;
• 1280px ou plus-PC.

Ce sont ces autorisations sur lesquelles vous devez vous concentrer et auxquelles vous devez accorder une attention particulière dans la mise en page adaptative. Ce sont les types de résolutions d'écran les plus courants.

conception réactive bootstrap

Il est très pratique d'utiliser bootstrap pour créer une mise en page adaptative. La commodité est que tous les styles d'adaptation de blocs, boutons, tableaux, etc. déjà enregistré dans bootstpap. Il vous suffit de déterminer quelle classe attribuer à quel élément.

Pour commencer, téléchargez la dernière version de bootstrap et connectez-la à votre site. Veuillez noter que la connexion des styles et des scripts à wordpress a ses propres caractéristiques.

La disposition sur bootstrap diffère en ce que la largeur du bloc ou de l'écran est divisée en 12 parties égales. Et en attribuant une certaine classe à un bloc, vous pouvez définir la largeur du bloc au nombre de pièces souhaité.

Par exemple, cette conception autorisera un bloc large pour le contenu d'une largeur de 8 parties et un bloc étroit pour une barre latérale d'une largeur de 4 parties de l'écran :

La largeur des blocs sera calculée automatiquement en fonction de la largeur de l'écran. Et lorsqu'ils sont visualisés sur un appareil mobile, ces blocs se déplaceront les uns sous les autres.

Vous pouvez également ajuster l'indentation du bloc à partir du bord, encore une fois, du nombre de pièces souhaité. Par exemple, cette construction :

Cela créera un bloc de 10 parties de large, en retrait à partir de la gauche d'une partie de l'écran.

Si vous le comprenez, alors travailler avec bootstrap rend le travail très rapide. De plus, ces styles fonctionnent définitivement correctement et il n'y aura rien de tordu sur le site.

À l'avenir, je prévois de publier des tutoriels sur le travail avec bootsrap. Par conséquent, je vous conseille de ne pas manquer ce moment.

Vérification de la réactivité du site Web

Mais la question se pose : comment vérifier l'adaptabilité du site ? Ici, vous avez écrit des requêtes multimédias en CSS, connecté bootstrap et utilisé les classes nécessaires. Et comment vérifier que le site s'adapte correctement à toutes les résolutions d'écran.

Très précis et important service gratuit, qui mérite le respect et la gratitude des webmasters et des maquettistes qui s'occupent de la mise en page adaptative des sites.

Eh bien, comment aimez-vous l'article? Tout est clair? Sinon, écrivez dans les commentaires, nous le découvrirons ensemble.

Oui, pour créer un design de site Web réactif, vous devez travailler dur. Mais ces travaux seront récompensés par une attitude favorable envers votre site des moteurs de recherche, et surtout, des visiteurs de votre site.

Il existe deux idées fausses principales sur ce qu'est un site Web réactif. Certains pensent qu'il ne s'agit que d'un affichage réduit du site, dans lequel les éléments sont compressés. D'autres insistent pour assimiler le responsive design à une version mobile du site. Dans cet article, nous allons mettre les points sur les i et vous dire comment c'est vraiment.

Qu'est-ce que la mise en page adaptative ?

Responsive est une telle mise en page, dans laquelle le site s'affiche correctement sur divers appareils du fait que les éléments s'adaptent dynamiquement à diverses autorisations filtrer.

En termes simples, la réactivité est un empilement dynamique de blocs, pas une version plus petite du site.

Peu importe à partir de quel appareil l'utilisateur accède au site: à partir d'un ordinateur, d'une tablette ou d'un téléphone - il sera tout aussi pratique de l'utiliser et les fonctionnalités nécessaires seront intégralement préservées.

Pourquoi avez-vous besoin d'une mise en page adaptative

Aujourd'hui, il n'est plus nécessaire de rechercher des études et des statistiques pour prouver la fréquence à laquelle les gens accèdent à Internet à partir de tablettes et téléphones portables. Cette réalité nous entoure partout: dans les transports en commun, dans les cafés, dans les files d'attente - les gens passent volontiers leur temps à surfer sur Internet, et vous savez vous-même à quel point c'est pratique. Pour choisir et commander une pizza, personne ne rentrera d'abord chez lui pour accéder à l'ordinateur, mais ira rapidement sur le site depuis le téléphone, faisant d'autres choses en cours de route. Lorsque l'idée d'un achat surgit, le plus simple est de se rendre immédiatement en ligne, de comparer les offres des magasins concurrents et, sans tarder, de passer une commande de marchandises. Et les exemples de ce genre sont innombrables !

La réactivité est l'une des conditions importantes et indispensables pour un site web moderne.
Si le site s'affiche correctement uniquement à partir d'un ordinateur, il est difficile de naviguer lors de la visualisation à partir d'une tablette ou d'un téléphone, les blocs ne s'adaptent pas, il est difficile d'appuyer sur le bon lien avec un doigt - par conséquent, l'utilisateur est agacé, ne peut pas effectuer l'action ciblée, perd du temps à essayer de comprendre l'affichage tordu et quitte la ressource. Et puis ça ne lui revient pas. Et va aux concurrents.

C'est pourquoi la décision de commander un site Web adaptatif n'est pas un caprice, mais une condition qui affecte directement le niveau des ventes.

Comment fonctionne un site Web réactif

Un site qui ne répond pas est facile à reconnaître - lorsqu'il est visualisé depuis une tablette ou un téléphone, vous ne verrez qu'une partie de la zone, vous devrez déplacer la zone visible à gauche et à droite, zoomer pour rendre la police lisible et dézoomer pour trouver la section ou le formulaire de candidature souhaité.

Le site responsive s'adapte à l'appareil, en fonction de la largeur de son écran. Tous les éléments de la page s'adaptent : leurs tailles changent, certains contenus auxiliaires et éléments décoratifs apparaissent/disparaissent. Dans le même temps, les blocs sont réorganisés de manière pratique pour l'utilisateur - l'accent est mis sur les informations importantes et les données secondaires sont supprimées ou réduites.

En règle générale, plus la largeur de l'écran est petite, plus la présentation des informations est concentrée et moins il y a de blocs impliqués. En même temps, l'utilisateur n'a pas besoin de changer d'échelle : tout est simple et compréhensible même sur un petit écran.

Une autre caractéristique des sites responsive est l'agrandissement des éléments significatifs afin que l'utilisateur puisse facilement poser son doigt sur un bouton à l'écran ou suivre un lien. La conversion du site en dépend directement, il est donc important de rendre la conception adaptative conviviale.

Faits importants à savoir sur les sites Web réactifs

1. Le site Web réactif et la version mobile ne sont pas les mêmes.

Quand on parle de site responsive, on veut dire qu'il s'agit d'un site pour différents appareils. C'est sa principale différence avec la version mobile du site. La version mobile est un site à part entière, qui a ses propres fonctionnalités, sa propre mise en page et souvent son propre contenu. La version mobile est développée en tenant compte de la commodité des utilisateurs accédant au site à partir d'appareils mobiles : ce qui est très important pour eux à partir de la version de bureau, et ce qui est redondant et peut être facilement supprimé.

2. La fonctionnalité est la même sur tous les appareils.

Tout est clair ici : puisque le site est un, ses capacités sont les mêmes, quel que soit l'appareil à partir duquel les utilisateurs accèdent au site.

3. La conception réactive a des limites.

Ils sont principalement liés à la préservation de la structure de contenu d'origine lorsque la taille de l'écran change. Souvent dans la version adaptative on refuse le slider et les gros image de fond, qui sont dans la version de bureau et n'utilisent pas Flash. Nous recommandons généralement la meilleure option.

Mais il arrive aussi que la conception soit convenue dans la version sur laquelle le client insiste, et la mise en page prête à l'emploi s'avère peu pratique. Ensuite, toutes les modifications sont apportées pour frais supplémentaires, car nous travaillons strictement selon les TOR.

4. L'adaptabilité peut être totale ou partielle..

Adaptabilité totale - des appareils mobiles aux ordinateurs de bureau, partielle - par exemple, d'une tablette ou d'un ordinateur portable à un ordinateur de bureau. La conception réactive se concentre généralement sur appareils spécifiquesà partir duquel le client génère le plus de trafic.

5. Tous les sites Web ne bénéficient pas d'une conception entièrement réactive.

Les sites dotés de fonctionnalités et/ou de contenus complexes qui nécessitent une quantité suffisante d'espace d'écran pour la perception sont plus susceptibles d'être préjudiciables à une réactivité totale. Il vaut mieux sélectionner une liste d'appareils sur lesquels la fonctionnalité sera complète, et faire une version avec une adaptabilité partielle pour eux, et pour le reste, faire une version mobile avec des fonctionnalités réduites et la possibilité de passer à une version plein écran .

6. Pour afficher l'identité dans différents navigateurs répond à la compatibilité entre navigateurs.

Assurez-vous de spécifier cet élément dans les termes de référence s'il est important pour vous que le site s'affiche de la même manière dans différents navigateurs. Sinon, dans les anciennes versions des navigateurs, le site peut s'afficher avec des erreurs et produire des polices illisibles. Et c'est un chemin direct vers la perte du public cible.

Ce que vous devez savoir si vous souhaitez commander une mise en page adaptative

La société "Technologies of Success" fournit des services pour la création d'une mise en page adaptative du site. Il est préférable de prévoir une conception adaptative au stade de l'élaboration du site principal et de l'écrire dans les TDR. Mais si vous venez nous voir avec un design prêt à l'emploi au format .psd, nous pouvons également vous aider. Nous n'assumons pas la mise en page des mises en page réalisées dans CorelDraw - dans ce cas, nous proposons à nos clients de préparer d'abord la conception et ensuite seulement la mise en page.

Sans connaître les fonctionnalités du site et les spécifications techniques, il est impossible de s'orienter en termes de mise en page.

En règle générale, la mise en page d'un site Web d'entreprise adaptatif prend en moyenne 15 jours, le délai pour la mise en page d'une boutique en ligne adaptative dépend directement de la complexité du site.

Nous ne passons jamais la mise en page à l'étape suivante - la programmation - tant que le client n'a pas vérifié l'adaptabilité du site et le bon fonctionnement de tous ses éléments selon les TDR.

Des questions subsistaient : ou une version mobile ? Demander numéro gratuit 8 800 775-17-11 ou laissez votre numéro et nous vous rappellerons et vous dirons tout.