Keď web vyzeral ako cirkus: Ako sa webdizajn zmenil od 90. rokov dodnes

Web kedysi vyzeral ako neonový cirkus. Dnes musí byť rýchly, čistý, bezpečný a priateľský pre mobil. Porovnanie toho, čo sa vtedy dalo, a čo dnes musíš.

Prečítané 231×

Pamätáš sa na tie časy, keď internet pískal cez modem a webové stránky vyzerali ako farebný cirkus? Ja veru áno. Trochu. V 90. rokoch bol web divoké miesto – stránky boli často chaotické, gýčové, plné blikajúcich elementov, pestrých farieb a všadeprítomných tabuľkových rozložení. Boli to časy, keď blikajúce GIFy, pohyblivý text v značke a neónové pozadia boli úplne normálne. Každá stránka vyzerala ako malý osobný umelecký projekt – nie vždy krásny, ale určite originálny.

Divoké 90. roky: Chaos, gýč a blikajúce GIFy

V polovici 90. rokov sa webdizajn ešte len hľadal. Stránky vznikali metódou pokus-omyl a neexistovali žiadne hotové šablóny či prepracované frameworky. HTML kód sa často písal ručne v Poznámkovom bloku a celé stránky sa skladali v tabuľkách – áno, namiesto dnešných elegantných CSS gridov sa používali HTML tabuľky na rozloženie obsahu. Keďže CSS štýly boli v plienkach a prehliadače ich poriadne nepodporovali, weby boli z veľkej časti “neostylované” alebo využívali iba jednoduché inline štýly. Dizajn trochu pripomínal detské ihrisko – farebný, nejednotný, plný nečakaných prvkov.

Typická stránka z deväťdesiatok mala napríklad:

Krikľavé pozadie a fonty: Často sa používali výrazné, kontrastné farby na pozadí a text v nezvyčajných fontoch (pamätáš na Comic Sans?). Weby skôr kričali farbami, než šeptom ladili detaily.

Animované GIFy: Všade blikalo a hýbalo sa – či už to bol tancujúci banán, “Under Construction” nápis s robotníkom, alebo ikonický tancujúci baby GIF. Animované GIF obrázky dodávali stránkam život (a poriadnu dávku gýča).

Posúvajúci sa text a iné vychytávky: Značka <marquee> posúvala text ako svetelnú tabuľu na diskotéke. Bežné boli aj návštevné knihy a počítadlá návštev, ktoré hrdo ukazovali, koľko ľudí stránku navštívilo (aj keď to boli možno len kamaráti).

Tiled pozadia a 3D tlačidlá: Malé obrázky opakované v pozadí vytvárali mozaiku (často až oči prechádzali z tých vzorov). Tlačidlá bývali “plastické” s 3D efektom tieňa, aby vyzerali ako pravé tlačidlo, na ktoré môžete kliknúť.

Rámce a chaotická navigácia: Niektoré weby používali frames – rozdelenie okna prehliadača na viac častí, každá načítavala iný HTML súbor. Teoreticky to malo uľahčiť napríklad pevné menu na boku, ale v praxi to bolo mätúce a prehliadače s tým bojovali. Naviac URL adresa vyzerala rovnako pre každú podstránku, čo plietlo ľudí aj vyhľadávače.

Neboli to práve učebnicové príklady elegancie, ale mali svoje čaro. Každá stránka bola tak trocha osobná výpoveď tvorcu – ľudia sa vyhrali s blikajúcimi obrázkami a farbami, lebo mohli. Všetko bolo nové a vzrušujúce. A úprimne, vtedy sme boli radi, že sa nám cez ten vytáčací modem vôbec niečo načítalo. Stránky museli byť relatívne jednoduché, aby sa cez pomalé pripojenie vôbec načítali. Často sme si počas načítavania stránky stihli urobiť čaj – načítavalo sa totiž riadok po riadku. No nikomu to veľmi nevadilo: web bol zázrak sám o sebe a trpezlivosť bola jednoducho súčasť zážitku.

Ako sa web robil kedysi (ručné kódovanie a FTP)

