Efektivní ladění responzivních webů
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

Efektivní ladění responzivních webůEfektivní ladění responzivních webů

 

Efektivní ladění responzivních webů

Google       Google       4. 5. 2018       4 233×

Jak si poradit s dnešní škálou prohlížečů a zařízení? A jak s nepřítomností pořádných vývojářských nástrojů na mobilech? Svatý grál neznám, ale pár tipů ze své praxe bych měl.

Reklama
Reklama

Dnes přinášíme ukázku z knížky Vzhůru do (responzivního) webdesignu od Martina Michálka.

Mé testování je čtyřfázové:

  1. Prototypování 
  2. Vývojářský desktopový prohlížeč
  3. Alternativní prohlížeče pomocí nástroje BrowserStack 
  4. Reálná zařízení

1) Prototypování (na CodePenu)

Ještě než začnu něco finálně implementovat, procházím touto první, prototypovací fází. Na prototypu si vyzkouším nejkritičtější designérské i kodérské problémy. Používám CodePen, kde je to za chvilku hotové a výsledek můžu rychle otestovat ve všech možných prohlížečích. Dále pak Bootstrap nebo prostě HTML, CSS a Javascript.

2) Vývojářský desktopový prohlížeč (s Chrome DevTools)

V téhle fázi trávím samozřejmě nejvíce času. Kvůli DevTools používám Chrome

Občas se podívám do ostatních desktopových prohlížečů: Firefoxu, Explorerů, Safari a Edge. Méně často do Opery, která má obvykle podobné renderování jako Chrome.

Protože se ale bavíme hlavně o mobilních zařízeních, v Chrome mám puštěný Device Mode. Neznám lepší nástroj na emulaci všeho možného mobilního a díky tomu v Chrome trávím během procesu návrhu i kódování webu nejvíce času

Najdete ho pod nenápadnou ikonkou mobilu nalevo od hlavního menu. Nebo pod zkratkou Ctrl/Cmd+Shift+M, když máte DevTools otevřené (Ctrl/Cmd+Shift+I).

Obsahuje přednastavené profily zařízení, emulaci pomalého mobilního internetu, emulaci uživatelského zoomování a další vychytávky.

Alternativy v ostatních prohlížečích

Něco podobného existuje ve Firefoxu (Responsive Design View – Ctrl/Cmd+Alt+M) nebo v Safari, a dokonce v Edge (F12 / Záložka „Emulation“). Alternativy jsou ale dle mých zkušeností slabší.

Při testování v Chrome si navíc odladíte nejpopulárnější desktopový i mobilní prohlížeč. Ano, Firefox i Edge mají mobilní bratry, na které bychom neměli zapomínat, ale jejich podíl je malý na to, abyste z nich mohli udělat primární zařízení pro jednodušší testování mobilů.

V Chrome obvykle oknem prohlížeče hýbu a upravuji kód, dokud se mně design alespoň trochu nelíbí ve všech rozlišeních. 

V další fázi potřebuji testovat v reálnějším prostředí. Ano, jde o jiná vykreslovací nebo javascriptová jádra. Pomůže BrowserStack nebo simulátory.

3) Alternativní prohlížeče (pomocí BrowserStacku)

BrowserStack je výborný nástroj, který mi ušetřil spoustu času. Rovnou upozorním, že za live verzi, kterou používám, zaplatíte kolem pěti set korun na osobu měsíčně. Tak, a tím bychom vyčerpali výčet jeho nevýhod.

Bezplatná alternativa existuje, ale je složitější. Simulátory a emulátory nejsou multiplatformní a zaberou moc času při instalaci, správě i spouštění.

BrowserStack naproti tomu:

  • běží v prohlížeči a je naprosto multiplatformní,
  • nabízí svižnější čas startu i přepínání mezi prohlížeči,
  • nevyžaduje vaši pozornost při instalaci a aktualizaci, 
  • poskytuje možnost testování na reálných zařízeních.

Takže už možná chápete, proč ta pětistovka měsíčně nemusí vůbec bolet. browserstack.com

Kdybyste chtěli levnější alternativu, mrkněte se na CrossBrowserTesting.com. Jsou tam jen emulátory a je to pomalejší. Stojí to přibližně sedm stovek, ale v této ceně je i generování screenshotů a spouštění Selenium testů, které jsou u BrowserStacku za další peníze.

Následující část čtěte, jen pokud hodně chcete šetřit a máte vysokou odolnost proti bolesti.
V opačném případě přejděte k testování na reálných zařízeních.

Simulátory a emulátory (levná alternativa k BrowserStacku, kterou nedoporučuji)

