Spotrebiteľom je k dispozícii čoraz viac zariadení, ľudia majú väčšiu pravdepodobnosť prístupu na internet z tabletov a smartfónov. Vyhľadávače venujú pozornosť stránkam, ktoré sú „priateľské“ s rôznymi rozlíšeniami obrazovky, nielen s počítačom. Dizajn, ktorý sa správne zobrazuje na akomkoľvek zariadení, sa považuje za responzívny.

V októbri 2016 spoločnosť Google oznámila zmeny vo výsledkoch vyhľadávania. V minulosti boli responzívne weby vo výsledkoch vyhľadávania označené ako vhodné pre mobilné zariadenia. V najbližších mesiacoch sa začne s oddeľovaním mobilných telefónov (smartphony, tablety) a stolných počítačov (od počítačov a notebookov) výsledky vyhľadávania... Ak teda značná časť publika používa mobilné zariadenia, riskujete stratu časti návštevnosti z vyhľadávania, ak dizajn stránky nie je prispôsobený pre smartphony a tablety.

Prečo skontrolovať, ako web vyzerá na mobilných zariadeniach?

V roku 2015 uskutočnil TNS Web Index orientačný prieskum. Vyspovedali sme 60 000 Rusov vo vekovom rozmedzí od 12 do 64 rokov a zistili sme, že 64% používateľov internetu používa aj mobilné zariadenia. 15% z tohto počtu ľudí sa zaobíde bez počítačov. A tu sú údaje Yandex.

Najvyhľadávanejšie informácie a obsah: knihy, hudba, hry atď. Preto je žiaduce, aby informačné a zábavné weby mali responzívny dizajn. A komerčné, ak poskytujete služby „na poslednú chvíľu“: privolanie odťahového vozidla alebo zámočníka, núdzové otvorenie zámkov, rozvoz pizze alebo sushi.

Virtuálny hosting webov pre populárne CMS:

Adaptabilita nebude pre žiadny zdroj nadbytočná, pretože počet používateľov mobilných zariadení rastie a neočakáva sa pokles. Podľa rovnakej štúdie niektorí používatelia už upúšťajú od desktopov.... A vyhľadávacie roboty v SERP podceňujú „gumové“ stránky. Výnimka: zdroje s nízkym podielom mobilnej prevádzky.

Existujú aj iné spôsoby, ako potešiť používateľov rôznych zariadení, napríklad vytvorenie mobilnej verzie webu. Je to pre návštevníkov pohodlné, pretože web nie je preťažený zbytočnou grafikou a obsahom. Ak správca webu urobí v kóde významné zmeny, nebude to mať vplyv na hlavný web. Existujú však aj značné nevýhody.

• Usporiadanie druhého webu bude oveľa nákladnejšie ako prispôsobenie starej šablóny.
• Rôzne adresy mobilného a štandardného zdroja rozdeľujú prenos na dva prúdy.
• Podpora dvoch projektov si vyžaduje viac času a peňazí.

Urobiť mobilná verzia Stojí to za to, keď drvivá väčšina prenosu pochádza z telefónov a tabletov: ak vy sociálna sieť alebo zábavný portál. V ostatných prípadoch responzívny dizajn.

Ako skontrolovať, ako vyzerá web v tablete alebo smartfóne?

V súbore nástrojov online služieb Yandex.webmaster a Google existujú špeciálne nástroje, ktoré analyzujú web a určujú, kde hľadať problémy.

Na vlastné oči môžete vidieť, ako web celkovo hľadá majiteľov mobilných zariadení populárne prehliadače... Pre Firefox je zobrazenie vyvolané pomocou klávesovej skratky Ctrl + Shift + M.

IN Google chrome zobrazíte stlačením klávesu F12. Roztiahnite okno myšou alebo nastavte požadované rozlíšenie v číslach.

Ak hľadáte hosting pre konkrétny systém na správu obsahu - pozrite sa na našu stránku.

Služby online na kontrolu toho, ako sa web pozerá na rôzne rozlíšenia.

Môžete skontrolovať, ako web vyzerá s rôznymi rozlíšeniami obrazovky používateľa pomocou služieb online.

• Mobil - 320x480px;
• Tablet - 768x1024px;
• Laptop - 1280x802px;
• PC - 1 600 x 992 pixelov.

V porovnaní s prvou službou je funkčnosť lepšia. Zobrazuje povolenia:

