Hovoríš responzívny? A čo si robil v roku 2006?

Dnes do vás tlčú o responzívnosti. Či je to PR, akonťák, pródžakmenžr alebo len motivačný kecal. Stačí, že sa trošku moce okolo webu a má toto slovo za zaklínadlo. Objavili ho? Nie. Vynašli ho? Nie. Mali ho radi? Nie. Rozumeli mu od začiatku? Nie. Rozumejú mu? Možno. Tvrdia, že je to jadro úspechu? Áno. Majú pravdu? Nie.

Responzívny web je samozrejme len buzzword.

V praveku zlatého veku weblogu sme na web naskočili doslova do vlaku TR TD TR TD. Všetci veľkí hráči hrkotali svoje húžasnosti tabuľkami a na rovinu povedané, pohŕdali tým, čo sme začínali. Pre nich existovalo robenie webov pre Internet Explorer a odpovedali „na čom inom, to majú všetci“. Pýtali sa ako by inak mohli spraviť takýto webík s tromi stĺpcami vedľa seba a ako takéto menu? Len vnorené tabuľky.

Tému evanjelizácie CSS však nateraz vynechám, patrilo jej hodne veľa času kdesi v období prvého desaťročia tohto tisícročia. Nemôžem ju však úplne vynechať pretože to má svoju súvislosť.

CSS totiž z pevnej tabuľkovej kostry a predpisovanie konkretného rozlíšenia – áno, weby si vyžadovali trebárs 800 na 600 pixelov. Mal si menej? Smola. Mal si viac? Bol si exot. Väčšina odpovedí supportu na rozbitý web začínala: a máte rozlíšenie X na Y? Mozilla je nová verzia Internet Explorera?

Ja jediný

V tejto atmosfére sa ťažko dostáva do hláv myšlienka, že JA majiteľ webu, JA autor jeho kódu nemám právo vybrať si presné prostredie, v ktorom láskavo dovolím tú moju webstránku ľuďom pozerať.

Nasledovala mobilná epizóda WAP (alebo ako sa to volalo), ktorá skončila rýchlou smrťou. Myšlienka zdochla na nekompatibilite. Idea bola dodať do čoraz múdrejších mobilov niečo ako web. Lenže realizácia bola proste zle. Najprv sa muselo bojovať na desktopoch. Zbaviť sa TABLE LAYOUTU, dostať CSS a layouty konštruované v ňom do „mainstreamu“.

Myšlienka totiž začínala tým, že ja idem na web tým čo mám a čo mi príde užitočné. Nie Windows XP s Internet Explorer 5.5 a Adobe Flash v rozlíšení 800×600. Desivo znela predstava, že ľudia môžu mať aj v tomto predpise celkom odlišne nastavené počítače. Nebodaj je niekto slepší a zväčší si písmo v rámci celého systému. Má web rešpektovať túto jeho vôľu, keď nejaký kretén sa rozhodol, že na jeho webe musí byť tento odstavec v 11px? Že môžem mať v prehliadači natrvalo bočnú lištu a tým pídom jeho vypiplané pixel na pixel dielko sa tam na šírku ani nezmestí?

Toto si väčšina kecalov, čo VTEDY „predávali“ web ani nedokázala predstaviť. Obvykle to vyúsťovalo k mierne povedané posmeškom, že to sú hlúposti a inak to „nejde“. Mýlili sa, vieme. Dnes už miesto modly „Musíte mať 800 na 600“ mávajú buzzwordom responzívnosti, ktorú neobjavili a v čase, keď MALI, jej nerozumeli.

Praveký pružný layout

V roku 2006 sme viedli debaty o pružnom layoute (preložte si to ako responzívny):

Musím povedať, že _fluidnému layoutu_ fandím za každých okolností. Pragmatické dôvody k nemu mám a budem mať. Čím dlhšie, tým logickejší mi pripadá :-) Toľko úvod pre tých, čo moje militantné výpady na adresu fixkových layoutov nestihli :-)

Ďalej v texte som poukázal na „float“ hrátky. Viete, že toto je vlastne jadro funkčnosti responzívnosti? Jasne, každý, čo chŕli HTML a CSS to znudene odkývne:

Hneď po nej som sa zahral ešte s jedným zaujímavým webom presýpaním boxov (taktiež meňte šírku okna). Floatové hrátky s pretekaním boxov som už neoficiálne riešil pri vývoji firemného CSS layoutu. Vtedy ma v nadšení napadlo, že Spravodaj prerobím na “sypúce sa kočky”. Nestalo sa ;-) Vráťme sa k linkovanému webu: úžasné.

Viete, čo to bolo, keď som vyhlásil, že presýpanie prvkov na webe je priam žiadúce a nevyhnutné? Nie, to nemôže byť! To bola odpoveď. A prečo nie? Musí to byť ako sme to navrhli, robili a schválili. Preboha, aby to niekto videl inak ako pán RIADITEĽ? To by sme sa z toho všetci zosrali.

No a dnes pán riaditeľovi mastíte uši slovom responzívny web :-) v roku 2016 :-) Mimochodom uxmag.com dodnes funguje.

