Hvordan teste responsiv design gratis. Responsiv layout med JavaScript-skript Testing av responsiv design

Hei kjære blogglesere. Det er ikke overraskende at adaptiv design blir mer og mer populær på det russiske Internett. Og selvfølgelig må layoutdesignere studere det. Siden responsiv design snart vil være på nesten alle nettsider, fordi flere og flere bruker mobile enheter.

Og jeg vil gjerne si at nettsteder med det er mye mer praktisk å lese på slike enheter enn uten det.

I dag vil jeg introdusere deg for 5 veldig nyttige og kule tjenester som du kan sjekke nettstedet ditt for tilpasningsdyktighet.

Og så, la oss gå.

5 tjenester hvor du kan sjekke nettstedet ditt for tilpasningsevne. www.responsivedesigntest.net

En god tjeneste for å sjekke nettsteder. Det er mange skjermoppløsninger for både nettbrett og telefoner.

mattkersley.com

En enkel tjeneste for å sjekke en nettside fra Matt Kersley. Alle populære mobilenhetsoppløsninger er også tilgjengelige.

screenqueri.es

En veldig kul tjeneste som vil sjekke hvilken som helst side. Jeg likte designen, så vel som funksjonaliteten.

quirktools.com

Veldig vakker og funksjonell service. Det er til og med mulig å sjekke hvordan siden vil se ut på TV :-)

Fra forfatteren: "Slutt å endre størrelsen på denne nettleseren, den vil snart bli slettet!" Hvor ofte hører du dette? Vel, ok, kanskje ikke så ofte, men hvis du utvikler responsive nettsteder, vet du hva jeg snakker om: hver gang du redigerer DOM eller CSS, drar du kanten av nettleseren frem og tilbake, tester endringene og leter etter unøyaktigheter.

Generelt er de fleste av disse forsøkene et forsøk på å etterligne skjermstørrelsene til forskjellige enheter.

Hvis du driver med bedriftsutvikling, har du sannsynligvis mange bedriftsleverte enheter å teste. Der jeg jobber har vi iPad, iPhone, ett eller to andre nettbrett, bærbare og stasjonære. Hvis du ikke har den luksusen, må du bruke det du har for hånden.

Hjemme har jeg to forskjellige bærbare datamaskiner, to forskjellige Android-enheter: Kindle og Nexus 7. Jeg bruker disse enhetene for å teste frilansutviklingen min, men det er klart at dette ikke er et uttømmende utvalg. Ikke i det hele tatt iOS-enheter, og selv om jeg regnes som en tidlig adopter, har jeg ikke tenkt å kjøpe alle nye telefoner/nettbrett/nettbrett så snart de kommer i salg.

Så hva bør en utvikler gjøre? Heldigvis er det et økende antall nettleserbaserte verktøy som simulerer skjermstørrelsene til en rekke enheter. Ulike verktøy kommer selvfølgelig med forskjellige sett med funksjoner og forskjellige effektivitetsnivåer. Vi skal se på noen av dem her.

For testformål tok jeg den første virkelig responsive nettsiden jeg opprettet, PyjamasOnYourFeet.com. Den er basert på Brownie HTML5-malen, veldig sjenerøst og fritt levert til utviklerfellesskapet på EGrappler.

Er jeg lydhør?

Er jeg lydhør? – en helt enkel, umiddelbar forhåndsvisning av nettstedet ditt når det gjelder hvordan det vil se ut på fire forskjellige enheter. Alle fire er iOS, og utvikleren forklarer valget sitt på nettsiden. Den tilbyr ingen kontroller eller valg, bare en veldig enkel og elegant skjerm. Vis vindusdimensjoner:

Desktop – 1600 x 992 piksler, reduseres etter skala (0,3181)

Bærbar datamaskin – 1280 x 802 piksler, reduseres i skala (0,277)

Nettbrett – 768 x 1024 piksler, reduseres etter skala (0,219)

Mobil – 320 x 480 piksler, reduseres etter skala (0,219)

