Ilmaisia ​​resursseja web-sivun ulkoasun testaamiseen eri resoluutioilla. Kuinka testata responsiivista suunnittelua

Lopeta selainikkunan koon muuttaminen, lopeta sen raiskaaminen! Lyön vetoa, että olet kuullut tämän useammin kuin kerran. Okei, ehkä et ole kuullut siitä. Mutta jos kehität responsiivisia verkkosivustoja ammattimaisesti, tiedät mitä tarkoitan: mitä tahansa DOM-muutosta tai CSS-muokkausta, ja alat taas vetää selaimen reunaa edestakaisin, testata muutoksia ja nähdä, onko jokin rikki.

Liikkeiden tarkoitus on matkia eri laitteiden näyttöjä.

Yritysympäristössä sinulla on usein erilaisia ​​yrityksen tarjoamia gadgeteja testausta varten. Työssäni minulla on käytössäni iPad, iPod, muut tabletit, kannettavat tietokoneet ja pöytätietokoneiden näytöt. Jos sinulla ei ole sitä ylellisyyttä, sinun on käytettävä sitä, mikä on käsillä.

Onneksi on olemassa vaikuttava joukko online-työkaluja, jotka simuloivat erikokoisia laitteita. Tietenkin jokaisella niistä on omat etunsa ja haittansa, tarkastelemme useita näistä työkaluista.

Testaukseen valitsin todella responsiivisen sivuston PyjamasOnYourFeet.com, joka on rakennettu EGrapplerin maksutta tarjoaman HTML5-mallin pohjalta.

Olenko reagoiva?

Saatavilla olevat koot:

• pöytätietokoneen näyttö - 1600 x 992px;
• kannettava tietokone - 1280 x 802 px;
• tabletti - 768 x 1024 pikseliä;
• matkapuhelin - 320 x 480 pikseliä.

Siinä on kaksi mukavaa ominaisuutta: mahdollisuus vetää laitteita näytölläsi ja mahdollisuus jakaa linkki sivustotestiin.

laite positiivinen

Laitteet ja käytettävissä olevat näytön resoluutiot.

• Macbook - 1280 x 800
• iPad pystykuva - 768 x 1024
• iPad muotokuva - 1024 x 768
• Kindle muotokuva - 600 x 1024
• Kindle vaaka - 1024 x 600
• iPhone muotokuva - 320 x 480
• iPhone vaaka - 480 x 320
• Galaxy muotokuva - 240 x 320
• Galaxy-maisema - 320 x 240

reagoiva testi

Sivustolla on saatavilla 30 eri resoluutiota valtavasta pöytätietokoneen näytöstä niin sanottuun "hullu androidiin" (rehellisyyden nimissä on olemassa myös tavallinen android).

Mitä tulee Firefox-selain, se ei toimi oikein tämän sivuston kanssa. Huomaa, että kuvakaappauksessa ei näy liukusäädintä vihreän otsikon ja valkoisen taustan sisältöalueen välillä.

reagoiva.is

Saatavilla olevat laitevaihtoehdot ovat automaattinen (tapa, jolla näet sivuston), pöytätietokone, tabletti vaaka- ja pystyasennossa, älypuhelin pysty- ja vaaka-asennossa. Valitettavasti ei ole mahdollista asettaa mielivaltaisia ​​kokoja px.

Näytöskyselyt

Tämän sivuston mielenkiintoinen ominaisuus on, että useille laitteille on olemassa "Trueview"-vaihtoehto, joka näyttää sivustosi laitteen alkuperäisessä selaimessa.

Valitettavasti Firefox ei myöskään pystynyt näyttämään liukusäädintä tässä. Ei tarvitse syyttää minua, Firefox on suosikkiselaimeni, mutta niin se on.

Screenfly

Jokaisen laitteen näytön koko näkyy valikossa kuvapisteinä, ja selainikkunan todellinen koko näkyy myös oikeassa yläkulmassa.