Mobilní Chrome jakžtakž odpovídá tomu desktopovému, takže potřebujete otestovat hlavně Android Browser a pak mobilní Safari. Občas také mobilní Operu, Firefox nebo Explorer. Mrkněte do statistik, jak si u vás tyhle prohlížeče stojí. 

  • Mobilní Safari
    Simulátorem je možné na Macu testovat iOS (nebo také watchOS a tvOS, ale tam není žádný prohlížeč), takže mobilní Safari. Nicméně pokud jste na Windowsech nebo Linuxu, emulaci mobilního Safari nespustíte. vrdl.in/sgo6c
  • Android Browser
    Android emulátorem jste si dříve mohli pustit verzi Androidu s aktuálním Android Browserem. Dřív byl Android Emulator pomalý, což je pořád a navíc je teď docela věda ho nainstalovat. vrdl.in/1m26i
  • Mobilní Explorer
    Spustíte v emulátoru od Microsoftu. Samozřejmě jen na Windows. vrdl.in/s72hb
  • Mobilní Opery
    Emulátor aktuální verze mobilní Opery neexistuje, ale má jádro velice podobné Chrome. Je dobré web vidět v Opeře Mini, kterou lze nainstalovat na desktop. vrdl.in/xba60

4) Testování na fyzických zařízeních

Pozor, simulátory ani BrowserStack vám nestačí! Proč?

  • Web si musíte osahat vlastním palcem. Klikání myší v simulátoru tohle nenahradí.
  • Simulátory nenasimulují problémy s výkonností.
  • Občas se stane, že v reálném zařízení se věci vykreslují jinak než v simulátoru.

Pokud to myslíte s responzivními weby vážně, určitě k ruce potřebujete ještě nějaká reálná zařízení.

Jaká zařízení si pro testování pořídit? Nejlépe všechna! Že vám to rozpočet nedovolí? Mně taky ne, takže do začátku vás může inspirovat seznam zařízení, na kterých testuji svou práci. Budu je řadit podle toho, jak důležitá mi připadají pro testování dnešních webů.

Budete potřebovat hlavně smartphony i tablety z obou nejrozšířenějších platforem (Android a iOS). Nezapomínejte prosím ani na starší zařízení. Jsou menší a méně výkonná. Uživatelská základna je velmi fragmentovaná. Nevěřte tomu, že všichni vaši uživatelé vlastní poslední „ajfoun“.

Telefony:

  • iPhone 6 Plus s iOS 10 jako zástupce moderních phabletů. 
  • Samsung Galaxy S III Mini s Androidem 4, Chrome a Android Browserem. Podprůměrný starší Android.
  • Nokia Lumia 520 pro testování Exploreru na Windows Phone 8.1. Levný Windows Phone.
  • iPhone 4 s iOS 7 jako zástupce starých a pomalu vykreslujících iOS zařízení.
  • Vodafone 945 se starým Androidem 2.1 a rozlišením 240 × 400 pixelů. Ano, i na vaše weby se možná občas dívám přes jeden z nejhorších mobilů, jaké si umíte představit.

Tablety:

  • iPad Mini s iOS 8. Jeden z menších tabletů, přitom plnohodnotně použitelný (a u nás doma používaný). Také velmi prodávaný. Určitě doporučuji pořídit, hlavně kvůli otestování dostatečné velikosti aktivních prvků v uživatelském rozhraní. Rozlišení 1024 × 768 na sedmi palcích: Garantuji, že se váš grafik zapotí.
  • Tablet Lenovo TAB 2. Klasický desetipalec s Androidem 5. 
  • Sencor Element 7 s Androidem 4.1, nechutně pomalým prohlížečem a rozlišením 480 × 800 pixelů. A také displejem prasklým od našeho mladšího chlapečka. To je prosím simulace těžkých podmínek pro prohlížení webu.

A nezapomeňte na guerilla testování – takové prodejny Alzy nebo Datartu bývají plné zařízení, na kterých si můžete leccos vyzkoušet. Z pohledu designéra je zajímavé každé nové zařízení, takže kdybyste se kolem mě s nějakým takovým vyskytli, pravděpodobně vám ho na chvíli ukradnu a budu na něm své weby testovat.

Browsersync a multiplatformní „DevTools“

Browsersync je obecně velmi přínosný nástroj pro testování responzivních webů. Teď nás ale zajímá hlavně jeho schopnost poskytnout něco jako DevTools, ovšem multiplatformně. Obsahuje nástroj jménem Weinre, se kterým je ladění webů na mobilech velmi příjemnévrdl.cz/p/browsersync

Obrázek: Weinre jsou ale jen něco jako DevTools. Plnohodnotným vývojářským nástrojům dnešních prohlížečů konkurovat nemohou.

