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.
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:
Změna disproporcí (Zdroj: www.richardbankertwebdesign.com)
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.
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.
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í.
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 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.
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)
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.