4/1/2017
Vložil: Jakub
993
Sdílet: Facebook

Historie responzivity a gridových systémů

Tabulkový layout

Úplně z počátku, někdy v devadesátých letech a možná ještě na prahu nového tisíciletí, se k usazení webových stránek používalo tabulek (tagu TABLE, TR a TD). Tabulky, jako by k tomu tehdejší vývojáře skoro naváděly. Tady DIV v tu dobu byly velmi problematické. Zejména Internet Explorer si jejich atributy počítal, jak si chtěl. Nikdy jste neměli jistotu, že divy, které vidíte v Exploreru vedle sebe, nebudou v Exploreru náhodou pod sebou, např. kvůli tzv. 3px bugu (Internet Explorer kdysi obsahoval chybu, která občas spočítala věci o 3px špatně, výsledkem pak bylo, že se dva přesně spočítané divy jednoduše nevešly vedle sebe a došlo k jejich zalomení). Při práci s divy je také třeba umět dobře používat obtékání a různé další technologie.

Tabulky umožňují jednoduše rozdělovat svůj obsah do sloupců a buněk. Můžeme nastavovat vnitřní odsazení buněk, obarovat buňky, zarovnávat text, používat uvnitř obrázky atd. Nicméně uvnitř webu existuje něco, čemu se říká sémantika. Sémantika nám v podstatě říká, že jednotlivé elementy uvnitř webu by měly být logicky odděleny, a co možná nejjednodušeji popsány. Jakákoliv myšlenka sémantiky je absolutně pasé, pokud je web fyzicky jen velká tabulka. Norma W3C navíc říká, že tabulky slouží výhradně k zobrazení textových tabulkových informací. Do tabulky v žádném případě nepatří tabulky, patří do ní výhradně spolu související texty.

Tabulky mají, či určitě měly v minulosti jednu zásadní nevýhodu. Webové prohlížeče tabulku v zásadě nezobrazily do chvíle než měly tabulku kompletně načtenou. Jelikož v jedné velké tabulce byla celá stránka, znamenalo to v praxi, že se obsah stránky zobrazil až po načtení celé stránky. Jelikož tato tabulka obsahovala obrázky, asi si dokážete představit, jak to v praxi vypadalo.

Rozložení stránky pomocí framů

Framy, v českých podmínkách známé jako rámce, jsou v HTML v podstatě historičtí dinosauři. Fungovalo to tak, že jedna stránka byla složena z několika HTML dokumentů, které se zobrazovaly v různých částech stránky. Snadno jste tak vytvořili levé navigační menu, pravý sloupec např. s aktualitami a střední obsahový sloupec, aniž byste měli větší znalosti CSS či HTML. Mělo to však opravdu spoustu stinných stránek. Jednou z nich byla špatná podpora a rozdílná interpretace. Zkrátka jste nikdy neměli jistotu, že to bude fungovat tak, jak má. Dalším problémem bylo indexování indexovacími roboty (jako např. Google.com). Roboti indexovali jen mateřský dokument, který tvořil sazbu dokumentu. Ostatní HTML dokumenty, které se do něj vkládaly pomocí rámců roboti ignorovali. Za následek to samozřejmě mělo absolutní ztrátu pageranku a snížení pozice ve vyhledávači. V neposlední řadě byla problémem samotná navigace. Ať jste prošli webem tak hluboko, jak jste chtěli, měnila se pouze URL adresa použitých rámců, URL adresa zadaná v prohlížeči patřila stále mateřskému dokumentu. Následkem toho nebylo možné žádnou podstránku uložit do oblíbených položek. Vždy to končilo tak, že pokud jste se na uloženou URL adresu vrátili, octli jste se znovu na homepage.

V současné době se rámce již vůbec nepoužívají a uvidíte je extrémně vzácně. Osobně jsem je neviděl už spoustu let. Hádám, že poslední stránky s rámci možná zemřely společně se společností webzdarma.cz, která poskytovala subdomény na doméně wz.cz. Vzácně se potkáte s použitím vložených rámců (tak IFRAME), které též nejsou indexovány a používají se výhradně k vkládání obsahu na stránku z cizích webů.

Nathan Smith Grid System

