Använder javascript för responsiv testdesign. Hur testar man responsiv webbdesign? Små element för mobilskärmar
Webbutiken behöver optimeras för mobila enheter. Denna uppgift löses med hjälp av adaptiv design, vilket gör att du kan visa webbplatsen korrekt på vilken plattform som helst. Men att anta responsiv design möter en standarduppsättning fallgropar. Här är 8 av de vanligaste problemen som är typiska för shoppingsajter online.
Försummelse av analyser av besökarnas beteende
Rusningen att komma in i mobilsegmentet tvingar återförsäljare att designa en webbplats utan att göra seriösa analyser av besökarnas beteende. Analys av besökarnas beteende är det viktigaste steget i förberedelsen, vilket gör att du kan identifiera de mest populära mobila enheterna och optimera webbplatsen för dem i första hand. Analytics hjälper till att avgöra den mest "populära" användaråtgärden, som att zooma in på en produktbild; visar omvandlingsfrekvensen för mobilbesökare etc. Denna data kommer att ge en uppfattning om preferenser i användarbeteende och hjälpa till att möta förväntningarna hos en mobil publik. Analys mobiltrafik det är nödvändigt att systematiskt och konsekvent implementera resultaten, slutföra och optimera webbplatsen för köparnas behov.
Design av skrivbordsbutiker
Vanligtvis är desktopversionen av en onlinebutik omdesignad för mobilskärmar, även om det är mer logiskt att ta en liten skärm av en mobil enhet och sedan skala till en stationär dator. Återförsäljare är ofta omedvetna om de tekniska utmaningarna med att få en skrivbordsvänlig webbplats till storleken på en smartphone. 
Startar design för mobila skärmar, fokuserar du på mobilanvändarnas konsumentupplevelse. Som ett resultat blir det lättare för dig att designa för båda kanalerna: stationär och mobil.
Responsiv designtestning
Att testa den mobila layouten för en onlinebutik är ett obligatoriskt lanseringssteg, men många ägare försummar det ofta och lanserar utan att testa. Som ett resultat, på liveversionen av webbplatsen för mobila enheter, kan fel uppstå även i processen att göra ett köp och göra en beställning.
Responsiva designbrister identifieras lätt genom att förtesta en webbutik, men många säljare har inte resurserna att göra det. För att minska risken att förlora pengar, testa viktiga användarvägar genom webbplatsen i större webbläsare - Chrome, IE, Firefox, Safari och operativsystem– Windows, Mac OS, Android, IOS på populära mobila enheter. Testa varje gång du gör en ändring, tjänster som BrowserStack eller Viewport Resizer hjälper till att minska testtiden till några timmar.
Små element för mobilskärmar
I ett försök att få plats mer på skärmen på en smartphone sparar onlinebutiksägare storleken på sina uppmaningsknappar. Tvinga inte användare att zooma in på Köp-knappen och placera inte små föremål för nära varandra, annars föredrar dina användare att gå till en bättre sida. Designa gränssnitt med stora navigeringselement och uppmaningsknappstorlekar.
Långsam sidladdningshastighet
Mobila målgrupper älskar snabba webbplatser och minimala laddningstider. Bedöm komponenterna i din mobilsidor- bilder, knappar, text, skript - de måste vara optimerade för mobila enheter. Google tar hänsyn till sidladdningstider i sina SERP:er och taggar och prioriterar mobilsajter i topp så att "lätta" sajter får en extra stor fördel.
Dela upp innehåll i olika flikar, till exempel kan en produktsida bara innehålla en basbild, beskrivning, pris och en "Köp nu"-knapp. Kundrecensioner och videor kan placeras på en separat flik och minska "vikten" på huvuddelen av sidan. Utöver innehåll, optimera andra element som påverkar nedladdningshastigheten - CSS-filer, bilder och skript, skicka bara nödvändig data. Verktyg som minskar storleken på resursfiler och deras nedladdningstid hjälper dig med detta: Uglify eller JSCompress.
Minska innehåll för mobilanvändare
Ofta, när , döljer utvecklare en del av innehållet så att laddningen går snabbare på mobila enheter. Men ofta minskas inte sidstorleken och innehållet visas helt enkelt inte för användaren. Din butik ska kunna generera en sida dynamiskt, minska sidvikten och påskynda laddningstiderna för mobilbesökare. Att dessutom ge mobilanvändare mindre innehåll är dåligt, det påverkar konsumentupplevelsen negativt. Som regel använder de olika enheter under köpprocessen, vilket ungefär 90 % av onlineshopparna gör. Att begränsa dem till responsiva designmetoder är ett stort misstag.
Stöd för bilder i endast en upplösning
En bra responsiv webbplats kommer automatiskt att ändra upplösningen på bilder beroende på typ av enhet, tunga bilder ökar laddningstiden. Det finns flera sätt att automatiskt justera bildstorlekar för en specifik enhet. Fluid images är en CSS-baserad metod som låter dig komprimera och expandera en bild beroende på bredden på dess innehållselement, eller ett HTML5-element.
"Icke-responsiva" e-postmeddelanden
Det händer att allt är i sin ordning med själva sajten, adaptiv design fungerar bra på stationära datorer och mobila enheter. Men e-postmeddelanden är inte lyhörda, och mobilanvändare måste kämpa för att kontrollera beställningsdetaljer eller bläddra igenom en oändlig lista med rekommenderade produkter för att komma till en lista över genomförda köp. 
E-postmeddelanden detta är en viktig kontaktpunkt med kunden, bygg in responsiv e-postdesign i din mobilstrategi. Designa och testa dina e-postmeddelanden och nyhetsbrev, e-postmallar ska vara "lätta" och endast innehålla viktig information.
Från författaren:"Sluta ändra storlek på den här webbläsaren, den kommer att raderas snart!" Hur ofta hör du det? Okej, kanske inte så ofta, men om du utvecklar responsiva webbplatser vet du vad jag pratar om: varje gång du redigerar DOM eller CSS drar du kanten på webbläsaren fram och tillbaka, testar ändringar och letar efter felaktigheter.
I allmänhet är sådana ansträngningar för det mesta ett försök att efterlikna skärmstorlekarna på olika enheter.
Om du håller på med företagsutveckling har du förmodligen många enheter som tillhandahålls av företaget att testa med. Där jag jobbar har vi iPads, iPhones, en eller två andra surfplattor, bärbara datorer och stationära datorer. Om du inte har den lyxen måste du använda det som finns till hands.
Hemma har jag två olika bärbara datorer, två olika Android-enheter: Kindle och Nexus 7. Jag använder dessa enheter för att testa min frilansutveckling, men det är tydligt att detta inte är ett uttömmande urval. Det finns inga iOS-enheter alls, och även om jag anses vara en early adopter, planerar jag inte att köpa varje ny telefon/surfplatta/surfplatta så fort den är till försäljning.
Så vad ska en utvecklare göra? Lyckligtvis finns det ett växande antal webbläsarbaserade verktyg som efterliknar skärmstorlekarna på flera enheter. Olika verktyg kommer naturligtvis med olika uppsättningar funktioner och olika effektivitetsnivåer. Vi kommer att överväga några av dem här.
I testsyfte tog jag den första riktigt responsiva sajten jag skapade, PyjamasOnYourFeet.com. Den är baserad på Brownie HTML5-mallen, som mycket vänligt tillhandahålls gratis till utvecklargemenskapen på EGrappler.
Är jag lyhörd?
Är jag lyhörd? - en helt enkel, omedelbar vy av din webbplats när det gäller hur den kommer att visas på fyra olika enheter. Alla fyra är från iOS, och utvecklaren på sajten förklarar sitt val. Den erbjuder inga kontroller eller val, bara en mycket enkel och elegant display. Viewport dimensioner:
Desktop - 1600 x 992 pixlar nedskalad (0,3181)
Bärbar dator - 1280 x 802 pixlar nedskalad (0,277)
Surfplatta – 768 x 1024 pixlar nedskalad (0,219)
Mobil – 320 x 480 pixlar nedskalad (0,219)
För att citera utvecklaren: "Detta är inte ett testverktyg, det är väldigt viktigt att göra detta på riktiga enheter. Men det är ett verktyg för att ta snabba skärmdumpar (för mig) och ge en visuell möjlighet att "tala" i kundmöten vad du hade i åtanke."
enhetspositiv
deviceponsive liknar sajten Am I Responsive? en som enkelt och snyggt visar din webbplats, har inga kontroller eller tillgängliga alternativ när det kommer till enheter. Alla visas samtidigt på en lång sida. Den har en intressant egenskap - du kan modifiera rubriken genom att redigera dess bakgrundsfärg och infoga din egen logotyp och sedan "prinscreen". På så sätt kan du i någon mening skapa ett varumärke för din webbplats när du visar skärmdumpar för en kund. Enheter och skärmstorlekar simulerade på denna webbplats:
Macbook - 1280x800
iPad (stående) - 768 x 1024
iPad (liggande) - 1024 x 768
Kindle (stående) - 600 x 1024
Kindle (liggande) - 1024 x 600
iPhone (stående) - 320 x 480
iPhone (liggande) - 480 x 320
Galaxy (porträtt) - 240 x 320
Galaxy (liggande) - 320 x 240
Som med de flesta liknande verktyg är rullningslister synliga på små enheter. De kommer inte att dyka upp på en riktig enhet, men för att kunna scrolla testvyn på en icke-touch-enhet måste vissa eftergifter göras.
responsivt test
Liksom deviceponsive, responsive test visar din webbplats på många enheter, men istället för att visa dem alla på en sida väljer du vilken enhet du vill titta på från en enkel meny högst upp på sidan. När jag surfade på den här webbplatsen på en medelstor bärbar dator fann jag att det fungerar utmärkt att zooma ut sidan, vilket gör att du kan se hela webbplatsen i fönstret på enheten som testas.
Tretton olika visningsfönster erbjuds här, från en stor bildskärm stationär dator till den så kallade "crappy Android" (Crappy Android) (för att vara ärlig, de har också ett alternativ som heter " bättre android» (Bra Android).
Än en gång snubblar Firefox lite på denna sida. Observera i skärmdumpen - mellan den gröna rubriken och innehållsområdet med vit bakgrund - finns det bara en blå stapel där bildreglaget ska visas.
responsive.is
Det är väldigt likt de två föregående, och det enda som skiljer responsive.is från dem är den smidiga animeringen av visningen av en enhet till nästa, samt ett genomskinligt överlägg som visar webbplatsens "fastigheter" , hoppar av visningsporten.
Det enda tillgängliga val enheter här är automatiska enheter som fyller ditt webbläsarfönster och visar webbplatsen som du skulle se den om du bytte till den: Desktop; Surfplatta (liggande); Surfplatta (stående orientering); Smartphone (liggande) och Smartphone (stående), pixeldimensioner anges inte.
Skärmförfrågningar
Återigen, några olika funktioner och alternativ skiljer Screenqueries från resten av webbplatserna. Här är 14 telefon och 12 surfplattor med ett separat element för att växla mellan porträtt och Landskapsorientering. De visas på ett numrerat pixelrutnät, med måtten som visas längst ned till höger på testskärmen. Displaykanterna är dragbara så att anpassade storlekar kan testas. Dra eller klicka på testområdet så blir bakgrunden grå, med ett mindre trångt utseende.
En intressant funktion på den här webbplatsen är att det för flera enheter finns ett "True view"-alternativ som visar din webbplats insvept i det föreskrivna för den enheten. chrome webbläsare. Tyvärr, och jag är van vid det, misslyckas Firefox med att visa testsidans bildreglage. Svär inte, jag föredrar verkligen Firefox som webbläsare, men som tur är har vi alternativ.
Skärmfluga
Screenfly ökar verkligen användbarhetsfaktorn. Den erbjuder nio enheter mer än surfplattor, allt från en 10-tums bärbar dator till en 24-tums stationär dator, fem surfplattor, nio smartphones, tre TV-storlekar och ett alternativ för anpassad skärmstorlek. Alla alternativ du väljer kan roteras i stående eller liggande orientering med hjälp av individuellt element menykontroller. Du kan välja att tillåta rullning eller inte, och generera en delbar länk med ett klick på en knapp.
Webbplatsen är proaktivt användbar i sättet att presentera pixelstorleksinformation. Varje enhet i menyn visas med ett namn och pixelmått, storleken på ditt eget webbläsarfönster visas nära det övre högra hörnet av fönstret, och måtten för det valda alternativet visas i sidfoten under skärmen tillsammans med URL till webbplatsen som testas. Denna lilla funktion gör det lättare att dokumentera skärmdumpar och dela information med kunder.
Allt ovanstående skulle redan ha gjort det till det perfekta verktyget, men Screenfly-utvecklarna hittade ett sätt att göra det bara i toppklass och gav en proxy-egenskap. Citerar från deras webbplats: "Screenfly kan använda en proxyserver för att efterlikna enheter medan du surfar på deras webbplats. Proxyservern simulerar användaragentsträngen för de enheter du väljer, men inte beteendet hos dessa enheter." Alla andra verktyg som avslöjas här handlar uteslutande om CSS. Screenfly är den enda som tillåter testning baserat på användaragentsträngen.
Efter att ha testat på detta sätt en sida jag skapade med mobilversionen tillgänglig, kan jag säga att resultaten var mycket bra. Allt visades precis som jag förväntade mig, och funktionerna kunde testas. Jag måste säga att testning av användaragentsträngar har blivit traditionellt, men den här webbplatsen skapades för länge sedan, och proxyserveregenskapen visade sig vara ett mycket användbart tillägg till den.
Slutsats
Så du kan se att det finns tillräckligt med resurser för att testa responsiva webbplatser. De skiljer sig åt i unika egenskaper; vilka webbplatser du använder beror på dina personliga preferenser och krav, och jag försöker uppmuntra dig att utforska och experimentera med dem. Ju fler verktyg vi utvecklare har som verkligen är användbara, desto bättre.
Hej kära bloggläsare. Det är inte förvånande att adaptiv design blir mer och mer populär på det ryska internet. Och naturligtvis måste layoutdesigners studera det. Eftersom responsiv design snart kommer att finnas på nästan alla sajter, eftersom fler och fler människor använder mobila enheter.
Och jag vill säga att sajter med är mycket bekvämare att läsa på sådana enheter än utan.
Idag vill jag presentera dig 5 mycket användbara och coola tjänster som du kan kontrollera webbplatsen för anpassningsbarhet.
Och så, låt oss gå.
5 tjänster där du kan kontrollera webbplatsen för anpassningsförmåga.
www.responsivedesigntest.net
Bra service för att kolla webbplatser. Det finns många skärmupplösningar för både surfplattor och telefoner.
mattkersley.com
En enkel tjänst för att kolla en webbplats från Matt Kersley. Alla populära upplösningar för mobila enheter är också tillgängliga.
screenqueri.es
Väldigt cool tjänst som kollar vilken sida som helst. Jag gillade verkligen designen och funktionaliteten.
quirktools.com
Mycket trevlig och funktionell service. Det går till och med att kolla hur sidan kommer att se ut på TV:n :-)
Med utvecklingen av webbteknologier växer också kraven på webbutveckling. Mest av allt känner webbutvecklare, layoutdesigners, eller som de kallas idag, frontend-utvecklare, mest.
I den här artikeln kommer vi att prata lite om adaptiv layout, eftersom detta "trick" nu värderas mycket dyrt. När det kommer till adaptiv layout, ser layoutdesigners av alla kategorier på kunder eller projektledare, milt uttryckt, med illvilja, eftersom de förstår hur svårt det är.
Många börjar blanda ihop adaptiv layout med flytande layout, detta är ett mycket vanligt misstag för nybörjare layoutdesigners. Vad är skillnaden frågar du?
Till att börja med, låt oss göra det tydligt för dig och, så att säga, sätta alla prickar över och överväga vilka typer av layout det är.
Det finns 4 typer av layout:
- Fast layout
- Gummi layout
- Adaptiv layout
- Responsiv layout
Överväg alla typer mer i detalj.
1. Fast layout
Block ändrar inte sin bredd. En horisontell rullningslist visas på bildskärmar med låg upplösning.
2. Gummipåläggning
Block ändrar sin bredd beroende på storleken på webbläsarfönstret. Det kan ta ett max- och minimumvärde (egenskapen max-width). Men det är omöjligt att göra 100% från 50% eftersom skärmen minskar.
3. Responsiv layout
Genomförs med hjälp @media eller tack vare manus. Slipad för specifika kända enheter (320, 768, 1024, etc.). Varje förändring sker i ryck, efter att ha nått en av de angivna nivåerna. Helt klart lämplig för
4. Responsiv layout
Detta är en kombination av flytande och adaptiv layout. Genomförandet är det svåraste. Men resultatet är det mest acceptabla. Det är säkert att säga att sidan kommer att anpassa sig till vilken enhet som helst.
Så vi pratade om 4 typer av webbplatslayout. Nu är det dags för vårt mirakelmanus adaptiv layout. Jag hoppas att det inte förklarar någonting, skriptet är ganska enkelt, vi säger bara att när man byter blandas något block någonstans och det är det. Detta är naturligtvis också möjligt genom CSS-stilar, men du måste känna till alla metoder, ibland på vissa ställen kommer vissa inte att fungera, och vissa kommer att visa sig vara helt rätt.
Responsivt layoutskript:
Det är allt. Om du har några frågor, gnissla i kommentarerna, gå till
Idag finns det ingen anledning att övertyga någon om behovet mobilversion webbplats. För varje dag kommer det trots allt 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 besöker min sida från en telefon eller surfplatta.
För några år sedan tänkte jag inte ens på sådana besökare, men när deras antal översteg 10% av Totala numret Jag började använda responsiv layout. Detta gjorde det möjligt att korrekt visa innehåll på mobila enheter och ökade lojaliteten för både besökare och besökare på sajten. sökmotorer.
Mobilversion av sajten och adaptiv design är inte samma sak. Den här artikeln kommer att fokusera på att testa adaptiv layout när webbplatsens design ändras beroende på skärmupplösningen på besökarens enhet.
För att vara säker på att din sida visas korrekt på mobila enheter måste du kontrollera, och för detta finns det flera användbara tjänster och verktyg.
Snabbkontroll av adaptiv layout
Populär webbläsare (webbläsare) Mozilla Firefoxär utrustad med ett inbyggt verktyg för att kontrollera sajtens design för lämplighet för visning på mobila enheter. För att använda den, gå till "Meny" - "Utveckling" - "Adaptiv design". Eller tryck bara på tre tangenter på tangentbordet samtidigt ++[M]
Du borde se något sånt här:
Genom att ändra skärmupplösningen och orienteringen kan du kontrollera hur din webbplats kommer att visas för mobilbesökare.
Google webbläsare Krom har också inbyggt stöd för att kontrollera webbplatsens designanpassning. För att göra detta, gå till menyn, välj objektet "Ytterligare verktyg" och sedan "utvecklarverktyg" (eller tryck på knappen ).
Efter det, tryck på den responsiva designikonen (eller tryck samtidigt på tangentbordet ++[M]):
I mitten av skärmen ser du hur din webbplats kommer att visas på mobila enheters skärmar:
SEO-testning av mobildesign
Som ni vet har de två världssökledarna Google och Yandex sin egen obetydliga åsikt om hur sajten ska se ut på mobila enheters skärmar. Och om webbplatsen upplevs som obekväm för mobilbesökare går den ner i sökresultaten. Så ur SEO-synpunkt, om du inte vill tappa mobilbesökare, bör du inte bara ha en responsiv design, utan sökmotorer bör betrakta den som responsiv, d.v.s. mobilvänlig.
Att kolla anpassningsförmåga med Google-tjänst gå till följande adress och kör i namnet på din webbplats: https://www.google.com/webmasters/tools/mobile-friendly/.
Så här ser resultatet av att kolla in min blogg ut:
Med Yandex är det lite mer komplicerat; för att kontrollera måste du registrera dig hos Yandex.Webmaster-tjänsten och använda betaversionen av gränssnittet:
Onlinetjänster för kontroll av anpassningsförmåga
Huvuduppgiften för dessa tjänster är att presentera (visa) hur din webbplats kommer att se ut mobilenhet. Det finns många sajter med sådan funktionalitet. Jag kommer bara att citera några av dem. I de flesta fall duplicerar de den inbyggda funktionen i FireFox och Chrome.
Google resizer
Jag börjar igen med Google, som har sin egen demonstrationstjänst för anpassningsförmåga: http://design.google.com/resizer/#
Quirktools skärmfluga
Den andra trevliga tjänsten är http://quirktools.com/screenfly/ . Det kommer att visa hur din webbplats kan se ut även på TV!
Symby.ru adapter
Tja, 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 kommer du att se flera vyer med olika skärmupplösningar samtidigt.
Hastigheten för den mobila versionen av webbplatsen
Efter att du har sett till att din webbplats är responsiv och visas korrekt på skärmarna på de flesta enheter bör du kontrollera hastigheten på dess arbete. Återigen i förhållande till mobilbesökare.
PageSpeed Insights
Google ligger alltid före kurvan: https://developers.google.com/speed/pagespeed/insights/ . Den här tjänsten kommer att visa hur sajten ser ut på telefonskärmen och ge rekommendationer om hur man optimerar koden för att öka nedladdningshastigheten på mobila enheter.
WebPageTest
Och avslutningsvis kommer jag att ge ett exempel på en tjänst som inte bara visar hur sajten ser ut på en mobil enhet, utan också visar hastigheten på dess arbete: http://www.webpagetest.org/
Slutsatser
Enligt min mening är det lättare att använda de inbyggda funktionerna i det dagliga arbetet, när man gör ändringar i webbplatsens design Firefox webbläsare och Chrome. Efter det måste du naturligtvis kontrollera sökmotorernas lojalitet till din design. Och först då, för att lugna själen eller för att skryta, kan du använda onlinetjänster.