Responzivní zásady webového designu

V dnešní době je běžnou praxí vytvořit web nebo aplikaci, která upravuje své uživatelské rozhraní v závislosti na prohlížeči nebo zařízení. K dosažení tohoto cíle existují dva přístupy. První zahrnuje vytvoření různých verzí vašeho webu nebo aplikace pro různá zařízení. Je to však neefektivní a může to vést k nepředvídatelným chybám.

Při hledání spolehlivého přístupu, který je odolný vůči budoucnosti, byl vytvořen responzivní-nebo adaptivní-design. Zaměřuje se na vytvoření jediné verze rozvržení, která se automaticky přizpůsobí různým prohlížečům nebo zařízením.

V tomto článku se seznámíme s responzivním webovým designem a základními principy, které vám pomohou vytvořit úžasný web.

Citlivé složky webdesignu

Responzivní webový design není tak složitý, jak se zdá. Je to soubor postupů, které můžete použít při psaní CSS, nikoli samostatná technologie, kterou se musíte naučit od začátku. Možná již dodržujete několik těchto zásad, aniž byste si to uvědomovali. Citlivý webový design můžete pochopit prozkoumáním jeho čtyř složek: plynulého rozvržení, responzivních jednotek, flexibilních obrázků a mediálních dotazů.

Rozložení tekutin

Díky plynulému rozvržení můžete vytvářet webové stránky, které se přizpůsobí aktuální šířce a výšce výřezu. Běžná praxe zahrnuje používání maximální šířka vlastnost místo poskytnutí pevné šířky prvku. Také pomocí procenta (%), výška výřezu (vh) nebo šířka výřezu (vw) pomáhá zlepšit adaptabilitu, která není u pixelů možná (px). Až tedy příště budete stavět rozvržení, nezapomeňte tyto malé změny zavést a začít těžit z responzivních návrhových technik.

Responzivní jednotky

Když přecházíte na pokročilejší CSS, často uvidíte použití rem a em jednotky pro délku místo px Jednotky. Je to proto, že rem jednotka umožňuje velmi snadné škálování celého rozvržení. Ve výchozím nastavení se 1rem rovná 16px, protože je úměrný velikost písma prvku, obvykle 16 pixelů. Můžete však nastavit 1rem na 10px (nebo jakoukoli jinou hodnotu) pro snazší výpočty úpravou velikosti písma nejvyšší úrovně.

Flexibilní obrázky

Obrázky jsou hlavním zájmem při navrhování i toho nejzákladnějšího rozvržení. Vždy se musíte postarat o jejich správnou velikost, aby odpovídaly designu. Ve výchozím nastavení se také nemění se změnami ve výřezu. Měli byste tedy použít % pro rozměry vašich obrázků spolu s příponou maximální šířka vlastnictví.

Citlivé weby můžete oživit pomocí mediálních dotazů. S tekutými mřížkami je dobré začít, ale zjistíte, že existuje několik bodů, kde se rozložení začíná rozpadat. Přidání zarážek pro tyto šířky výřezu vyladí rozložení pro různá zařízení. Mediální dotazy vám pomohou selektivně aplikovat CSS na základě výsledků testů mediálních funkcí. Můžete prozkoumat nové Funkce CSS pro vytvoření responzivního webu v kratším čase.

Responzivní zásady webového designu

Přestože je responzivní webový design zachránce, pokud jde o problémy s více obrazovkami, možná nemáte pevné fyzické omezení, na které se můžete odvolávat. Proto při navrhování responzivního rozvržení existuje šest základních responzivních zásad webového designu.

Použijte zarážky na základě obsahu

Jedna ze základních zásad designu říká, že design vašich webových stránek by měl podporovat obsah, nikoli naopak. Mediální obsah, jako jsou videa, fotografie a textový obsah, jako jsou dlouhé a krátké webové kopie, by měl být optimálně vykreslen na všech obrazovkách. Klíčem k responzivnímu webovému designu je používat zarážky založené na obsahu, nikoli na zařízeních.