Kaikki edellä mainitut edut antavat meille mahdollisuuden vaatia johtajuutta, ellei yhden asian vuoksi (lainaus kehittäjältä): "Screenfly voi käyttää välityspalvelinta matkimaan laitteita katsellessasi sivustoasi. Välityspalvelin jäljittelee käyttäjäagenttimerkkijonoa, mutta ei näiden laitteiden toimintaa." Screenfly on luettelon ainoa palvelu, joka sallii testauksen käyttäjäagenttimerkkijonon perusteella.

Käytätkö esiteltyjä työkaluja käytännössä? Jaa responsiivisten verkkosivustojen kehittämisen salaisuutesi kommenteissa.

P.S. Ilmoita käännösvirheistä PM:llä.

Nykyään ei enää tarvitse vakuuttaa ketään sivuston mobiiliversion tarpeesta. Loppujen lopuksi joka päivä vierailijoita älypuhelimista ja tableteista tulee yhä enemmän. Tätä kirjoittaessani noin 20 % blogini kävijöistä käyttää mobiililaitetta selaamiseen. Eli joka viides vierailee verkkosivuillani puhelimella tai tabletilla.

Muutama vuosi sitten en edes ajatellut tällaisia ​​kävijöitä, mutta kun heidän lukumääränsä ylitti 10% kokonaismäärästä, aloin käyttää mukautuvaa asettelua. Tämä mahdollisti sisällön oikein näyttämisen mobiililaitteissa ja lisäsi sekä kävijöiden että hakukoneiden uskollisuutta sivustoa kohtaan.

Verkkosivuston mobiiliversio ja responsiivinen suunnittelu eivät ole sama asia. Tässä artikkelissa puhumme adaptiivisen asettelun testaamisesta, kun sivuston ulkoasu muuttuu vierailijan laitteen näytön resoluution mukaan.

Varmistaaksesi, että sivustosi näkyy oikein mobiililaitteissa, sinun on tarkistettava se, ja tähän on olemassa useita hyödyllisiä palveluita ja työkaluja.

Mukautuvan asettelun nopea tarkistus

Suosittu Internet-selain (selain) Mozilla Firefox varustettu sisäänrakennetuilla työkaluilla verkkosivujen suunnittelun sopivuuden tarkistamiseksi mobiililaitteissa näytettäväksi. Käytä sitä siirtymällä kohtaan "Valikko" - "Kehitys" - "Adaptiivinen suunnittelu". Tai paina kolmea näppäimistön näppäintä samanaikaisesti ++[M]

Sinun pitäisi nähdä jotain tämän kaltaista:

Muuttamalla näytön resoluutiota ja suuntaa voit tarkistaa, kuinka sivustosi näytetään mobiilikävijöille.

Google-selain Kromi Siinä on myös sisäänrakennettu tuki sivuston suunnittelun mukauttavuuden tarkistamiseen. Voit tehdä tämän siirtymällä valikkoon, valitsemalla "Lisätyökalut" ja sitten "Kehittäjätyökalut" (tai painamalla ).

Napsauta sen jälkeen responsiivisen suunnittelun kuvaketta (tai paina samanaikaisesti näppäimistöäsi ++[M]):

Näytön keskellä näet, kuinka sivustosi näkyy mobiililaitteiden näytöillä:

Mobiilisuunnittelun SEO-testaus

Kuten tiedät, kahdella maailman hakujohtajalla Googlella ja Yandexillä on oma säädytön mielipide siitä, miltä verkkosivuston pitäisi näyttää mobiililaitteiden näytöillä. Ja jos sivustoa pidetään epämukavana mobiilikävijöille, se alennetaan hakutuloksissa. Joten hakukoneoptimoinnin näkökulmasta, jos et halua menettää mobiilikävijöitä, sinun ei tarvitse pelkästään olla responsiivinen suunnittelu, vaan myös hakukoneiden on otettava se sellaisenaan eli mobiiliystävällisenä.

Tarkista sopeutumiskyky Google-palvelun avulla menemällä seuraavaan osoitteeseen ja kirjoittamalla sivustosi nimi: https://www.google.com/webmasters/tools/mobile-friendly/.