Jeden z prvních gridových systému, se kterým jsem se setkal, byl Nathan Smith Grid System. Jednalo se o jednoduchý sloupcový grid, který neuměl nic jiného. Pracoval s fixní šířkou 990 pixelů. Jakákoliv plocha monitoru větší než tato šířka byla nevyužita. Obsah webu byl vždy zobrazen uprostřed webu. Sémanticky i technicky to bylo mnohem lepší než tabulka. Tento grid však bohužel nepočítal s žádným responzivním rozložením. V době, kdy tento grid vznikal, bylo v módě nemít responzivní web, nýbrž mít pro mobilní zařízení vlastní HTML šablonu a vlastní rozložení. Jednalo se o tzv. mobilní verzi webu. Spousta lidí s tím ale nebyla spokojena. Většině návštěvníků i majitelům webů vadilo, že web nevypadá na mobilu stejně, ani příliš podobně jako vypadá na počítači. Mobilní verze se často velmi lišili. Takovou mobilní verzi webu můžete vidět např. i dnes, na serveru libimseti.cz. Tento seznamovací server nemá responzivní webdesign, pokud si jej otevřete na mobilu či tabletu, setkáte se s jeho mobilní verzí, která vypadá naprosto odlišně.

Responsive Grid System

Jedná se též o jednoduchý gridový systém. Našel jsem jej v dobách, kdy jsem se učil dělat responzivní webdesign. Můžete jej vidět např. přímo na tomto webu. Náš firemní web byl jednou z prvních obětí mé responzivní činnosti. Přesto, že na našem webu pravděpodobně nevidíte příliš nedokonalostí, tento systém se mi po čase jeví jako nepraktický. Možná to bude tím, že jsem jej neuměl úplně správně používat. Nicméně mi přišel poměrně složitý na konfiguraci. Jednoduše řečeno, na můj vkus v něm bylo spousta detailů, o které jsem se jako programátor musel starat, často jsem na nějaký zapomněl a vznikaly pak zbytečné chyby a korektury klientů.

Twitter's Bootstrap

Bootstrap není jen gridový systém, jedná se o HTML/jQuery framework, který kromě samotného gridového systému obsahuje i širokou škálu běžných webových prvků, jako jsou vyskakovací okna, taby, bubliny, optimalizovaná formulářová políčka, tlačítka, navigační prvky, CSS šablony a nekonečně mnoho dalších věcí. Osobně jsem se mu velmi dlouho vyhýbal. Přiznávám, že to má možná kořeny v mé věčné touze se nějak odlišovat a používat zvláštní nástroje. S Bootstrapem jsem přišel do styku při psaní jednoho opravdu velkého projektu - sociální sítě, na kterém naše společnost pracovala ještě s několika dalšími subjekty. Vzhledem k mlčenlivosti, kterou máme podepsanou, bohužel nemohu prozradit jméno onoho projektu. Nicméně jsem díky tomuto projektu pochopil, že můj strach a nechuť pracovat s bootstrapem byl naprosto nesmyslný. Od té doby používáme již výhradně Bootstrap. Je extrémně jednoduchý na zpracování, naprosto logický a velmi schopný. Mezi kodéry často uslyšíte, že „všechny weby psané na bootstrapu vypadají stejně", tento jev však není způsoben samotným Bootstrapem, ale současnou módou ve webdesignu. Ta určuje, že je v módě čistý, jednoduchý webdesign, dělený do přehledných bloků. Je to do jisté míry způsobeno tím, že je to výhodnější pro responzivitu, ale samotný Bootstrap za to nemůže. Velmi odlišný design, který stojí na Bootstrapu, můžete vidět např. na jednom z našich projektů - www.zszehrovice.cz. Jedná se o stránky základní školy, které jsou kompletně kreslené rukou. Za nimi byste Bootstrap skutečně nehledali.

Bootstrap má i své temné stránky. Jak jsem již řekl, nejedná se pouze o gridový systém, ale o kompletní HTML framework. Velkou nevýhodou je tedy jeho velikost. CSS styly bootstrapu jsou opravdu obsáhlé. Bootstrap také obsahuje velké množství javascriptu, který pro své jednotlivé nástroje používá. Ten není úplně malý. A nakonec Bootstrap je sám o sobě závislý na jQuery. jQuery je poměrně velká knihovna, kterou ne každý kodér používá a pokud ji nepoužívá, tak je opravdu škoda ji celou implementovat. Existuje možnost používat Bootstrap pomocí CSS preprocessoru, ale ani tím si nepomůžete, pokud chcete používat jeho javascriptové vychytávky. Já osobně používám z Bootrapu velkou škálu věcí a potřebuji bohužel jeho knihovnu celou, nicméně nejsem až takový "performance freak", abych zrovna toto řešil. Stále je to méně než 1MB a 3 HTTP requesty. Pořád je to méně než fotografie.