• 10 mobilných;
• 9 tabliet;
• rovnaký počet počítačov a notebookov;
• Ak požadovaná voľba nie je k dispozícii, nastavte parametre pomocou klávesnice.

Musíte vidieť z mobilného telefónu v rôznych verziách systému Android.

Tieto služby sú iba napodobeninou. Stáva sa, že nemajú problémy s dizajnom, ale rozloženie je na zariadení Android plávajúce. Metriky písma, veľkosti tlačidiel, zobrazovanie niektorých značiek css \\ html sú špecifické pre rôzne operačné systémy a prehľadávače.

Je nevyhnutné pozrieť sa na to, ako stránka vyzerá skutočné zariadenia a či je možné proti nim vykonávať cielené akcie. Stáva sa, že web vyzerá skvele, ale objednávkový formulár nefunguje.

Ale potrebné nástroje nie sú vždy po ruke - nie každý v práci dostane iPad, iPhone a niekoľko zariadení s Androidom. Nie je potrebné hľadať všetky možné možnosti, ale je lepšie skontrolovať aspoň tie zariadenia, z ktorých vás ľudia navštevujú častejšie.

Ak žiadne nie sú, požiadajte priateľa o požadovaný model alebo ho otestujte v najbližšom obchode. V opačnom prípade riskujete stratu významnej časti svojej premávky. Informácie o publiku stránky, najobľúbenejších rozlíšeniach a operačné systémy dostaneme ho pomocou rovnakej Yandex.metrica.

Prestaňte meniť veľkosť okna prehliadača, prestaňte to znásilňovať! Stavím sa, že ste to už počuli viackrát. Možno ste to ešte nepočuli. Ale ak ste profesionálny responzívny vývojár webových stránok, viete, čo tým myslím: akákoľvek zmena DOM alebo úprava CSS, a začnete znova a znova posúvať okraj prehliadača, testovať zmeny a zistiť, či sa nič nezlomí.

Účelom vašich pohybov je simulovať obrazovky rôznych zariadení.

V podnikovom prostredí máte na testovanie často k dispozícii veľa pomôcok. Vo svojej práci mám iPad, iPod, ďalšie tablety, notebooky a monitory na plochu. Ak nemáte tento luxus, musíte použiť všetko, čo je po ruke.

Našťastie existuje pôsobivá sada online nástrojov, ktoré simulujú rôzne uhlopriečky zariadení. Samozrejme, každý z nich má svoje vlastné výhody a nevýhody, zvážime niekoľko takýchto nástrojov.

Na testovanie som si vybral skutočne responzívny web PajamasOnYourFeet.com, ktorý je postavený na základe šablóny HTML5, ktorú poskytuje EGrappler zadarmo.

Reagujem?

Som responzívny, veľmi jednoduchý nástroj na rýchle prezeranie vašich stránok na 4 zariadeniach. Všetko sú to IOS a vývojár to vysvetľuje ako súčasť webu. Všeobecne platí, že žiadne nastavenia, žiadna voľba, ale veľmi jednoduché a intuitívne.

Dostupné veľkosti:

• stolný monitor - 1 600 x 992px;
• notebook - 1280 x 802px;
• tablet - 768 x 1024px;
• mobilný telefón - 320 x 480px.

Citujem vývojára: „Toto nie je testovací nástroj, je nesmierne dôležité testovať na skutočných zariadeniach. A tento nástroj vám pomôže rýchlo vytvoriť snímku obrazovky a ukázať klientovi, čo máte na mysli. “

Existujú dva pekné triky: schopnosť pretiahnuť zariadenie cez obrazovku a možnosť zdieľať odkaz na testovacie stránky.

zariadenie reagujúce

deviceponsive je veľmi podobný Am I Responsive v tom, že je rovnako jednoduchý s minimom nastavení a možností. Všetky dostupné zariadenia sa zobrazia naraz na jednej dlhej stránke. Zo všetkých dostupných možností je to možnosť upraviť pozadie hlavičky a pridať tam svoje logo, čo bude užitočné, keď sa rozhodnete zdieľať snímku obrazovky.

Zariadenia a dostupné rozlíšenia obrazovky.

• Macbook - 1 280 x 800
• portrét iPadu - 768 x 1024
• portrét iPadu - 1024 x 768
• Portrét Kindle - 600 x 1024
• Kindle na šírku - 1024 x 600
• portrét iPhone - 320 x 480
• iPhone na šírku - 480 x 320
• Portrét Galaxy - 240 x 320
• Orientácia na šírku - 320 x 240

