Reagujúce zásady webového dizajnu

V dnešnej dobe je bežnou praxou vytvoriť webovú stránku alebo aplikáciu, ktorá upravuje svoje používateľské rozhranie v závislosti od prehliadača alebo zariadenia. Na dosiahnutie tohto cieľa existujú dva prístupy. Prvá zahŕňa vytvorenie rôznych verzií vášho webu alebo aplikácie pre rôzne zariadenia. Je to však neefektívne a môže to viesť k nepredvídateľným chybám.

Pri hľadaní spoľahlivého a perspektívneho prístupu bol vytvorený responzívny-alebo adaptívny-dizajn. Zameriava sa na vytvorenie jednej verzie rozloženia, ktorá sa automaticky prispôsobí rôznym prehliadačom alebo zariadeniam.

V tomto článku sa dozvieme o responzívnom webovom dizajne a základných zásadách, ktoré vám pomôžu vytvoriť úžasný web.

Citlivé zložky webového dizajnu

Responzívny webový design nie je taký zložitý, ako sa zdá. Je to súbor postupov, ktoré môžete použiť pri písaní CSS, nie samostatná technológia, ktorú sa budete musieť naučiť od začiatku. Možno ste už dodržiavali niekoľko týchto zásad, bez toho, aby ste si to uvedomovali. Responzívny webový design môžete pochopiť tak, že preskúmate jeho štyri zložky: plynulé rozloženia, responzívne jednotky, flexibilné obrázky a mediálne dotazy.

Tekuté rozloženia

Vďaka flexibilnému rozloženiu môžete vytvárať webové stránky, ktoré sa prispôsobujú aktuálnej šírke a výške výrezu. Bežná prax zahŕňa používanie súboru maximálna šírka vlastnosť namiesto toho, aby prvku bola daná pevná šírka. Tiež pomocou percenta (%), výška výrezu (vh) alebo šírka výrezu (vw) pomáha zlepšiť adaptabilitu, ktorá nie je možná pri pixeloch (px). Takže nabudúce, keď budete vytvárať rozloženie, nezabudnite zaviesť tieto malé zmeny a začať ťažiť z techník responzívneho dizajnu.

Responzívne jednotky

Keď prechádzate na pokročilejšie CSS, často uvidíte používanie rem a em jednotky pre dĺžku namiesto px Jednotky. Dôvodom je, že rem jednotka umožňuje veľmi jednoduché škálovanie celého rozloženia. Štandardne sa 1rem rovná 16 pixelov, pretože je úmerný formátu veľkosť písma prvku, zvyčajne 16 pixelov. Môžete však nastaviť 1rem na 10 pixelov (alebo akúkoľvek inú hodnotu) na jednoduchšie výpočty úpravou veľkosti písma najvyššej úrovne.

Flexibilné obrázky

Obrázky sú hlavným záujmom pri navrhovaní aj toho najzákladnejšieho rozloženia. Vždy sa musíte postarať o ich správnu veľkosť, aby zodpovedali dizajnu. V predvolenom nastavení sa tiež nemenia so zmenami vo výreze. Mali by ste teda použiť % pre rozmery vašich obrázkov spolu s príponou maximálna šírka nehnuteľnosť.

Responzívne weby môžete oživiť pomocou mediálnych dopytov. S tekutými mriežkami je dobré začať, ale zistíte, že existuje niekoľko bodov, kde sa rozloženie začína rozpadávať. Pridaním zarážok pre tieto šírky výrezu sa upraví rozloženie pre rôzne zariadenia. Mediálne dotazy vám pomôžu selektívne aplikovať CSS na základe výsledkov testov funkcií médií. Môžete objavovať nové CSS funkcie na vytvorenie responzívnej webovej stránky v kratšom čase.

Reagujúce zásady webového dizajnu

Aj keď je responzívny webový design záchrancom, pokiaľ ide o problémy s viacerými obrazovkami, možno nemáte pevné fyzické obmedzenie, na ktoré by ste sa mali odvolávať. Preto pri navrhovaní responzívneho rozloženia existuje šesť základných responzívnych zásad webového dizajnu.

Používajte hraničné body založené na obsahu

Jeden zo základných princípov dizajnu hovorí, že dizajn vašich webových stránok by mal podporovať obsah, nie naopak. Mediálny obsah, ako sú videá, fotografie a textový obsah, ako sú dlhé a krátke webové kópie, by mal byť optimálne vykreslený na všetkých obrazovkách. Kľúčom k responzívnemu webovému dizajnu je používať hraničné body založené na obsahu a nie na zariadení.

