Kuinka testata responsiivista suunnittelua ilmaiseksi. Responsiivinen asettelu JavaScript-komentosarjan avulla Responsiivisen suunnittelun testaus
Hei rakkaat blogin lukijat. Ei ole yllättävää, että mukautuva suunnittelu on tulossa yhä suositummaksi Venäjän Internetissä. Ja tietysti taittosuunnittelijoiden on opittava sitä. Koska responsiivinen suunnittelu tulee pian lähes kaikille verkkosivuille, koska yhä useammat ihmiset käyttävät mobiililaitteita.
Ja haluaisin sanoa, että sivustoja, joissa on se, on paljon helpompi lukea tällaisilla laitteilla kuin ilman sitä.
Tänään haluan esitellä sinulle 5 erittäin hyödyllistä ja siistiä palvelua, joiden avulla voit tarkistaa verkkosivustosi mukautuvuuden.
Ja niin, mennään.
5 palvelua, joissa voit tarkistaa verkkosivustosi mukauttavuuden. www.responsivedesigntest.netHyvä palvelu sivustojen tarkistamiseen. Sekä tablet-laitteille että puhelimille on olemassa useita näyttötarkkuuksia.
mattkersley.comYksinkertainen palvelu Matt Kersleyn verkkosivuston tarkistamiseen. Kaikki suositut mobiililaitteiden resoluutiot ovat myös saatavilla.
Erittäin siisti palvelu, joka tarkistaa minkä tahansa sivuston. Pidin todella suunnittelusta ja toimivuudesta.
Todella kaunis ja toimiva palvelu. On jopa mahdollista tarkistaa, miltä sivusto näyttää televisiosta :-)
Kirjoittajalta: "Lopeta tämän selaimen koon muuttaminen, se poistetaan pian!" Kuinka usein kuulet tämän? No, okei, ei ehkä kovin usein, mutta jos kehität responsiivisia verkkosivustoja, tiedät mistä puhun: aina kun muokkaat DOM:ta tai CSS:ää, vedät selaimen reunaa edestakaisin ja testaat muutoksia. ja etsii epätarkkuuksia.
Yleensä suurin osa näistä yrityksistä on yritys matkia eri laitteiden näyttökokoja.
Jos teet yrityskehitystä, sinulla on todennäköisesti paljon yrityksen toimittamia laitteita testattavana. Työpaikallani meillä on iPadeja, iPhoneja, yksi tai kaksi muuta tablettia, kannettavaa tietokonetta ja pöytätietokonetta. Jos sinulla ei ole sitä ylellisyyttä, sinun on käytettävä sitä, mitä sinulla on käsillä.
Kotona minulla on kaksi erilaista kannettavaa tietokonetta, kaksi erilaista Android-laitteet: Kindle ja Nexus 7. Käytän näitä laitteita freelance-kehitykseni testaamiseen, mutta on selvää, että tämä ei ole tyhjentävä valikoima. Ei lainkaan iOS-laitteet, ja vaikka minua pidetään varhaisena käyttäjänä, en aio ostaa jokaista uutta puhelinta/tablettia/tablettia heti, kun se tulee myyntiin.
Mitä kehittäjän sitten pitäisi tehdä? Onneksi on olemassa kasvava määrä selainpohjaisia työkaluja, jotka simuloivat eri laitteiden näyttökokoja. Eri työkaluissa on tietysti erilaisia ominaisuuksia ja eri tehokkuustasoja. Katsomme joitain niistä täällä.
Testaustarkoituksiin otin ensimmäisen luomani todella responsiivisen verkkosivuston, PyjamasOnYourFeet.com. Se perustuu Brownie HTML5 -malliin, jota tarjotaan erittäin avokätisesti ja vapaasti EGrapplerin kehittäjäyhteisölle.
Olenko reagoiva?Olenko reagoiva? – täysin helppo, välitön esikatselu sivustostasi sen suhteen, miltä se näyttää neljällä eri laitteella. Kaikki neljä ovat iOS-laitteita, ja kehittäjä selittää valintansa verkkosivustolla. Se ei tarjoa mitään säätimiä tai valintoja, vain hyvin yksinkertaisen ja tyylikkään näytön. Katso ikkunan mitat:
Pöytäkone – 1600 x 992 pikseliä, asteikko pienennetty (0,3181)
Kannettava tietokone – 1280 x 802 pikseliä, pienentyvä mittakaava (0,277)
Tabletti – 768 x 1024 pikseliä, asteikko pienennetty (0,219)
Mobiili – 320 x 480 pikseliä, pienennetään asteikolla (0,219)
Lainatakseni kehittäjää: "Tämä ei ole testaustyökalu, on erittäin tärkeää tehdä tämä oikeilla laitteilla. Mutta se on työkalu nopeiden kuvakaappausten ottamiseen (minulle) ja visuaalisen mahdollisuuden "perustamiseen" asiakastapaamisissa, mitä tarkoitit."
deviceponsive on samanlainen kuin Am I Responsive -sivusto? joka näyttää sivustosi yksinkertaisesti ja siististi, mutta jolla ei ole ohjaimia tai käytettävissä olevia vaihtoehtoja laitteissa. Ne kaikki näkyvät samanaikaisesti yhdellä pitkällä sivulla. Siinä on mielenkiintoinen ominaisuus - voit muokata otsikkoa muokkaamalla sen taustaväriä ja lisäämällä oman logosi ja sitten "tulostaa sen". Tällä tavalla voit tietyssä mielessä brändätä sivustosi, kun näytät kuvakaappauksia asiakkaalle. Tällä sivustolla simuloidut laitteet ja näyttökoot:
Macbook - 1280 x 800
iPad (pysty) - 768 x 1024
iPad (vaaka) - 1024 x 768
Kindle (pysty) - 600 x 1024
Kindle (vaaka) - 1024 x 600
iPhone (pystysuunta) - 320 x 480
iPhone (vaaka) - 480 x 320
Galaxy (pysty) - 240 x 320
Galaxy (vaaka) - 320 x 240
Kuten useimmissa vastaavissa työkaluissa, vierityspalkit näkyvät pienissä laitteissa. Ne eivät näy todellisessa laitteessa, mutta jotta voit vierittää testinäkymää ei-kosketuslaitteella, sinun on tehtävä joitakin myönnytyksiä.
Kuten laiteponsiivinen, responsiivinen testi näyttää sivustosi useilla laitteilla, mutta sen sijaan, että näyttäisit ne kaikki kerralla yhdellä sivulla, valitset sivun yläreunassa olevasta yksinkertaisesta valikosta, mitä laitetta haluat tarkastella. Selaillessani tätä sivustoa keskikokoisella kannettavalla tietokoneella huomasin, että sivun pienentäminen toimii hyvin, jolloin voit nähdä koko sivuston testaamani laitteen ikkunan sisällä.
Täällä on tarjolla kolmetoista erilaista katseluikkunaa suurelta näytöltä pöytätietokone niin kutsuttuun "Crappy Androidiin" (rehellisesti sanottuna heillä on myös vaihtoehto nimeltä " Android on parempi"(Hienompi Android).
Taas kerran Firefox kompastelee hieman tällä sivustolla. Huomaa, että kuvakaappauksessa - vihreän otsikon ja valkoisella taustalla olevan sisältöalueen välissä - on vain sininen palkki, jossa kuvan liukusäätimen pitäisi näkyä.
Se on hyvin samanlainen kuin kaksi edellistä, ja ainoa asia, joka erottaa responsive.is:n niistä, on näytön sujuva animaatio laitteesta toiseen sekä läpikuultava peittokuva, joka näyttää sivuston kiinteistön putoavan ulos katseluportista. .
Ainoat käytettävissä olevat laitevaihtoehdot ovat automaattiset, jotka täyttävät selainikkunasi ja näyttävät sivuston sellaisena kuin sen näkisit, jos menisit siihen: Työpöytä; Tabletti (vaakasuuntainen); Tabletti (pystysuuntainen); Älypuhelin (vaakasuuntainen) ja älypuhelin (pystysuuntainen), pikselimittoja ei anneta.
Jälleen kerran useat erilaiset ominaisuudet ja vaihtoehdot erottavat Screenqueriesin muista sivustoista. Puhelin- ja 12 tablet-laitteita on 14 erillisellä elementillä pysty- ja vaakatilan vaihtamiseen. Nämä näytetään numeroidussa pikseliruudukossa, jonka mitat näkyvät testinäytön oikeassa alakulmassa. Näytön reunat ovat vedettävissä, joten voit testata mukautettuja kokoja. Vedä tai napsauta testausalueen yli, niin tausta muuttuu harmaaksi ja vähemmän sekavalta.
Mielenkiintoinen ominaisuus tämä sivusto - useille laitteille on "True view" -vaihtoehto, joka näyttää sivustosi käärittynä tälle laitteelle määritettyyn Chrome-selaimeen. Valitettavasti, ja olen jo tottunut tähän, Firefox ei pysty näyttämään testisivuston kuvan liukusäädintä. Älä huoli, pidän enemmän Firefoxista selaimissa, mutta onneksi meillä on vaihtoehtoja.
Screenfly todella lisää käytettävyyttä. Se tarjoaa yhdeksän tablettia suurempaa laitetta 10 tuuman kannettavasta tietokoneesta 24 tuuman pöytäkoneeseen, viisi tablettia, yhdeksän älypuhelinta, kolme televisiokokoa ja mukautetun näytön kokovaihtoehdon. Mitä tahansa valitsemaasi vaihtoehtoa voidaan kääntää pysty- tai vaakasuunnassa käyttämällä erillistä valikon säädintä. Voit valita, sallitko vierityksen vai et ja luoda jaettavan linkin yhdellä napin painalluksella.
Sivusto on ennakoivasti hyödyllinen tavassa, jolla se esittää pikselien kokotietoja. Jokainen valikon laite näytetään nimellä ja pikselimitoilla, oman selainikkunasi koko näkyy ikkunan oikeassa yläkulmassa ja valitun vaihtoehdon mitat näkyvät näytön alla alatunnisteessa yhdessä Testattavan sivuston URL-osoite. Tämä pieni ominaisuus helpottaa kuvakaappausten dokumentointia ja tietojen jakamista asiakkaiden kanssa.
Kaikki edellä mainitut olisivat tehneet siitä ihanteellisen työkalun, mutta Screenflyn kehittäjät löysivät mahdollisuuden tehdä siitä yksinkertaisesti huippuluokkaa ja tarjosivat välityspalvelimen. Lainaus heidän verkkosivustoltaan: "Screenfly voi käyttää välityspalvelinta esiintyäkseen laitteina, kun tarkastelet heidän verkkosivustoaan. Välityspalvelin simuloi valitsemiesi laitteiden käyttäjäagenttimerkkijonoa, mutta ei näiden laitteiden toimintaa." Kaikki muut tässä käsitellyt työkalut koskevat yksinomaan CSS:ää. Screenfly on ainoa, joka sallii testauksen käyttäjäagenttimerkkijonon perusteella.
Testattuani tällä tavalla yhden sivuston, jonka loin olemassa olevan kanssa mobiiliversio, voin sanoa, että tulokset olivat erittäin hyviä. Kaikki näytti juuri niin kuin odotin ja ominaisuudet olivat testattavissa. On sanottava, että käyttäjäagenttimerkkijonojen testaamisesta on tullut perinteistä, mutta tämä sivusto on tehty kauan sitten, ja välityspalvelinominaisuus osoittautui todella hyödylliseksi lisäykseksi siihen.
Joten näet, että responsiivisten verkkosivustojen testaamiseen on saatavilla runsaasti resursseja. Ne eroavat ainutlaatuisista ominaisuuksista; käyttämäsi sivustot riippuvat henkilökohtaisista mieltymyksistäsi ja vaatimuksistasi, ja yritän rohkaista sinua tutkimaan ja kokeilemaan niitä. Mitä enemmän meillä kehittäjillä on todella hyödyllisiä työkaluja, sitä parempi.
Verkkokauppa on optimoitava mobiililaitteille. Tämä ongelma on ratkaistu mukautuvalla suunnittelulla, jonka avulla sivusto voidaan näyttää oikein millä tahansa alustalla. Responsiivisen suunnittelun toteuttaminen sisältää kuitenkin vakiojoukon sudenkuoppia. Listataan 8 yleisintä verkkokauppasivustoille tyypillistä ongelmaa.
Vierailijoiden käyttäytymisanalytiikan laiminlyöminenKiire tulla mobiilisegmentille pakottaa vähittäiskauppiaat suunnittelemaan verkkosivuston suorittamatta vakavaa analytiikkaa kävijöiden käyttäytymisestä. Vierailijoiden käyttäytymisen analysointi on tärkein valmisteluvaihe, jonka avulla voit tunnistaa suosituimmat mobiililaitteet ja optimoida sivuston ensin niitä varten. Analytics auttaa määrittämään "suosituimman" käyttäjän toiminnon, esimerkiksi tuotekuvan suurentamisen; näyttää mobiilikävijöiden tulosprosentin jne. Nämä tiedot antavat käsityksen käyttäjien käyttäytymisasetuksista ja auttavat vastaamaan mobiiliyleisön odotuksiin. Analyysi mobiililiikenne on välttämätöntä toteuttaa järjestelmällisesti ja johdonmukaisesti tuloksia, viimeistelemällä ja optimoimalla sivusto vastaamaan asiakkaiden tarpeita.
Pöytäkaupan suunnitteluTyypillisesti verkkokaupan työpöytäversio suunnitellaan uudelleen mobiilinäyttöjä varten, vaikka onkin loogisempaa ottaa mobiililaitteen pieni näyttö ja skaalata se sitten työpöydälle. Jälleenmyyjät eivät usein ymmärrä teknisiä ongelmia, jotka liittyvät työpöydälle suunnitellun verkkosivuston saamiseen älypuhelimen kokoon. 
Aloitetaan suunnittelu mobiilinäytöt, keskityt mobiilikäyttökokemukseen. Tämän seurauksena sinun on helpompi suunnitella molemmille kanaville: pöytäkoneille ja mobiililaitteille.
Verkkokaupan mobiiliasettelun testaus on pakollinen julkaisuvaihe, mutta monet omistajat usein laiminlyövät sen ja lanseeraavat ilman testausta. Tämän seurauksena sivuston mobiililaitteille tarkoitetussa live-versiossa voi esiintyä virheitä jopa oston ja tilauksen tekemisen aikana.
Mukautuvan suunnittelun puutteet tunnistetaan helposti verkkokaupan ennakkotestauksella, mutta monilla myyjillä ei ole siihen resursseja. Vähentääksesi rahan menettämisen riskiä, testaa tärkeimmät käyttäjäreitit sivustolla tärkeimmillä selaimilla - Chrome, IE, Firefox, Safari ja käyttöjärjestelmät- Windows, Mac OS, Android, IOS suosituissa mobiililaitteet. Testaa joka kerta, kun teet muutoksia; palvelut, kuten BrowserStack tai Viewport Resizer, voivat auttaa lyhentämään testausaikaa useisiin tunteihin.
Pienet elementit mobiilinäyttöihinJotta älypuhelimen näytölle mahtuisi enemmän tilaa, verkkokauppojen omistajat säästävät "toimintakehotuspainikkeidensa" kokoon. Älä pakota käyttäjiä zoomaamaan napsauttamaan Osta-painiketta äläkä sijoita pieniä elementtejä liian lähelle toisiaan, sillä muuten käyttäjäsi päättävät siirtyä kätevämmälle sivustolle. Suunnittele käyttöliittymät suurilla navigointielementeillä ja toimintakehotuspainikkeilla.
Hidas sivun latausnopeusMobiiliyleisö rakastaa nopeita sivustoja ja vähäisiä latausaikoja. Arvioi komponenttisi mobiilisivut– kuvat, painikkeet, teksti, skriptit – ne on optimoitava mobiililaitteille. Google ottaa sivujen latausajan huomioon SERP:issään ja asettaa mobiilisivustot paremmuusjärjestykseen ja asettaa ne etusijalle, jotta "kevyet" sivustot saavat lisäetua.
Erottele sisältö eri välilehdille, esimerkiksi tuotesivulla voi olla vain peruskuva, kuvaus, hinta ja "Osta"-painike. Asiakkaiden arvostelut ja videot voidaan sijoittaa erilliseen välilehteen ja vähentää sivun pääosan ”painoa”. Sisällön lisäksi optimoi muut latausnopeuteen vaikuttavat elementit - CSS-tiedostot, kuvat ja skriptit, lähetä vain tarvittavat tiedot. Resurssitiedostojen kokoa ja niiden latausaikaa vähentävät työkalut auttavat sinua tässä: Uglify tai JSCompress.
Sisällön leikkaaminen mobiilikäyttäjilleUsein kehittäjät piilottavat osan sisällöstä, jotta mobiililaitteiden lataaminen on nopeampaa. Usein sivun kokoa ei kuitenkaan pienennetä eikä sisältöä yksinkertaisesti näytetä käyttäjälle. Kauppasi pitäisi pystyä luomaan sivu dynaamisesti, mikä lyhentää sivun painoa ja mobiilikävijöiden latausaikoja. Lisäksi sisällön vähentäminen mobiilikäyttäjille on huono asia ja vaikuttaa negatiivisesti kuluttajakokemukseen. Yleensä ostoprosessin aikana he käyttävät erilaisia laitteita, noin 90 % verkko-ostajista tekee tämän. Niiden rajoittaminen reagoiviin suunnittelumenetelmiin on suuri virhe.
Tukee kuvia vain yhdellä resoluutiollaHyvä verkkosivusto, jossa on responsiivinen muotoilu, muuttaa automaattisesti kuvien resoluutiota laitetyypistä riippuen; raskaat kuvat pidentävät latausaikaa. On useita tapoja säätää kuvien kokoa automaattisesti sopivaksi tietty laite. "Joustavat" kuvat (fluid images) ovat CSS-pohjainen menetelmä, jonka avulla voit pakata ja venyttää kuvaa sen sisältävän elementin leveyden mukaan, tai HTML5-elementti, jonka avulla voit ladata vaaditun kokoisen kuvan jokaiselle. laitteen tyyppi.
"Ei-responsiiviset" sähköpostitSattuu niin, että kaikki on kunnossa itse sivuston kanssa; responsiivinen suunnittelu toimii hyvin pöytäkoneilla ja mobiililaitteilla. Sähköpostit eivät kuitenkaan reagoi, ja mobiilikäyttäjien on ponnisteltava tarkistaakseen tilaustiedot tai selatakseen loputonta suositeltujen tuotteiden luetteloa päästäkseen valmiisiin ostoksiinsa. 
Sähköpostit ovat keskeinen asiakaskontakti, joten integroi reagoiva sähköpostisuunnittelu mobiilistrategiaasi. Suunnittele ja testaa kirjeitäsi ja uutiskirjeitäsi; kirjepohjien tulee olla "kevyitä" ja sisältää vain tärkeitä tietoja.
Verkkoteknologioiden kehittyessä myös verkkokehityksen vaatimukset kasvavat. Verkkokehittäjät, taittosuunnittelijat tai, kuten heitä nykyään kutsutaan käyttöliittymäkehittäjiksi, tuntevat eniten paineita.
Tässä artikkelissa puhumme hieman mukautuvasta asettelusta, koska tämä "temppu" on nyt erittäin kallis. Mitä tulee mukautuvaan ulkoasuun, kaiken tasoiset taittosuunnittelijat katsovat asiakkaita tai projektipäälliköitä lievästi sanottuna vihaisesti, koska he ymmärtävät, kuinka vaikeaa se on.
Monet ihmiset alkavat sekoittaa mukautuvaa ulkoasua joustavaan asetteluun; tämä on aloittelevien taittosuunnittelijoiden hyvin yleinen virhe. Mitä eroa kysyt?
Laitetaan ensin kaikki pisteet ja katsotaan, millaisia asettelutyyppejä on olemassa.
Asetteluja on 4 tyyppiä:
Tarkastellaan kaikkia tyyppejä yksityiskohtaisemmin.
1. Kiinteä asettelu
Lohkot eivät muuta niiden leveyttä. Matalaresoluutioisissa näytöissä tulee näkyviin vaakasuuntainen vierityspalkki.
#temnyi, #svetlyi ( leveys: 440px; )
2. Kumirakenne
Lohkojen leveys muuttuu selainikkunan koon mukaan. Se voi ottaa enimmäis- ja vähimmäisarvot (max-width-ominaisuus). Mutta et voi tehdä 50 %:sta 50 %:sta 100 %:iin, kun näyttö pienenee.
#temnyi, #svetlyi (leveys: 50%; )
3. Mukautuva asettelu
Toteutettu @medialla tai komentosarjoilla. Räätälöity tietyille tunnetuille laitteille (320, 768, 1024 jne.). Kaikki muutokset tapahtuvat nykäisyissä sen jälkeen, kun jokin määritetyistä tasoista on saavutettu. Ehdottomasti sopiva
#temnyi, #svetlyi (leveys: 430px; ) @media (max-leveys: 1220px) ( #temnyi, #svetlyi (leveys: 380px; ) ) @media (max-leveys: 1120px) ( #temnyi, #svetlyi (leveys) : 325px; ) ) @media (max-leveys: 680px) ( #temnyi, #svetlyi (leveys: 200px; ) )
4. Responsiivinen asettelu
Tämä on sulavan ja mukautuvan asettelun yhdistelmä. Vaikein toteuttaa. Mutta tulos on hyväksyttävin. On turvallista sanoa, että sivusto mukautuu mihin tahansa laitteeseen.
#temnyi, #svetlyi (leveys: 50%; ) @media (max-leveys: 1006px) ( #temnyi, #svetlyi (leveys: 100%; ) )
Puhuimme siis neljästä verkkosivuston ulkoasusta. Nyt on tullut aika mukautuvalle asettelullemme. Toivottavasti minun ei tarvitse selittää mitään, käsikirjoitus on melko yksinkertainen, sanomme vain, että kun muutat, jokin lohko sekoitetaan jonnekin ja siinä se. Tietysti tämä on mahdollista myös CSS-tyyleillä, mutta sinun on tiedettävä kaikki menetelmät; joskus joissakin paikoissa jotkut eivät toimi ja jotkut ovat juuri sopivia.
Mukautuva asetteluskripti:
/* Luodaan muuttuja, johon voit laittaa monogest-luokkia, jotta niitä voidaan käyttää kätevästi koodissa. Eli tässä se havaitsee ne kerran ja siinä se, eikä ennen jokaista näytettä! tämä on hyödyllinen ominaisuus */ var my = ( ikkuna: $(window) ); /*Oikeastaan itse funktio*/ $(window).resize(function () ( /*Muuttuja, joka määrittää ikkunan leveyden ja laittaa sen leveysmuuttujaan*/ var width = my.window.width( ); /*ikkunan muunnosehto eli ehto, joka suoritetaan, kun ikkunan leveys saavuttaa tietyn koon */ 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") } });
Siinä kaikki. Jos sinulla on kysyttävää, kirjoita kommentteihin, mene osoitteeseen