V 90. rokoch neexistovali komfortné redakčné systémy či drag-and-drop editory. Web sa tvoril ručne. Doslova. Človek si otvoril Poznámkový blok, napísal HTML kód a uložil súbor .html. Ak chcel pridať obrázok, musel ho mať v správnom formáte (GIF alebo neskôr JPG) a referencovať cez tag. Dizajn sa ladil metódou pokus-omyl: napísať kód, uložiť, načítať v prehliadači, upraviť… dookola.

Keď bol web hotový na lokále, prišiel na rad FTP klient (napríklad legendárny Total Commander alebo CuteFTP). Cez FTP sa súbory ručne nahrali na webový server – často to bol nejaký free webhosting, kde ste mali svoju zložku. Celé to bolo dosť surové, ale zároveň jednoduché v tom zmysle, že stačilo vedieť pár základov: HTML tagy (aby stránka mala hlavičku, telo, odstavce, obrázky atď.), možno trošku CSS (ak ste boli pokročilý a chceli ste napríklad farebné pozadie tabuľky) a zvládnuť to FTP nahrávanie.

Žiadne automatické nasadzovanie, žiadne cloudové služby, žiadny Git – stačilo ovládať HTML a vedieť “nakopírovať” súbory na server. Back-end? Ten bežný smrteľník veľmi neriešil; maximálne tak nejaké jednoduché formuláre s e-mailom alebo návštevnú knihu od extérnej služby. Weby boli statické, interaktivita minimálna (okrem tých pohyblivých GIFov). Ak si chcel mať na stránke napríklad hodiny alebo padajúce snehové vločky, musel si skopírovať JavaScript, ktorému si často ani nerozumel – hlavne, že to vyzeralo cool.

Vyhľadávanie stránok tiež fungovalo inak. Google buď neexistoval, alebo bol v plienkach koncom 90. rokov. Ľudia svoje weby registrovali do katalógov (pamätáš na Yahoo Directory alebo naše Zoznam.sk začiatkom 2000?). Boli to ručne udržiavané zoznamy stránok podľa kategórií. SEO ako také sme neriešili vôbec, to slovo sme ani nepoznali. Hlavné bolo, že stránka beží a možno si link na ňu dáš do emailu kamarátom alebo na vizitku. Web “marketing” spočíval v tom, že ste dali odkaz do svojho emailového podpisu alebo na diskusné fórum. A ak vás náhodou pridal nejaký katalóg, bolo to malé víťazstvo.

Treba však dodať, že práve tá absencia pravidiel a optimalizácií znamenala aj úžasnú kreativitu. Webdizajnéri si robili, čo chceli – veď nebol Google Analytics, ktorý by im ukázal, že návštevníci po 5 sekundách zdesene utiekli. Kreativita mala zelenú, lebo neexistovali jednotné normy. Dodnes sa hovorieva, že webdizajnéri nikdy neboli takí kreatívni ako v časoch, keď na Google nezáležalo. Bolo to vidieť – jeden web vyzeral ako neonový cirkus, druhý ako gotická pevnosť s čiernym pozadím a krvavým fontom, tretí ako detská izba plná gifových mačičiek.

Dnešný web: Minimalizmus a poriadok

Ak by si dnes otvoril typickú stránku z 90. rokov, asi by si si musel nasadiť slnečné okuliare. Dnešné weby sú úplne iná káva. Dizajn sa upokojil a dospel. Vytratil sa chaos a nastúpilo pravidlo “méně je více” – teda menej krikľavých prvkov, viac jednoduchosti. Moderné stránky sú zväčša čisté, prehľadné, minimalistické. Veľa bieleho (resp. prázdneho) priestoru, zopár hlavných farieb podľa firemnej identity, všetko zarovnané do gridu. Žiadne blikajúce texty alebo tančeky GIFov na pozadí – ak sa niečo hýbe, tak skôr elegantná animácia pri prechode myšou, alebo jemný paralax efekt. Čo si budeme hovoriť, dnešné weby vyzerajú oproti deväťdesiatkovým ako moderná galéria oproti lunaparku.