Blogini tarkistamisen tulos näyttää tältä:

Yandexin avulla tarkistaminen on hieman monimutkaisempaa, sinun on rekisteröidyttävä Yandex.Webmaster-palveluun ja käytettävä käyttöliittymän beta-versiota:

Online-palvelut sopeutuvuuden testaamiseen

Näiden palveluiden päätehtävänä on esitellä (näyttää), miltä sivustosi tulee näyttämään mobiililaitteella. On olemassa monia sivustoja, joissa on tällaisia ​​toimintoja. Annan niistä vain muutaman. Useimmissa tapauksissa ne kopioivat FireFoxin ja Chromen sisäänrakennetut toiminnot.

Google Resize

Aloitan uudelleen Googlesta, jolla on oma palvelunsa sopeutumiskyvyn osoittamiseen: http://design.google.com/resizer/#

Quirktools screenfly

Toinen mukava palvelu on http://quirktools.com/screenfly/. Se näyttää sinulle, miltä verkkosivustosi voi näyttää jopa televisiossa!

Symby.ru adaptest

No, jotta en loukkaisi "kotimaista valmistajaa", annan esimerkin toisesta sivustosta: http://symby.ru/adaptest/. Yhdellä sivulla näet useita näkymiä eri resoluutioilla.

Sivuston mobiiliversion nopeus

Kun olet varma, että sivustosi on responsiivinen ja näkyy oikein useimmissa laitteissa, sinun tulee tarkistaa sen nopeus. Jälleen mobiilivierailijoiden suhteen.

PageSpeed ​​​​Insights

Google, kuten aina, on edelläkävijä: https://developers.google.com/speed/pagespeed/insights/. Tämä palvelu näyttää, miltä sivusto näyttää puhelimen näytöllä ja antaa suosituksia koodin optimoimiseksi mobiililaitteiden latausnopeuden lisäämiseksi.

WebPageTest

Ja lopuksi annan esimerkin palvelusta, joka ei vain näytä, miltä sivusto näyttää mobiililaitteella, vaan myös sen nopeuden: http://www.webpagetest.org/

johtopäätöksiä

Mielestäni jokapäiväisessä työssä sivuston ulkoasua tehtäessä on helpompi käyttää FireFox- ja Chrome-selaimien sisäänrakennettuja ominaisuuksia. Tämän jälkeen sinun on tietysti tarkistettava hakukoneiden uskollisuus suunnittelullesi. Ja vasta sitten sielusi rauhoittamiseksi tai esittelyksi voit käyttää verkkopalveluita.

Tervehdys, satunnaiset vierailijat ja blogisivuston säännölliset lukijat!

Tämän sivuston olemassaolon aikana vaihdoin mallia useita kertoja ja loin jopa omani tyhjästä.
Yksi tärkeimmistä tehtävistä uutta mallia valittaessa on sivuston mukautuva asettelu kaikille näytön resoluutioille.

Artikkelin lyhyt kuvaus:

Edellisessä artikkelissa kirjoitin jo siitä, miksi sitä tarvitaan. Mutta kuinka saavuttaa tämä sopeutumiskyky?

On olemassa erilaisia ​​tapoja tehdä tämä. Jotkut käyttävät JavaScriptiä, jotkut jotain muuta. Mutta uskon, että yksinkertaisin ja oikea tapa on reagoida CSS:n avulla.

Kuinka tehdä responsiivinen sivuston ulkoasu

Ensinnäkin jos aiot luoda responsiivisen verkkosivuston ulkoasun tunnisteiden väliin liitä seuraava koodi:

Mikä typerys minä olin, kun en tehnyt tätä heti, kun yritin tehdä mukautuvaa verkkosivuston ulkoasua!!!
Mobiiliselaimien ongelmana on niiden verkkosivustojen asettelun skaalautuminen, jopa mukautuvien.