Rovnako ako u väčšiny podobných nástrojov sa zobrazujú posuvníky, ktoré by na skutočných zariadeniach neexistovali. Toto je vynútený krok umožňujúci posúvanie na nedotykových zariadeniach.

responzívny test

Rovnako ako reakcia na zariadenie, aj responzívny test vykreslí váš web naprieč zariadeniami. Namiesto toho, aby ste zobrazovali všetky naraz, si však sami vyberiete požadované zariadenie v hornom menu stránky. Mimochodom, škálovanie tu funguje správne, čo umožňuje testovať vyššie rozlíšenie pri nižšom.

Na webe je k dispozícii 30 rôznych rozlíšení, od obrovského monitora na pracovnej ploche až po to, čo nazývajú „mizerný android“ (dá sa povedať, že existuje aj normálny android).

Znepokojujúce prehliadač Firefox, potom s touto stránkou nefunguje správne. Upozorňujeme, že na snímke obrazovky sa nezobrazuje posúvač medzi zeleným nadpisom a oblasťou obsahu bieleho pozadia.

responzivne.is

Veľmi podobný predchádzajúcim dvom nástrojom, ale existuje jedna vec, ktorá nastavuje responzivitu. Je na rozdiel od ostatných. Jedná sa o plynulú animáciu pri prechode z jedného zariadenia na druhé, rovnako ako o polopriehľadnú oblasť, ktorá zobrazuje skutočnú oblasť webu, ktorá nespadá do zobrazovacej oblasti.

Dostupné možnosti zariadenia sú auto (spôsob, akým vidíte web), stolný počítač, tablet na šírku a na výšku, smartphone na výšku a na šírku. Bohužiaľ nemôžete nastaviť ľubovoľné veľkosti v pixeloch.

Screenqueries

Ale schopnosti a dostupné možnosti odlišujú Screenqueries od predchádzajúcich služieb. Je tu predstavených 14 telefónov a 12 tabletov so samostatnými prepínateľnými režimami na výšku a na šírku. Výsledky sa zobrazia na riadenej mriežke. Je tiež možné nastaviť ľubovoľné rozlíšenie potiahnutím za pravý alebo dolný okraj.

Zaujímavou vlastnosťou tohto webu je, že pre množstvo zariadení existuje možnosť „Trueview“, ktorá zobrazuje vaše stránky v natívnom prehliadači zariadenia.

Firefox tu bohužiaľ nemohol zobraziť posúvač. Netreba mi nič vyčítať, Firefox je môj obľúbený prehliadač, ale máte to.

Screenfly

Screenfly je možno najfunkčnejší zo všetkých. K dispozícii je o 9 viac ako tabletové zariadenia - od 10 “notebookov, až po 24“ monitory, 5 tabletov, 9 telefónov, 3 televízne rozlíšenia a ľubovoľné rozlíšenia. Pridajte sem samostatný prepínač režimov na výšku a na šírku a tiež možnosť rolovania. Odkaz na test môžete zdieľať aj pomocou jediného tlačidla.

Každé zariadenie má v ponuke veľkosť obrazovky v pixeloch a skutočná veľkosť okna prehliadača sa zobrazuje v pravom hornom rohu.

Všetky tieto výhody umožňujú získať vedenie, ak nie kvôli jednej veci (citácia vývojára): „Spoločnosť Screenfly môže pri prehliadaní vášho webu simulovať zariadenia pomocou proxy servera. Proxy server napodobňuje reťazec agenta užívateľa, ale nie správanie týchto zariadení. “ Screenfly je jediná služba v zozname, ktorá umožňuje testovanie na základe reťazca agenta používateľa.

Využívate predstavené nástroje vo svojej praxi? Podeľte sa o svoje tajomstvá responzívneho vývoja webových stránok v komentároch.

P.S. Chyby týkajúce sa prekladu, nahláste prosím osobne.

Príklad optimalizácie webových stránok pre metaznačky css na rôznych obrazovkách

Optimalizácia vášho webu pre mobilné a veľké displeje