Propojení bratrských prohlížečů

  • Mobilní Chrome
    S jeho desktopovým sourozencem propojíte od Androidu verze 4. Mobilní zařízení stačí propojit USB kabelem a pak ještě nastavit pár věcí podle následujícího návodu. vrdl.in/7ztbj
  • Mobilní Safari
    S desktopovým Safari propojíte samozřejmě jen na Macu. Musíte si také nainstalovat Xcode, což obecně doporučuji, pokud na Macu děláte jakoukoliv vývojařinu. Po propojení zařízení kabelem se pak podívejte do nové položky v menu prohlížeče Safari, která se bude jmenovat „Developer“. V druhé sekci jsou připojená zařízení. Následuje podrobnější návod.  vrdl.in/u60bs
  • Mobilní Explorer/Edge
    Pomocí Visual Studia je možné nějak propojit s desktopovým Edge. I tady případné zájemce pošlu na návod.vrdl.in/l4uxy

Bylo toho hodně, takže ještě jednou zopakuji to podstatné.

  1. Věci, které se mohou pokazit, raději předem prototypuji. Nejčastěji pomocí CodePen.io. 
  2. Běžné ladění responzivních webů dělám v Chrome DevTools a jeho Device Mode.
  3. Pro kontrolu ve zobrazovacích jádrech jiných prohlížečů používám BrowserStack.
  4. Nakonec používám reálná zažízení. Případné problémy řeším pomocí propojení s desktopovým prohlížečem nebo nástroji Weinre a Browsersync.

 Chcete vědět víc?

obal knihy

Kniha „Vzhůru do (responzivního) designu“

Autor:
Martin Michálek
 
Počet stran:
272
 
Datum vydání:
Květen 2017
 
Formáty:
Formáty PDF, EPUB (iOS) a MOBI (Kindle)
 
Cena:
299 Kč (e-book), 649 Kč (kniha)
 
Nakladatel:
Michálek Martin - Vzhůru dolů
 

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hustodémonsky krutopřísné    
3 hlasy
Google
(fotka) Martin MichálekFrontend designér, lektor a autor na volné noze specializovaný na CSS a rychlost načítání. Autor knížky Vzhůru do (responzivního) webdesignu.
Web    

Nové články

Obrázek ke článku NVIDIA shrnuje přehled novinek na E3 2018

NVIDIA shrnuje přehled novinek na E3 2018

Společnost NVIDIA si u příležitosti E3 2018 připravila řadu novinek, které uvádí v kompletním přehledu, Například nové hry s podporou NVIDIA Highlights, která je součástí aplikace GeForce Experience, i nadále nabírá na obrátkách. Kromě výše zmíněné Shadow of the Tomb Raider získaly podporu také hry Dirty Bomb a Switchblade.

Reklama
Reklama
Obrázek ke článku SODAT vidí budoucnost datové bezpečnosti ve strojovém učení

SODAT vidí budoucnost datové bezpečnosti ve strojovém učení

Firmy chrání svá citlivá data často nedostatečně. Podle průzkumu společnosti SODAT se v minulém roce setkalo až 80 % z nich s bezpečnostním incidentem ztráty nebo úniku dat. Jedna z pilotních firem, která testovala novou verzi řešení SODAT Protection & Analytics 2.0pro bezpečností analýzu a monitoring dat díky novince zjistila, kdo z disku smazal důležité výkresy a mohla na incident včas reagovat.

Obrázek ke článku Kontrolujete pracovní emaily i na dovolené? 7 tipů odborníka, jak nepřijít o data

Kontrolujete pracovní emaily i na dovolené? 7 tipů odborníka, jak nepřijít o data

Letní měsíce jsou pro většinu zaměstnanců spojené s každoroční dovolenou. Z údajů Českého statistického úřadu vyplývá, že v roce 2017 podnikli Češi přes 13 milionů delších cest (tzn. s více než čtyřmi noclehy). Přitom právě na období července, srpna a září připadá více než 7,5 milionů z nich. Nicméně tradiční představu o dovolené jako o čase, kdy má práci na starost někdo jiný, Češi boří. 

Obrázek ke článku 10 SEO mýtů, které už nemusíte v roce 2018 řešit

10 SEO mýtů, které už nemusíte v roce 2018 řešit

„Kolik má být na stránce klíčových slov?“, „Nemáš vyplněný meta tag keywords, to nebude fungovat.“, „Katalogy jsou mrtvý“. Také jste už slyšeli některé z těchto otázek? Pojďme si na ně konečně jednou provždy odpovědět.

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032018 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý