Nástroj na testovanie adaptívneho rozloženia. Ako bezplatne otestovať responzívny dizajn. Mobilný emulátor od Google DevTools
Jednou z najpozoruhodnejších úloh, ktorým kedy čelilo oddelenie QA spoločnosti EastBanc Technologies, je vytvorenie automatizovaného systému testovania stránok. www.washingtonpost.com . Ide o elektronické noviny implementované ako informačný a spravodajský portál.
Hlavným dôvodom potreby vytvorenia automatizovaného testovacieho systému bolo, že sa počítalo s prechodom aplikácie na nový CMS (tzv. PageBuilder), ktorý by mal nahradiť niekoľko iných CMS používaných predtým na publikovanie obsahu v rôznych sekciách webu. Pri tomto druhu migrácie je veľmi dôležité nerobiť chyby, aby obsah publikovaný prostredníctvom nového CMS na rôznych druhoch stránok vyzeral správne.
Nestojíme pred úlohou kontrolovať všetky stránky, či sú v súlade s našimi testami. Našou úlohou je identifikovať chyby PageBuildera, skontrolovať spoľahlivosť rozloženia stránok vytvorených čerstvo upečeným PageBuilderom, upozorniť redaktorov Washingtonpostu na tie nuansy naplnenia konkrétnej stránky obsahom, ktoré môžu viesť k potenciálnym problémom pri zobrazovaní stránok.
Vytvorenie testovacieho systému je v aktívnom vývoji, ale niektoré zaujímavé body podľa nášho názoru už možno predstaviť širokej verejnosti.
Predtým, ako to urobíme, je potrebné poznamenať jednu vlastnosť projektu: všetky testy prebiehajú „vonku“. Tie. ako každý iný používateľ používame na testovanie bojovú verziu stránky.
Výber nástrojov na testovanie rozloženia
Po preskúmaní rozľahlosti internetu sme sa rozhodli pre nasledujúce prístupy a nástroje. Na testovanie kostry stránky sme prijali rámec Galen , ktorý bol potom integrovaný s testNG.
Prirodzene, že absolvovaný Galen-test pre rámec stránky ešte neznamená platnosť rozloženia. Okrem umiestnenia blokov je potrebné skontrolovať aj zobrazenie rôznych prvkov vo vnútri bloku. Vnútorný obsah blokov sme sa rozhodli otestovať porovnaním screenshotov.
Na milosť a nemilosť screenshotových testov vypadávajú rôzne logá, tlačidlá, nejaké bloky so špecifickým displejom - všetko, na čo Galen nedosiahne a čo je ťažko/nemožné skontrolovať funkčnými testami.
Azure - testované Galenom, plné zelené - testy snímok obrazovky:
Opatrne! veľký obraz
Skrytý text
Testy Galen a Screenshot môžu úspešne nahradiť niektoré funkčné testy, niekedy víťazia vo viditeľnosti, niekedy v rýchlosti a niekedy v oboch. Výber testovacej metódy pre konkrétny prípad vykonávame prostredníctvom spoločnej diskusie o testovacom prípade pre každý typ stránky na základe kritérií rýchlosti, jednoduchosti podpory, úplnosti testovania a viditeľnosti.
Existujú napríklad 2 bloky, pre ktoré sme pôvodne napísali funkčné testy: Most Read a Information Block. Teraz skontrolujeme prvý pomocou snímok obrazovky a druhý pomocou galénneho testu.
MostRead Block, kontrola testu obrazovky:
Pokiaľ ide o funkčný test: existuje výrazne menej riadkov kódu, úplnosť testovania sa zvýšila a test sa aktualizuje, keď sa zmení vzhľad tento blok na stránke nezaberie veľa času.
Testovanie tohto bloku je popísané v kapitole o metóde screenshotu.
Informačný blok WaPo: 
Galen môže jednoducho skontrolovať zhodu textu a odkazov daného bloku: samotné odkazy sa nastavia v lokátore a korešpondencia textu sa skontroluje internou galénskou kontrolou. Čo sa týka funkčného testu, úplnosť pokrytia testom sa nezmenila, no tým, že kontroly prebiehajú v rámci jedného testu, výrazne šetríme čas.
Galenov testovací kód.
náš automatizovaný systém testovacie použitie: Java, Maven, TestNG, Selenium WebDriver, Selenium Grid, Galen Framework.
Pri vytváraní testov založených na snímkach obrazovky nám aktívne pomáha multiplatformová sada nástrojov ImageMagick.
Hneď by som chcel poznamenať, že testovací kód píšeme v jazyku Java pomocou vzoru PageObject a rámca Yandex - Prvky HTML . Na spustenie testov sa používajú Maven a testNG.
Aby sme uľahčili spustenie testov, prezeranie histórie spustení testov, prezeranie správ bez účasti vysokokvalifikovaných odborníkov, vyvíjame samostatná aplikácia- Prístrojová doska.
Stojí za to zdôrazniť, že teraz sme stále v štádiu výskumu, ako správne zorganizovať celý proces testovania, a nie všetky prístupy sú ešte úplne zvládnuté a preštudované.
Testovanie pomocou rámca Galen
Galen Framework má množstvo nepochybných výhod: je to flexibilný, ľahko použiteľný nástroj, ktorý má široké možnosti testovania responzívneho dizajnu. Okrem toho je v súčasnosti dobre zdokumentovaný a aktívne rozvíjaný.
Galenov rámec už bol dostatočne podrobne opísaný v jednom z nichčlánky . Ak stručne opíšete princíp práce s Galenom, vyzerá to asi takto: napíšete špecifikáciu stránky (tzv. spec súbor) pomocou špeciálnej, dobre zdokumentovanej a intuitívnej syntaxe. Súbor spec popisuje relatívnu polohu, veľkosť, zarážky, vnorenie prvkov stránky a niektoré ďalšie parametre a podmienky, ktoré musí spĺňať rozloženie stránky, dokonca môžete skontrolovať súlad textu vo vnútri prvku. A všetky tieto kontroly sa použijú v závislosti od značiek, ktoré sme zadali.
Značky v súbore špecifikácií možno zadať nasledujúcim spôsobom:
Galen vykoná všetky kontroly, po ktorých vygeneruje vizuálnu správu vo forme html súboru. Prehľad zobrazuje, ktoré konkrétne kontroly pre daný test zlyhali, a pre každú z neúspešných kontrol môžete vidieť celú snímku obrazovky testovanej stránky, kde budú zvýraznené prvky, ktoré v konkrétnej kontrole neprešli.
Napríklad neúspešná kontrola vzdialenosti medzi susednými prvkami bude v prehľade vyzerať takto:
Keď kliknete na šek zvýraznený červenou farbou, zobrazí sa snímka obrazovky celej kontrolovanej stránky s nasledujúcimi zvýraznenými prvkami:
Galen Framework akceptuje nasledujúce parametre ako vstup:
- prehliadač na kontrolu
- rozlíšenie, v ktorom sa má test spustiť
- URL testovanej stránky
- Javascriptový súbor, ktorý je potrebné (v prípade potreby) použiť na spustenej stránke pred začatím kontrol so súborom .spec (napríklad ak potrebujete skontrolovať zobrazenie stránky používateľovi prihlásenému na stránku)
- názov súboru .spec, ktorý sa má spustiť
- tagy, ktoré je potrebné použiť pri kontrolách súboru .spec (napríklad: desktop, all, ak testujeme rozloženie pre plochu).
Ako vidíte, zmenou parametrov daných Galenovi je možné dosiahnuť takmer úplné testovacie pokrytie rámca našej stránky.
Keď sme sa rozhodli pre testovací nástroj rámca lokality, ďalšou úlohou bolo vybrať schému, ktorá by nám umožnila poskytnúť maximálne pokrytie stránky testami Galen.
Výber stránky na testovanie z podmnožiny stránok rovnakého typu
A aké stránky zvoliť na testovanie rozloženia, ak je test určený na testovanie mnohých stránok rovnakého typu?
Rozhodli sme sa bez toho, aby sme sa nejako zvlášť obťažovali, vybrať náhodnú stránku z podmnožiny pri každom spustení testovacej sady (t. j. na testovanie podskupiny stránok s receptami sme si vybrali jeden z receptov a odovzdali sme jeho adresu URL všetkým testom podľa rozloženia). Keďže sa neoplatí kontrolovať všetky strany úlohy, možnosť výberu náhodnej strany sa zdala optimálna. Adresa URL náhodnej stránky podmnožiny kontrolovaných stránok sa odovzdá Galenovi metódou spoločnou pre všetky testy v rámci nášho automatizovaného systému testovania stránok (okrem testov na testovanie rozloženia máme aj funkčné testy a testy obrazovky).
Napríklad existujú 2 možnosti zobrazenia rovnakého typu stránok - stránok kulinárskych receptov, z ktorých jedna obsahuje chybu:
Príklad ukazuje, že blok „Najčítanejšie“, ktorý by sa mal nachádzať v pravom stĺpci stránky, sa nachádza na ľavej strane v hlavnej časti a nie na pravej. Ak chcete skontrolovať, či neexistujú žiadne takéto problémy, musíte skontrolovať veľké číslo stránky a zohľadňujú mnohé faktory.
Aké povolenia na spustenie testov?
Najprv prišiel nápad vybrať najbežnejšie zariadenia a použiť ich povolenia na spustenie testov. Jasne vysledovateľný trend zrýchlenej mobilizácie planéty nám však neumožňuje vyčleniť (a ešte viac predpovedať) žiadnych nespochybniteľných lídrov v tejto oblasti. Zariadení, ktoré umožňujú prezeranie webových aplikácií, je množstvo a zjednotenie povolení pre takéto zariadenia dnes nie je vôbec v móde. Náhla narážka, že responzívny dizajn má byť responzívny, aby sa správne zobrazoval v akomkoľvek platnom rozlíšení, nám zachránil myseľ a zastavil ďalší výskum v tejto oblasti. Rozhodnutie padlo: testujeme rozloženie na všetkých platných povoleniach.
Platné povolenia boli pridelené všetkým povoleniam od minimálnej šírky výrezu = 241 px (menej, než sa prehliadač nezmenší) po maximálnu šírku výrezu = 1920 px (horná hranica – jednoduchým aktom vôle). Ešte sme tu nemali stránky, kde by bola určujúcim parametrom výška výrezu pre účely automatizovaného testovania, preto sa výške zatiaľ nevenujeme.
Ako otestovať rozloženie vo všetkých rozlíšeniach?
Na začiatok bol celý rozsah platných povolení rozdelený do rozsahov rôznych rozložení. Samotné rozloženia sú „gumové“, ale rôzne usporiadanie blokov vám umožňuje rozlišovať. Určenie hraníc rozložení je jednoduché - potiahneme roh prehliadača a pozrieme sa na to, ktorý hraničný bod sa menia bloky stránky: ich relatívnu polohu, počet a / alebo správanie. Pre zjednodušenie berieme do úvahy iba šírku výrezu. Výsledkom je nasledujúca tabuľka:
DESKTOP: max 1920px, min 1018px;
LAPTOP: maximálne 1017 pixelov, minimálne 769 pixelov;
TABLET: max 768px, min 481px;
MOBIL: maximálne 480 pixelov, minimálne 361 pixelov;
SMALL_MOBILE: maximálne 360 pixelov, minimálne 280 pixelov.
Mimochodom, rozloženie SMALL_MOBILE sme sa rozhodli zatiaľ netestovať, keďže počet používateľov, ktorí si Washingtonpost prezerajú na zariadeniach s takýmto rozlíšením, je katastrofálne malý (špekulatívny záver a v budúcnosti nie je problém ho pri testovaní pridať). Zostáva otestovať 4 rozsahy s rôznym rozložením.
Nižšie je uvedený kód na spustenie testu Galen pre rozlíšenie pracovnej plochy:
Skrytý text
Pri spustení každého testu dostane Galen náhodné rozlíšenie z rozsahu pre dané rozloženie (getRandomResolution(DESKTOP)):
A v skutočnosti je rozsah povolení nastavený v tejto forme:
Testovanie náhodným výberom rozlíšenia z platného rozsahu a testovacej stránky z podmnožiny podobných stránok sa tak mení na pravdepodobnostný proces. Čím častejšie spúšťame, tým viac rôznych chýb nájdeme. Po úspešnom absolvovaní testu môžeme len povedať, že táto konkrétna stránka v tomto konkrétnom rozlíšení je platná. Ale už po 500 úspešných jazdách môžeme povedať, že rozloženie je z veľkej časti životaschopné. Okamžite si urobme rezerváciu, že „500 úspešných spustení“ je špekulatívny odhad a tu sa musíte pozrieť na obsah a počet ekvivalentných stránok.
Spúšťanie v náhodnom rozlíšení sa veľmi rýchlo vyplatilo a hneď odhalilo jednu zaujímavú chybu, ktorá by nám pri testoch v pevnom rozlíšení s najväčšou pravdepodobnosťou unikla.
Uvažujme, ako nám tento prístup pomáha na príklade testovania stránky receptu.
Test drôtového modelu stránky receptu beží pre rozsah šírky zobrazenia 768 až 1 017 pixelov. Vezmime si túto stránku ako príklad: www.washingtonpost.com/pb/recipes/maple-banana-frozen-yogurt/14143/
Test na okrajových bodoch rozloženia notebooku (1017px a 768px) nepriniesol žiadne chyby.
Keď sme však začali test spúšťať v náhodnom rozlíšení, približne v polovici prípadov testy zlyhali a snímky obrazovky ukázali, že bloky z pravého stĺpca sa plazili dole pod hlavným obsahom.
Správny pohľad:
Opatrne! veľký obraz
Skrytý text
Rozloženie je porušené:
Opatrne! veľký obraz
Skrytý text
Testovacia metóda založená na snímke obrazovky
Inšpirované článkom sme sa rozhodli použiť metódu testovania založenú na snímke obrazovky. Mimochodom, na testovanie rozloženia sme sa pôvodne spoliehali na túto metódu. Tie. vznikol nápad porovnať screenshoty stránky v plnej veľkosti s vopred pripraveným modelom, pričom všetky potenciálne sa meniace prvky nahradíme stubmi (vopred vybratý ľubovoľný obrázok sa berie ako stub). Tieto prvky zahŕňali obrázky, reklamy vo formáte flash a text. Myšlienka zlyhala najmä kvôli tomu, že stránky obsahovali veľa blokov načítaných dynamicky, v dôsledku čoho sa fyzické veľkosti nasnímaných screenshotov a umiestnenie blokov menili od testovacej prevádzky k spusteniu. Okrem toho Chrome na nejaký čas stratil možnosť vytvárať snímky obrazovky v plnej veľkosti, čo tiež spôsobilo množstvo problémov.
Testy založené na snímkach obrazovky teraz kontrolujú tie jednotlivé prvky a bloky na stránke, pre ktoré je dôležité zobrazenie a/alebo ktorých overenie funkčnými alebo galenickými testami je ťažké alebo nemožné.
Napríklad:
Takto vyzerá blok MostRead domovskej stránke washingtonpost.com (vľavo) a model, s ktorým porovnáme snímku obrazovky tohto bloku (vpravo):
Testovací kód vyzerá takto:
Na ukladanie snímok obrazovky sa používa nasledujúca adresárová štruktúra: /models/HomePage/firefox/HomePage_thePostMost.png
Ako je odtiaľto vidieť, pre rôzne prehliadače vytvorí sa vzorová snímka obrazovky požadovaného bloku.
Metóda shootAndVerify() nájde cestu k modelu na základe triedy odovzdanej stránky a názvu prehliadača, v ktorom sa test spúšťa.
Keď sa pozrieme dopredu, povedzme, že to funguje celkom dobre, a potom si popíšeme niektoré detaily procesu s tým, že ešte nie je všetko úplne odladené.
Ako sa ukázalo, snímka požadovaného bloku môže závisieť od mnohých faktorov, ako napríklad:
- verzia operačného systému
- motív operačného systému
- prehliadač a verziu
- rôzne možnosti vyhladzovania písma a hardvérovej akcelerácie.
Prvým problémom bolo, že veľkosti nasnímaných snímok obrazovky sa líšili v závislosti od operačného systému a nastavení prehliadača. Aby boli veľkosti blokov a následne aj snímky obrazovky rovnaké, musíte prehliadač spustiť s konštantnými veľkosťami. Veľkosť okna prehliadača môžete zmeniť pomocou vhodnej metódy webového ovládača: driver.manage().window().setSize(requiredSize). Ale týmto spôsobom nastavujeme veľkosť okna a nie veľkosť viditeľnej oblasti, ktorú potrebujeme - výrez. Vertikálny posuvník, mimochodom, ovplyvňuje aj veľkosť výrezu a závisí od toho aj jeho hrúbka motívy windows, tak s tým treba počítať. Riešením problému bola metóda kalibrácie, ktorá prispôsobuje veľkosť výrezu dané rozmery. Po spustení prvého testu sa rozdiel medzi šírkou veľkosti okna a šírkou výrezu uloží do špeciálneho parametra a znova sa použije pri ďalších spusteniach.
Druhým problémom, na ktorý sme narazili, bolo odlišné vykresľovanie fontov v prehliadačoch kvôli nastaveniam vyhladzovania. Problém sa pokúsil vyriešiť inštaláciou rôzne nastavenia prehliadač ako:
vrstvy.zrýchlenie.vypnuté
gfx.font_rendering.cleartype_params.rendering_mode
gfx.direct2d.disabled
Ale, žiaľ, nepomohlo.
Okrem toho ImageMagick používa na porovnanie snímok obrazovky parameter ako fuzz, ktorý nastavuje maximálny možný nesúlad medzi snímkami obrazovky.
Pokúsil sa rozhodnúť tento problém experimentovaním s týmto nastavením. Malý fuzz koeficient nevyriešil problém, pretože počet rôznych pixelov bol veľmi veľký, pretože je tam veľa textu a veľký fuzz koeficient viedol k tomu, že absencia niektorých prvkov v blokoch neovplyvnili úspešné absolvovanie testu a viedli k potenciálne vynechaným chybám.
Cesta von bola duplikovať všetky nastavenia rôznych prehliadačov pre všetkých virtuálne stroje, na ktorom boli testy spustené, a duplikácia samotných nastavení operačného systému.
Napríklad test, ktorý skontroluje blok sociálnych tlačidiel, v ktorom sa nenačítal jeden z obrázkov.
Odkazy v správe sú k dispozícii:
obrazový model 
snímka obrazovky testovanej jednotky:
výsledok porovnania týchto dvoch obrázkov:
CommandException nám hovorí, že porovnávané obrázky sa líšia o 251 pixelov:
Existujú aj situácie, keď sa veľkosti snímok obrazovky nezhodujú. V tomto prípade dostaneme nasledujúcu správu:
Niekedy sú z neznámych dôvodov prvky vo vnútri testovaného bloku mierne nesprávne zarovnané. Pre takéto prípady porovnávame nie s jedným modelom, ale so skupinou modelov zodpovedajúcich maske, t.j. môžeme mať niekoľko modelov bloku PostMost s názvami ako HomePage_thePostMost.png, HomePage_thePostMost (1).png a všetky modely sa považujú za platné. Našťastie je počet takýchto možností konečný, zvyčajne nie viac ako 2.
Technické aspekty
Ako bolo uvedené vyššie, na písanie a spúšťanie testov sa používa množstvo technológií: Java, Maven, TestNG, Selenium, Galen Framework. Okrem toho sa výsledky testov posielajú do grafitu. Testy prebiehajú priamo pomocou Jenkins CIS. Nebudeme sa pozastavovať nad tým, prečo bola zvolená práve takáto zostava. Poďme si stručne popísať, ako je to všetko prepojené.
Selenium Grid je teraz nasadený lokálne na štyroch virtuálne stroje v systéme Windows 7 s uzlami siete a na počítači so systémom Linux so systémom rozbočovača. Každý uzol má k dispozícii 3 inštancie prehliadačov firefox a chrome. Okrem toho sú na linuxovom stroji nasadené aj Jenkins a grafit. Galenove testy prebiehajú vo všeobecnom testovacom behu vďaka integrácii s TestNG. Na tento účel bola napísaná vhodná trieda, ktorá vám umožňuje používať Java Galen API. Pri implementácii interakcie TestNG s galénom sme narazili na niektoré problémy, ktoré sa rýchlo vyriešili prostredníctvom interakcie s vývojárom galénu. Samotný vývojár galena je ochotný spolupracovať a pravidelne vydáva aktualizácie pre tento nástroj, ktoré rozširujú jeho možnosti a robia ho ešte pohodlnejším. Sám plánuje napísať dokumentáciu o integrácii Galena s TestNG.
Funkčné, galénové a screenshotové testy sú oddelené pomocou zodpovedajúceho parametra skupiny priradeného k anotácii Test a je možné ich spúšťať samostatne.
Naše závery
Oba prístupy – metóda porovnávania snímok obrazovky a testovanie pomocou Galen Framework – sú použiteľné na testovanie rozloženia stránky. Úspešne sa dopĺňajú. Metóda porovnania snímok obrazovky je vhodnejšia, keď potrebujete otestovať zobrazenie niektorých individuálny prvok alebo blok, napríklad panel „zdieľanie“. v sociálnych sieťach alebo hlavné menu v záhlaví. Blok môže vo svojom vnútri obsahovať veľa ikon, ktoré sa zase môžu nachádzať vo vnútri iných ikon a prvkov, alebo môžu mať k nim relatívnu polohu.
Použitie Galena na popis všetkých týchto malých momentov je pomerne časovo náročné, avšak jeden screenshot na prehliadač tento problém rieši a porovnávanie screenshotov eliminuje možnosť, keď nám môže pri popise špecifikácie niečo uniknúť. Galen, na druhej strane, robí skvelú prácu s relatívnou polohou blokov a kontrolou nadpisov a pevného textu v nich. On má dobré využitie, keď potrebujete otestovať rozloženie na rovnakom type šablónových stránok, ktoré nie sú nabité funkčnou logikou, napr. informačný portál, ako v našom prípade, keď je takmer ľubovoľná stránka webu dostupná bez autorizácie alebo akýchkoľvek iných akcií používateľa. Okrem toho Galen dobre rieši úlohy testovania medzi prehliadačmi v podmienkach adaptívneho rozloženia aplikácií.
Dobrý deň, milí čitatelia blogu. Nie je prekvapujúce, že adaptívny dizajn je na ruskom internete čoraz obľúbenejší. A samozrejme, dizajnéri rozloženia si to musia naštudovať. Keďže responzívny dizajn bude čoskoro na takmer všetkých stránkach, pretože stále viac ľudí používa mobilné zariadenia.
A chcem povedať, že stránky s je oveľa pohodlnejšie čítať na takýchto zariadeniach ako bez nich.
Dnes vám chcem predstaviť 5 veľmi užitočných a skvelých služieb, pomocou ktorých môžete skontrolovať prispôsobivosť stránky.
A tak poďme.
5 služieb, na ktorých si môžete skontrolovať prispôsobivosť stránky.
www.responsivedesigntest.net
Dobrá služba na kontrolu stránok. Existuje veľa rozlíšení obrazovky pre tablety aj telefóny.
mattkersley.com
Jednoduchá služba na kontrolu webovej stránky od Matta Kersleyho. Dostupné sú aj všetky obľúbené rozlíšenia mobilných zariadení.
screenqueri.es
Veľmi skvelá služba, ktorá skontroluje akúkoľvek stránku. Veľmi sa mi páčil dizajn a funkčnosť.
quirktools.com
Veľmi pekný a funkčný servis. Dokonca je možné skontrolovať, ako bude stránka vyzerať v televízii :-)
Technológia sa neustále zlepšuje, smartfóny a tablety sú čoraz chladnejšie a používatelia sú mobilní. V súčasnosti počet divákov z mobilných zariadení prevyšuje používateľov z osobné počítače. Nie nadarmo to viedlo k celému smerovaniu stránok pod mobilné zariadenia.
Ak napríklad otvoríte bežnú stránku (bez adaptívneho rozloženia a mobilnej verzie) prostredníctvom smartfónu, s najväčšou pravdepodobnosťou sa otvorí vo forme, ktorá je pre používateľa nepohodlná. Tie. obsah sa zobrazí celý, ale dôjde k horizontálnemu rolovaniu, čo je zlé.
1. Adaptívne rozloženie webu – čo to je
Responzívne rozloženie stránky- je to tak html rozloženie, v ktorom sa v závislosti od veľkosti okna prehliadača stránka „premení“ na užívateľsky prívetivé zobrazenie
Rozdiely medzi mobilnou verziou stránky a adaptívnouNenechajte sa zmiasť mobilná verzia stránky a adaptívne rozloženie stránky. Mobilná verzia sa nachádza na samostatnej subdoméne a úplne duplikuje obsah stránky. Responzívny web obsahuje rovnaké adresy URL stránok, no načítava sa v závislosti od zariadenia rôzne štýly CSS, ktoré vám umožňuje zobraziť stránku pohodlnejšie.
2. SEO optimalizácia a adaptívne rozloženie
Vyhľadávače majú v súčasnosti dva rôzne výsledky (sú veľmi podobné). Jeden pre používateľov PC, druhý pre mobilné zariadenia. Ak stránka nie je optimalizovaná pre mobilné zariadenia, potom sa to považuje za negatívny faktor a pozícia stránky sa zníži o 2-3 (niekedy aj viac). Zároveň by bolo logické, keby sa podceňovali pozície len mobilnej verzie, no prax ukazuje aj to, že sa zhoršujú aj pozície hlavnej verzie stránky.
Túto nespravodlivosť možno vysvetliť skutočnosťou, že vyhľadávacie nástroje s väčšou pravdepodobnosťou zhŕňajú faktory správania z počítačov a mobilných zariadení. V dôsledku toho, samozrejme, ak stránka nie je prispôsobená, jej PF bude horšie a to stiahne hlavnú verziu stránky.
3. Ako skontrolovať prispôsobivosť stránky
Prispôsobivosť stránky môžete skontrolovať iba jej otvorením rôzne prehliadače a zmenou šírky obrazovky. Ale urobte to zo sady rôzne zariadenia s rôzne povolenia- zaberie veľa času. Je tiež nepravdepodobné, že máte k dispozícii desiatky smartfónov a tabletov.
Na internete je oveľa rýchlejšie a jednoduchšie riešenie. Môžete napríklad nainštalovať do prehliadača Google Chromešpeciálny doplnok Window Resizer a pomocou neho otvorte stránku v najpopulárnejších rozlíšeniach.
Môžete jednoducho ručne zmeniť veľkosť okna prehliadača na šírku a vidieť výsledok. Firefox alebo Google Chrome má responzívny dizajn prehliadača stlačením Ctrl+Shift+M.
Najdôležitejšou podmienkou je dosiahnuť absenciu horizontálneho rolovania a absenciu flash-pluginov na stránke.
Google ako prvý zaviedol faktor adaptability do vyhľadávacieho algoritmu. Má špeciálnu bezplatná služba, ktorá analyzuje akúkoľvek stránku na optimalizáciu pre mobilné zariadenia. Yandex mal túto funkciu o niečo neskôr.
Po kontrole sú dve možnosti. Buď je stránka optimalizovaná alebo nie:
Napríklad responzívna kontrola Google:
Kontrola adaptability v Yandex:
4. Ako vytvoriť adaptívny vzhľad webovej stránky
Len človek, ktorý rozumie CSS a html, dokáže vytvoriť adaptívny layout stránky. Budeme sa zaoberať hlavnými bodmi, pretože neexistuje jediný recept.
Ak chcete vytvoriť responzívne rozloženie, musíte v tretej verzii vytvoriť šablóny štýlov CSS. Existuje rozdiel medzi 2 a 3, ale absencia absolútnych hodnôt v štýloch je v tejto veci veľmi dôležitá. Stručne povedané, všetky hodnoty veľkosti bloku - dĺžka, šírka, rozmery - sú všetky uvedené v percentách.
@Media CSS syntax
@media device_type a|nie|len (media_features){ ... Popis štýlov... }
Napíšme si napríklad podmienky, za ktorých budú štýly fungovať pre zariadenia so šírkou obrazovky menšou ako 800px.
@media screen and (max-width : 800px ) ( ... styles ... )Poznámka
Štýly sa musia písať postupne od vysokého rozlíšenia po malé, teda najprv všeobecné štýly a potom pre „skrátené“ veľkosti, napríklad:
@media only screen a (max-width : 1280px ) ( ... ) @media only screen and (max-width : 1024px ) ( ... ) @media only screen and (max-width : 800px ) ( ... )
Do značiek hlavičky nezabudnite napísať riadok:
Metaznačka zobrazovanej oblasti hovorí, že šírka obrazovky sa rovná šírke prehliadača a každý pixel zodpovedá jednému pixelu na zariadení. Ak to nie je špecifikované, adaptabilita nemôže byť implementovaná.
5. Praktické príklady adaptívneho rozloženia webu
5.1. Prispôsobenie veľmi dlhých slov
Na stránke sa napríklad objaví veľmi dlhé slovo a ak nie je nastavená vlastnosť pretečenia, môže to viesť k vodorovnému posúvaniu. Aby ste tomu zabránili, musíte si predpísať nasledujúci obsah CSS vlastnosti
.hphns ( overflow-wrap : break-word ; word-wrap : break-word ; -webkit-hyphens : auto ; -ms-hyphens : auto ; -moz-hyphens : auto ; pomlčky : auto ; )
5.2. Menu responzívneho webu
Bočný panel webovej stránky má zvyčajne šírku 200 – 300 pixelov, čo na mobilných zariadeniach zaberá takmer celú šírku prehliadača. Rozbaľovacie menu sa preto najčastejšie robia pomocou štandardného tlačidla vo forme troch ťahov (to sa už stalo klasikou).
Môžete to implementovať na webe, ale musíte si trochu pohrať so štýlmi. Pozrime sa na všetko postupne.
Situácia, keď máme menu a máme hlavný obsah (hlavičku a pätu som nekreslil):
HTML kód pre takúto štruktúru môže vyzerať asi takto:
Название страницы
Контент страницы
Контент страницы
Контент страницы
Контент страницы
Преобразуется на странице в
Минусом этого способа является то, что на маленьких разрешениях меню будет занимать почти всю область по ширине, а значит появится горизонтальная прокрутка или еще хуже - все блоки могут поплыть.
Модифицируем наш пример следующим образом. Если разрешение экрана меньше 800 пикселей, то меню исчезнет и появится специальная кнопка открыть меню.
Приведем html-код адаптивной верстки с комментариями:
Название страницы
Контент страницы
Контент страницы
Контент страницы
Контент страницы
Уменьшим ширину экрана до 700 пикселей (к примеру). Вот как это выглядит на странице
Тест показывает, как выглядит адаптивный сайт на различных мобильных устройствах. Для проверки ваш сайт должен поддерживать загрузку и работу во фреймах. Для удобства просмотра переведите браузер в полноэкранный режим.
Проверить
Что такое адаптивный сайт?
Адаптивный сайт автоматически подстраивается под ширину устройства. При этом блоки сайта могут скрываться или видоизменяться. Например, на компьютере логотип и меню сайта располагаются слева направо, а на телефоне — сверху вниз.
Чем отличается адаптивный сайт от мобильной версии?
Если у сайта есть мобильная версия, то при загрузке такого сайта с мобильного телефона, вас перенаправят на другой адрес: site.ru → m.site.ru. Мобильная версия — это отдельный сайт с другим адресом.
Если же у сайта нет мобильной версии, адрес сайта не изменится при загрузке с телефона. На телефон будут загружаться те же самые данные, что и на компьютер. Чаще всего это неудобно для пользователя, потому что экран телефона меньше в несколько раз.
Данная проблема решается двумя способами: добавить мобильную версию m.site.ru или НЕ делать отдельный сайт, но добавить вашему основному сайту адаптивности. Это специальные стили и скрипты, которые включаются, если ширина экрана слишком мала: например, спрятать меню, увеличить шрифт, вместо крупных изображений показать маленькие и т.п.
Строго говоря, нельзя сравнивать адаптивный сайт и мобильную версию сайта. По сути адаптивный сайт = полная версия + версия для планшетов + версия для телефонов (мобильная), и всё это в одном флаконе. То есть, одно понятие заключено в другом.
Адаптивный сайт совмещает в себе и обычный (для PC), и мобильный (для телефонов), и несколько промежуточных вариантов (крупные телефоны, планшеты, телевизоры и т.д.). Главное преимущество адаптивного сайта — он хорошо выглядит на любой ширине экрана.
Почему ширина телефона в данном сервисе такая маленькая?
Реальное количество пикселей на современных гаджетах, как правило, очень велико, а сайты не рассчитаны на такую огромную ширину. Поэтому мобильные устройства с экранами повышенной чёткости открывают сайты, приведя их к некоему виртуальному стандарту. Чтобы узнать эти цифры у себя, нажмите кнопку, открыв эту страницу с телефона или планшета:
Какой у меня размер окна браузера?
На устройствах с ретино-подобными дисплеями показанные размеры будут отличаться от реального разрешения в пикселях, которое указано в спецификации устройства. Смартфоны покажут 320×480 или 480×800 пикселей, планшеты — 1280×800.
От автора: у вас в руках файлы с версткой. Но как проверить ее качество? Какие инструменты существуют для тех, кто не разбирается в HTML и CSS? Какими полезными вещами стоит пользоваться самому верстальщику? Эта статья попробует ответить на эти вопросы.
Почему важно проверять качество верстки
Вопрос, который волнует как заказчиков, так и самых верстальщиков. Первые так могут убедиться в том, что исполнитель выполнил свою работу качественно. Верстальщику же полезно будет проверить верстку сайта перед тем, как посылать ее на одобрение клиента. Это позволит экономить время, иначе может возникнуть ситуация, когда правки придется вносить уже после сдачи проекта. Если вы сами создаете свой сайт, инструменты проверки тоже вам пригодятся.
Инструменты для проверки
Отладчик . Один из самых простых способов, как можно проверить верстку сайта – включить отладчик. Он запускается при нажатии в браузере F12. Этот инструмент помогает увидеть, как изменится вид страницы, если из нее убрать какие-то элементы или стили. Например, вы прописали какое-то новое CSS-свойство, потом прописали еще несколько. Решили посмотреть, как все это будет выглядеть в браузере.
Оказалось, что элементы отображаются не так, как планировалось. Из-за какого свойства произошла такая ошибка? Вручную это определять долго. В отладчике же вы можете быстро отключить любые стили и быстро обнаружить ошибки. Также в нем хорошо видно опечатки. Большинство опытных верстальщиков ищут ошибки именно с помощью отладчика, а не самостоятельно просматривая код.
Рис. 1. С отладчиком находить ошибки проще
W3C Валидатор . Сервис проверки кода на мелкие ошибки. W3C – это организация, которая занимается разработкой и официальной поддержкой веб-стандартов. Поскольку она устанавливает эти стандарты, на ее сайте есть специальный сервис, который может проверить любую страницу в сети на валидность (то есть на ошибки). Нужно сказать, что это достаточно строгий валидатор.
Часто им пользуются заказчики, пытающиеся так определить качество верстки. Даже в хорошо сверстанной страничке валидатор может найти более тридцати ошибок. Однако в этом нет ничего страшного. Сервис считает за ошибку даже то, что вы не поставили пробел перед значением html-атрибута. А теперь представьте, что в таком стиле вы написали весь код. У вас будут сотни ошибок, но на самом деле верстка будет выполнена правильно, просто вы нарушите стандарты, которые W3C установили на счет правильного написания кода.
Подробнее с этими правилами можно ознакомиться на сайте W3C. По сути, единственный сайт, который валидатор проверяет без ошибок, это сайт самой W3C. Поэтому не стоит исправлять все ошибки. И все-таки валидатор может указать на какие-то серьезные проблемы, поэтому проверка верстки сайта в нем желательна. validator.w3.org — валидатор.
IE Tester . Существует такая программа, которая позволяет протестировать сайт в старых версиях Internet Explorer. Многие заказчики сегодня все еще требуют поддержку этого браузера, чтобы сайт в нем отображался так же, как и в других. Возможно, сейчас уже есть онлайн-сервисы, в которых можно выполнить аналогичную проверку. В любом случае, вам достаточно вставить нужный код и программа покажет, как все это отображалось бы в IE 6, 7 и 8.
Обычно поддержка шестой версии уже никому не нужна, а восьмая может вести себя вполне адекватно если, конечно, в вашей верстке не присутствуют новые CSS-свойства. У старых версий IE есть интересная особенность – они читают закомментированный код. Поэтому в одном из комментариев можно подключить таблицу стилей, которая будет создана специально для старых версий этого браузера.
Остальные браузеры просто пропустят этот фрагмент. Такой способ можно использовать, если вам действительно очень сильно нужна поддержка IE.
Другие сервисы . В последнее время сервисов для проверки верстки становится все больше и больше. Нет смысла останавливаться на каком-то отдельном. Большинство этих сервисов работают неплохо, но все равно не проверяют все досконально.
Как проверить адаптивную верстку
Отдельно стоит разговор об адаптивной верстке. Наилучшим вашим инструментом в этом деле будет обычное окно браузера. Просто уменьшайте ширину окна и наблюдайте, как меняется дизайн. Если вы видите, что появляется горизонтальный скролл или какие-то элементы не влазят на страничку, значит, ваша верстка далека до идеала и ее нужно дорабатывать. Если вы хотите увидеть, как будет себя вести сайт на большом экране – уменьшите масштаб. Конечно, если у вас есть планшет и телефон, то можно загрузить вашу верстку на какой-нибудь бесплатный хостинг и зайти на сайт с этих устройств.
Рис. 2. Изменение ширины окна браузера – самый простой способ проверить адаптивность.
Кроссбраузерность
Чем еще проверить верстку сайта? Обязательно должна быть проверка на кроссбраузерность. Нужны открыть сайты в различных браузерах и посмотреть, как они там выглядят. Можно изменять масштаб и размер шрифта. Вы должны убедиться, что хотя бы у большинства пользователей все будет нормально. Если вы проверяете вручную, то можете также попросить знакомых проверить верстку в их браузерах, если их версии отличаются от ваших. Здесь можно дать еще один совет – не используйте слишком специфических свойств, которые поддерживаются только в каком-то одном браузере. А если уже используйте, придумывайте для них какую-то альтернативу в других браузерах. Для некоторых свойств все еще нужно использовать вендорные префиксы. Это связано с тем, что веб-стандарты постоянно развиваются и все браузеры не могут поддерживать всего. Но если уже делать проверку на кроссбраузерность, то делать ее как минимум для таких браузеров: Chrome, Mozilla, Opera, Safari, IE.
Есть очень хорошие зарубежные сервисы продвинутой кроссбраузерной проверки. Например, browserstack.com. Такая проверка может стоить вам денег. Если у вас действительно очень крупный проект и вы хотите досконально проверить его, в таком случае есть смысл пользоваться подобными сервисами.
Проверка на соответствие с макетом
Проверить верстку можно еще так: скриншот сверстанного сайта необходимо добавить к макету в фотошопе в качестве нового слоя. Установить этому слою прозрачность и посмотреть, насколько отображение элементов совпадает с макетом. Для этого можно использовать специальный плагин. Например, Pixel Perfect для Mozilla.
Дополнительные требования
Естественно, в любой нормальной верстке должна быть прописана кодировка и doctype. Также страничку можно проверить на работоспособность при выключенных картинках или при блокировании javascript-кода. Дело в том, что в настройках любого браузера пользователь может отключить эти параметры. Особенно полезно будет прописать атрибуты alt для картинок, чтобы при их исчезновении пользователь хоть как-то мог ориентироваться. На самом деле требований к верстке может быть очень много. Даже в рунете есть достаточно строгий перечень необходимых проверок. Например, с появлением HTML5 верстку можно проверять на правильную семантическую разметку. Однако все это не является критичным. Вышеописанных проверок вполне хватит, чтобы смело запустить нормальный работоспособный сайт.
В этой статье мы описали основные способы проверки верстки с помощью различных программ, сервисов и инструментов. Это поможет вам адаптировать сайт под любые условия.