Teraz v našom živote existuje toľko zariadení, ktoré vám umožňujú slobodne surfovať na internete a ktoré už nezodpovedajú duchu doby, čo sú donedávna prevládajúce spôsoby usporiadania stránok. Rovnako ako teraz, aj v súčasnosti existuje čoraz viac malých obrazoviek mobilných smartfónov a veľkých obrazoviek pracovných stolov. Nejako som nad tým nerozmýšľal a svoje stránky som ako obvykle vytvoril pre obrazovky s rozlíšením 1024px. Ale po tom, čo som sa v metrike Yandex pozrel na rozlíšenie obrazovky tých, ktorí navštívili moje stránky, prekvapilo ma, že 1 024 pixelov už nie je relevantný a rozmanitosť rozlíšení je jednoducho obrovská. A prevádzka z malých obrazoviek mobilných zariadení je takmer 20%. Tu je snímka obrazovky z metrík Yandex jedného z mojich webov, o ktorej sa bude diskutovať nižšie.

Rozlíšenie obrazovky

Rozlíšenie hlavnej obrazovky pri návšteve stránky, štatistika za mesiac

Ukazuje sa, že na niektorých zariadeniach sa web zobrazuje veľmi plytko, na niektorých s vodorovným posúvaním a na veľkých obrazovkách s prázdnymi poľami po stranách, web vyzerá veľmi malý. Spoločnosť Google tiež oznámila, že „váš web nie je optimalizovaný pre mobilné zariadenia“. Nižšie je uvedený príklad toho, ako web vyzeral pred optimalizáciou pri rôznych rozlíšeniach od mobilných telefónov 240 * 320px do 1920 * 1200px.

Screenshot webových stránok na rôznych obrazovkách

Screenshot stránky s rozlíšením 320px 800px 1280px 1920px

Keď som začal s optimalizáciou, najskôr som do tela webu pridal metaznačku. Služba Google na kontrolu optimalizácie uviedla, že „web je optimalizovaný“. Ale v skutočnosti to tak nie je. Táto značka umožňuje zobrazovanie stránok po pixeloch, to znamená, že v závislosti od skutočného rozlíšenia obrazovky určuje oblasť zobrazenia. Napríklad pri rozlíšení 320 * 480 pixelov sa zobrazí iba časť webu a na veľkých obrazovkách prázdne oblasti.

Na zobrazenie stránky pixel po pixeli

Nižšie je uvedený kód, vďaka ktorému sa stránka zobrazuje pixely po pixeloch na všetkých zariadeniach. A ak má malá obrazovka rozlíšenie napríklad 6 palcov a 1280 * 800, web bude malý. A ak je obrazovka 320 * 480px, potom sa na obrazovke zobrazí časť stránky týchto veľkostí. V tomto príklade je hodnota 1: 1, to znamená skorá 1,0. Môžete nastaviť svoje vlastné hodnoty a zväčšiť alebo zmenšiť stránku. Napríklad v zariadeniach Android a Apple je zobrazovacia oblasť webov 960-1024 pixelov, čo znamená, že weby s takouto šírkou sa budú zobrazovať na celej obrazovke a bez posúvania. Nezávisí to od skutočného rozlíšenia obrazovky, web sa jednoducho prispôsobí veľkosti obrazovky, ale ak pridáte túto značku Potom sa stránka začne zobrazovať v súlade s hardvérovými pixelmi. Ak je rozlíšenie malé, bude príliš veľký a zobrazí sa rolovanie. Ak je rozlíšenie veľké, bude malý. Samotný tento výrez preto nič nerieši, iba zobrazuje web v súlade s hardvérovými pixelmi a prepíše nastavenia prehliadača, čo nie je správne, pretože prehliadače môžu mať svoje vlastné nastavenia.

Rozloženie webových stránok pre rôzne obrazovky

