Adaptívny dizajn (responzívny dizajn)

Počet používateľov, ktorí majú prístup na internet prostredníctvom tabletov a mobilných telefónov, pribúda. To, ako už viete, znamená, že nestačí iba navrhnúť kvalitnú webovú stránku, ktorá vyzerá dobre na našom počítači: musí to byť viditeľné aj na každom mobilnom zariadení. Problém? Rôzne veľkosti a rozlíšenia obrazovky. Preto je také ťažké vytvoriť dizajn, ktorý sa správne prispôsobí všetkým médiám (slávnym reagovať dizajnu, preložené ako adaptívny dizajn).

Tu je niekoľko rád, ktoré by ste mali mať na pamäti pri vytváraní dizajnu s týmito vlastnosťami. Dávaj pozor!

Tipy na adaptívny dizajn

1. Vytvorte jednoduchú šablónuJednoducho nemyslím nijaký. Hovorím o štruktúra HTML vášho webu: čím jasnejšie, tým lepšie. Pamätajte, že na obrazovku počítača sa zmestia tri zvislé stĺpce; na obrazovku mobilu sa vám zmestí iba jeden. Popremýšľajte o tom a o tom, ako budete premiestňovať prvky.
2. Eliminujte všetko zbytočnéVyhýbajte sa efektom jQuery, animáciám vo formáte Flash a iným kódom, ktoré spomaľujú načítanie stránky. Čím menej obsahu tohto typu máte, tým rýchlejšie sa web načíta.
3. Definujte štýl css pre každú „veľkosť“Vytvorte napríklad tiny.css, small.css a big.css, ktoré fungujú na základe zariadenia, na ktorom je zobrazený. Napríklad:
   

   @import url (tiny.css) (minimálna šírka: 300px);

   @ import url (small.css) (minimálna šírka: 600px);

   @import url (big.css) (minimálna šírka: 900px);

4. Najpoužívanejšie rozlíšenia320px/480px/720px/768px/900px/1024px
5. Vytvorte svoju šablónu FLEXIBILNOUKedykoľvek môžete, pracujte s percentami namiesto pevných súm. Tu je niekoľko referenčných ekvivalentov: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
6. Typografia Je to dôležitejšie ako kedykoľvek predtým. Niekedy môže byť obrazovka vášho zariadenia taká malá, že uvidíte iba text. Preto musíme veľmi opatrne vyberať najlepšie písma na našej stránke, aby pri zmenšení nestratili čitateľnosť. Okrem toho musíme vedieť, ako kombinovať neutrálnejšie písma s inými a osobnými, ktoré dodávajú webu potrebný charakter. Prvým tipom preto je, že trávite čas výberom písma, ktoré budete používať.
7. Spojené štáty americké vysoko kvalitné obrázkyKeď sa zmenší priestor, budú ho sprevádzať obrázky. Vyberte tie, ktoré pri znížení nestratia kvalitu a ktoré pri zmenšení fungujú rovnako. Nízka kvalita obrázka spôsobí, že váš web bude vyzerať zle.
8. Že vaše obrázky budú vždy viditeľné plnýZabráňte tomu, aby boli vaše fotografie orezané, a to tak, že do svojho css pridáte img (width: 100%;) kód. Týmto spôsobom hovoríte zariadeniu, aby prepočítalo výšku, ktorá sa má dať obrázku, aby bola jeho šírka viditeľná na sto percent.
9. Všetky nízke rovnaká adresa URLZabudnite na subdomény ako www.mysite.com/mobile, pretože rovnaký súbor index.html v koreňovom priečinku bude fungovať pre všetky zariadenia (ak adaptívny dizajn robíte správne). Výhodu už poznáte: čím menej subdomén, tým rýchlejšie sa načítanie stránky uskutoční.
10. Využite možnosti podpory: Buďte nápadití. Prístup na webovú stránku zo stolného počítača nie je rovnaký ako z iPadu alebo mobilného telefónu. S prvým budete navigovať pokojne a uvoľnene. S tým druhým to urobíte v nečinných hodinách a zatvoríte okno hneď, ako sa začnete nudiť. Využite tieto podmienky, aby ste používateľa pobavili a pobavili ho za tých pár minút, ktoré sa vám chystajú venovať. Možno sa po príchode domov rozhodne znova vás navštíviť uvoľnenejšie.
11. Dostať inšpiráciu V digitálnych publikáciách sa budete čudovať, prečo práve táto rada. Veľmi ľahké: digitálne časopisy (dobre) vedia, ako využiť podporu, a ich dizajn je veľmi inteligentný. Inšpirujte sa nimi a urobte si web, ktorý sa ťažko opustí.

Viac informácií - Digitálne časopisy

Zdroj - splio, 960.gs, stĺp