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.netEn god tjeneste for å sjekke nettsteder. Det er mange skjermoppløsninger for både nettbrett og telefoner.
mattkersley.comEn enkel tjeneste for å sjekke en nettside fra Matt Kersley. Alle populære mobilenhetsoppløsninger er også tilgjengelige.
En veldig kul tjeneste som vil sjekke hvilken som helst side. Jeg likte designen, så vel som funksjonaliteten.
Veldig vakker og funksjonell service. Det er til og med mulig å sjekke hvordan siden vil se ut på TV :-)
Hvordan teste en responsiv nettside? Hvilke problemer oppstår når man tester nettsider på forskjellige enheter? Hvordan er det å teste et nettsted på en stasjonær skjerm forskjellig fra å teste på en håndholdt enhet som en mobiltelefon? Hvilke verktøy kan vi bruke for å teste responsive nettsteder? Vår
Hva er responsiv webdesign?Responsivt webdesign (RWD) er en definisjon av en tilnærming til webdesign som tar sikte på å lage nettsider med mål om å gi en optimal opplevelse - lett å lese og navigere med minimal størrelse, panorering og rulling på bredt utvalg enheter (fra skrivebordet dataskjermer til mobiltelefoner).
Et nettsted bygget med RWD tilpasser oppsettet til visningsmiljøet ved å bruke flytende, proporsjonale rutenett, responsive bilder og CSS3-mediespørringer på følgende måter:
- Det flytende rutenettkonseptet krever at sideelementstørrelser er i relative enheter, for eksempel prosenter, i stedet for absolutte enheter, for eksempel piksler eller punkter.
- Fleksible bilder blir også evaluert i relative enheter for å forhindre at de gjengis utenfor det inneholdende elementet.
- Mediespørringer lar en side bruke forskjellige CSS-stilingsregler basert på egenskapene til enheten som nettstedet vises på, oftest nettleserbredden.
Mange bruker nå mobiltelefoner eller nettbrett for å få tilgang til nettsider, så det er viktig å teste responsivt webdesign fordi brukeropplevelsen på mobile enheter er veldig forskjellig fra stasjonære datamaskiner.
Den kanskje vanskeligste delen av å teste et kompatibelt nettsted er at nettstedet fungerer som forventet på flere enheter og plattformer, men faktisk testing på alle mobile enheter på markedet er upraktisk for de fleste av oss.
Mange testere som begynner å teste responsiv webdesign, starter vanligvis med å endre størrelsen på nettleservinduet for å passe størrelsen på visningsporten mobiltelefon, nettbrett og skrivebord. Denne metoden er generelt egnet for å raskt visuelt inspisere et nettsted på forskjellige visningsporter og hjelper oss med å identifisere underliggende visningsproblemer når vi reduserer eller forstørrer nettleservinduet.
Testing på ekte mobile enheter er imidlertid en helt annen opplevelse.
Bruker emulatorer
En mobilemulator er en nettbasert simulering av hvordan nettsteder og applikasjoner vil vises og fungere i et mobilmiljø.
Selv om emulatorer kanskje ikke gir deg de eksakte testverktøyene du trenger, er de fortsatt en kostnadseffektiv løsning for å teste et nettsteds funksjonalitet på høyt nivå.
Google DevTools
I DevTools Google Chrome Det er en funksjon kalt enhetsmodus som er lastet med nyttige verktøy for å teste og feilsøke responsive prosjekter.
I motsetning til de fleste andre responsive designtestverktøy som ganske enkelt endrer størrelsen på skjermen, emulerer dette verktøyet faktisk opplevelsen av mobilenheter, spesielt berøringsinteraksjoner som å trykke og rulle, rett i nettleseren din.
Noen generelle regler testing av responsiv webdesign:
Sjekk plasseringen til modulene når de krymper og utvider nettleservinduet eller når du roterer mobilenheten din. Ulike moduler kan forsvinne når du bytter fra stasjonær datamaskin på mobil, men sørg for at du vet nøyaktig hvilke moduler som skal vises i hvilken visningsport.
Avslutningsvis
Finn ut hvordan nettapplikasjonen din brukes. Du kan få enormt beløp informasjon fra Google Analytics-verktøyet for å se hvilke enheter kundene dine bruker for å få tilgang til nettstedet ditt. Bruk automatiserte verktøy og emulatorer for å utføre grunnleggende kontroller og funksjonstesting på høyt nivå, og kombiner dette med faktisk manuell enhetstesting.
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. 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:
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 en maksimums- og minimumsverdi (max-width-egenskap). 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 nettstedslayout. Nå er tiden inne for vårt mirakeladaptive layoutskript. Jeg håper ingenting blir forklart; vi sier ganske enkelt at når en endring skjer, vil en eller annen blokk bli blandet et sted, og det er alt. Selvfølgelig er dette mulig gjennom CSS-stiler, men du trenger å kjenne 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.< 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 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 = ( vindu: $(vindu) );
/*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()
Det er det. Hvis du har spørsmål, skriv i kommentarfeltet, gå til
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.: 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."
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 kommer til enheter. Alle vises samtidig på én lang side. Den har en interessant funksjon - 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. I ekte enhet de vil ikke dukke opp, men du må gjøre noen innrømmelser for å kunne rulle testvisningen på en ikke-berøringsenhet.
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 innenfor vinduet på enheten jeg tester.
Det er tretten forskjellige visningsvinduer tilgjengelig her, fra stor skjerm stasjonær datamaskin til den såkalte "Crappy Android" (for å være rettferdig 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.
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 klikket på det: Desktop; Nettbrett (liggende retning); Nettbrett (portrettretning); Smarttelefon (liggende retning) og smarttelefon (stående retning), pikseldimensjoner er ikke oppgitt.
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 mellom portrett og landskapsorientering. 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 av dette nettstedet – for flere enheter er det et «True view»-alternativ som viser nettstedet ditt pakket inn i den riktige visningen for den enheten chrome nettleser. Dessverre, og jeg er allerede vant til dette, klarer ikke Firefox å vise bildeglidebryteren til testsiden. Ikke bekymre deg, jeg foretrekker virkelig Firefox når det kommer til nettlesere, men heldigvis har vi alternativer.
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 ved hjelp av individuelle element menykontroller. 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 gjort det til et ideelt verktøy, men Screenfly-utviklerne fant en mulighet til å gjøre det enkelt overklasse og ga proxy-egenskapen. 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 en side på denne måten opprettet jeg 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.
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, jo bedre.
Rammer, for eksempel eller, som i stor grad letter og øker hastigheten på sidelayout.
innebærer utmerket visning av en nettside på alle enheter og skjermutvidelser. Sannsynligvis har ikke alle layoutdesignere et komplett sett med enheter med alle mulige skjermutvidelser for å teste layouten deres. Dette er ikke overraskende, for teknologi er ikke billig i disse dager.
Så. Å kjøpe fjell av mobiltelefoner og nettbrett er ikke et alternativ - vi går blakk. Hva skal jeg gjøre? For disse oppgavene er det utviklet tjenester for testing av adaptive nettsider. Prinsippet for deres operasjon er veldig enkelt. Oftest er det en ramme av en viss størrelse der siden åpnes. Effekten er omtrent den samme som når du ser på mobil enhet. Jeg vil merke meg at tjenesten ikke alltid viser visningen av siden på en telefon eller nettbrett nøyaktig. Ved koding bør du teste å bruke tjenester, men etter fullføring, hvis mulig, teste på de vanligste enhetene.
Så. For din oppmerksomhet beste verktøy for testing av adaptive nettsteder.
Et verktøy for å teste responsive nettsteder fra Adobe. For å bruke den må du installere den på datamaskinen din.
Programmet lar deg synkronisere enhetene dine via WIFI og se nettstedet slik det vil bli vist på enheten din. På for øyeblikket Enheter med følgende operativsystemer støttes: iOS, Android, Kindle Fire.