Responzivní design pro e-shopy

Responzivní design pro e-shopy

Responzivní design je v současné době velké téma a stal se z něj buzzword. V tomto článku si responzivní design představíme blíže, zejména pak jeho specifika pro e-shopy.

Co je to responzivní design?

Ve stručnosti: responzivní design je postup tvorby webu, který umožňuje přizpůsobení zobrazení webové stránky různým cílovým zařízením. Takovými zařízeními jsou například počítač, tablet, chytrý telefon, televize, infosystémy v autech a vůbec vše, na čem lze prohlížet web.

Responzivní design je často vnímán jako jedna z možností, jak přizpůsobit web mobilním zařízením. To je však spíše jeho nejčastější využití a bylo by chybou se v tomto chápání omezovat pouze na malé displeje chytrých telefonů a tabletů. Naopak, responzivní design nám umožňuje přizpůsobit web na jakékoli zařízení, které potřebujeme.

Osobně vnímám responzivní design spíše jako způsob přemýšlení při návrhu a tvorbě webu. Záleží pak pouze na tvůrci webu, kterou z možností využije.

Responzivní design, nebo mobilní verze?

Možností, jak přizpůsobit e-shop na mobilní zařízeních je více. Je možné vytvořit mobilní aplikaci, samostatnou mobilní verzi, případně využít služby třetí strany.

Osobně preferuji responzivní design z prostého důvodu: oproti jiným možnostem není potřeba paralelně vytvářet a udržovat několik verzí webu a také je možné se zaměřit i na jiná, než jen mobilní zařízení.

02-eshop
Obrázek 1: Web Baushop.cz na desktopu, tabletu a mobilu

Mobilní verze jako chudý příbuzný

Asi každý, kdo prohlíží weby na chytrém telefonu zažil situaci, kdy na samostatné mobilní verzi hledal nějakou informaci, či funkci. Avšak nenašel ji, protože mobilní verze daného webu byla funkčně a obsahově „osekaná“ na minimum – prý proto, aby se rychleji stahovala na mobilním připojení.

Lze pochopit bohulibý záměr tvůrce takového webu, který chtěl, aby byl jeho web na mobilním připojení rychlý. Bohužel žádný tvůrce není jasnovidec a tak nemůže s jistotou vědět, co vlastně daný uživatel zrovna na webu hledá a potřebuje.

Právě proto je dobré použít responzivní design, který umožňuje web přizpůsobit cílovému zařízení v jeho plné šíři. Žádná chudá mobilní verze, žádný zcela jiný web, který s tím výchozím (desktopovým) na první pohled nemá nic společného, ale konzistentní uživatelská zkušenost. Sice to znamená nějaké ty kilobajty navíc, ale za plnou funkčnost webu to stojí.

Obrázek 2: prodejní nástroj pro porovnání účinku filtru na webu Megapixel.cz je přizpůsoben i pro obrazovku chytrého telefonu
Obrázek 2: prodejní nástroj pro porovnání účinku filtru na webu Megapixel.cz je přizpůsoben i pro obrazovku chytrého telefonu

S ohledem na výše jmenované jsem přesvědčen, že samostatné mobilní verze nemají velkou budoucnost a jsou spíše dočasným snadným řešením, kdy se všichni teprve „učíme dělat responzivní design dobře“. Spíše to připomíná doby, kdy se pro mobily dělaly WAP stránky a kde je dnes WAPu konec?

Má responzivní design nějaké nevýhody?

Na responzivním designu bývá nejčastěji kritizován větší datový objem kódu a časová náročnost tvorby. V prvním případě je pravdou, že kód responzivního webu zabírá více dat, což je logicky dáno tím, že kód obsahuje více definicí pro různé verze layoutu webu. Pokud se ale kód vytvoří čistě a logicky, nárůst dat není nijak dramatický a za plnohodnotně fungující web na mobilu stojí.

Co se časové náročnosti týče, tak v dnešní době již nejsem toho názoru, že by tvorba responzivního designu byla náročnější, než například paralelní správa klasického a mobilního webu. Velkou roli hraje zkušenost, jakou tvůrce s responzivním designem má. Takto to ale platí všude.

Je responzivní design vhodný pro e-shop?

Zcela jednoznačně ano. V dřívějších dobách jsem slýchával, že je lepší samostatná mobilní verze a dokonce jsem se setkal s názorem, že responzivní design je „pro e-shop zcela nevhodný“. Naštěstí jsou dnes takové názory již raritou.

Začněme výhodami responzivního designu pro e-shopy z technického hlediska:

  • spravujeme jednu a nikoli více verzí e-shopu
  • odpadají problémy s duplicitním obsahem, protože URL stránky je stejné
  • odpadá nutnost detekce a přesměrování cílového zařízení
  • můžeme přizpůsobit kompletní funkčnost a obsah e-shopu libovolnému zařízení
  • můžeme se zaměřit i na velké displeje

