Marcotteho kniha ukazuje, že takýto citlivý webový dizajn má tri hlavné zložky. Prvým je plne adaptívna dynamická mriežka a zaujímavé je, že Marcotte vychádza z typického rozloženia pracovnej plochy vytvoreného Photoshopom, ktoré bolo znovu vytvorené ako pevná mriežka založená na CSS pomocou veľkosti pixelov.
Trik je previesť pevné rozmery pixelov na proporcionálne percentá pomocou pravidla „cieľ/kontext = výsledok“. Napríklad 380-pixelový stĺpec v rámci 960-širokého kontajnera stránky by sa skonvertoval na 380/960, takže nastavte „šírku: 0,3958333333333333 %“ (bez zaokrúhlenia nahor). Po nastavení veľkosti všetkých zrejmých prvkov bloku urobte to isté s okrajmi a výplňou a po dokončení to urobíte majú mriežku, ktorá sa bez problémov prispôsobí akejkoľvek veľkosti obrazovky – je to koniec horizontálnych posúvačov a priblíženia peklo.
S vaším plne flexibilným usporiadaním je ďalšou zložkou prispôsobenie obsahu a pre text to zahŕňa reset CSS a následné nastavenie všetkých veľkostí písma v ems, nie v bodoch alebo pixelov. Manipulácia s grafikou a inými vloženými médiami prostredníctvom CSS nezávislých od pixelov sa stáva zložitejšou: prvou prekážkou je, v predvolenom nastavení sa obrázky zobrazia s natívnou veľkosťou pixelov, takže veľké obrázky sa vysypú z kontajnerov a vyzerajú hrozné.
S vašim plne flexibilným usporiadaním je ďalšou zložkou prispôsobenie obsahu
Jednou z možností je použiť „overflow: hidden“, ktoré efektívne oreže obrázok do jeho kontajnera, ale oveľa užitočnejšie je prispôsobiť obrázok jeho kontajneru pomocou „width: 100 %“. To sa však môže stať pixelláciou, ak sú miniatúry a ikony zmenšené nad ich pôvodné rozmery v pixeloch, takže najužitočnejšie zo všetkého je nastavenie „max-width: 100 %“, ktorá zmenší príliš veľké obrázky tak, aby zodpovedali šírke ich kontajnera, ale nezväčší ich nad ich pôvodný pixel veľkosť.
Inteligentný dizajn
Teraz máme jednotný univerzálny dizajn založený na adaptívnej mriežke a obsahu. Stále však máme jeden veľký problém, pretože neexistuje jediné univerzálne najlepšie rozloženie.
V závislosti od tvaru a veľkosti konečnej strany by dobrý dizajnér urobil úplne iné rozhodnutia veľa obrázkov, ktoré sa majú zahrnúť, v akej veľkosti a kde, či ich orezať, aké písma, koľko stĺpcov, podľa vlastného výberu. Žiaľ, jeden dizajn sa nedá vyrobiť tak, aby vyhovoval všetkým. Vyzerá to ako ďalšia slepá ulička – ale opäť to tak nie je: potrebujeme len mechanizmus na začlenenie takýchto individuálnych rozhodnutí o dizajne v rámci adaptívnej stránky.
Tu prichádza na rad tretia zložka responzívneho dizajnu. Mediálne dotazy sú novým mechanizmom v CSS3, ktorý vám umožňuje kontrolovať vlastnosti vykresľovacieho zariadenia a prehliadača a aplikovať podmienené pravidlá. Môžete sa pýtať na minimálnu a maximálnu šírku, ako aj na orientáciu, pomer strán a hustotu a môžete reťaziť niekoľko dopytov, ako napríklad:
@media obrazovka a (min. šírka: 600px) a
(maximálna šírka: 900 pixelov) { … }
Dajte to všetko dohromady a môžete vo svojom fluidnom dizajne vytvoriť ručne prispôsobené body zlomu, pri ktorých sa rozloženie a typografia menia. radikálna zmena, ako je prechod z dvojstĺpcovej na jednostĺpcovú mriežku, skrytie určitých obrázkov, výmena navigačných panelov, zmena písma a tak ďalej.
Dotazy na médiá vám umožňujú vytvárať skutočne inteligentné adaptívne návrhy, ktorých rozloženie a obsah sa radikálne menia tak, aby čo najlepšie zodpovedali hostiteľskej obrazovke.
Je responzívny, samooptimalizujúci sa webový dizajn naozaj taký jednoduchý? Bohužiaľ nie a Marcotte nepredstiera, že je. Väčšina jeho knihy sa zaoberá snahami vyriešiť početné problémy, ktoré sa objavia, s rôznym stupňom úspechu.