Isteže, na techniky tohto typu sa hľadali pomenovania ale hlavne sa hľadali samotné techniky realizácie. Chápali sme dobre, že nemusí vždy stačiť samotné HTML a CSS. Muselo sa občas použiť aj nejaké to udelátko. Javascriptové prepínače, knižnice a podobne. Bolo totiž treba riešiť rôzne rozlíšenia okna prehliadača (viewport). Viete, oni to tí ľudia chápali rozlíšenie SYSTÉMU a nie fyzické rozmery okna v ktorom sa premieta webstránka. Je to totiž trošku rozdiel.

V roku 2006 som tvrdil:

Pružný layout založený na CSS býva úspešný v istom rozsahu na obrazovkách v šírkach od 800 do 1024 pixelov ale pretože často používame široké spektrum zariadení pristupujúcich na web, potrebujeme silnejšie a flexibilnejšie cesty správania sa layoutu. Pokiaľ chceme podporovať zariadenia, ktorých viewport sa pohybuje v rozsahu od 240 pixelov až nad 1680 pixelov a rozlíšenie (DPI) ide od 72 do 150 pixelov na palec, potrebujeme zjavne novú metódu jeho vytvárania.

Vtedy som hodne propagoval vec, že SYSTEM je multitaskový, multioknový a každé okno má okrem režimu fullscreen aj niečo ako „oknový“ režim, keď si okno aplikácie len tak „pláva“ na obrazovke a dokonca môžem vidieť naraz aj viac okien a dokonca aj rôznych aplikácií. Pre mnohých doslova hrôza si to predstaviť a rýchlo zmizli zapnutím fullscreenu :-).

Dodnes však pre tvorcov webu je fyzicky ťažké vyskúšať si svoj obsah tak, že si okno prehliadača zmenšia či zväčšia. Dosť často im to aj dnes hovorím: musíte si to pozrieť aj v menšej šírke! Až vtedy uvidíte, či to FUNGUJE.

To ako to vidíte vy, to nevidí nikto iný

Opäť rok 2006:

Všimnite si, že už dávno som na Spravodaji deklaroval, že nesmiete uvažovať o “najbežnejšej” obrazovke ako o jedinom rozmere ale je nutné prepnúť myslenie na rozsahy (pásma).

Opäť to však súvisí: voľnosť. Ja chcem mať prostredie aké chcem mať ja. Ja naň pozerám, nie nejaký šéf marketingu firmy, ktorá mi láskavo napixelovala svoj web a ja si ho teraz musím pozrieť tak, ako on kázal.

Tvrdieval som, že efektívnosť je v tom, že VY majitelia, dizajnéri a kóderi musíte nielenže navrhnúť jeden pevný pixelnapixel návrh za čas X. Vy musíte venovať kľudne aj násobky času tak, aby ten web fungoval v oveľa rôznorodejších prostrediach. Aj tak totiž ušetríte čas tým, čo váš web pozerajú (a mimochodom dávajú vám peniaze alebo len svoj záujem o vás). Aj keby s vašim nemotorným webom stratili len pár sekúnd, vynásobte si to ich počtom. Vždy vám výjde, že oni stratia dokopy ďaleko viac času s riešením blbostí, kým sa dopracujú k vášmu webíku.

To boli základné argumenty, ktoré fungujú aj dnes. V responzívnosti sú doslova jadrom zdôvodňovania životaschopnosti.

Tisíc krát viac?

Problémom pochopenia boli reakcíe: to mám ten web urobiť tisíckrát pre tisíc rôznych variánt? To sa nedá.

Odpoveďou na to je, že však to kam to nakoniec dosmerovalo. Nie. Robím jeden kód. Ale ten musí byť pružný, adaptívny, fluidný… RESPONZÍVNY.

Ako som to písal v roku 2006?

V našej bežnej práci sa sústredíme na to, že miesto siedmych layoutom ledva spáchame jediný. A dokonca sa odvažujeme tvrdiť, že je to maximum práce, ktorá je účelná a dokonca hodná obdivu. Tvrdíme, že nám zaplatili za jedno riešenie, klienti chcú iba jedno riešenie a že ich zmätieme rôznou vizážou ich webu. Dovolím si tvrdiť, že čas pokročil.

Tu to máte znova, celé. Rok 2006!

Responzívny nielen v priestore ale aj v čase!

Nie je líder ten, čo ženie za vlakom na poslednej stanici. Ten, čo ten vlak rozbehol a riadi ho od prvej stanice. Responzívnosť nie je tovar ani položka do faktúry. Je to samotná podstata. Nedá sa spraviť „raz“ a je hotovo.

Dôsledky, že vo vlaku už sedíš?

Na otázku: mohlo by to byť responzívne? odpovieš To už päť rokov je. Keby sme to mohli urobiť responzívne ale nie je čas! Veď to rovno také robíme! Strašne dlho sme robili na responzívnosti a konečne ju teraz máme. Aké milé :) ako mačičky na internete. Júuuu :)