Když jsem se snažil přesvědčit některé klienty, že by jejich e-shopu slušel responzivní design, často jsem slýchával argument, že na mobilních zařízeních nejsou konverze a tudíž nemá smysl do něčeho takového investovat.

Samozřejmě, že není možné se řídit dle statistik konverzí na neoptimalizovaném webu. Zejména však existuje jeden uživatelský fenomén, kdy lidé v průběhu rozhodování o koupi zboží používají různá zařízení. Zjednodušeně by se například dalo říci, že:

  • uživatel v práci zahlédne reklamu na eshop, na desktopovém počítači
  • v MHD při cestě domů si e-shop prohlíží a rozhoduje se o koupi na chytrém mobilu
  • objednávku dokončí doma na svém notebooku, nebo tabletu

Právě proto je pro e-shopy důležité mít web připravený jak na chytré telefony, tak na tablety a na všech těchto zařízeních nabídnout konzistentní uživatelskou zkušenost. Tomuto požadavku lze nejlépe dostát právě s responzivním designem.

Několik tipů, na co si u responzivního designu e-shopu dát pozor

Udělat responzivně článkový web či osobní blog je poměrně jednoduché. Zvládnout responzivní design e-shopu, kde je mnohonásobně více dat, navíc obsahově i vizuálně fragmentovaných, je mnohem složitější. Na co si tedy dát pozor?

1. Rychlost, objem přenášených dat

Snadno se může stát, že kód obsáhlého responzivního webu bude datově příliš velký. Velikost lze snížit při komprimování HTTP přenosu s pomocí GZIP komprese. Samotný HTML a CSS kód lze dále zmenšit s pomocí techniky zvanou „minifikace“, která z kódu odstraní nepotřebné znaky, jako jsou mezery a nové řádky.

Dále je vhodné minimalizovat použití obrázků – pro design webu je dobré v maximální míře využít možností CSS. Pro jiné, než výchozí písmo se pak výborně hodí webové fonty (například Google Fonts), které stejně dobře poslouží i pro ikony, viz například font Genericons, který je zdarma.

Obrázek 3: Služba Google Fonts a ikon-font Genericons
Obrázek 3: Služba Google Fonts a ikon-font Genericons

Větším využitím CSS a webových fontů se přiblížíme k vektorovému webu, což ocení majitelé displejů s vysokým rozlišením (Apple tyto displeje nazývá „retina“). To proto, že díky vektorovému vykreslení budou i na těchto displejích fonty a ikony ostré.

2. Počet požadavků na server

Je obecně známo, že stáhnout 100 souborů o velikosti 1 MB bude trvat výrazně déle, než stáhnout jeden soubor o stejné velikosti. To samé platí i pro web. Pokud kód vašeho e-shopu odkazuje odkazy na desítky souborů (obrázky, styly, JS skripty…), bude se zejména na pomalém mobilním připojení stahovat déle.

V tomto případě je velmi vhodné snížit počet požadavků na minimum a to například sloučením ilustračních obrázků do jednoho – tato technika se nazývá CSS sprites. Dále je možné sloučit do jednoho souboru CSS styly a zejména pak JS skripty – víme totiž, kolik měřících skriptů může e-shop obsahovat.

3. Postupné načítání – lazy load

Přirozenou vlastností HTML stránek je stažení všech zobrazených dat, například obrázků. To však může být nežádoucí. Představme si situaci, kdy uživatel na chytrém telefonu navštíví stránku s výpisem produktů. Tato stránka obsahuje desítky obrázků, které prohlížeč začne ihned stahovat. Protože uživatel touto stránkou pouze prochází, obrázky vidět nepotřebuje a ty se tedy stahují zbytečně a zdržují načtení celé stránky.

Výše popsanou situaci lze řešit za pomocí techniky zvané „lazy load“, kdy se data na stránce stahují až ve chvíli, kdy je uživatel skutečně potřebuje. V případě obrázků je řešení vidět například na webu Megapixel.

Technika lazy load se však nemusí omezovat pouze na obrázky, lze ji využít i pro postupné zobrazení obsáhlejších částí kódů. Například oblíbený prvek „Facebook Like Box“, zobrazující obličeje fanoušků, stahuje v reálu několik stovek dat! Pokud použijeme lazy load, můžeme toto množství dat stáhnout až ve chvíli, kdy se prvek má zobrazit.

4. Komplikovaný layout

Čím více prvků layout webu obsahuje, tím hůře jej zejména pomalejší zařízení vykreslují a tím hůře se v tomto webu orientuje uživatelům. Při návrhu a tvorbě nového webu doporučuji snažit se web co nejvíce zjednodušit a umístit na každou stránkou pouze důležité prvky.