Kuvittele, piirrän mallin, kirjoitan sitten kaikki tarvittavat tyylit ja kyselyt muistiin, tarkistan sivuston mukautuvuuden eri resoluutioilla. Kaikki näyttää olevan hyvin! Mutta kun avaan blogini älypuhelimellani, huomaan, että sivusto on yksinkertaisesti kutistunut. Se ei mukautunut mobiililaitteeseen, vaan pienensi vain fontin kokoa, kuvia jne.

Kuinka niin? Aloin tarkistaa kaikki tyylit uudelleen nähdäkseni olinko kirjoittanut luokat oikein, ja lopulta päädyin siihen pisteeseen, että tarkistin selainikkunan leveyden px:nä Javascriptin avulla. Olin järkyttynyt. Kun tarkastelin kannettavaa tietokonetta, sain tuloksen 1024px, ja sain suunnilleen saman tuloksen avattaessa sivustoa älypuhelimella!

Mutta näin ei voi olla!

Osoittautuu, jos et kirjoita yllä osoittamaani koodia, mobiiliselain ei ymmärrä, että sivusto on reagoiva ja yrittää vain pienentää verkkosivuston sivua niin, että se mahtuu pieneen matkapuhelimen näyttöön.

Tyhmyyteni ja epäpätevyytteni vuoksi menetin paljon aikaa. Mutta nyt muistan sen ikuisesti))).

Mukautuva asettelu CSS-mediakyselyt

Jotta se reagoisi CSS:n avulla, sinun on käytettävä mediakyselyitä.

Miten on, että? Kyllä, hyvin yksinkertaista. CSS-tiedostoon sinun on kirjoitettava kyselyitä, kuten:

@medianäyttö ja (min-leveys: 1440px) ja (max-leveys: 1599px)( )

Tämä koodi tarkoittaa, että "( )" väliin suljetut tyylit toimivat näytöissä, joiden vähimmäisleveys on 1440 ja enintään 1599px.

Eli ne sivustoelementtien tyylit, joita on mukautettava näytön resoluution mukaan, on kirjoitettava erikseen kullekin mahdolliselle näytön leveydelle.

Mukautuvan asettelun tärkeimmät näytön resoluutiot

• 320 pikseliä- Mobiililaitteet (pystysuuntainen);
• 480 pikseliä- Mobiililaitteet (vaakasuunnassa);
• 600 pikseliä- Pienet tabletit;
• 768 pikseliä- Tabletit (pystysuuntainen);
• 1024 pikseliä- Tabletit (vaakasuunnassa)/netbookit;
• 1280 px tai enemmän- PC.

Näihin resoluutioihin sinun on keskityttävä ja kiinnitettävä erityistä huomiota, kun teet mukautuvia asetteluja. Nämä ovat yleisimmät näytön resoluutiotyypit.

bootstrap responsiivinen muotoilu

On erittäin kätevää käyttää bootstrapia mukautuvan asettelun luomiseen. Mukavuus on, että kaikki tyylit lohkojen, painikkeiden, taulukoiden jne. mukauttamiseen. ovat jo rekisteröityneet bootstpapiin. Sinun tarvitsee vain selvittää, mikä luokka määrittää millekin elementille.

Aloita lataamalla uusin bootstrap-versio ja yhdistämällä se sivustoosi. Huomaa, että tyylien ja komentosarjojen yhdistämisellä WordPressiin on omat ominaisuutensa.

Bootstrapin asettelu eroaa siinä, että lohkon tai näytön leveys on jaettu 12 yhtä suureen osaan. Ja määrittämällä tietyn luokan lohkolle, voit asettaa lohkon leveyden yhtä suureksi kuin vaadittu määrä osia.

Tämän mallin avulla voit esimerkiksi varata yhden leveän lohkon 8 osaa leveälle sisällölle ja yhden kapean lohkon 4 osaa leveälle sivupalkille:

Lohkojen leveys lasketaan automaattisesti näytön leveydestä riippuen. Ja mobiililaitteella katsottuna nämä lohkot siirtyvät toistensa alle.