For å sitere utvikleren: «Dette er ikke et testverktøy, det er veldig viktig å gjøre dette på ekte enheter. Men det er et verktøy for å ta raske skjermbilder (for meg) og gi en visuell mulighet til å "bore ned" i kundemøter hva du mente."

enhet positiv

deviceponsive ligner på Am I Responsive-nettstedet? en som viser nettstedet ditt enkelt og pent, men har ingen kontroller eller tilgjengelige alternativer når det gjelder enheter. Alle vises samtidig på én lang side. Den har en interessant egenskap - du kan endre overskriften ved å redigere bakgrunnsfargen og sette inn din egen logo, og deretter "skrive den ut". På denne måten kan du på en måte merke nettstedet ditt når du viser skjermbilder til klienten. Enheter og skjermstørrelser simulert på dette nettstedet:

Macbook - 1280 x 800

iPad (stående) - 768 x 1024

iPad (liggende) - 1024 x 768

Kindle (portrett) - 600 x 1024

Kindle (liggende) - 1024 x 600

iPhone (stående retning) - 320 x 480

iPhone (liggende) - 480 x 320

Galaxy (portrett) - 240 x 320

Galaxy(landskap) - 320 x 240

Som med de fleste lignende verktøy, vises rullefelt på små enheter. De vil ikke dukke opp på en ekte enhet, men for å kunne bla gjennom testvisningen på en ikke-berøringsenhet må du gjøre noen innrømmelser.

responsiv test

I likhet med enhetsponsive, viser responsive tester nettstedet ditt på flere enheter, men i stedet for å vise dem alle samtidig på én side, velger du hvilken enhet du vil se fra en enkel meny øverst på siden. Når jeg surfer på dette nettstedet på en mellomstor bærbar datamaskin, fant jeg ut at det å krympe siden fungerer bra, slik at du kan se hele nettstedet i vinduet på enheten som testes.

