Malé obrázky na velkých obrazovkách: Od mobilu k desktopu

Pokud se vám obrázek dobře ukazuje na mobilu, mějte na paměti, že to tak nemusí platit při zobrazení na velkých monitorech. Jak se obrázek roztáhne nebo ořízne? Jak se pak změní celkový prostor na obrazovce? 

Webové stránky bývají často navrhovány metodou mobile-first, čili nejprve se klade důraz na mobilní verze webu. A to se občas stane kamenem úrazu. Ne vždy se totiž web optimalizovaný na mobily dokáže správě přizpůsobit velkým obrazovkám. Oněmi velkými obrazovkami mohou být tablety, notebooky, stolní počítače, dokonce 30 palcové monitory s 4K rozlišením. Tvorba webu by měla být přizpůsobena tak, aby i uživatelé těchto přístrojů k ní měli mít přístup.

Obrázky, které fungují na malých obrazovkách, zkrátka nemusejí být vhodnými adepty pro ty velké. Mohou se příliš roztáhnout, což někdy způsobí nutnost delšího scrollování, a tím mohou ztratit žádaný efekt. Pokud navrhujete web pro více zařízení, berte v úvahu orientaci (horizontální nebo vertikální), správný poměr obrázku (proporce mezi šířkou a výškou), a rovněž velikost ostatních elementů na webu.

Problém č. 1: Disproporční měřítko

Aby se obrázek přizpůsobil větším obrazovkám, designeři občas  k zaplnění prostoru jednoduše zvětší šířku a výšku obrázku. Tento proces však způsobí disproporční zobrazení ve vztahu k okolním prvkům stránky (nadpis, text nebo navigace). Třemi hlavními problémy pak jsou:

• Nízká hustota informací – Informační hodnota obrázku není dostačující vzhledem k zabranému prostoru. Takto zbytečně použitý prostor by měl ukazovat víc věcí než jen jednu větší.
• Scrollování – Obrázek se zvětší natolik, že jsou uživatelé nuceni scrollovat než se dostanou k našemu obsahu. Což stojí další interakci a také čas.
• Nízká kvalita obrázku – Obrázky s nízkým rozlišením se mohou stát „kostičkovanými“ nebo rozmazanými. Ve všeobecnosti každá slabina, kterou obrázek obsahuje, se stane na velkých obrazovkách více viditelnou.

Změna disproporcí (Zdroj: www.richardbankertwebdesign.com)

Problém č. 2: Oříznutí

Aby se zabránilo přílišnému zvětšení obrázku, designeři zvětší například jen jeho šířku. Uživatel pak nemusí stránkou zbytečně scrollovat. Nicméně pokud je oříznut nevhodně, může ztratit na významu.

Problém č. 3: Přemístění

Tím, jak se obrázek zvětšuje, se může změnit jeho vztah k ostatním prvkům na stránce. Může se se ostatními elementy například překrývat. Opět se tím ztratí účinnost a vůbec i význam.

Implementace mobilního zobrazení na desktopu může být komplikovanější, jak se někdy může zdát. Aby byl váš web bezchybně zobrazen na kterémkoliv zařízení, máme pro vás pár tipů, jak tyto potíže vyřešit.

Řešení č. 1: Škálujte a ořezávejte

Dbejte na správné zvětšování obrázku. Ve většině případů by se obrázek neměl k zaplnění prostoru jen roztáhnout. Omezí se pouze na výšku může mít za následek špatné oříznutí. Na místo toho kombinujte škálování a oříznutí. Zajistíte tím, aby výsledný obrázek zůstal se správnou proporční velikostí, zachoval si svůj význam a zároveň se na velké obrazovce vhodně zobrazil.

Podle toho jak se obrazovka rozšiřuje, roztáhněte obrázek jak na výšku, na šířku, či kombinací obojího, ale přestaňte ve chvíli, kdy se obrázek stane buď disproporčně příliš velkým nebo špatně pochopitelným. Poté můžete začít ořezávat tak, aby se správně přizpůsobil danému zařízení.

Řešení č. 2: Výběr vhodného obrázku

Použijte takový obrázek, který bude fungovat i při změnách poměru a rozměrů. Pokud se váš web má správně zobrazovat na více zařízeních, mějte to na mysli při výběru obrázku. Zvolte takový obrázek, který se bude moct zvětšovat a bude dobře vypadat i v jiných velikostech. Ptejte se na následující otázky:

• Může obrázek vypadat dobře i v jiném poměru?
• Je obrázek dostatečně veliký, aby mohl být zobrazen jak na vrchu, spodu či stranách webu, aniž by se podstatně změnil jeho význam?
• Je na obrázku prvek, který musí zůstat na středu?
• Je nutné, aby se obrázek zobrazoval na všech zařízeních a velikostech? Čili má takovou informační hodnotu, aby zabíral větší prostor?

Řešení č. 3: Nastavte maximální rozměr obrázku

Může se stát, že nějaký obrázek nebude v určité velikosti moc dobře fungovat. V takovém případě jeho velikost omezte. Než aby se obrázek měl deformovat, raději využijte prázdných rámů, kterými zbylý prostor vyplníte.

Řešení č. 4: Obrázek vyměňte nebo odstraňte

Další možností, jak respozivní zobrazení řešit, je výběr jiného obrázku pro různé velikosti obrazovky. Pokud máte na výběr z více obrázků, můžete zvolit vhodný obrázek k danému zařízení. V podstatě můžete i zjistit, že někdy obrázek vůbec není třeba a klidně se obejdete bez něj.

Odstranění obrázku (Zdroj: weblizar.com)

Závěrem

Výše popsané problémy se týkají pouze těch designerů, kteří navrhují responizivní weby. Důležité je zjistit, jak vypadá váš návrh na různých zařízeních, neopomeňte ani širokoúhlé displeje. Klíčové je však zprvu vytvořit takový design, který bude kompatibilní a použitelný bez ohledu na zařízení či obrazovku.

Potřebujete web s reponzivním designem? Napište nám a rádi Vám poradíme.