Čo je responzívny dizajn? (Vysvetlenie videa a infografika)

responzívny webový dizajn

Trvalo to desaťročie responzívny webový dizajn (RWD) od roku ísť do hlavného prúdu Prvýkrát predstavil Cameron Adams koncept. Nápad bol geniálny - prečo by sme nemohli navrhnúť weby, ktoré sa prispôsobia výrezu zariadenia, na ktorom sa zobrazuje?

Čo je responzívny dizajn?

Responzívny webový dizajn (RWD) je prístup k webdizajnu zameraný na vytváranie webov, ktoré poskytujú optimálny zážitok zo sledovania - ľahké čítanie a navigáciu s minimálnou veľkosťou, posunom a posúvaním - na širokej škále zariadení (od mobilných telefónov po stolné počítače) monitory). Web navrhnutý s technológiou RWD prispôsobuje rozloženie prostrediu prezerania pomocou plynulých proporcionálnych mriežok, flexibilných obrázkov a mediálnych dotazov CSS3, rozšírenia pravidla @media.

Wikipedia

Inými slovami, je možné upraviť prvky ako obrázky, ako aj rozloženie týchto prvkov. Tu je video, ktoré vysvetľuje, čo je responzívny dizajn a prečo by ho vaša spoločnosť mala implementovať. Nedávno sme prestavali Highbridge aby bola stránka responzívna a teraz sa na nej pracuje Martech Zone urobiť to isté!

Metodika vytvárania responzívnych stránok je trochu zdĺhavá, pretože potrebujete mať hierarchiu svojich štýlov, ktoré sú usporiadané podľa veľkosti výrezu.

Prehliadače si uvedomujú svoju veľkosť, preto načítajú šablónu so štýlmi zhora nadol a dopytujú sa na príslušné štýly pre veľkosť obrazovky. To neznamená, že musíte pre každú veľkosť obrazovky navrhnúť rôzne štýly, stačí len posunúť potrebné prvky.

Prevádzka s mentalitou mobilných zariadení je dnes základným štandardom. Najlepšie značky vo svojej triede myslia nielen na to, či je ich web vhodný pre mobilné zariadenia, ale aj na úplnú zákaznícku skúsenosť.

Lucinda Duncalfe, generálna riaditeľka spoločnosti Monetate

Tu je infografika spoločnosti Monetate ilustrujúca potenciálne výhody vytvorenia jedného responzívneho dizajnu pre viac zariadení:

Infografika s responzívnym webdizajnom

Ak chcete vidieť responzívny web v akcii, namierte svoj Google Chrome prehľadávač (verím, že Firefox má rovnakú funkciu) na Highbridge, Teraz vyberte Zobraziť> Vývojár> Nástroje pre vývojárov z ponuky. Takto sa načíta veľa nástrojov v spodnej časti prehliadača. Kliknite na malú ikonu mobilu úplne vľavo od pruhu ponuky Nástroje pre vývojárov.

responzívne-testovacie-chróm

Môžete použiť možnosti navigácie zhora na zmenu zobrazenia z krajiny na výšku alebo dokonca zvoliť ľubovoľný počet predprogramovaných veľkostí výrezu. Možno budete musieť stránku načítať znova, ale je to najlepší nástroj na svete na overenie vašich responzívnych nastavení a zabezpečenie toho, aby váš web vyzeral skvele na všetkých zariadeniach!

3 Komentáre

  1. 1
  2. 2

    Ďakujem pekne Douglasovi za tento dobre vysvetlený článok. Musím s tým súhlasiť, aj keď po obsahovej stránke. Pre väčšinu webov, ktoré vytvoríme, nebude stačiť responzívne rozloženie. Potrebujeme responzívny obsah. Ale pre základné webové stránky budeme určite používať váš dobre zdokumentovaný článok, ako to vyriešiť!

Čo si myslíte?

Táto stránka používa Akismet na zníženie spamu. Zistite, ako sa spracúvajú údaje vašich komentárov.