Comment tester gratuitement le responsive design. Mise en page réactive à l'aide d'un script JavaScript Test du design réactif
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 iPhones, une ou deux autres tablettes, des ordinateurs portables et des ordinateurs de bureau. Si vous n’avez pas ce luxe, vous devez utiliser ce que vous avez sous la main.
À la maison, j'ai deux ordinateurs portables différents, deux différents Appareils Android: Kindle et Nexus 7. J'utilise ces appareils pour tester mes développements en freelance, mais force est de constater qu'il ne s'agit pas d'une sélection exhaustive. Pas du tout Appareils iOS, et même si je suis considéré comme l'un des premiers à 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 par é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'« approfondir » 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 propriété 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 testé.
Treize fenêtres de visualisation différentes sont proposées ici, à partir d'un grand moniteur ordinateur de bureau au soi-disant «Crappy Android» (pour être honnête, ils ont aussi une option appelée « Android est meilleur"(Mieux 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 y alliez : 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.
Fonctionnalité intéressante ce site - pour plusieurs appareils, il existe une option « True View », qui affiche 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.
Ayant ainsi testé un site que j'ai créé avec l'existant version mobile, 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, les développeurs, avons vraiment outils utiles, Tout le meilleur.
Une boutique en ligne doit être optimisée pour les appareils mobiles. Ce problème est résolu grâce à une conception adaptative, qui permet au site de s'afficher correctement sur n'importe quelle plateforme. Cependant, la mise en œuvre d’un design réactif s’accompagne d’un ensemble standard d’embûches. Énumérons les 8 problèmes les plus courants typiques des sites d'achats en ligne.
Négliger l’analyse du comportement des visiteursLa ruée vers le segment mobile oblige les détaillants à concevoir un site Web sans procéder à des analyses sérieuses du comportement des visiteurs. L'analyse du comportement des visiteurs est l'étape de préparation la plus importante, qui vous permet d'identifier les appareils mobiles les plus populaires et d'optimiser en premier le site pour eux. L'analyse aide à déterminer l'action de l'utilisateur la plus « populaire », par exemple l'agrandissement de l'image d'un produit ; montre le taux de conversion des visiteurs mobiles, etc. Ces données fourniront un aperçu des préférences de comportement des utilisateurs et aideront à répondre aux attentes de l'audience mobile. Analyse trafic mobile il est nécessaire de procéder à une mise en œuvre systématique et cohérente des résultats, en finalisant et en optimisant le site pour répondre aux besoins des clients.
Concevoir un magasin de bureauEn règle générale, la version de bureau d'une boutique en ligne est repensée pour les écrans mobiles, bien qu'il soit plus logique de prendre le petit écran d'un appareil mobile, puis de l'adapter au bureau. Souvent, les détaillants ne réalisent pas les problèmes techniques liés à l’adaptation d’un site Web conçu pour un ordinateur de bureau à la taille d’un smartphone. 
Conception de départ pour écrans mobiles, vous vous concentrez sur l’expérience utilisateur mobile. En conséquence, il vous sera plus facile de concevoir pour les deux canaux : ordinateur et mobile.
Tester la présentation mobile d'une boutique en ligne est une étape obligatoire du lancement, mais de nombreux propriétaires la négligent souvent et la lancent sans tester. De ce fait, sur la version live du site pour appareils mobiles, des erreurs peuvent apparaître même lors du processus d'achat et de passation de commande.
Les défauts de la conception adaptative sont facilement identifiés par des tests préliminaires d'une boutique en ligne, mais de nombreux vendeurs ne disposent pas des ressources nécessaires pour cela. Pour réduire le risque de perte d'argent, testez les itinéraires des utilisateurs clés sur le site dans les principaux navigateurs - Chrome, IE, Firefox, Safari et systèmes d'exploitation– Windows, Mac OS, Android, IOS sur les versions populaires appareils mobiles. Testez chaque fois que vous apportez des modifications ; des services tels que BrowserStack ou Viewport Resizer peuvent aider à réduire la durée des tests à plusieurs heures.
Petits éléments pour écrans mobilesDans le but d'occuper plus d'espace sur l'écran d'un smartphone, les propriétaires de boutiques en ligne lésinent sur la taille de leurs boutons « d'appel à l'action ». Ne forcez pas les utilisateurs à zoomer pour cliquer sur le bouton Acheter et ne placez pas les petits éléments trop rapprochés, sinon vos utilisateurs choisiront d'aller sur un site plus pratique. Concevez des interfaces avec de grands éléments de navigation et des tailles de boutons d'appel à l'action.
Vitesse de chargement des pages lenteLe public mobile aime les sites rapides et les temps de chargement minimes. Évaluez les composants de votre pages mobiles– images, boutons, textes, scripts – ils doivent être optimisés pour les appareils mobiles. Google prend en compte le temps de chargement des pages dans ses SERP, classe les sites mobiles et leur donne la préférence en tête, afin que les sites « légers » obtiennent un sérieux avantage supplémentaire.
Séparez le contenu en différents onglets, par exemple, une page de produit peut contenir uniquement une image de base, une description, un prix et un bouton « Acheter ». Les avis clients et les vidéos peuvent être placés sur un onglet séparé et réduire le « poids » de la partie principale de la page. En plus du contenu, optimisez d'autres éléments qui affectent la vitesse de chargement - fichiers CSS, images et scripts, envoyez uniquement les données nécessaires. Des outils qui réduisent la taille des fichiers de ressources et leur temps de chargement vous y aideront : Uglify ou JSCompress.
Couper le contenu pour les utilisateurs mobilesSouvent, les développeurs masquent une partie du contenu afin que le chargement sur les appareils mobiles soit plus rapide. Cependant, souvent, la taille de la page n'est pas réellement réduite et le contenu n'est tout simplement pas affiché à l'utilisateur. Votre boutique doit être capable de générer dynamiquement une page, réduisant ainsi le poids de la page et les temps de chargement pour les visiteurs mobiles. De plus, offrir moins de contenu aux utilisateurs mobiles est une mauvaise chose et a un impact négatif sur l’expérience du consommateur. Généralement, pendant le processus d'achat, ils utilisent différents appareils, environ 90 % des acheteurs en ligne le font. Les limiter aux méthodes de conception réactive est une grave erreur.
Prend en charge les images dans une seule résolutionUn bon site Web avec un design réactif modifie automatiquement la résolution des images en fonction du type d'appareil ; les images lourdes augmentent le temps de chargement. Il existe plusieurs façons d'ajuster automatiquement la taille des images appareil spécifique. Les images « flexibles » (images fluides) sont une méthode basée sur CSS qui permet de compresser et d'étirer une image en fonction de la largeur de l'élément la contenant, ou un élément HTML5 qui permet de charger une image de la taille requise pour chaque type d'appareil.
E-mails « non réactifs »Il arrive que tout va bien avec le site lui-même : le design réactif fonctionne bien sur les ordinateurs de bureau et les appareils mobiles. Mais les e-mails ne sont pas réactifs et les utilisateurs mobiles doivent avoir du mal à vérifier les détails de la commande ou à parcourir une liste interminable de produits recommandés pour accéder à leurs achats finalisés. 
Les e-mails sont un point de contact client clé, alors intégrez une conception d'e-mail réactive dans votre stratégie mobile. Concevez et testez vos lettres et newsletters ; les modèles de lettres doivent être « légers » et contenir uniquement des informations importantes.
Avec le développement des technologies Web, les exigences en matière de développement Web augmentent également. Les développeurs Web, les concepteurs de mise en page ou, comme on les appelle aujourd'hui, les développeurs front-end, ressentent le plus de pression.
Dans cet article, nous parlerons un peu de mise en page adaptative, puisque cette « astuce » coûte désormais très cher. Lorsqu'il s'agit de mise en page adaptative, les maquettistes de tous niveaux regardent les clients ou les chefs de projet, c'est un euphémisme, avec colère, car ils comprennent à quel point c'est difficile.
De nombreuses personnes commencent à confondre mise en page adaptative et mise en page flexible ; c'est une erreur très courante des concepteurs de mise en page débutants. Quelle est la différence, demandez-vous?
Commençons par, pour que ce soit clair pour vous et pour ainsi dire, mettons tous les points et regardons quels types de mise en page il existe.
Il existe 4 types de mise en page :
Examinons tous les types plus en détail.
1. Disposition fixe
Les blocs ne changent pas leur largeur. Sur les moniteurs basse résolution, une barre de défilement horizontale apparaît.
#temnyi, #svetlyi ( largeur : 440px ; )
2. Disposition en caoutchouc
Les blocs changent de largeur en fonction de la taille de la fenêtre du navigateur. Il peut prendre des valeurs maximales et minimales (propriété max-width). Mais vous ne pouvez pas passer de 50 % à 100 % à mesure que l’écran devient plus petit.
#temnyi, #svetlyi ( largeur : 50% ; )
3. Disposition adaptative
Implémenté à l'aide de @media ou de scripts. Personnalisé pour des appareils connus spécifiques (320, 768, 1024, etc.). Tout changement se produit par à-coups, après avoir atteint l'un des niveaux spécifiés. Convient tout à fait à
#temnyi, #svetlyi ( largeur : 430px; ) @media (largeur maximale : 1220px) ( #temnyi, #svetlyi ( largeur : 380px; ) ) @media (largeur maximale : 1120px) ( #temnyi, #svetlyi (largeur : 325px; ) ) @media (largeur maximale : 680px) ( #temnyi, #svetlyi (largeur : 200px; ) )
4. Mise en page réactive
Il s’agit d’une combinaison de mise en page fluide et adaptative. Le plus difficile à mettre en œuvre. Mais le résultat est le plus acceptable. On peut dire sans se tromper que le site s'adaptera à n'importe quel appareil.
#temnyi, #svetlyi ( largeur : 50 % ; ) @media (largeur maximale : 1006 px) ( #temnyi, #svetlyi ( largeur : 100 % ; ) )
Nous avons donc parlé de 4 types de mise en page de sites Web. Le moment est maintenant venu pour notre script de mise en page adaptatif miracle. J'espère que je n'ai pas besoin d'expliquer quoi que ce soit, le script est assez simple, nous disons simplement que lorsque vous modifiez un bloc, il sera mélangé quelque part et c'est tout. Bien sûr, cela est également possible grâce aux styles CSS, mais vous devez connaître toutes les méthodes ; parfois, à certains endroits, certaines ne fonctionneront pas et d'autres seront parfaites.
Script de mise en page adaptatif :
/* Créons une variable dans laquelle vous pouvez placer les classes monogest, pour une utilisation pratique dans le code. Autrement dit, ici, il les détecte une fois et c'est tout, et pas avant chaque échantillon ! c'est une fonctionnalité utile */ var my = ( window: $(window) ); /*En fait, la fonction elle-même*/ $(window).resize(function () ( /*Une variable qui détermine la largeur de la fenêtre et la met dans la variable width*/ var width = my.window.width( ); /*condition de transformation de fenêtre, c'est-à-dire une condition qui est exécutée lorsque la largeur de la fenêtre atteint une certaine taille */ if(my.window.width()< 640) { $(".right-content").css("float:none; clear:both"); $(".header-menu").css("float","left"); if(width < 480) { /*какое нибудь условие*/ if(width < 320) { /*какое нибудь условие*/ } } } /*Возвращает все стили на свои места т.е при расширении он примет первоначальный вид*/ else { $(".right-content").css("float:left; clear:none"); $(".header-menu").css("float:none") } });
C'est tout. Si vous avez des questions, écrivez dans les commentaires, allez sur