Vítaným pomocníkem v této snaze je postup „Mobile First“, kdy se web navrhuje od malé obrazovky chytrého telefonu a až nakonec pro obrazovku desktopového počítače. Tím, že je tvůrce hned od začátku omezen malým displejem, je přirozeně donucen více se zamyslet nad tím, co je podstatné. Výsledkem je pak jednoduchý a přehledný web, který ocení nejen uživatelé chytrých telefonů, ale všichni.

Obrázek 4: Layout e-shopu DesignVille.cz je tak jednoduchý, jak jen může být
Obrázek 4: Layout e-shopu DesignVille.cz je tak jednoduchý, jak jen může být

5. Hlavička a navigace

Většina e-shopů v dnešní době používá funkcemi nabitou hlavičku a rozsáhlou strukturu kategorií v menu. V klasické desktopové verzi není problém do hlavičky umístit logo, vyhledávání, přihlášení, košík a také rozsáhlé plovoucí, dvouúrovňové menu.

Obrázek 5: Ukázka hlavičky připravovaného nového webu Parfums.cz v desktop verzi
Obrázek 5: Ukázka hlavičky připravovaného nového webu Parfums.cz v desktop verzi

V případě malého displeje chytrého telefonu ovšem není místa na zbyt a je naopak dobré hlavičku výrazně vizuálně zmenšit, aby neubírala drahocenný prostor hlavnímu obsahu. Toho můžeme docílit například tím, že celou hlavičku a všechny její funkce schováme do tenkého řádku s ikonkami.

Obrázek 6: Ukázka hlavičky Parfums.cz ve verzi pro mobil
Obrázek 6: Ukázka hlavičky Parfums.cz ve verzi pro mobil

Samotné hlavní menu pak může být buďto vysunovací shora, viz obrázek vlevo jako v případě webu Baushop.cz anebo jako tzv. „off canvas“ menu, které se vysune z levého okraje displeje a odsune celý web bokem. Viz obrázek vpravo na připravovaném novém webu Parfums.cz.

Obrázek 7: Řešení hlavního menu pro mobil na webu Baushop.cz a Parfums.cz
Obrázek 7: Řešení hlavního menu pro mobil na webu Baushop.cz a Parfums.cz

6. Výpis a filtr produktů

Zvláštní pozornost je potřeba věnovat stránkám s výpisem produktů, protože zde tráví uživatelé více času – rozhodují se, který produkt navštíví. Podle druhu zboží lze v malém displeji chytrého telefonu využít výpis s jedním, anebo dvěma produkty na řádek. V případě tabletu pak s třemi a více produkty na řádek. Viz příklady na webech Baushop.cz a Koralky.cz.

Obrázek 8: Výpis produktů na mobile na webu Baushop.cz a Koralky.cz
Obrázek 8: Výpis produktů na mobile na webu Baushop.cz a Koralky.cz

Pro filtr produktů je vhodné zvolit postup, kdy filtr překrývá či odsune obsah výpisu produktů. Avšak takovým způsobem, že část výpisu produktů bude stále vidět. Tak dosáhneme efektu, kdy uživatel po použití filtru ihned ve výpisu uvidí změnu a lépe tak funkčnost filtru pochopí.

Obrázek 9: Ukázka filtrace zboží na mobilu na webu Pilulka.cz a Baushop.cz
Obrázek 9: Ukázka filtrace zboží na mobilu na webu Pilulka.cz a Baushop.cz

7. Zaplňte celou plochu

Proč se omezovat jen na malé displeje chytrých telefonů a tabletů, když většina desktopových displejů má dnes blízko k full HD rozlišení? Jak bylo řečeno výše, responzivní design nám umožňuje web připravit i na tyto velké displeje. V případě e-shopu se přímo nabízí možnost zobrazit uživateli více zboží, což se hodí zejména pro e-shopy, kde se zboží „vybírá očima“. Takovými e-shopy jsou například DesignVille.cz a Koralky.cz

Obrázek 10: Výpis produktů na webu DesignVille.cz využívá celou šířku okna prohlížeče
Obrázek 10: Výpis produktů na webu DesignVille.cz využívá celou šířku okna prohlížeče
Obrázek 11: Stejně tak web Koralky.cz využívá celou šířku okna
Obrázek 11: Stejně tak web Koralky.cz využívá celou šířku okna

8. Není cesty zpět, testujte, testujte!

Na závěr jedno upozornění – jakmile jednou začnete s responzivním designem, není cesty zpět. Je stále potřeba myslet na to, že všechny úpravy e-shopu musíte testovat také na mobilním telefonu. Pouhá kontrola v běžném webovém prohlížeči, jako je Chrome nebo Firefox, nestačí.

Příklady e-shopů s responzivním designem

Načerpat responzivní inspiraci můžete třeba u těchto e-shopů:

  • Astratex.cz
  • Baushop.cz
  • DesignVille.cz
  • Euronics.cz
  • Global-Wines.cz
  • Koralky.cz
  • Megapixel.cz
  • Petrklic.cz
  • Pilulka.cz
  • Shoppie.sk
  • Spacil.cz