Aby som web upravil, pridal som tento zoznam metaznačiek do stránky stránky. výrez - vynúti zobrazenie stránky podľa pixelov zariadenia. obrazovka a - umožňuje vám priradiť štýly CSS na základe rozlíšenia obrazovky. Napríklad položka naznačuje, že pre obrazovky s rozlíšením menším ako 640px musíte použiť štýl zo súboru style.css. Môžete tiež určiť štýly v jednom súbore alebo ich distribuovať do rôznych súborov css. V súbore css sa štýl obrazoviek ako v tomto príklade max-width: 640px robí takto / * pre mobilné zariadenia * / @media screen a (max-width: 640px) (okrem (šírka: 98%;) článok (šírka: 98%) ;) #container (font-size: 120%;) #razdeli_opisanie (width: 95%;)) @media screen and (max-width: 1024px) (body (font-size: 85%;)) @media screen and (minimálna šírka: 1280px) (telo (veľkosť písma: 100%;). štýly css sú priradené k obrazovke @media a (minimálna šírka: XXXpx) @media a (maximálna šírka: 640px) (vaše štýly) Môžete tiež určiť štýly pre konkrétne obrazovky, napríklad (šírka: 480px), ale teraz existuje veľa rozlíšení, že nemá zmysel písať veľký súbor CSS a písať vlastné pravidlá zobrazovania pre každú konkrétnu obrazovku. Práve som vytvoril plynulé rozloženie stránky v základných štýloch. A ak je napríklad rozlíšenie obrazovky menšie (max-šírka: 640px), potom sa všetky bloky natiahnu na šírku obrazovky. A ak je obrazovka od 640-1024px (max-šírka: 1024px), tak zmením iba písmo tela (font-size: 85 %;), ako v r v tichosti je to 16px v prehliadačoch a ja ho robím 14px. Ak je rozlíšenie (minimálna šírka: 1280 pixelov), to znamená 1280 pixelov alebo viac, potom som písmo jednoducho zväčšil na 100% a stránka v hlavnom rozložení je natiahnutá po celej šírke obrazovky.

To znamená, že som pre web vytvoril plynulé rozloženie a opravil ho zadaním niektorých pravidiel css pre jednotlivé rozlíšenia obrazovky. Výsledkom bolo, že stránka vyzerala takto.

Screenshoty stránky e breeze ru

Screenshoty vo veľkostiach 320px 640px 800px 1024px 1280px 1920px

Dúfam, že vám bolo jasné, ako na to. Rozmýšľam, ako urobiť základné tekuté rozloženie, ktoré už viete. Napríklad som určil všetky veľkosti v percentách (%) namiesto pixelov (px). A navyše označené štýly pre rôzne rozlíšenia obrazovky. Tento web som ale zatiaľ neprispôsobil pre rôzne obrazovky. V čase písania tohto článku sú rozmery stránok 995 pixelov a všetky veľkosti sú uvedené v pixloch.

Stretol som sa s potrebou prezerať si stránku v rôznych rozlíšeniach obrazovky. S pokrokom v oblasti inteligentných telefónov a príchodom mnohých rôznych veľkostí obrazoviek je užitočné zistiť, ako bude váš web vyzerať na danom zariadení. Existuje niekoľko možností riešenia tohto problému. Ak chcete stránku zobraziť v počítači v nižšom rozlíšení, ako je váš monitor, prejdite do nastavení obrazovky a vyberte požadovanú hodnotu.

K dispozícii je tiež možnosť použitia doplnkov prehliadača, napríklad Web Developer pre Firefox, ktorý existuje aj pre Google Chrome. Možnosť Zmeniť veľkosť umožňuje zmeniť veľkosť prehliadača na požadovanú hodnotu.

Tieto metódy sú najjednoduchšie, ale teraz už nestačia - nebudete si môcť stránku prezrieť vo väčšom rozlíšení obrazovky ani zistiť, ako bude vyzerať z mobilného zariadenia. Pamätám si, že som nedávno zvažoval projekt, ktorý vám umožní testovať stránky vo všetkých prehľadávačoch. Je to nesmierne užitočné na kontrolu rozloženia viacerých prehliadačov v rôznych OS a prehľadávačoch, ale nebolo tam veľa rozlíšení obrazovky. Okrem toho, aby ste ju mohli používať, bolo potrebné sa zaregistrovať. Dnes zvážim pár jednoduchších a dostupné služby na rýchle prezeranie stránok v rôznych rozlíšeniach obrazovky.

Služby prezerania webových stránok v rôznych rozlíšeniach obrazovky

Niektoré projekty vám umožňujú iba zmeniť rozlíšenie obrazovky, zatiaľ čo iné majú ďalšie funkcie. Nebudem ich podrobne zvažovať, iba ich spomeniem v recenzii, môžu sa vám hodiť.

Mimochodom, pod doménou quirktools.com sa skrýva ešte niekoľko zaujímavých jednoduchých služieb:

• Smaps - vytvorte súbory Sitemap alebo iba hierarchickú schému.
• Drôty je skvelá vec, ktorá vám umožňuje vytvárať rozloženia webových stránok pomocou rôznych funkčných blokov (text, karty, formuláre, tlačidlá atď.)