Prečo tá dramatická zmena? Jednak prišli nové technológie a štandardy: CSS sa začalo masívne používať okolo prelomu milénia a hlavne v 2000-tych rokoch. CSS umožnilo oddeliť dizajn od obsahu – už sme nemuseli pchať všetko do tabuľkového layoutu. Zrazu sa dali robiť pekné veci: jednotné štýly naprieč celým webom, responzívne rozloženie a pod. (o tom o chvíľu). Webové prehliadače sa tiež zlepšili a zjednotili štandardy, takže si dizajnéri mohli dovoliť dodržiavať webové štandardy namiesto hackerčin s tabuľkami. Výsledkom boli profesionálnejšie vyzerajúce stránky – už okolo roku 2000–2005 začal web naberať uhladenejší vzhľad. Zmizli najhoršie výstrelky gýča a pribudla organizácia a štruktúra: hlavička, menu, obsah, pätička – tieto časti stránky sme začali rozoznávať vtedy a máme ich dodnes.
.

Ďalším faktorom sú užívatelia a ich nároky. Kým v 90. rokoch sme žasli nad hocičím, čo sa vôbec objavilo na monitore, dnešný návštevník je náročný. Máme rýchly internet, smartfóny, HD displeje – a očakávame, že stránky budú rýchle, pekné a použiteľné. Ak stránka nefunguje alebo vyzerá zle, ľudia jednoducho utekajú inam. Hovorí sa o tzv. bounce rate – ak návštevník nenájde hľadané informácie do pár sekúnd, zavrie stránku a skúsi konkurenciu. Preto dnešné weby musia spĺňať množstvo pravidiel použiteľnosti: prehľadná navigácia, viditeľné CTA (výzvy na akciu), logické rozloženie prvkov.

Zmenil sa aj obsah a ciele stránok. Kým kedysi osobná stránka mohla byť len galéria mačiek vašej tety, dnes sú weby často profesionálne prezentácie firiem, e-shopy, aplikácie… Tomu sa prispôsobil štýl – dôveryhodnosť a profesionalita sú kľúčové. Ťažko by ste dnes brali vážne banku, ktorej web bliká a hrá MIDI melódiu. Teraz je trendom uniformita v pozitívnom zmysle – používateľ nemá byť šokovaný dizajnom, skôr potešený obsahom. Dizajn má ustúpiť do úzadia a podporiť funkčnosť.

A ešte jedna vec – mobilné zariadenia. Dnes väčšina ľudí prezerá web aj na mobile alebo tablete. Preto moderný webdizajn myslí „mobile-first“ alebo aspoň responzívne. Responzívny dizajn znamená, že stránka sa prispôsobí rôznym veľkostiam obrazovky – či ju otvoríš na veľkom monitore, na notebooku, na tablete alebo malom smartfóne, vždy by mala vyzerať dobre a všetko by malo fungovať. V 90. rokoch nič také nebolo treba riešiť (jednak neboli smartfóny a jednak aj rozlíšenia PC monitorov boli dosť podobné). Dnes si to bez responzivity nevieme predstaviť – skúsiť si na mobile otvoriť neresponzívnu stránku z roku 1998 je čisté trápenie (scrollovanie do strán, pidi text, netrafiteľné odkazy). Technológie sa posunuli tak ďaleko, že berieme ako samozrejmosť veci, o ktorých sa nám kedysi ani nesnívalo.

Čo musí vedieť tvorca webu dnes?