Her tilbys 13 forskjellige visningsvinduer, fra en stor skjerm stasjonær datamaskin til den såkalte "Crappy Android" (for å være ærlig har de også et alternativ kalt " Android er bedre"(Bedre Android).

Nok en gang snubler Firefox litt på denne siden. Legg merke til i skjermbildet - mellom den grønne overskriften og innholdsområdet med hvit bakgrunn - er det bare en blå linje der bildeglidebryteren skal vises.

responsive.is

Den er veldig lik de to foregående, og det eneste som skiller responsive.is fra dem er den jevne animasjonen av skjermen fra en enhet til den neste, samt et gjennomskinnelig overlegg som viser nettstedets eiendom som faller ut av visningsporten .

De eneste tilgjengelige enhetsalternativene her er automatiske, som fyller nettleservinduet ditt, og viser nettstedet slik du ville sett det hvis du gikk til det: Desktop; Nettbrett (liggende retning); Nettbrett (portrettretning); Smarttelefon (liggende retning) og smarttelefon (stående retning), pikseldimensjoner er ikke oppgitt.

Skjermforespørsler

Nok en gang skiller flere forskjellige funksjoner og alternativer Screenqueries fra andre nettsteder. Det er 14 telefoner og 12 nettbrett med et eget element for å bytte stående og liggende modus. Disse vises på et nummerert pikselrutenett, med dimensjonene vist nederst til høyre på testdisplayet. Kantene på skjermen kan dras slik at du kan teste egendefinerte størrelser. Dra eller klikk over testområdet, og bakgrunnen blir grå, med et mindre rotete utseende.

Interessant funksjon dette nettstedet - for flere enheter er det et "True view"-alternativ, som viser nettstedet ditt pakket inn i Chrome-nettleseren som er tilordnet denne enheten. Dessverre, og jeg er allerede vant til dette, kan ikke Firefox vise bildeglidebryteren til testsiden. Ikke bekymre deg, jeg foretrekker virkelig Firefox når det kommer til nettlesere, men heldigvis har vi alternativer.

Skjermflue

Screenfly øker virkelig brukervennlighetsfaktoren. Den tilbyr ni enheter større enn nettbrett, fra en 10-tommers bærbar PC til en 24-tommers stasjonær, fem nettbrett, ni smarttelefoner, tre TV-størrelser og et tilpasset skjermstørrelsesalternativ. Ethvert alternativ du velger kan roteres i stående eller liggende retning ved å bruke en separat kontroll i menyen. Du kan velge om du vil tillate rulling eller ikke og generere en delbar lenke med ett klikk på en knapp.

Nettstedet er proaktivt nyttig i måten det presenterer informasjon om pikselstørrelse. Hver enhet i menyen vises med navn og pikseldimensjoner, størrelsen på ditt eget nettleservindu vises nær øverst til høyre i vinduet, og dimensjonene til det valgte alternativet vises i bunnteksten under skjermen sammen med URL til nettstedet som testes. Denne lille funksjonen gjør det enklere å dokumentere skjermbilder og dele informasjon med klienter.

Alt det ovennevnte ville allerede ha gjort det til et ideelt verktøy, men Screenfly-utviklerne fant en mulighet til å gjøre det rett og slett i toppklasse og ga en proxy-servereiendom. Siterer fra nettstedet deres: "Screenfly kan bruke en proxy-server for å etterligne enheter mens du ser på nettstedet deres. Proxyen simulerer brukeragentstrengen til enhetene du velger, men ikke oppførselen til disse enhetene." Alle andre verktøy som dekkes her omhandler utelukkende CSS. Screenfly er den eneste som tillater testing basert på brukeragentstrengen.

Etter å ha testet på denne måten en side jeg opprettet med den eksisterende mobilversjon, jeg kan si at resultatene var veldig gode. Alt ble vist akkurat som jeg forventet, og funksjonene var testbare. Det må sies at testing av brukeragentstrenger har blitt tradisjonelle, men denne siden ble laget for lenge siden, og proxy-egenskapen viste seg å være et veldig nyttig tillegg til den.

Konklusjon

Så du kan se at det er mange ressurser tilgjengelig for å teste responsive nettsteder. De er forskjellige i unike egenskaper; hvilke nettsteder du bruker vil avhenge av dine personlige preferanser og krav, og jeg prøver å oppmuntre deg til å utforske og eksperimentere med dem. Jo mer vi utviklere har virkelig nyttige verktøy, desto bedre.

En nettbutikk må optimaliseres for mobile enheter. Dette problemet er løst ved hjelp av adaptiv design, som gjør at nettstedet kan vises riktig på enhver plattform. Implementering av responsiv design kommer imidlertid med et standard sett med fallgruver. La oss liste opp de 8 vanligste problemene som er typiske for nettbutikker.

Forsømmelse av besøksatferdsanalyse

Hastverket med å gå inn i mobilsegmentet tvinger forhandlere til å designe et nettsted uten å utføre seriøse analyser av besøkendes atferd. Analyse av besøkendes atferd er det viktigste trinnet i forberedelsen, som lar deg identifisere de mest populære mobile enhetene og optimalisere nettstedet for dem først. Analytics hjelper til med å bestemme den mest "populære" brukerhandlingen, for eksempel å forstørre et produktbilde; viser konverteringsfrekvensen til mobilbesøkende osv. Disse dataene vil gi innsikt i brukeratferdspreferanser og bidra til å møte forventningene til mobilpublikummet. Analyse mobiltrafikk det er nødvendig å gjennomføre systematisk og konsekvent implementere resultatene, fullføre og optimalisere nettstedet for å møte behovene til kundene.

Designe en skrivebordsbutikk

Vanligvis er skrivebordsversjonen av en nettbutikk redesignet for mobilskjermer, selv om det er mer logisk å ta den lille skjermen på en mobilenhet og deretter skalere den til skrivebordet. Forhandlere innser ofte ikke de tekniske problemene med å bringe et nettsted designet for en stasjonær datamaskin til størrelsen på en smarttelefon.
Starter design for mobilskjermer, fokuserer du på den mobile brukeropplevelsen. Som et resultat blir det lettere for deg å designe for begge kanalene: desktop og mobil.

Tester responsivt design

Testing av mobiloppsettet til en nettbutikk er et obligatorisk stadium av lanseringen, men mange eiere forsømmer det ofte og lanserer uten å teste. Som et resultat, på live-versjonen av nettstedet for mobile enheter, kan det oppstå feil selv under prosessen med å foreta et kjøp og legge inn en bestilling.

Manglene ved adaptiv design identifiseres enkelt ved foreløpig testing av en nettbutikk, men mange selgere har ikke ressurser til dette. For å redusere risikoen for å tape penger, test viktige brukerruter rundt nettstedet i hovednettleserne - Chrome, IE, Firefox, Safari og operativsystemer– Windows, Mac OS, Android, IOS på populære mobile enheter. Test hver gang du gjør endringer; tjenester som BrowserStack eller Viewport Resizer kan bidra til å redusere testtiden til flere timer.

Små elementer for mobilskjermer

I et forsøk på å få plass til mer plass på en smarttelefonskjerm sparer nettbutikkeiere på størrelsen på «call to action»-knappene. Ikke tving brukere til å zoome for å klikke på Kjøp-knappen og ikke plasser små elementer for nær hverandre, ellers vil brukerne velge å gå til et mer praktisk nettsted. Design grensesnitt med store navigasjonselementer og størrelser på handlingsfremmende knapper.

Langsom sideinnlastingshastighet

Mobilpublikum elsker raske nettsteder og minimale lastetider. Vurder komponentene i din mobilsider– bilder, knapper, tekst, skript – de må være optimalisert for mobile enheter. Google tar hensyn til sideinnlastingstid i sine SERP-er og rangerer mobilnettsteder og gir dem preferanse i toppen, slik at "lette" nettsteder får en ekstra seriøs fordel.

Del innhold i forskjellige faner, for eksempel kan en produktside bare inneholde et grunnleggende bilde, beskrivelse, pris og en "Kjøp"-knapp. Kundeanmeldelser og videoer kan plasseres på en egen fane og redusere "vekten" på hoveddelen av siden. I tillegg til innhold, optimaliser andre elementer som påvirker lastehastigheten - CSS-filer, bilder og skript, send bare de nødvendige dataene. Verktøy som reduserer størrelsen på ressursfiler og deres lastetid vil hjelpe deg med dette: Uglify eller JSCompress.

Trimming av innhold for mobilbrukere

Ofte skjuler utviklere noe av innholdet slik at lasting på mobile enheter går raskere. Men ofte blir ikke sidestørrelsen faktisk redusert og innholdet vises rett og slett ikke for brukeren. Butikken din skal kunne generere en side dynamisk, og redusere sidevekten og lastetidene for mobilbesøkende. I tillegg er det dårlig å gi mobilbrukere mindre innhold og påvirker forbrukeropplevelsen negativt. Vanligvis under kjøpsprosessen de bruker forskjellige enheter, gjør omtrent 90 % av nettkundene dette. Å begrense dem til responsive designmetoder er en stor feil.

Støtter bilder i bare én oppløsning

Et godt nettsted med responsivt design endrer automatisk oppløsningen på bilder avhengig av type enhet; tunge bilder øker lastetiden. Det er flere måter å automatisk justere bildestørrelsene for å passe bestemt enhet. "Fleksible" bilder (flytende bilder) er en CSS-basert metode som lar deg komprimere og strekke et bilde avhengig av bredden på elementet som inneholder det, eller et HTML5-element som lar deg laste inn et bilde med ønsket størrelse for hver type enhet.

«Ikke-responsive» e-poster

Det hender at alt er bra med selve nettstedet; responsiv design fungerer bra på stasjonære datamaskiner og mobile enheter. Men e-poster er ikke responsive, og mobilbrukere må slite med å sjekke bestillingsdetaljer eller bla gjennom en endeløs liste med anbefalte produkter for å komme til sine fullførte kjøp. E-post er et viktig kundekontaktpunkt, så integrer responsiv e-postdesign i mobilstrategien din. Design og test brevene og nyhetsbrevene dine; brevmaler bør være "lette" og kun inneholde viktig informasjon.

Med utviklingen av webteknologier øker også kravene til webutvikling. Webutviklere, layoutdesignere, eller som de kalles i dag frontend-utviklere, føler mest press.

I denne artikkelen vil vi snakke litt om adaptiv layout, siden dette "trikset" nå er veldig dyrt. Når det kommer til adaptiv layout, ser layoutdesignere på alle nivåer på kunder eller prosjektledere, for å si det mildt, med sinne, fordi de forstår hvor vanskelig det er.

Mange begynner å forveksle adaptiv layout med fleksibel layout; dette er en veldig vanlig feil hos nybegynnere layoutdesignere. Hva er forskjellen spør du?

La oss først, slik at det er klart for deg og så å si, sette alle prikkene og se på hvilke typer layout som finnes.

Det er 4 typer layout:

Fast layout

Gummi layout

Adaptiv layout

Responsive layout

La oss vurdere alle typer mer detaljert.

1. Fast layout

Blokker endrer ikke bredden. På skjermer med lav oppløsning vises et horisontalt rullefelt.

#temnyi, #svetlyi ( bredde: 440px; )

2. Gummi layout

Blokkene endrer bredden avhengig av størrelsen på nettleservinduet. Det kan ta maksimums- og minimumsverdier (max-width-egenskapen). Men du kan ikke gjøre 50 % fra 50 % til 100 % ettersom skjermen blir mindre.

#temnyi, #svetlyi ( bredde: 50 %; )

3. Adaptiv layout

Implementert ved hjelp av @media eller skript. Tilpasset for spesifikke kjente enheter (320, 768, 1024, etc.). Enhver endring skjer i rykk, etter å ha nådd et av de angitte nivåene. Absolutt egnet for

#temnyi, #svetlyi ( width: 430px; ) @media (max-width: 1220px) ( #temnyi, #svetlyi ( width: 380px; ) ) @media (max-width: 1120px) ( #temnyi, #svetlyi : 325px; ) ) @media (maks. bredde: 680px) ( #temnyi, #svetlyi ( bredde: 200px; ) )

4. Responsiv layout

Dette er en kombinasjon av flytende og adaptiv layout. Den vanskeligste å gjennomføre. Men resultatet er det mest akseptable. Det er trygt å si at siden vil tilpasse seg enhver enhet.

#temnyi, #svetlyi ( width: 50%; ) @media (max-width: 1006px) ( #temnyi, #svetlyi ( width: 100%; ) )

Så vi snakket om 4 typer nettstedlayout. Nå er tiden inne for vårt mirakeladaptive layoutskript. Jeg håper jeg ikke trenger å forklare noe, skriptet er ganske enkelt, vi sier bare at når du endrer, vil en blokk bli blandet et sted, og det er det. Selvfølgelig er dette også mulig gjennom CSS-stiler, men du må kjenne til alle metodene; noen ganger noen steder vil noen ikke fungere og noen vil være helt riktige.

Adaptivt layoutskript:

/* La oss lage en variabel som du kan sette monogest-klasser inn i, for praktisk bruk av dem i kode. Det vil si, her oppdager den dem en gang og det er det, og ikke før hver prøve! dette er en nyttig funksjon */ var my = ( window: $(window) ); /*Faktisk selve funksjonen*/ $(window).resize(function () ( /*En variabel som bestemmer bredden på vinduet og setter den i width-variabelen*/ var width = my.window.width( ); /*vindustransformasjonsbetingelse, dvs. en betingelse som utføres når vindusbredden når en viss størrelse */ 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") } });

Det er alt. Hvis du har spørsmål, skriv i kommentarfeltet, gå til