Navrhování pro web a tablety - responzivní design

• Duben 16, 2024

Termín Responsive je už nějakou dobu v popředí, ale co přesně to znamená? Internet se v průběhu let hodně změnil, z převážně textové platformy na interaktivní, poutavé, multimediální a multimediální prostředí.

Webové stránky se za poslední desetiletí změnily, aby odrážely vylepšení internetu a zařízení, která k jeho prohlížení používáme. Když už mluvíme o zařízeních, máme na výběr několik typů, včetně počítačů, mini-počítačů, tabletů a smartphonů. S rostoucím počtem zařízení a jejich variací se stává zřejmý problém. Každé zařízení a každá varianta zařízení má vlastní velikost obrazovky.

Když jsme museli pouze navrhovat webové stránky pro stolní a přenosné počítače, bylo naší hlavní úvahou to, jak zajistit, aby webová stránka zobrazovala totéž bez ohledu na počítač nebo webový prohlížeč. Odpovědí bylo navrhnout nejlepší webové prohlížeče a nejběžnější rozlišení obrazovky. To fungovalo na krátkou dobu. Další problém se projevil, protože se tyto parametry neustále měnily. Velikost obrazovky pro můj první počítač byla 800 x 600 a stejně jsem ji miloval. Norma se pak stala 1024 x 800. Nyní se počítače rozrostly na 27 palců a větší. Cílové rozlišení pro web se tedy neustále měnilo.

Když jsme si začali navrhovat tyto větší obrazovky, popularita smartphonu a tabletu se výrazně zvýšila díky jejich skvělým aplikacím, ale menším obrazovkám. Ve skutečnosti se předpokládá, že chytré telefony a tabulky budou používány častěji než počítače k ​​prohlížení webu pouze za několik let. Zpočátku existovalo jen několik mobilních zařízení. Začali jsme tedy navrhovat jak hlavní web pro uživatele počítače, tak druhý web pro uživatele mobilních zařízení. To však problém nevyřešilo úplně, protože jsme stále navrhovali rozvržení s pevnou šířkou.

Nyní nemůžete předpokládat, jaké zařízení bude prohlížeč používat k prohlížení vašich webových stránek. Takže navrhování pro určité pevné velikosti obrazovky již není nejlepší odpovědí na problém. Potřebujeme způsob, jak určit velikost obrazovky zařízení uživatele a podle toho zobrazit webovou stránku. Proto responzivní webový design, který pomocí CSS určuje šířku obrazovky a zobrazuje webovou stránku jinak podle potřeby. To nám umožňuje mít pouze jeden web, který se podle potřeby změní na několik verzí.

Video Návody: Tomáš Krejčí: Typické chyby designerů při návrhu responzivních webů (Duben 2024).