Najjednoduchšia služba na prezeranie rôznych rozlíšení obrazovky. K dispozícii je tiež zoznam najpopulárnejších zariadení, z ktorých si musíte vybrať svoje vlastné.

Projekt má veľmi pekný dizajn.

Táto služba je obdobou CrossBrowserTestingu v tom, že vám navyše umožňuje hodnotiť vaše stránky rôzne prehliadače a OS. Okrem toho tiež vyžaduje registráciu a má platené funkcie. Aj keď to nie je potrebné na zobrazenie rôznych rozlíšení obrazovky - prejdite na položku ponuky Citlivé.

Čo sa týka dizajnu a funkčnosti, všetko je veľmi cool, čo stojí iba za príležitosť, aby si smartfóny vybrali možnosti zobrazenia na výšku a na šírku. Áno, zvyšok služieb má funkciu Otočiť, ale musíte uznať, že takto vyzerá všetko oveľa svetlejšie. Mimochodom, ak som to správne pochopil, potom po registrácii budete môcť využiť možnosť živého interaktívneho testovania v reálnom čase.

Služba v duchu minimalizmu. K dispozícii je pole pre zadanie názvu webu + možnosť výberu veľkostí obrazoviek na prezeranie.

Ďalší veľmi jednoduchý projekt. Okrem adresy a veľkostí stránok sú pre vaše pohodlie uvedené aj najobľúbenejšie rozlíšenia obrazovky.

Ak sa pozriete pozorne na spodnú časť obrázka, uvidíte, že služba InfoByIp zobrazuje prítomnosť dolného rolovacieho pruhu v rozlíšení 1024x768. Ak zmeníte rozlíšenie monitora manuálne, môžete si všimnúť, že neexistuje rolovacia lišta. Takéto nepresnosti v niektorých službách sú trochu depresívne, pomocou pravítka nebudete merať spoľahlivosť zobrazeného výsledku. Preto vám odporúčam prezerať si stránku pre rôzne rozlíšenia obrazovky, pre každý prípad pomocou niekoľkých rôznych služieb.

Používanie mobilných prehliadačov každým dňom rastie. Podľa štatistík asi 32% internetového prenosu pochádza z mobilných telefónov a tabletov. To tiež znamená rastúce očakávania spotrebiteľov týkajúce sa mobilných webov.

Navigácia v článku:

Testovanie webových stránok pred ich spustením je zásadným krokom kvôli obrovskej škále mobilných zariadení, ktoré majú zákazníci k dispozícii. A dokonca ani použitie takej flexibilnej techniky, ktorá túto potrebu nevylučuje. Mobilné zariadenia postupne nahrádzajú stolové počítače - viď graf nižšie, ako veľmi sa rozrástol mobilná prevádzka za posledné 2 roky?

Existuje niekoľko rôznych prístupov k validácii mobilných webov. Ďalej je uvedených päť hlavných testovacích metód zoradených od najefektívnejších po najmenej preferované.

1. Testovanie na skutočných mobilných zariadeniach

Najlepšie je web otestovať na skutočných zariadeniach, pretože mnoho nuancií interakcie nie je možné emulovať. Na dojem používateľa (UX) má vplyv niekoľko faktorov: prerušované sieťové pripojenie, hustota pixelov, relatívna veľkosť aktívnych prvkov na stránke a skutočná doba načítania stránky. V ideálnom prípade by stránka mala byť vôbec skontrolovaná mobilné zariadenia.

Úplné testovanie je samozrejme prakticky nemožné, pretože je náročné na čas a zdroje. Optimálnym riešením by bolo zakúpenie niekoľkých mobilných zariadení pre takzvanú testovaciu sadu, čo je obzvlášť dôležité pre podnikanie zamerané na zákazníka. Testovacia sada sa zvyčajne skladá z najpopulárnejších zariadení používaných na prehliadanie webu. Tento prístup vám umožňuje vykonávať fyzické testy v reálnych podmienkach a pozerať sa na miesto očami používateľa. Ak je kúpa mobilné telefóny pretože testovacia súprava nezapadá do rozpočtu projektu, použite vlastný smartphone. S najväčšou pravdepodobnosťou bude váš smartphone fungovať ďalej základňa Android alebo iOS, ktoré poskytnú aspoň predstavu o tom, ako väčšina používateľov vidí analyzovanú stránku. Spýtajte sa, aké mobilné zariadenia majú vaši príbuzní, kolegovia a priatelia, aby ste mohli stránku skontrolovať aj na iných zariadeniach.