Voit myös säätää lohkon etäisyyttä reunasta jälleen haluttuun osien määrään. Esimerkiksi tämä malli:

Luodaan 10 osaa leveä lohko, jonka vasen sisennys on 1 osa näyttöä.

Jos katsot sitä, bootstrapin kanssa työskentely tekee työstä erittäin nopeaa. Lisäksi nämä tyylit toimivat varmasti oikein, eikä sivustolla ole mitään vinoa.

Tulevaisuudessa aion julkaista useita oppitunteja bootsrapin kanssa työskentelystä. Siksi suosittelen, että et missaa tätä hetkeä.

Verkkosivuston mukautuvuuden tarkistaminen

Mutta herää kysymys: kuinka tarkistaa verkkosivuston mukautuvuus? Nyt olet kirjoittanut mediakyselyt CSS:ssä, yhdistänyt bootstrapin ja käyttänyt tarvittavia luokkia. Kuinka voit tarkistaa, että sivusto mukautuu oikein kaikilla näytön resoluutioilla?

Erittäin tarkka ja mikä tärkeintä ilmainen palvelu, joka ansaitsee kunnioituksen ja kiitoksen verkkovastaavilta ja ulkoasun suunnittelijoilta, jotka käsittelevät mukautuvaa verkkosivuston ulkoasua.

No, mitä pidät artikkelista? Kaikki kunnossa? Jos ei, kirjoita kommentteihin, niin selvitetään se yhdessä.

Kyllä, responsiivisen verkkosivuston suunnittelun tekemiseksi sinun on työskenneltävä kovasti. Mutta nämä ponnistelut palkitaan suotuisalla asenteella sivustoasi hakukoneilta, ja mikä tärkeintä, sivustosi vierailijoilta.

Jouduin tarkastelemaan sivustoa eri näyttötarkkuuksilla. Älypuhelimien kehityksen ja monien eri näyttökokojen myötä on hyödyllistä nähdä, miltä sivustosi näyttää tietyllä laitteella. Tämän ongelman ratkaisemiseksi on useita vaihtoehtoja. Jos haluat tarkastella sivustoa tietokoneellasi pienemmällä resoluutiolla kuin näyttösi, mene näytön asetuksiin ja valitse haluamasi arvo.

On myös mahdollisuus käyttää selainlaajennuksia, esimerkiksi Web Developer for Firefox, joka on olemassa myös Google Chromelle. Muuta kokoa -vaihtoehdon avulla voit muuttaa selaimen kokoa haluamaasi kokoon.

Nämä menetelmät ovat yksinkertaisimpia, mutta nyt ne eivät enää riitä - sivuston katseleminen suuremmilla näyttötarkkuuksilla tai matkapuhelimella sen näyttäminen ei toimi. Muistan, että katselin äskettäin projektia, joka sallisi sivustojen testaamisen kaikissa selaimissa. Se on erittäin hyödyllinen testattaessa selainasettelua eri käyttöjärjestelmissä ja selaimissa, mutta siellä ei ollut paljon näytön resoluutioita. Lisäksi sinun piti rekisteröityä käyttääksesi sitä. Tänään tarkastelen paria yksinkertaisempaa ja helpompaa palvelua verkkosivuston nopeaan katseluun eri näyttötarkkuuksilla.

Palvelut verkkosivuston katseluun eri näyttötarkkuuksilla

Joissakin projekteissa voit muuttaa vain näytön resoluutiota, kun taas toisissa on lisätoimintoja. En tarkastele niitä yksityiskohtaisesti, mainitsen ne vain arvostelussa, ehkä löydät niistä hyödyllisiä.

Muuten, quirktools.com-verkkotunnus kätkee pari mielenkiintoista yksinkertaista palvelua:

• Smaps - sivustokarttojen tai yksinkertaisesti hierarkkisen kaavion luominen.
• Wires on hieno asia, jonka avulla voit luoda verkkosivujen asetteluja käyttämällä erilaisia ​​​​toimintolohkoja (teksti, välilehdet, lomakkeet, painikkeet jne.)