Možno si hovoríš – fajn, dizajn je dnes krajší a kód sa nepíše v tabuľkách, ale čo to znamená pre tvorcov webu? Nuž, úprimne: dnešný webdizajnér (či vývojár) toho musí vedieť omnoho viac než ten kedysi. Kým kedysi stačilo HTML a trochu sa pohrať s FTP, dnes je tvorba webu komplexná disciplína. Tu je pár vecí, na ktoré sa dnes kladie dôraz (a ktoré bežný človek možno ani nevidí, ale sú za tým):

  • SEO (Search Engine Optimization)Optimalizácia pre vyhľadávače. V preklade: dbať na to, aby tvoj web našiel Google a aby sa objavoval vysoko vo výsledkoch hľadania. Zahŕňa to technické veci (správny HTML kód, meta tagy) aj obsahové (kvalitné texty, kľúčové slová). V roku 1997 sme SEO neriešili vôbec; dnes je web poháňaný SEO – takmer každé rozhodnutie na webe sa robí aj s ohľadom na to, ako sa to bude páčiť Googlu
  • UX/UI (User Experience/User Interface) – po slovensky používateľský zážitok a rozhranie. Znamená to, že stránka sa navrhuje pre užívateľa: aby bola intuitívna, ľahko sa ovládala, aby mal návštevník dobrý pocit. UX dizajnér dnes rieši všetko od logickej štruktúry webu, cez to, kam dať ktoré tlačidlo, až po to, či sú farby tlačidiel dosť kontrastné. V 90. rokoch sme slovo UX nepoznali – vtedy sa skôr riešilo “ako tam dať čo najviac cool vecí”. Dnes platí opak: menej prvkov, ale lepšia použiteľnosť.
  • Responzívnosť a mobilná optimalizácia – ako sme spomínali, web musí bežať na rôznych zariadeniach. Tvorca webu dnes premýšľa, ako layout “popresúvať” na úzkej obrazovke mobilu, ako zjednodušiť menu na malé displeje (preto máme dnes všade tie ikonky hamburgra pre menu na mobile).
  • Bezpečnosť – kedysi sme bezpečnosť webu neriešili, pokiaľ ste neprevádzkovali internet banking (ktorý vtedy prakticky neexistoval). Dnes aj malý firemný web musí mať HTTPS šifrovanie (inak ho prehliadače označia za “Nezabezpečené”) a riešia sa veci ako ochrana proti spamovým botom, GDPR a ochrana súkromia (áno, tie otravné lišty s cookies, ktoré musíme odkliknúť). Weby sú častým terčom útokov, takže vývojár musí myslieť na bezpečnostné záplaty, aktualizácie systému, zálohy… Skrátka, je to veda.
  • Rýchlosť a optimalizácia výkonu – Spomínaš, ako sme čakali 30 sekúnd na načítanie obrázka cez modem? Dnes by nikto tak dlho nečakal. Ak sa stránka načítava pomaly, ľudia odídu. Preto sa dnes rieši optimalizácia: obrázky sa komprimujú, kód sa minifikuje, využívajú sa cache, CDN siete – všetko pre to, aby sa stránka načítala ideálne do pár sekúnd. Dokonca aj Google priamo zohľadňuje rýchlosť webu vo svojom hodnotení (pomalý web = nižšie SEO skóre). Čiže moderný webdizajnér musí byť tak trochu aj machr na výkon.
  • Moderné nástroje a technológie – Dnes už nikto nepíše celý web v Poznámkovom bloku. Používajú sa frameworky (napr. React, Angular pre webové aplikácie), CSS preprocesory, balíčkovače, CMS systémy ako WordPress pre bežné weby… Tvorca musí sledovať trendy, učiť sa nové veci. Každý rok je tu nejaká nová “vychytávka” – od progresívnych webových aplikácií (PWA) až po AI nástroje na generovanie obsahu. V kontraste, v 90. rokoch sa technológie menili pomalšie a dalo sa všetko zvládnuť v jednom editore.

Je toho dosť. Na druhej strane, bežný človek má dnes oveľa ľahšiu cestu, ak chce webstránku. Existujú totiž online nástroje a služby (tzv. website buildery alebo redakčné systémy), kde si stránku “naklikáš” aj bez znalosti kódu. Príkladom je WordPress (vznikol v roku 2003) – ten spôsobil malú revolúciu, lebo umožnil ľuďom vytvárať a spravovať weby cez administráciu bez zásahu do kódu. Ešte ďalej zašli služby ako Wix či Squarespace (a mnohé ďalšie), kde si doslova vyberieš šablónu, vložíš texty, obrázky a stránka je hotová. Čiže dnes si web vie spraviť aj človek, čo nevie programovať – to by bolo v 90. rokoch nemysliteľné.

Prečo už web nie je taká divočina?