Vyberajte múdro webové písma a systémové písma

Webové písma vyzerajú úžasne! Máte množstvo možností, ako upraviť svoj dizajn pomocou štýlových webových fontov. Mali by ste však vedieť, že prehliadače si budú musieť stiahnuť každé webové písmo. Viac webových písem, dlhší čas na stiahnutie. Naproti tomu systémové písma sú bleskurýchle. Ak používateľ nemá na miestnom zariadení pomenované systémové písmo, prepne sa späť na nasledujúce písmo zásobník rodiny písem. Pri výbere písem preto zvážte čas načítania a požiadavku na dizajn.

Optimalizujte bitmapové obrázky a vektory

Máte na svojom webe rôzne ikony, ktoré podporujú obsah? Ak sú vaše ikony vybavené mnohými detailmi, je často dobrým zvykom používať bitmapový formát. Na druhej strane sú vektorové formáty spôsobov, ako ísť po ikonách, ktoré pekne upravujú mierku hore a dole. Vektory sú často malé, ale nevýhodou je, že niektoré staršie prehliadače ich nemusia podporovať. Existujú tiež prípady, keď sú vektory ťažšie ako bitmapy, napríklad keď je obrázok veľmi detailný. Preto sa vždy uistite, že optimalizujete svoje bitmapové obrázky a vektory skôr, ako budú online.

Vykonajte testy na reagovanie v prvom rade

Prvým záhybom webovej stránky je zobrazenie, ktoré návštevníci uvidia pri prvom načítaní pred každým posúvaním. Často obsahuje sekciu hrdinu s príponou responzívna navigačná lišta, úvodnú kópiu a médiá a CTA. Odozva sa neobmedzuje iba na mobilné zariadenia. Mali by ste tiež zvážiť tablety, herné konzoly a ďalšie obrazovky. Kľúčom je preto vykonávať časté testy aspoň pre prvé zobrazenie webu. Môžete použiť Chrome DevTools (Maják) na testovanie kvality webových stránok.

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

Mnoho ľudí predpokladalo, že mobilní používatelia sa vždy ponáhľajú a hľadajú informácie o malých sústach, zatiaľ čo používatelia počítačov sa zaujímajú skôr o obsah v dlhej forme. Teraz vieme, že to v dnešnom svete nie je pravda. Ľudia všade používajú mobilné zariadenia a hľadajú kompletný obsah a plný prístup ku všetkým službám. Mali by ste zaistiť, aby ste namiesto skrývania obsahu spravovali rozloženie a zarážky, aby ste ho prezentovali čo najľahšie a bez námahy.

Spravujte rozloženie pomocou vnorených objektov

Vybudovanie rozloženia stránky a správne umiestnenie prvkov vyžaduje slušné množstvo úsilia. Tiež ste mohli mať problémy so správou mnohých prvkov, ktoré sú na sebe závislé. Preto by ste mali zvážiť zabalenie súvisiacich prvkov do kontajnera resp. To pomáha znížiť úlohu rozložiť niekoľko prvkov na jeden, v ktorom rozložíte iba jeden prvok.

Responzívny dizajn: Mali by ste ísť najskôr s počítačom alebo najskôr s mobilom?

Prvý prístup pre stolné počítače znamená, že napíšete CSS pre veľké obrazovky a potom použijete mediálne dotazy na zmenšenie dizajnu pre menšie obrazovky. Naproti tomu prístup spočívajúci v prvom rade pre mobilné zariadenia zahŕňa písanie CSS pre mobilné zariadenia s menšími obrazovkami a potom použitie mediálnych dopytov na rozšírenie dizajnu pre väčšie obrazovky. Hlavným cieľom je zredukovať webovú stránku a aplikácie na nevyhnutné položky.

Ak práve začínate s responzívnym vývojom webu, mali by ste najskôr prejsť na počítač Na konci dňa budete musieť kontajner na seba poukladať na mobil zariadení. Aj keď je to úplne osobné rozhodnutie, mobilný prvý prístup vám pomôže pri štruktúrovaní HTML lepším spôsobom, zatiaľ čo prístup pre stolné počítače vám pomôže s rozložením a medzerami techniky.

Najlepších 6 kurzov, ako sa naučiť návrh UX

Ak sa chcete naučiť navrhovať UX alebo zlepšiť svoje schopnosti, tu je šesť najlepších online kurzov, ktoré môžete absolvovať.

Čítajte ďalej

O autorovi