Data o velikostech okna (nebo viewportu) dodávají na rozdíl od rozlišení displeje do responzivního designu informaci, bez které se nedá rozumně vymýšlet design webu.

Jde o nejdůležitější uživatelský kontext, kterému se weby přizpůsobují. Mají vliv na tvorbu breakpointů, hojně se s nimi pracuje v CSS a JavaScriptu.

Jenže z veřejně dostupných dat tady vyjít nemůžeme: Gemius, Statcounter nebo i Google Analytics standardně nabízejí jen přehled pro rozlišení obrazovky, který je webařům tak nějak na pytel.

Ukážu vám ale způsob, jak z Google Analytics (GA) data vytáhnout a prezentovat v jakžtakž použitelné podobě. Jako na následujícím obrázku.

Počet uživatelů podle šířky okna

Je jen potřeba si v GA připravit vlastní report a data z něj pak vybrousit přes Google tabulku. Chcete si to zkusit na svých datech? Pojďme si to projít postupně.

Poznámka hned na začátek: Měřený web musí být responzivní nebo – technicky řečeno – musí používat meta značku pro viewport. U neresponzivních webů vám do Analytics všechny mobilní zařízení ukáží výchozí layoutový viewport, obvykle v šířce 980 px.

V ukázce používám data z malého webíku ubytovani-provence.cz.

V Google Analytics si vytvořte vlastní report:
(Přizpůsobení → Vlastní přehledy → Nový vlastní přehled)

  • Název: Třeba „Velikosti okna prohlížeče“
  • Typ: Jednoduchá tabulka
  • Skupina metrik: Přidat metriku Uživatelé
  • Úrovňové přechody dimenze: Přidat dimenzi Velikost prohlížeče
  • Uložit a je to

Všechna ostatní nastavení klidně ponechte ve výchozím stavu.

V angličtině je to popsáno například na CSS Tricks.

Krok 1: Vytvoření vlastního přehledu

Po otevření reportu (Přizpůsobení → Vlastní přehledy) uvidíte přehled po velikostech okna, ale ten vám nicmoc neřekne.

Krok 2: Vložení do Google tabulky

Já si vše uložil do Google tabulky a dále s tím pracoval tam:

  • Exportovat → Tabulky Google

Pozor, Analytics mají limit 5 000 řádků exportu. Většinou to nevadí, ale některé projekty to může limitovat. Na to jsem vyzrál úpravou počtu řádků přímo v URL adrese.

Související

Tabulka by v tomto kroku měla vypadat asi takto.

Tady jsme z rozlišení odmazal nepotřebné údaje a taky výšku okna, protože design uzpůsobuji hlavně jeho šířce. Spojil jsem stejné šířky okna do jednoho řádku a seřadil.

  • Odmazat hlavičku: Pomocí Odstranit řádky z kontextové nabídky.
  • Odmazat řádek s (not set) – s tím asi nic neuděláme.
  • Zafixovat první řádek s popisky dat: Zobrazit → Ukotvit → 1 řádek.
  • Odmazat výšky okna: Označit první sloupec a pak Upravit → Najít a nahradit, do Najít dát x(.*)$ a zatrhnout Vyhledávání pomocí regulárních výrazů. Pak jen Nahradit vše.
  • Spojit stejná čísla do jednoho řádků: Nainstaloval jsem si kvůli tomu Power Tools. A pak jdu na Doplňky → Power Tools → Data. Pomocí Combine rows vyberu v druhém kroku sloupec Velikost prohlížeče. Action ve třetím kroku je Calculate numbers a Delimiter / function pak [SUM]. Nakonec už jen Finish.
  • Tabulku jsem seřadil od nejmenšího rozlišení po největší: Data → Seřadit list podle sloupce A, A-Z.

Výsledná tabulka: Ukázka.

Dostali jsme se k docela hezké reprezentaci čísel. Mě by však zajímala distribuce rozlišení na ose. K tomu je samozřejmě ideální graf.

  • Vložit → Graf
  • Ve formuláři: Typ grafu: Plošný a Použít sloupec A jako popisky

Výsledná tabulka s grafem: Ukázka.

Graf rozdělení šířky viewportů na vašem projektu

Dostaneme se k docela hezky vypovídajícím grafu.

Krok 3: Hotový graf

Na jeho základě můžu vymýšlet body zlomu designu (breakpointy) nebo minimálně ověřovat jejich nastavení.

Když například vezmu nastavení breakpointů například ze vcelku rozumného článku The 100% correct way to do CSS breakpoints, bylo by rozdělení u analyzovaného projektíku následující:

  • 0 - 599 pixelů: 35 %
  • 600 - 899 pixelů: 5 %
  • 900 - 1 199 pixelů: 13 %
  • 1 200 - 1 799 pixelů: 35 %
  • 1 800 pixelů a více: 12 %

Tady bych zvažoval, zda breakpointy nenastavit jinak – je zde velmi málo uživatelů s obrazovkami šířky 600-900 pixelů a s velmi velkými displeji. Ale k nastavování breakpointů se ještě vrátím v dalším textu.

Dvě poznámky na závěr:

  1. Necítím se jako analytický profík, takže pokud máte námět na vylepšení nebo zjednodušení procesu nebo výsledné prezentace, velmi je vítám.
  2. Docela dost by mě zajímaly grafy z vašich projektů - zejména těch s větší návštěvností. Tušíte správně, že se to dost liší projekt od projektu. Budu moc rád, když je nasdílíte.

Komentáře