Gratis resurser för att testa visningen av en webbsida i olika upplösningar. De bästa verktygen för att testa responsiv layout
Fler och fler enheter är tillgängliga för konsumenterna, det är mer sannolikt att människor kommer åt Internet från surfplattor och smartphones. Sökmotorer uppmärksammar webbplatser som är "vänliga" med olika skärmupplösningar, och inte bara med skrivbordet. En responsiv design är en design som visas korrekt på vilken enhet som helst.
I oktober 2016 meddelade Google ändringar i sökresultaten. Tidigare har responsiva webbplatser markerats med en separat ikon i sökresultaten som mobilvänliga. Under de närmaste månaderna börjar separationsresultaten mellan mobila (smartphones, surfplattor) och stationära datorer (från datorer och bärbara datorer). Om en betydande del av din publik använder mobila enheter riskerar du därför att förlora en del av söktrafiken om webbplatsens design inte är anpassad för smartphones och surfplattor.
Varför kolla hur en webbplats ser ut på mobila enheter?
2015 genomförde TNS Web Index en orienteringsundersökning. Vi intervjuade 60 tusen ryssar i åldrarna 12 till 64 år och fann att 64% av internetanvändarna också använder mobila enheter. 15% av detta antal människor gör sig utan datorer. Och här är Yandex-data.
Framför allt letar de efter information och innehåll: böcker, musik, spel etc. Därför är det önskvärt att informations- och underhållningssidor har en lyhörd design. Och kommersiellt, om du tillhandahåller "sista minuten" -tjänster: ringa en bogserbil eller låssmed, nödöppning av lås, pizza eller sushi-leverans.
Virtuell värd för webbplatser för populära CMS:
Anpassningsförmågan är inte överflödig för någon resurs, eftersom mobilpubliken växer förväntas en nedgång inte. Enligt samma studie dispenserar vissa användare redan stationära datorer.... Och sökrobotar underskattar webbplatser som inte är gummi i SERP. Undantag: resurser med låg andel mobil trafik.
Det finns andra sätt att behaga användare av olika enheter, till exempel att skapa en mobilversion av webbplatsen. Det är bekvämt för besökare eftersom webbplatsen inte är överbelastad med onödig grafik och innehåll. Om webbansvarig gör betydande ändringar av koden påverkar det inte huvudsidan. Men det finns också betydande nackdelar.
- Layouten på den andra webbplatsen blir mycket dyrare än att anpassa den gamla mallen.
- Olika adresser för mobil och standardresurs delar upp trafiken i två strömmar.
- Det tar mer tid och pengar att stödja två projekt.
Att skapa en mobilversion är värt det när den överväldigande majoriteten av trafiken kommer från telefoner och surfplattor: om du är ett socialt nätverk eller en underhållningsportal. I andra fall responsiv design.
Hur kontrollerar jag hur en webbplats ser ut på en surfplatta eller smartphone?
I verktygssatsen för onlinetjänster Yandex.webmaster och Google finns speciella verktyg som analyserar webbplatsen och anger var man ska leta efter problem.
Du kan med egna ögon se hur webbplatsen ser ut till ägare av mobila enheter i alla populära webbläsare. För Firefox åberopas vyn med kortkommandot Ctrl + Shift + M.
I Google Chrome trycker du på F12 för att visa. Sträck ut fönstret med musen eller ställ in önskad upplösning i antal.
Om du letar efter värd för ett specifikt innehållshanteringssystem - ta en titt på vår sida.
Onlinetjänster för att kontrollera hur webbplatsen ser ut i olika upplösningar.
Du kan kontrollera hur webbplatsen ser ut på olika användarskärmupplösningar med hjälp av onlinetjänster.
- Mobil - 320x480px;
- Surfplatta - 768x1024px;
- Bärbar dator - 1280x802px;
- PC - 1600x992px.
Jämfört med den första tjänsten är funktionaliteten bättre. Visar behörigheter:
- 10 mobil;
- 9 tabletter;
- samma antal datorer och bärbara datorer;
- Om önskat alternativ inte är tillgängligt, ställ in parametrarna från tangentbordet.
Ett måste från en mobiltelefon på olika versioner av Android.
Sådana tjänster är bara imitation. Det händer att de inte har några designproblem, men layouten flyter på Android-enheten. Teckensnittsstatistik, knappstorlekar, visning av vissa css \\ html-taggar är specifika för olika operativsystem och webbläsare.
Det är absolut nödvändigt att titta på hur webbplatsen ser ut på riktiga enheter och om det är möjligt att utföra riktade åtgärder på dem. Det händer att webbplatsen ser bra ut, men beställningsformuläret fungerar inte.
Men de nödvändiga verktygen finns inte alltid till hands - inte alla på jobbet får iPads, iPhones och ett par enheter på en Android. Det är inte nödvändigt att söka efter alla möjliga alternativ, men det är bättre att kontrollera åtminstone på de enheter som människor besöker dig oftare från.
Om det inte finns någon, be en vän om önskad modell eller testa den i närmaste butik. Annars riskerar du att förlora en stor del av din trafik. Information om webbplatsens publik, de mest populära behörigheterna och operativsystemen erhålls med samma Yandex.metrica.
Jag stod inför behovet av att se webbplatsen med olika skärmupplösningar. Med utvecklingen av smartphones och framväxten av många olika skärmstorlekar är det användbart att se hur din webbplats kommer att se ut på en viss enhet. Det finns flera alternativ för att lösa detta problem. För att visa webbplatsen på en dator med lägre upplösningar än din bildskärm, gå bara till skärminställningarna och välj det värde du behöver.
Det finns också ett alternativ med webbläsarinsticksprogram, till exempel webbutvecklare för Firefox, som också finns för Google Chrome. Med alternativet Ändra storlek kan du ändra storlek på webbläsaren till det värde du vill ha.
Dessa metoder är de enklaste, men nu räcker det inte längre - du kommer inte att kunna se webbplatsen med större skärmupplösningar eller se hur den kommer att se ut från en mobil enhet. Jag minns nyligen att jag övervägde ett projekt som låter dig testa webbplatser i alla webbläsare. Det är extremt användbart för testning av webbläsarlayout på olika operativsystem och webbläsare, men det fanns inte många skärmupplösningar där. Dessutom var du tvungen att registrera dig för att kunna använda den. Idag kommer jag att överväga ett par enklare och mer prisvärda tjänster för att snabbt visa webbplatsen med olika skärmupplösningar.
Tjänster för visning av webbplatsen med olika skärmupplösningar
I vissa projekt kan du bara ändra skärmupplösningen, medan andra har ytterligare funktioner. Jag kommer inte att överväga dem i detalj, jag kommer bara att nämna dem i recensionen, kanske kommer de att vara användbara för dig.
Förresten finns det ett par intressanta enkla tjänster som gömmer sig under domänen quirktools.com:
- Smaps - skapa webbplatskartor eller bara ett hierarkiskt schema.
- Ledningar är en cool sak som låter dig skapa layouter på webbsidor med olika funktionella block (text, flikar, formulär, knappar, etc.)
Den enklaste tjänsten för att visa olika skärmupplösningar. Det finns också en lista över de mest populära enheterna som du behöver välja från.
Projektet har en mycket fin design.
Denna tjänst liknar CrossBrowserTesting genom att den dessutom låter dig utvärdera din webbplats på olika webbläsare och operativsystem. Dessutom kräver det också registrering och har betalda funktioner. Även om detta inte är nödvändigt för att visa olika skärmupplösningar - gå till menyn för Responsiv.
När det gäller design och funktionalitet är allt väldigt coolt, vilket bara är värt möjligheten för smartphones att välja alternativ för stående och liggande visning. Ja, resten av tjänsterna har en Rotate-funktion, men du måste erkänna att allt ser mycket ljusare ut på det här sättet. Förresten, om jag förstod rätt, efter registrering kommer du att kunna använda alternativet för live interaktiv testning i realtid.
Service i minimalismens anda. Det finns ett fält för att ange webbplatsens namn + möjligheten att välja skärmstorlekar för visning.
Ett annat mycket enkelt projekt. Förutom webbplatsadress och dimensioner presenteras de mest populära skärmupplösningarna för din bekvämlighet.
Om du tittar noga längst ner på bilden kan du se att InfoByIp-tjänsten visar närvaron av ett nedre rullningsfält med en upplösning på 1024x768. Om du ändrar bildskärmens upplösning manuellt kan du se att det inte finns något rullningsfält. Sådana felaktigheter i vissa tjänster är lite deprimerande, du mäter inte tillförlitligheten för det visade resultatet med en linjal. Det är därför jag råder dig att se webbplatsen med olika skärmupplösningar, med hjälp av ett par olika tjänster, för alla fall.
Sluta ändra storlek på webbläsarfönstret, sluta våldta det! Jag slår vad om att du har hört detta mer än en gång. Du kanske inte har hört det. Men om du är en professionell responsiv webbplatsutvecklare, vet du vad jag menar: någon DOM-ändring eller CSS-redigering, och du börjar dra webbläsarkanten fram och tillbaka igen, testa ändringarna och se om inget går sönder.
Syftet med dina rörelser är att simulera skärmarna på olika enheter.
I en företagsmiljö har du ofta en mängd olika prylar som företaget tillhandahåller för ett test. På mitt arbete har jag iPads, iPods, andra surfplattor, bärbara datorer och stationära bildskärmar. Om du inte har den lyxen måste du använda det som finns till hands.
Lyckligtvis finns det en imponerande uppsättning onlineverktyg som simulerar olika enhetsdiagonaler. Naturligtvis har var och en av dem sina egna fördelar och nackdelar, vi kommer att överväga flera sådana verktyg.
För testning valde jag en riktig responsiv webbplats PajamasOnYourFeet.com, sajten är byggd på en HTML5-mall som tillhandahålls av EGrappler gratis.
Är jag lyhörd?
Är jag lyhörd, ett mycket enkelt verktyg för att snabbt visa din webbplats på fyra enheter. Alla är IOS och utvecklaren förklarar detta som en funktion på webbplatsen. I allmänhet inga inställningar, inget val, men väldigt enkelt och intuitivt.Tillgängliga storlekar:
- stationär bildskärm - 1600 x 992 pixlar;
- bärbar dator - 1280 x 802 pixlar;
- surfplatta - 768 x 1024 pixlar;
- mobiltelefon - 320 x 480 pixlar.
Det finns två fina knep: möjligheten att dra enheter över din skärm och möjligheten att dela en länk till en testplats.
deviceponsive
deviceponsive är mycket lik Am I Responsive eftersom det är lika enkelt med ett minimum av inställningar och alternativ. Alla tillgängliga enheter visas samtidigt på en lång sida. Av alla tillgängliga alternativ är detta möjligheten att redigera sidhuvudets bakgrund och lägga till din logotyp där, vilket kommer att vara användbart när du bestämmer dig för att dela en skärmdump.Enheter och tillgängliga skärmupplösningar.
- Macbook - 1280 x 800
- iPad-porträtt - 768 x 1024
- iPad-porträtt - 1024 x 768
- Kindle porträtt - 600 x 1024
- Kindle liggande orientering - 1024 x 600
- iPhone-porträtt - 320 x 480
- iPhone liggande orientering - 480 x 320
- Galaxporträtt - 240 x 320
- Galaxy liggande orientering - 320 x 240
lyhörd test
Liksom deviceponsive gör ett responsivt test din webbplats över enheter. Men istället för att visa allt på en gång väljer du själv önskad enhet i sidans toppmeny. Förresten fungerar skalning korrekt här, vilket gör det möjligt att testa en högre upplösning vid en lägre.30 olika upplösningar finns på webbplatsen, allt från en enorm skrivbordsskärm till vad de kallar en "skit android" (det är rättvist att säga att det också finns en vanlig android).
När det gäller Firefox-webbläsaren fungerar den inte korrekt med den här webbplatsen. Observera att skärmbilden inte visar skjutreglaget mellan den gröna titeln och det vita bakgrundsinnehållet.
responsive.is
Mycket lik de två föregående verktygen, men det finns en sak som skiljer responsive. Skiljer sig från de andra. Detta är en smidig animation när du flyttar från en enhet till en annan, liksom ett halvtransparent område som visar det verkliga området på webbplatsen som inte faller in i visningsområdet.De tillgängliga enhetsalternativen är auto (som du ser webbplatsen), stationär dator, surfplatta i liggande och stående orientering, smartphone i stående och liggande position. Tyvärr kan du inte ange godtyckliga storlekar i px.
Screenqueries
Men funktionerna och tillgängliga alternativ skiljer Screenqueries från tidigare tjänster. Här finns 14 telefoner och 12 surfplattor med separata stående och liggande lägen. Resultaten visas på ett reglerat rutnät. Det är också möjligt att ställa in en godtycklig upplösning genom att dra i höger eller nedre kant.En intressant funktion på den här webbplatsen, för ett antal enheter finns det ett "Trueview" -alternativ som visar din webbplats i enhetens webbläsare.
Tyvärr kunde inte heller Firefox visa skjutreglaget här. Inget behov av att skylla på mig, Firefox är min favoritwebbläsare, men så är det.
Screenfly
Screenfly är kanske den mest funktionella av dem alla. Det finns 9 fler än surfplattor tillgängliga - från 10 "bärbara datorer, upp till 24" skärmar, 5 surfplattor, 9 telefoner, 3 TV-upplösningar samt godtyckliga upplösningar. Lägg till en separat växling för stående och liggande läge här, samt ett alternativ för att visa rullning. Du kan också dela en länk till ett test med en enda knapp.Varje enhet har en skärmstorlek i px i menyn och den faktiska storleken på ditt webbläsarfönster visas i det övre högra hörnet.
Alla dessa fördelar gör det möjligt att göra anspråk på ledarskap om inte en sak (citat från utvecklaren): ”Screenfly kan använda en proxyserver för att simulera enheter när du surfar på din webbplats. Proxyservern härmar användaragentsträngen, men inte beteendet hos dessa enheter. " Screenfly är den enda tjänsten i listan som tillåter testning baserat på användaragentsträngar.
Använder du de presenterade verktygen i din praktik? Dela dina hemligheter med responsiv webbplatsutveckling i kommentarerna.
P.S. Fel angående översättningen, rapportera i en personlig.
Personer som deltar i webbplatsutveckling behöver vanligtvis testa hur webbplatslayouter kommer att visas i olika skärmupplösningar och webbläsare. Det är svårt att spåra visningen av en webbplats på olika enheter med olika skärmupplösningar. Lyckligtvis erbjuder vissa webbplatser ett bra verktyg för att kontrollera sidlayouten med olika skärmupplösningar.
Dessa webbplatser visar en förhandsgranskning av webbsidan genom att ange webbadressen. Om du vill se hur din webbsida kommer att se ut på olika skärmupplösningar kan du prova dessa gratisresurser genom att enkelt kontrollera kompatibilitet med olika skärmstorlekar.
Vissa av dessa webbplatser erbjuder ett brett utbud av populära upplösningar för stationära datorer, bärbara datorer, TV-apparater, surfplattor och mobila enheter, medan andra ger möjlighet att manuellt ange en upplösning och kontrollera sidlayouten med en specifik upplösning.
Medan alla verktyg är enkla och enkla att använda, har de sina egna fördelar framför varandra.
För det första kan tas ut - en mycket bra tjänst för online-testning av en webbplats i olika upplösningar, som har ett tydligt och trevligt användargränssnitt. På webbplatsen hittar du en mängd olika skärmupplösningar inklusive stationära datorer, netbooks, bärbara datorer, surfplattor, TV-apparater.
Det är möjligt att välja enhetens namn direkt om du inte känner till dess exakta upplösning. Så du kan välja Kindle, Google, Samsung, Motorola, Apple från rullgardinsmenyn och kontrollera sidlayouten med rätt upplösning.
Dessutom låter Screenfly dig ställa in en anpassad skärmstorlek i pixlar och låta dig använda den på din sida. På så sätt kan du enkelt kontrollera webbsidor i nästan vilken upplösning som helst.
Alternativt kan du rotera skärmen, aktivera eller inaktivera rullning av webbsidor eller använda en proxy för att testa webbsidan.
En annan gratis online-resurs där du enkelt kan kontrollera webbplatsen i olika upplösningar. På webbplatsen hittar du ett bra utbud av enheter från stationär, bärbar dator, surfplatta till smartphone. Dessutom är det också tillåtet att manuellt ange upplösningen och kontrollera sidlayouterna.
Dessutom finns det ett alternativ i webbläsaren som ger utrymme för webbläsarens gränser och kontroller, liksom aktivitetsfältet i förhandsgranskningsfönstret.
Nästa är ett annat gratis verktyg som låter dig testa din webbplats med olika upplösningar. Det är möjligt att välja mellan de föreslagna upplösningsalternativen eller ange dina egna dimensioner för webbplatsen.
Denna webbplats erbjuder två olika visningsalternativ: fönster och ramar. Fönsteralternativet fungerar bra med låga skärmupplösningar, men om den valda upplösningen är större än skärmstorleken kan du använda ramalternativet för att kontrollera om den är kompatibel med skärmstorleken.
upptäcker också skärmens aktuella upplösning och visar den som referens.
Ett annat webbverktyg som låter dig testa sidor i olika storlekar. Webbplatsen fungerar bäst med Internet Explorer och visar webbsidor i vald upplösning. Listan över behörigheter är dock mycket begränsad. Det betyder att du bara kan kontrollera webbsidor i 8 upplösningar, inklusive 800 × 600, 1024 × 768, 1280 × 960, 1440 × 900, 1600 × 1200, 1680 × 1050 och 1920 × 1200.
Erbjuder inte så många alternativ som andra liknande webbplatser, men det är värt ett försök.
Sista på listan är TestSize.com, ett gratis onlineverktyg som erbjuder 9 olika upplösningar för att kontrollera en webbplats: 240 × 380, 640 × 480, 800 × 600, 1024 × 600, 1024 × 768, 1280 × 600, 1280 × 1024, 1366 × 768 och 1920 × 1024.
Dessutom kan du här också ange skärmstorlekar manuellt och kontrollera webbplatsen i ett separat fönster som öppnas. (Öppna popup)... TestSize.com är användarvänligt och lätt att använda.
Lämna din kommentar!
Idag finns det inte längre något behov av att övertyga någon om behovet av en mobilversion av webbplatsen. När allt kommer omkring blir det fler och fler besökare från smartphones och surfplattor. När detta skrivs använder cirka 20% av mina bloggbesökare mobila enheter för att surfa. Det vill säga var femte kommer till min webbplats från en telefon eller surfplatta.
För flera år sedan tänkte jag inte ens på sådana besökare, men när deras antal översteg 10% av det totala antalet började jag använda en responsiv layout. Detta gjorde det möjligt att korrekt visa innehåll på mobila enheter och öka lojaliteten för både besökare och sökmotorer till webbplatsen.
Den mobila versionen av webbplatsen och den responsiva designen är inte samma sak. Denna artikel kommer att fokusera på att testa responsiv layout när webbplatsens design ändras beroende på skärmupplösningen på besökarens enhet.
För att vara säker på att din webbplats visas korrekt på mobila enheter måste du kontrollera, och för detta finns det flera användbara tjänster och verktyg.
Snabbkontroll för responsiv layout
Populär webbläsare (webbläsare) Mozilla Firefox utrustad med inbyggda verktyg för att kontrollera webbdesignens lämplighet för visning på mobila enheter. För att använda den, gå till "Meny" - "Utveckling" - "Responsiv design". Eller tryck bara på tre tangenter på tangentbordet samtidigt ++ [M]
Du borde se ungefär följande:
Genom att ändra skärmens upplösning och orientering kan du kontrollera hur din webbplats kommer att visas för mobilbesökare.
Googles webbläsare Krom har också inbyggt stöd för att kontrollera hur webbdesignen är lyhörd. För att göra detta, gå till menyn, välj alternativet "Ytterligare verktyg" och sedan "utvecklarverktyg" (eller tryck på knappen ).
Klicka därefter på den responsiva designikonen (eller klicka samtidigt på tangentbordet ++ [M]):
Mitt på skärmen ser du hur din webbplats kommer att visas på skärmarna på mobila enheter:
SEO-testning av mobil design
Som ni vet har de två världssökande ledarna Google och Yandex sin egen oförskämda åsikt om hur webbplatsen ska se ut på skärmarna på mobila enheter. Och om webbplatsen känns igen som obekväm för mobilbesökare, går den ner i sökresultaten. Så från en SEO-synvinkel, om du inte vill förlora mobilbesökare, ska du inte bara ha en lyhörd design, men sökmotorer bör också betrakta den som sådan, det vill säga lämplig för mobila enheter.
För att kontrollera anpassningsförmågan med hjälp av Googles tjänst, gå till följande adress och skriv in namnet på din webbplats: https://www.google.com/webmasters/tools/mobile-friendly/.
Så här ser resultatet av att kontrollera min blogg ut:
Med Yandex är det lite mer komplicerat, för verifiering är det nödvändigt att registrera sig i Yandex.Webmaster-tjänsten och använda betaversionen av gränssnittet:
Onlinetjänster för testning av anpassningsförmåga
Huvuduppgiften för dessa tjänster är att presentera (visa) hur din webbplats kommer att se ut på en mobil enhet. Det finns väldigt många webbplatser med sådan funktionalitet. Jag ger bara några få av dem. I de flesta fall duplicerar de de inbyggda funktionerna i FireFox och Chrome.
Google resizer
Jag börjar igen med Google, som har sin egen responsiva demonstrationstjänst: http://design.google.com/resizer/#
Quirktools skärmflyg
Den andra vackra tjänsten är http://quirktools.com/screenfly/. Det visar dig hur din webbplats kan se ut även på TV!
Symby.ru anpassning
För att inte förolämpa den "inhemska tillverkaren" kommer jag att ge ett exempel på en annan webbplats: http://symby.ru/adaptest/. På en sida ser du flera vyer samtidigt med olika skärmupplösningar.
Hastigheten på mobilversionen av webbplatsen
När du har sett till att din webbplats är lyhörd och visas korrekt på skärmarna på de flesta enheter, bör du kontrollera hastigheten på dess arbete. Återigen tillämpas på mobilbesökare.
PageSpeed \u200b\u200bInsights
Google ligger som alltid framför resten: https://developers.google.com/speed/pagespeed/insights/. Den här tjänsten visar hur webbplatsen ser ut på telefonskärmen och ger rekommendationer för att optimera koden för att öka laddningshastigheten på mobila enheter.
WebPageTest
Avslutningsvis kommer jag att ge ett exempel på en tjänst som inte bara visar hur webbplatsen ser ut på en mobil enhet utan också visar hur snabbt arbetet fungerar: http://www.webpagetest.org/
resultat
Enligt min mening är det i det dagliga arbetet lättare att använda de inbyggda funktionerna i webbläsarna FireFox och Chrome när du gör ändringar i webbdesignen. Efter det, naturligtvis, måste du kontrollera lojaliteten hos sökmotorer till din design. Och först då, för att lugna själen eller för att visa upp, kan du använda onlinetjänster.