2. Používanie simulátora iOS a emulátora Androidu

Skutočný hardvér nemožno nahradiť, ale pre nedostatok lepšieho riešenia to urobia softvérové \u200b\u200bemulátory. Emulátory pre iOS a Android sú určené predovšetkým na testovanie natívnych aplikácií. Poskytujú však predvolené prehľadávače pre mobilné zariadenia, ktoré presne reprodukujú web tak, ako bude vyzerať na skutočnom zariadení. Zdôraznime frázu dostatočne presne, pretože emulátory nezohľadňujú stav sieťového pripojenia, rýchlosť načítania stránok, relatívnu veľkosť aktívnych prvkov a ďalšie nuansy, ktoré je možné pozorovať iba v reálnych podmienkach. Avšak vykresľovacie nástroje sú funkčne ekvivalentné so skutočnými zariadeniami a robia dobrú prácu pri kontrole kompatibility medzi rôznymi prehliadačmi.

• Simulátor iOS dodávaný s Xcode IDE simuluje zobrazenie stránky na zariadeniach iPhone a iPad

Simulátor iOS je súčasťou Xcode IDE. Najskôr nainštalujte Xcode z platformy App Store. Prejdite do ponuky Xcode a vyberte Xcode\u003e Open Developer Tool\u003e iOS Simulator. Tento nástroj je bohužiaľ kompatibilný iba s operačným systémom Mac OS, takže používatelia Windows alebo Linux sa budú musieť poobzerať inde.

Emulátor Android je dodávaný s vývojovým prostredím aplikácie pre Android SDK. Nachádzajú sa podrobné informácie o emulátore Android.

3. Testovanie prehliadača

Ak máte problémy s zostavením testovacej sady alebo s porozumením softvérových emulátorov iOS a Android, môžete použiť iné metódy.

Online služba BrowserStack simuluje stacionárne a mobilné zariadenia na testovanie webov, je to pohodlný online nástroj na testovanie webov pre rôzne zariadenia a v rôznych prehliadačoch.

4. Služba responzora

Testovacie stránky by mali prebiehať na skutočných mobilných zariadeniach alebo pomocou vysoko kvalitných emulátorov. Ak z nejakého dôvodu nemožno tieto metódy implementovať, pred webmasterom sa otvorí obrovské množstvo ďalších možností, pretože testovanie sa v skutočnosti zníži na jednoduchú zmenu veľkosti okna prehliadača. Na vyriešenie tohto problému bolo vyvinutých veľa inteligentných nástrojov, ale Responsinator je považovaný za najefektívnejší.

Responzátor zmení veľkosť stránky podľa zadaných parametrov. Tento nástroj je užitočný na rýchle testovanie správania responzívneho dizajnu, nenahrádza však testovanie na skutočných zariadeniach.

Prejdite na web a zadajte adresu URL analyzovaného webu. Táto služba zobrazí váš web tak, ako by sa zobrazoval na populárnych zariadeniach v rôznych rozlíšeniach obrazovky. Tento nástroj môže byť užitočný na rýchlu kontrolu. Nemôže však nahradiť úplné testovanie na skutočných zariadeniach a dokonca ani softvérovú emuláciu, pretože tento nástroj beží na grafickom jadre aktívneho prehliadača. Inými slovami, služba neobsahuje motory mobilných prehliadačov na zobrazovanie stránok. Výsledok je v skutočnosti úplne rovnaký ako pri manuálnej zmene veľkosti okna prehliadača.

5. Zmena veľkosti okna prehliadača

V procese práce na webe dňa stolný počítač návrhári a vývojári často testujú správanie responzívnych dizajnových prvkov prepínaním veľkostí okien prehliadača. Táto akcia je taká elementárna, že sa jazyk neodváži nazvať ho „testovacím“, ale nemá zmysel sa ho vzdávať. Keď pracujete na úryvkoch kódu súvisiacich s responzívnym dizajnom, rýchly test prepínania vzhľadu a prepínania späť vám pomôže vyhodnotiť vaše zmeny. Túto techniku \u200b\u200bvšak nemožno porovnávať ani s inými testovacími metódami: chybou veľkosti, rôznymi grafickými modulmi, bez oneskorenia sieťového signálu atď. Táto metóda má príliš veľa nevýhod, aby mohla byť ekvivalentnou náhradou za ďalšie možnosti testovania.

Ako testuješ?