Les technologies s'améliorent constamment, les smartphones et les tablettes deviennent plus cool et les utilisateurs deviennent plus mobiles. À l'heure actuelle, le nombre d'audiences depuis les appareils mobiles a dépassé celui des utilisateurs depuis les ordinateurs personnels. Ce n’est pas pour rien que cela a conduit à toute une tendance des sites pour appareils mobiles.
Par exemple, si vous ouvrez un site Web classique (sans mise en page adaptative ni version mobile) via un smartphone, il s'ouvrira très probablement sous une forme peu pratique pour l'utilisateur. Ceux. le contenu sera affiché dans son intégralité, mais il y aura un défilement horizontal, ce qui est mauvais.
1. Mise en page adaptative du site Web – qu'est-ce que c'est ?La mise en page adaptative du site Web est une mise en page HTML dans laquelle, en fonction de la taille de la fenêtre du navigateur, le site est « transformé » en un formulaire convivial.
Différences entre la version mobile du site et la version adaptativeNe confondez pas la version mobile du site et la mise en page adaptative du site. La version mobile est située sur un sous-domaine distinct et duplique complètement le contenu du site. Un site réactif contient les mêmes URL de page, mais charge différents styles CSS selon l'appareil, ce qui vous permet d'afficher le site de manière plus pratique.
2. Optimisation du référencement et mise en page adaptativeLes moteurs de recherche proposent actuellement deux résultats différents (ils sont très similaires). L’un pour les utilisateurs de PC, l’autre pour les mobiles. Si le site n’est pas optimisé pour les appareils mobiles, cela est considéré comme un facteur négatif et la position du site sera abaissée de 2 à 3 (parfois plus). Dans le même temps, il serait logique que les positions de la version mobile uniquement soient abaissées, mais la pratique montre également que les positions de la version principale du site se détériorent également.
Cette injustice peut s’expliquer par le fait que les moteurs de recherche sont plus susceptibles de regrouper les facteurs comportementaux des ordinateurs de bureau et des appareils mobiles. Du coup, bien entendu, si le site n'est pas adapté, alors son PF sera moins bon et cela ralentit la version principale du site.
3. Comment vérifier la réactivité d'un site WebVous pouvez vérifier la réactivité d'un site uniquement en l'ouvrant dans différents navigateurs et en modifiant la largeur de l'écran. Mais faire cela à partir de nombreux appareils différents avec des résolutions différentes prend extrêmement de temps. Il est également peu probable que vous possédiez des dizaines de smartphones et de tablettes.
Il existe une solution beaucoup plus rapide et plus simple sur Internet. Par exemple, vous pouvez installer un plugin spécial Window Resizer dans le navigateur Google Chrome et l'utiliser pour ouvrir le site dans les résolutions les plus populaires.
Vous pouvez simplement redimensionner manuellement la fenêtre du navigateur en largeur et voir le résultat. Firefox ou Google Chrome ont une conception de navigateur réactive en appuyant sur Ctrl+Shift+M.
La condition la plus importante est de s’assurer qu’il n’y a pas de défilement horizontal ni de plugins flash sur la page.
Google a été le premier à introduire le facteur d'adaptabilité dans son algorithme de recherche. Il dispose d'un service gratuit spécial qui analyse n'importe quel site Web pour l'optimiser pour les appareils mobiles. Yandex a introduit cette fonctionnalité un peu plus tard.
Après vérification, deux options s'offrent à vous. Soit le site est optimisé, soit il ne l'est pas :
Par exemple, le test de réactivité de Google :
Vérification de l'adaptabilité dans Yandex :
Seule une personne qui comprend CSS et HTML peut créer une mise en page de site Web adaptative. Nous allons examiner les points principaux, puisqu’il n’existe pas de recette unique.
Pour créer une mise en page adaptative, vous devez créer des feuilles de style CSS dans la troisième version. Il y a une différence entre 2 et 3, mais dans ce domaine le manque de valeurs absolues dans les styles est très important. En bref, toutes les valeurs de taille de bloc sont la longueur, la largeur, les dimensions - tout cela est spécifié en pourcentage.
Syntaxe CSS @Media
@media device_type et|not|only (media_features) ( ... Description des styles... )Par exemple, écrivons les conditions dans lesquelles les styles fonctionneront pour les appareils dont la largeur d'écran est inférieure à 800 pixels.
@media screen et (max-width : 800px) ( ... styles ... ) RemarqueLes styles doivent être écrits séquentiellement de la haute résolution au petit, c'est-à-dire d'abord les styles généraux, puis pour les tailles « rognées », par exemple :
@media uniquement écran et (max-width : 1280px ) ( ... ) @media uniquement écran et (max-width : 1024px ) ( ... ) @media uniquement écran et (max-width : 800px ) ( ... )Dans les balises d'en-tête vous devez écrire la ligne suivante :
La balise méta viewport indique que la largeur de l'écran est la largeur du navigateur et que chaque pixel correspond à un pixel de l'appareil. Si cela n’est pas précisé, l’adaptabilité ne sera pas mise en œuvre.
5. Exemples pratiques de mise en page adaptative de sites Web 5.1. Adapter des mots très longsPar exemple, il y aura un mot très long sur la page, et si la propriété de débordement n'est pas définie, cela peut entraîner l'apparition d'un défilement horizontal. Pour éviter cela, vous devez ajouter les propriétés CSS suivantes à votre contenu :
.hphns ( overflow-wrap : break-word ; word-wrap : break-word ; -webkit-hyphens : auto ; -ms-hyphens : auto ; -moz-hyphens : auto ; tirets : auto ; ) 5.2. Menu de site Web adaptatifLa barre latérale du site occupe généralement une largeur d'environ 200 à 300 pixels, ce qui occupe presque toute la largeur du navigateur sur les appareils mobiles. Ainsi, les menus déroulants sont le plus souvent créés à l'aide d'un bouton standard en forme de trois traits (c'est déjà devenu un classique).
Vous pouvez l'implémenter sur le site, mais vous devrez bricoler un peu les styles. Regardons tout étape par étape.
La situation où nous avons un menu et le contenu principal (je n'ai pas dessiné l'en-tête et le pied de page) :
Le code HTML d'une telle structure pourrait ressembler à ceci :
body ( marge gauche : 10% ; largeur : 70% ; bordure : 1px solide #eee ; ) #menu ( largeur : 20% ; hauteur : auto ; float : gauche ; ) #content ( largeur : 70% ; hauteur : auto ; float : gauche ; bordure-gauche : 1px solide #000 ; Titre de la pageContenu des pages
Contenu des pages
Contenu des pages
Contenu des pages
Convertit sur la page en
L'inconvénient de cette méthode est qu'à petites résolutions, le menu occupera presque toute la largeur de la zone, ce qui signifie qu'un défilement horizontal apparaîtra, ou pire encore, que tous les blocs peuvent flotter.
Modifions notre exemple comme suit. Si la résolution de l'écran est inférieure à 800 pixels, le menu disparaîtra et un bouton spécial d'ouverture du menu apparaîtra.
Voici le code html de la mise en page adaptative avec commentaires :
body ( marge gauche : 10% ; largeur : 70% ; bordure : 1px solide #eee ; ) #menu ( largeur : 20% ; hauteur : auto ; float : gauche ; affichage : bloc ; ) #content ( largeur : 70% ; hauteur : auto ; float : left ; border-left : 1px solid #000 ; padding : 1% ) #mob_menu ( display : none ; ) @media uniquement écran et (max-width : 800px ) ( #menu ( display : none ; ) #mob_menu ( display : block ; ) #content ( clear : les deux ; ) ) function showmobmenu() ( if ( == "block ") ( document.getElementById("menu").style.display = "none " ) else ( document.getElementById("menu").style.display = "block " ) ) Développer le menu ↓Menu Titre de la pageContenu des pages
Contenu des pages
Contenu des pages
Contenu des pages
Réduisons la largeur de l'écran à 700 pixels (par exemple). Voilà à quoi ça ressemble sur la page
Bonjour, chers lecteurs du blog. Il n’est pas surprenant que la conception adaptative devienne de plus en plus populaire sur Internet russe. Et bien sûr, les maquettistes doivent l’étudier. Puisque le design réactif sera bientôt présent sur presque tous les sites Web, car de plus en plus de personnes utilisent des appareils mobiles.
Et je voudrais dire que les sites qui l'utilisent sont beaucoup plus pratiques à lire sur de tels appareils que sans.
Aujourd'hui, je souhaite vous présenter 5 services très utiles et sympas avec lesquels vous pouvez vérifier l'adaptabilité de votre site Web.
Et alors, allons-y.
5 services où vous pouvez vérifier l'adaptabilité de votre site Web. www.responsivedesigntest.netUn bon service pour vérifier les sites. Il existe de nombreuses résolutions d’écran pour les tablettes et les téléphones.
mattkersley.comUn service simple pour vérifier un site Web de Matt Kersley. Toutes les résolutions populaires des appareils mobiles sont également disponibles.
Un service très cool qui vérifiera n’importe quel site. J'ai vraiment aimé le design, ainsi que la fonctionnalité.
Service très beau et fonctionnel. Il est même possible de vérifier à quoi ressemblera le site à la télévision :-)
De l'auteur : « Arrêtez de redimensionner ce navigateur, il sera bientôt effacé ! » À quelle fréquence entendez-vous cela ? Bon, d'accord, peut-être pas si souvent, mais si vous développez des sites Web réactifs, vous savez de quoi je parle : chaque fois que vous modifiez le DOM ou le CSS, vous faites glisser le bord du navigateur d'avant en arrière pour tester les modifications. et à la recherche d'inexactitudes.
En général, la plupart de ces efforts visent à imiter les tailles d’écran de différents appareils.
Si vous effectuez du développement en entreprise, vous devez probablement tester de nombreux appareils fournis par l'entreprise. Là où je travaille, nous avons des iPad, des iPhone, une ou deux autres tablettes, des ordinateurs portables et des ordinateurs de bureau. Si vous n’avez pas un tel luxe, vous devez utiliser ce que vous avez sous la main.
À la maison, j'ai deux ordinateurs portables différents, deux appareils Android différents : un Kindle et un Nexus 7. J'utilise ces appareils pour tester mes développements en freelance, mais il est clair qu'il ne s'agit pas d'une sélection exhaustive. Il n’existe aucun appareil iOS et, même si je suis considéré comme l’un des premiers à l’adopter, je n’ai pas l’intention d’acheter chaque nouveau téléphone/tablette/tablette dès sa mise en vente.
Alors, que doit faire un développeur ? Heureusement, il existe un nombre croissant d’outils basés sur un navigateur qui simulent les tailles d’écran de divers appareils. Bien entendu, différents outils sont dotés de différents ensembles de fonctionnalités et de différents niveaux d’efficacité. Nous en examinerons quelques-uns ici.
À des fins de tests, j'ai utilisé le premier site Web véritablement réactif que j'ai créé, PyjamasOnYourFeet.com. Il est basé sur le modèle Brownie HTML5, fourni très généreusement et gratuitement à la communauté des développeurs sur EGrappler.
Suis-je réactif ?Suis-je réactif ? – un aperçu totalement simple et instantané de votre site en termes de façon dont il apparaîtra sur quatre appareils différents. Tous les quatre sont iOS, et le développeur explique son choix sur le site. Il n'offre aucune commande ni sélection, juste un affichage très simple et élégant. Dimensions de la fenêtre de visualisation :
Bureau - 1600 x 992px, décroissant selon l'échelle (0,3181)
Ordinateur portable - 1280 x 802px, échelle décroissante (0,277)
Tablette - 768 x 1024px, décroissante selon l'échelle (0,219)
Mobile - 320 x 480px, décroissant selon l'échelle (0,219)
Pour citer le développeur : « Ce n'est pas un outil de test, il est très important de le faire sur de vrais appareils. Mais c'est un outil permettant de prendre des captures d'écran rapides (pour moi) et d'offrir une opportunité visuelle d'« explorer » lors des réunions avec les clients ce que vous vouliez dire. »
deviceponsive est similaire au site Am I Responsive ? celui qui affiche votre site de manière simple et nette, mais qui n'a aucun contrôle ni option disponible en ce qui concerne les appareils. Tous sont affichés simultanément sur une longue page. Il a une fonctionnalité intéressante : vous pouvez modifier l'en-tête en modifiant sa couleur d'arrière-plan et en insérant votre propre logo, puis « l'imprimer ». De cette façon, dans un sens, vous pouvez personnaliser votre site lorsque vous montrez des captures d'écran au client. Appareils et tailles d'écran simulés sur ce site :
MacBook-1280x800
iPad (portrait) - 768 x 1024
iPad (paysage) - 1024 x 768
Kindle (portrait) - 600 x 1024
Kindle (paysage) - 1024 x 600
iPhone (orientation portrait) - 320 x 480
iPhone (paysage) - 480 x 320
Galaxie (portrait) - 240 x 320
Galaxie (paysage) - 320 x 240
Comme pour la plupart des outils similaires, des barres de défilement apparaissent sur les petits appareils. Ils n'apparaîtront pas sur un appareil réel, mais pour pouvoir faire défiler la vue test sur un appareil non tactile, vous devez faire quelques concessions.
Tout comme le test adaptatif aux appareils, le test réactif affiche votre site sur plusieurs appareils, mais au lieu de les afficher tous en même temps sur une seule page, vous choisissez l'appareil à afficher à partir d'un simple menu en haut de la page. En parcourant ce site sur un ordinateur portable de taille moyenne, j'ai trouvé que la réduction de la page fonctionnait très bien, vous permettant de voir l'intégralité du site dans la fenêtre de l'appareil que je teste.
Il propose treize fenêtres d'affichage différentes, depuis un grand écran de bureau jusqu'à ce qu'on appelle Crappy Android (pour être honnête, ils ont également une option appelée Nicer Android).
Encore une fois, Firefox trébuche un peu sur ce site. Remarquez sur la capture d'écran - entre l'en-tête vert et la zone de contenu avec un fond blanc - il n'y a qu'une barre bleue où le curseur d'image doit apparaître.
Il est très similaire aux deux précédents, et la seule chose qui distingue responsive.is d'eux est l'animation fluide de l'affichage d'un appareil à l'autre, ainsi qu'une superposition translucide montrant les biens immobiliers du site sortant de la fenêtre d'affichage. .
Les seules options d'appareil disponibles ici sont les options automatiques, qui remplissent la fenêtre de votre navigateur, affichant le site tel que vous le verriez si vous cliquiez dessus : Bureau ; Tablette (orientation paysage); Tablette (orientation portrait); Smartphone (orientation paysage) et Smartphone (orientation portrait), les dimensions en pixels ne sont pas indiquées.
Encore une fois, plusieurs fonctionnalités et options différentes distinguent Screenqueries des autres sites. Il existe 14 téléphones et 12 tablettes avec un élément séparé pour basculer entre les modes portrait et paysage. Ceux-ci sont affichés sur une grille de pixels numérotés, avec les dimensions indiquées en bas à droite de l'écran de test. Les bords de l'écran peuvent être déplacés afin que vous puissiez tester des tailles personnalisées. Faites glisser ou cliquez sur la zone de test et l'arrière-plan deviendra gris, avec une apparence moins encombrée.
Une caractéristique intéressante de ce site est que pour plusieurs appareils, il existe une option « True View », qui montre votre site enveloppé dans le navigateur Chrome attribué à cet appareil. Malheureusement, et j'y suis déjà habitué, Firefox n'arrive pas à afficher le slider d'image du site de test. Ne vous inquiétez pas, je préfère vraiment Firefox en matière de navigateurs, mais heureusement, nous avons des options.
Screenfly augmente vraiment le facteur de convivialité. Il propose neuf appareils plus grands que des tablettes, d'un ordinateur portable de 10 pouces à un ordinateur de bureau de 24 pouces, cinq tablettes, neuf smartphones, trois tailles de téléviseur et une option de taille d'écran personnalisée. Toute option que vous sélectionnez peut être pivotée en orientation portrait ou paysage à l’aide d’une commande distincte dans le menu. Vous pouvez choisir d'autoriser ou non le défilement et générer un lien partageable en un seul clic.
Le site est utile de manière proactive dans la manière dont il présente des informations sur la taille des pixels. Chaque appareil dans le menu est affiché avec un nom et des dimensions en pixels, la taille de votre propre fenêtre de navigateur est affichée près du coin supérieur droit de la fenêtre et les dimensions de l'option sélectionnée sont affichées dans le pied de page sous l'écran avec le URL du site testé. Cette petite fonctionnalité facilite la documentation des captures d'écran et le partage d'informations avec les clients.
Tout ce qui précède en aurait déjà fait un outil idéal, mais les développeurs de Screenfly ont trouvé l'opportunité de le rendre simplement de première classe et ont fourni une propriété de serveur proxy. Citant leur site Web : « Screenfly peut utiliser un serveur proxy pour usurper l'identité d'appareils pendant que vous consultez leur site Web. Le proxy simule la chaîne de l'agent utilisateur des appareils que vous sélectionnez, mais pas le comportement de ces appareils." Tous les autres outils abordés ici traitent exclusivement du CSS. Screenfly est le seul qui permet des tests basés sur la chaîne de l'agent utilisateur.
Après avoir testé de cette manière un site que j'ai créé avec une version mobile existante, je peux dire que les résultats ont été très bons. Tout s'affichait exactement comme je m'y attendais et les fonctionnalités étaient testables. Il faut dire que tester les chaînes de l'agent utilisateur est devenu traditionnel, mais ce site a été créé il y a longtemps, et la propriété proxy s'est avérée être un ajout très utile.
Ainsi, vous pouvez voir qu’il existe de nombreuses ressources disponibles pour tester des sites Web réactifs. Ils diffèrent par leurs propriétés uniques ; les sites que vous utiliserez dépendront de vos préférences et exigences personnelles, et j'essaie de vous encourager à les explorer et à les expérimenter. Plus nous, développeurs, disposons d’outils vraiment utiles, mieux c’est.
Des frameworks, tels que ou, qui facilitent et accélèrent grandement la mise en page.
implique un excellent affichage d’une page Web sur tous les appareils et extensions de moniteur. Probablement, tous les concepteurs de mise en page ne disposent pas d'un ensemble complet d'appareils avec toutes les extensions d'affichage possibles pour tester leur mise en page. Ce n’est pas surprenant, car la technologie n’est pas bon marché de nos jours.
Donc. Acheter des montagnes de téléphones portables et de tablettes n’est pas une option : nous ferons faillite. Ce qu'il faut faire? Pour ces tâches, des services ont été développés pour tester les sites Web adaptatifs. Le principe de leur fonctionnement est très simple. Le plus souvent, il y a un cadre d'une certaine taille à l'endroit où la page s'ouvre. L'effet est à peu près le même que lorsqu'il est visualisé sur un appareil mobile. Je voudrais noter que le service n'affichera pas toujours avec précision l'affichage de la page sur un téléphone ou une tablette. Lors du codage, vous devez tester en utilisant les services, mais après avoir terminé, si possible, tester sur les appareils les plus courants.
Donc. Voici les meilleurs outils pour tester des sites Web réactifs.
Un outil pour tester les sites Web réactifs d'Adobe. Pour l'utiliser, vous devez l'installer sur votre ordinateur.
Le programme vous permet de synchroniser vos appareils via WIFI et de visualiser le site tel qu'il sera affiché sur votre appareil. Appareils actuellement pris en charge avec les systèmes d'exploitation suivants : iOS, Android, Kindle Fire.
Il n'a jamais été aussi important de s'assurer que votre projet est prêt pour chaque type d'utilisateur et d'appareil avant de le lancer. Bien qu'il puisse être physiquement difficile de tester une conception sur chaque appareil, certains outils et applications peuvent vous aider à simuler différents scénarios réactifs.
Avec autant d’outils gratuits et premium disponibles, il n’y a aucune raison de ne pas tester votre design réactif avant de le publier en ligne. Assurez-vous simplement d'utiliser ces informations pour la plupart des ajustements de conception nécessaires ! Aujourd'hui, nous vous proposons un ensemble d'outils pour tester le responsive design.
1. Test d'optimisation mobile de GoogleGoogle Mobile-Friendly Test est l'un de ces outils qui est négligé d'une manière ou d'une autre. Vous avez besoin que la conception de votre site réponde aux normes de Google pour améliorer la visibilité des recherches, et c'est aussi simple que cela.
L'outil est facile à utiliser, entrez simplement une URL et voyez comment vos pages se classent sur les appareils mobiles. La meilleure partie de cet outil est qu'il identifie les endroits où votre site peut être lent ou s'afficher mal sur les appareils mobiles afin que vous puissiez corriger les erreurs.