Zhrňme si to: Za ~30 rokov sa webový dizajn posunul od divokej džungle k upravenému parku. Kým kedysi bol web úspešný len tým, že vôbec existoval a bežal, dnes musí spĺňať kopec očakávaní. Je za tým niekoľko dôvodov:

  • Technologický pokrok: Rýchle internety, výkonnejšie zariadenia a šikovnejší tvorcovia – to všetko umožnilo robiť pokročilejší web. Zároveň sa objavili nové výzvy (napr. ten mobilný web), na ktoré sa muselo reagovať.
  • Profesionalizácia: Web už nie je hračka pre pár nadšencov; stal sa z neho seriózny komunikačný kanál pre firmy, obchod aj zábavu. S tým prišli štandardy kvality. Chaotická stránka by dnes ľuďom pripadala nedôveryhodná (ak nie priamo podozrivá). Ak chceš zaujať a uspieť, musíš pôsobiť profi – a tomu zodpovedá aj uhladený dizajn.
  • Konkurenčný boj o užívateľa: Na webe je dnes cez 1 miliardu stránok. Užívateľ má na výber množstvo možností, takže ak ho tvoja stránka niečím štve (pomalá, neprehľadná, škaredá), okamžite ide inam – veď konkurencia je na pár klikov. Preto sa všetci snažia robiť weby čo najlepšie, lebo inak nemajú šancu udržať pozornosť publika.
  • Lepšie nástroje: Veci, ktoré boli kedysi ťažké, sú dnes triviálne. Chceš elegantné menu? Naklikáš. Responzívny grid? CSS to spraví za teba. Kedysi vymyslieť navigáciu a konzistentný dizajn webu chcelo dosť drezúry, dnes máme k dispozícii knihovnice, komponenty a inšpiráciu z celého sveta. To vedie k istej unifikácii vzhľadu – weby si sú trocha podobné, lebo všetci používajú podobné overené princípy (a často aj rovnaké šablóny). Už to nie je taká divočina, ale zato máme overenú použiteľnosť.

Samozrejme, občas ľudia s nostalgiou spomínajú na starý “retro web”. Dokonca vznikol trend robiť zámerne weby v retro 90’s štýle – s pixelovými fontami, gifmi a neonovými farbami – len tak pre zábavu alebo umelecký zámer. Ale to sú skôr výnimky, ktoré vypichujú kontrast medzi dneškom a minulostí.

Pointa na záver

Čo dodať na záver, kamarát? Azda len to, že za tých 30 rokov sa všetko poriadne skomplikovalo v zákulisí, ale pre používateľov (a aj začínajúcich tvorcov) sa web zjednodušil na povrchu. Kým v 90. rokoch musel byť človek tak trochu programátor, aby si vytvoril vlastnú stránku, dnes to zvládne aj tvoje 15-ročné krstňa cez online editor. Paradoxne, hoci dnes webové technológie pripomínajú raketovú vedu, výsledný web už nie je taká “divočina” ako kedysi. Stránky vyzerajú podobnejšie, všetko je uhladenejšie a premyslenejšie. Možno už nezažiješ ten pocit “wooow, ono to bliká a hrá hudbu”, ale zato ťa poteší, že na webe pohodlne vybavíš nákup, prečítaš správy na mobile a ešte pri tom stihneš tweetnuť meme.

Zmenili sa časy, zmenil sa web. Ale jedno ostáva – internet je stále úžasné miesto plné možností. Len už nemusíme znášať ružové blikajúce pozadia a Comic Sans nadpisy. A to je vlastne fajn, nie?

„A jeden taký ukážkový (ne)funkčný web sme si skúsili napodobniť – kukni sem:náš retro web“

Servac
Servac

Tu na Darebákovi skúšam písať, hľadám svoj štýl a občas mi utečie článok o veciach, ktoré ani neexistujú. Beriem to skôr ako hru a tréning hlavy.
Nemám žiadne veľké poznanie ani odbornosť. Skôr sa pozerám okolo seba a zapisujem, čo mi príde zaujímavé, zvláštne alebo smiešne.
Techniku mám rád, len mi do toho sem-tam skočí fantázia a celé to skončí niekde úplne inde, než som plánoval.

Články: 6

Zanechať odpoveď