Yksinkertaisin palvelu eri näyttötarkkuuksien katseluun. Siellä on myös luettelo suosituimmista laitteista, joista sinun on valittava omasi.

Projektilla on erittäin kaunis muotoilu.

Tämä palvelu on samanlainen kuin CrossBrowserTesting, koska sen avulla voit lisäksi arvioida sivustoasi eri selaimissa ja käyttöjärjestelmissä. Lisäksi se vaatii rekisteröinnin ja siinä on maksullisia toimintoja. Vaikka tämä ei ole välttämätöntä eri näyttötarkkuuksien tarkastelemiseksi, siirry Responsiivinen-valikkokohtaan.

Suunnittelun ja toiminnallisuuden suhteen kaikki on erittäin siistiä, mainitsemisen arvoinen on älypuhelimien mahdollisuus valita muotokuva- ja maisemakatseluvaihtoehdot. Kyllä, muissa palveluissa on Rotate-toiminto, mutta näet, kaikki näyttää paljon kirkkaammalta tällä tavalla. Muuten, jos ymmärrän oikein, rekisteröinnin jälkeen voit käyttää reaaliaikaisen reaaliaikaisen interaktiivisen testauksen vaihtoehtoa.

Palvelu minimalismin hengessä. Siellä on kenttä sivuston nimen syöttämistä varten + mahdollisuus valita näyttökoot katselua varten.

Toinen erittäin yksinkertainen projekti. Sivuston osoitteen ja kokojen lisäksi suosituimmat näytön resoluutiot on esitetty avuksesi.

Jos katsot tarkasti kuvan alaosaa, voit nähdä, että InfoByIp-palvelu näyttää alimman vierityspalkin 1024x768 resoluutiolla. Jos muutat näytön resoluutiota manuaalisesti, näet, että siellä ei ole vierityspalkkia. Tällaiset epätarkkuudet joissakin palveluissa ovat hieman masentavia; et käytä viivainta näytettävän tuloksen luotettavuuden mittaamiseen. Siksi suosittelen sinua tarkastelemaan sivustoa eri näyttötarkkuuksilla käyttämällä pari eri palvelua varmuuden vuoksi.

Kehykset, kuten tai, jotka helpottavat ja nopeuttavat huomattavasti sivun asettelua.
tarkoittaa web-sivun erinomaista näyttöä kaikissa laitteissa ja näyttölaajennuksissa. Todennäköisesti jokaisella taittosuunnittelijalla ei ole täyttä laitetta kaikilla mahdollisilla näyttölaajennuksilla testaamaan asetteluasi. Tämä ei ole yllättävää, koska tekniikka ei ole nykyään halpaa.
Niin. Matkapuhelimien ja tablettien vuorien ostaminen ei ole vaihtoehto - me menemme rikki. Mitä tehdä? Näitä tehtäviä varten kehitettiin mukautuvien verkkosivustojen testauspalvelut. Niiden toimintaperiaate on hyvin yksinkertainen. Useimmiten sivun avautumisessa on tietyn kokoinen kehys. Vaikutus on suunnilleen sama kuin mobiililaitteella katsottaessa. Haluan huomioida, että palvelu ei aina näytä tarkasti sivun näyttöä puhelimessa tai tabletissa. Koodauksen yhteydessä kannattaa testata palveluilla, mutta valmistumisen jälkeen, mikäli mahdollista, yleisimmillä laitteilla.
Niin. Huomioiksesi parhaat työkalut responsiivisten verkkosivustojen testaamiseen.

Työkalu Adoben responsiivisten verkkosivustojen testaamiseen. Jotta voit käyttää sitä, sinun on asennettava se tietokoneellesi.
Ohjelman avulla voit synkronoida laitteesi WIFI:n kautta ja tarkastella sivustoa sellaisena kuin se näytetään laitteessasi. Tällä hetkellä tuetut laitteet seuraavilla käyttöjärjestelmillä: iOS, Android, Kindle Fire.