Navrhovanie pre web a tablety - responzívny dizajn

• Smieť 8, 2024

Termín Responzívny je už nejaký čas v popredí, ale čo to vlastne znamená? Internet sa v priebehu rokov výrazne zmenil, od prevažne textovej platformy k interaktívnemu, pútavému, multimediálnemu prostrediu a prostrediu viacerých zariadení.

Webové stránky sa za posledné desaťročie zmenili, aby odrážali vylepšenia internetu a zariadení, ktoré používame na jeho zobrazenie. Keď už hovoríme o zariadeniach, máme na výber niekoľko typov vrátane počítačov, mini-počítačov, tabletov a smartfónov. So zvyšujúcim sa počtom zariadení a ich variácií sa stáva zrejmý problém. Každé zariadenie a každá variácia zariadenia má vlastnú veľkosť obrazovky.

Keď sme museli navrhovať iba webové stránky pre stolové a prenosné počítače, našou hlavnou úvahou bolo, ako zaistiť, aby webová stránka zobrazovala to isté bez ohľadu na počítač alebo webový prehľadávač. Odpoveďou bolo navrhnúť najlepšie webové prehliadače a najbežnejšie rozlíšenia obrazovky. To fungovalo na krátku dobu. Ďalší problém sa prejavil, keď sa tieto parametre neustále menili. Veľkosť môjho prvého počítača bola 800 x 600 a aj tak sa mi to páčilo. Norma sa stala 1024 x 800. Teraz sa počítače rozrástli na 27 palcov a viac. Cieľové rozlíšenie webovej stránky sa teda neustále menilo.

V čase, keď sme sa začali tešiť z navrhovania týchto väčších obrazoviek, popularita smartfónov a tabletov sa značne zvýšila vďaka ich skvelým aplikáciám, ale menším obrazovkám. V skutočnosti sa predpokladá, že smartfóny a stoly sa budú používať častejšie ako počítače na prezeranie webu iba za pár rokov. Spočiatku existovalo iba niekoľko mobilných zariadení. Začali sme teda navrhovať tak hlavnú webovú stránku pre používateľov počítačov, ako aj druhú webovú stránku pre mobilných používateľov. Tým sa však problém úplne nevyriešil, pretože sme stále navrhovali rozloženie s pevnou šírkou.

Teraz nemôžete predpokladať, aké zariadenie bude divák používať na prezeranie vašich webových stránok. Navrhovanie určitých pevných veľkostí obrazovky už teda nie je najlepšou odpoveďou na problém. Potrebujeme spôsob, ako určiť veľkosť obrazovky zariadenia používateľa a podľa toho zobraziť webovú stránku. Preto responzívny webový dizajn, ktorý pomocou CSS určuje šírku obrazovky a podľa potreby zobrazuje webovú stránku inak. To nám umožňuje mať iba jednu webovú stránku, ktorá sa podľa potreby zmení na niekoľko verzií.

Video Návody: Responsive Design with Bootstrap by Neel Mehta (Smieť 2024).