Moudře vybírejte webová písma a systémová písma

Webová písma vypadají úchvatně! Máte mnoho možností, jak upravit svůj design pomocí skvěle vypadajících webových písem. Měli byste však vědět, že prohlížeče si budou muset stáhnout každé webové písmo. Více webových písem, delší doba stahování. Naproti tomu systémová písma jsou bleskurychlá. Pokud uživatel na svém místním zařízení nemá pojmenované systémové písmo, přejde zpět na další písmo v zásobník rodiny písem. Při výběru písem proto vezměte v úvahu dobu načítání a požadavky na design.

Optimalizujte bitmapové obrázky a vektory

Máte na svém webu různé ikony podporující obsah? Pokud vaše ikony obsahují mnoho podrobností, je často vhodné použít bitmapový formát. Na druhou stranu, vektorové formáty jsou způsob, jak jít po ikonách, které se pěkně zvětšují a snižují. Vektory jsou často malé, ale nevýhodou je, že některé starší prohlížeče je nemusí podporovat. Existují také případy, kdy jsou vektory těžší než bitmapy, například když je obraz velmi podrobný. Proto se vždy ujistěte, že optimalizujete své bitmapové obrázky a vektory, než se dostanou online.

Proveďte testy pro responzivní první skládání

Prvním záhybem webové stránky je zobrazení, které návštěvníci uvidí při prvním načtení před jakýmkoli posouváním. Často obsahuje sekci hrdiny s příponou responzivní navigační lišta, úvodní kopie a média a CTA. Reakce se neomezuje pouze na mobilní zařízení. Měli byste také zvážit tablety, herní konzole a další obrazovky. Klíčem je tedy provádět časté testy alespoň pro první pohled na web. Můžete použít Chrome DevTools (Maják) k otestování kvality webových stránek.

Neskrývejte obsah na menších obrazovkách

Mnoho lidí dříve předpokládalo, že mobilní uživatelé neustále spěchají a hledají informace o malých velikostech, zatímco uživatelé stolních počítačů se zabývají dlouhodobým obsahem. Nyní víme, že to v dnešním světě není pravda. Lidé všude používají mobilní zařízení a hledají kompletní obsah a plný přístup ke všem službám. Měli byste zajistit, abyste místo skrývání obsahu spravovali rozložení a zarážky, abyste jej prezentovali co nejsnadněji a bez námahy.

Správa rozvržení pomocí vnořených objektů

Správné sestavení rozvržení webu a umístění prvků vyžaduje slušné úsilí. Také jste mohli mít potíže se správou mnoha prvků, které jsou na sobě navzájem závislé. Proto byste měli zvážit zabalení souvisejících prvků do kontejneru nebo. To pomáhá snížit úkol rozložení několika prvků na jeden, ve kterém rozkládáte pouze jeden prvek.

Responzivní design: Měli byste jít nejprve s počítačem nebo nejprve s mobilem?

První přístup pro stolní počítače znamená, že budete psát CSS pro velké obrazovky a poté pomocí mediálních dotazů zmenšit design pro menší obrazovky. Naproti tomu mobilní první přístup zahrnuje psaní CSS pro mobilní zařízení s menšími obrazovkami a poté použití mediálních dotazů k rozšíření designu pro větší obrazovky. Hlavním cílem je omezit web a aplikace na naprosté nezbytnosti.

Pokud s responzivním vývojem webu teprve začínáte, měli byste nejprve přejít na desktop na konci dne budete muset kontejner na sebe skládat na mobil zařízení. Ačkoli je to zcela osobní rozhodnutí, mobilní první přístup vám pomůže při strukturování HTML v lepším způsobem, zatímco přístup první na ploše vám pomůže s rozložením a mezerami techniky.

6 nejlepších kurzů, jak se naučit design UX

Pokud se chcete naučit navrhovat UX nebo zlepšit své dovednosti, zde je šest nejlepších online kurzů, které můžete absolvovat.

Číst dále

O autorovi