Responzivní design: 9 GIFů, abyste tomu porozuměli jednou provždy

Responzivní design, responzivní web, responzivní design…asi už vás omrzelo slýchat tyto pojmy stále dokola, ale co je to responzivní design?

Responzivní web design vám umožní bez problémů zobrazit stejný web na různých zařízeních, respektive na různých velikostech obrazovky.

S příchodem mobilních zařízení, jako jsou chytré telefony a tablety, a širokou škálou velikostí obrazovek , jsou milimetry, palce nebo dokonce pixely věcí minulosti ve webovém designu .

Pevná velikost při návrhu webu je dnes s množstvím nových zařízení, která jsou schopna zobrazit webovou stránku, neproveditelná.

Proto je dnes povinné, aby byl web responzivní design .

Tento termín však vytvořil určitý zmatek, protože je shrnut jako webová stránka viditelná na obrazovce stolního počítače i na mobilním telefonu, zatímco ve skutečnosti je to mnohem více.

Co je responzivní design

Abych vám odpověděl na Seznam e-mailů B2B otázku, co je responzivní webdesign, přináším vám 9 GIFů od kluků z Froontu , se kterými mnohem lépe pochopíte, co znamená web splňující tyto vlastnosti.

Responzivní web VS adaptivní web

I když se to může zdát stejné, není tomu tak.

Na responzivním webu je veškerý obsah restrukturalizován tak, aby se vešel na obrazovku a využil veškerý dostupný prostor.

Jasným příkladem je situace, kdy procházíte mobilní web a nabídka se změní z vodorovného na svislé pomocí rozevírací nabídky.

Co je tedy web s responzivním designem? 

Tento typ webových stránek bere v úvahu řadu předdefinovaných nebo standardních velikostí pomocí pixelů.

 

Stručně řečeno, na responzivním webu si hrajete s proporcionálními velikostmi, zatímco na adaptivním webu s předdefinovanými velikostmi .

Průtok

Tento termín označuje pohyb obsahu bez překrývání.

 

Například s menší obrazovkou, jako je obrazovka smartphonu, je dostupný prostor velmi svislý a obsah se začne posouvat dolů ve sloupci, jak můžete vidět na následujícím GIFu.

 

Relativní jednotky

Jak jsme zmínili v prvním bodě, máme informatie krijgen over de nieuwste  obrazovky mnoha velikostí, takže potřebujeme, aby se zadané rozměry , například v pixelech, mohly bez problémů měnit .

To je to, co je známé jako relativní jednotky , pracující v procentech.

 

Pro snazší pochopení můžete určit, že prvek návrhu vždy zabírá 50 % dostupného prostoru. Proto bez ohledu na velikost obrazovky bude uvedený prvek vždy zabírat 50 % obrazovky.

Body zlomu

Jedním z klíčů k responzivnímu designu dx leads  webu je přizpůsobit obsah podle toho, co vás zajímá, velikosti obrazovky.

 

To je to, co je známé jako body přerušení , které vám například umožňují přejít od zobrazení obsahu 3 sloupců na ploše k pouhému jednomu, pokud je to obrazovka chytrého telefonu.

Maximální a minimální hodnoty

Možná si říkáte, že pomocí responzivního designu lze grafický prvek nekonečně zvětšovat tak, aby vyplnil celou šířku obrazovky.

Tak to opravdu není .

Můžete určit, že prvek vždy zabírá 100 % obrazovky, ale také nastavit maximální bezpečnostní limit, aby jej nikdy nepřekročil.

 

Pokud například pro prvek definujete maximální šířku 1200 pixelů a obrazovka je 1400 pixelů, ačkoli v zásadě musí zabírat 100 % obrazovky (1400 pixelů), bude převládat pořadí, aby nepřesáhla 1200 pixelů, aby nedošlo k deformaci.

Vnořené objekty

Jak jste viděli, díky responzivnímu designu se všechny prvky upravují a „tančí“ podle velikosti obrazovky .

To však může být také problém, když web obsahuje velké množství různých prvků.

Proto je zde možnost vytvářet vnořené prvky , které se chovají jako jeden, jako by byly uvnitř kontejneru.

 

Mobilní a stolní počítač, který design je první?

Velmi častou otázkou je, zda nejprve navrhnout v mobilní verzi a poté ji přizpůsobit desktopu nebo naopak .

Na technické úrovni není velký rozdíl, i když se obvykle doporučuje začít s mobilní verzí .

 

Myslete na to, že v desktopové verzi s velkým množstvím prvků a funkcionalit ji pak budete muset zmenšit na mobilní obrazovku, což může být někdy titánský úkol.

Zahájení návrhu mobilní verze přináší řadu dalších omezení , ale jakmile je překonáte, nebudou ve verzi pro stolní počítače představovat velké problémy.

Webová písma vs systémová písma

Rychlost načítání je jedním z nejkritičtějších aspektů v mobilních verzích, ale také na desktopu (nevěřme si).

Při výběru fontu vašeho webu, který ponese váš responzivní design, máte 2 možnosti:

• Systémová písma
• Webová písma