Nevýhody gridových systémů

Níže vyjmenuji několik gridových systémů. Existuje ještě spousta dalších. Gridové systémy ale i své nevýhody. Jednou ze základních nevýhod je samotná myšlenka sloupců. Funguje to obdobně jako čtvercový papír. Např. Bootstrap je dvanáctisloupcový systém. Představte si, že máte 12 sloupečků a potřebujete vedle sebe zobrazit 3 bloky. Je to jednoduché, každý sloupec bude mít 4 čtverečky. Pokud budete chtít mít bloky 4, každý z nich bude mít 3 čtverečky. Mít vedle sebe 7 bloků není příliš časté, tuším že se mi to za předchozích 50 webů nepoštěstilo. Co ale budete dělat ve chvíli, kdy budete potřebovat 5 bloků vedle sebe? V takovou chvíli vám Bootstrap nabízí vcelku dvě možnosti, které není třeba rozebírat, stačí říct, že ani jedna není jednoduchá, natož vyhovující a sympatická.

Druhou nevýhodou gridových systémů jako je Bootstrap je samotný fakt, že stále používá řádkový systém. Pokud máte bloky vedle sebe, stále jsou uzavřeny v mateřském bloku, který je označen jako řádek. Ve chvíli, kdy máte 4 bloky vedle sebe není v ničem problém. Na menším display máte 2 vedle sebe a na nejmenším jsou potom bloky po jednom. V případě, kdy máte bloky po třech jste nahraní a máte v zásadě tři možnosti. Jedna je zalomit bloky rovnou po jednom. Druhá je mít na jednom řádku 2 bloky a na druhém jeden, přes celou šíři řádku. Třetí možnost je mít třetí blok na druhém řádku, stejně široký jako ty dva a vycentrovaný na střed. Asi vám dochází, že ani jedna z těch možností není dobrá.

Kvůli těmto nepříjemným důvodům někteří programátoři přechází k tomu, že vytváří vlastní gridové systémy, které nejsou závislé na řádcích, či používájí některé z těch menších. Ani to však není šťastná cesta. Gridové systémy nebývají jednoduché a má to svůj důvod. Stále se točíme v kruhu. Tím důvodem je různá interpretace věcí v různých prohlížečích. Složitý framework jako je Bootstrap má za účel rozdíly mezi prohlížeči setřít a zajistit tak absolutní kompatibilitu napříč celým spektrem. Tvorbou vlastního gridového systému programátor vážně riskuje, že nějaká nekompatibilita, byť třeba cizokrajného prohlížeče, mu unikne. Spousta programátorů si myslí, že bohatě stačí, pokud mají vše ošetřené pro Firefox, Chrome, Internet Edge a Internet Explorer. Ne každý už pak myslí a testuje věci na Opeře, která sice zdaleka není v čele, ale je v dnešní době stále důležitá, zvláště pak její mobilní verze Opera Mini, která je oblíbená kvůli své rychlosti. Webových prohlížečů existuje opravdu velká řada. Většina Linuxových distribucí, včetně Kali Linuxu, který používám doma, zrovna teď, při psaní tohoto článku např. používá prohlížeč Ice Weasel. Není pro mě překvapení, že o něm slyšíte poprvé. Je to čistě Linuxový prohlížeč, který je v podstatě odlehčenou verzí Mozzila Firefox. Umí používat jeho pluginy a stojí na jeho jádru (Gecko), ale nikde není psáno, že funguje naprosto stejně. Cizokrajných prohlížečů je opravdu velké množství, můžeme mezi ně počítat např. i v současné době hodně promovaný prohlížeč Seznam, z našeho malého českého rybníčku. S Bootstrapem či jinými frameworky máte stoprocentní jistotu, že bude fungovat všude. Neznám však nikoho, kdo by byl schopný (navíc v jednom člověku) efektivně otestovat gridový systém ve všech prohlížečích.

ZPĚT

David Rubek - sídlo - Žižkova 346, 273 09 Kladno -Švermov, IČO: 616 39 133, Zapsán u: Magistrát města Kladna / odbor obecní živnostenský úřad. Kladno 272 52, Starosty Pavla 44

Tento web k poskytování služeb, zabezpečení Vašich dat a anlýze návštěvnosti používá soubory cookies. Jeho používáním s tím souhlasíte. Rozumím