Adaptivní design (responzivní design)

Počet uživatelů přistupujících k internetu prostřednictvím tabletů a mobilních telefonů přibývá. To, jak již víte, znamená, že již nestačí navrhnout dobrou webovou stránku, která vypadá dobře na našem počítači: musí být také vidět na každém mobilním zařízení. Problém? Různé velikosti a rozlišení obrazovky. Proto je tak obtížné vytvořit design, který se správně přizpůsobí všem médiím (slavným citlivý designu, přeloženo jako adaptivní design).

Zde je několik tipů, které byste měli mít na paměti při vytváření designu s těmito vlastnostmi. Dávej pozor!

Tipy pro adaptivní design

1. Vytvořte jednoduchou šablonuJednoduše nemyslím nijaký. Mluvím o struktura HTML vašeho webu: čím jasnější je, tím lépe. Pamatujte, že na obrazovku počítače se vejdou tři svislé sloupce; na obrazovku mobilu se vám vejde jen jeden. Přemýšlejte o tom a jak přemístíte prvky.
2. Odstraňte vše zbytečnéVyhněte se efektům jQuery, animacím Flash a jakémukoli jinému kódu, který zpomaluje načítání stránky. Čím méně obsahu tohoto typu máte, tím rychleji se web načte.
3. Definujte styl css pro každou „velikost“Vytvořte například tiny.css, small.css a big.css, které běží na základě zařízení, na kterém je zobrazeno. Například:
   

   @import url (tiny.css) (min. šířka: 300px);

   @import url (small.css) (min. šířka: 600px);

   @import url (big.css) (min. šířka: 900px);

4. Nejpoužívanější rozlišení320px/480px/720px/768px/900px/1024px
5. Udělejte svou šablonu FLEXIBILNÍKdykoli můžete, pracujte s procenty místo pevných částek. Zde je několik referenčních ekvivalentů: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
6. Typografie Je to důležitější než kdy jindy Obrazovka vašeho zařízení může být někdy tak malá, že na ní uvidíte jen text. Proto musíme velmi pečlivě vybírat nejlepší písma na našem webu, aby při zmenšení neztratili čitelnost. Kromě toho musíme vědět, jak kombinovat neutrálnější písma s ostatními s osobností, která dává webu potřebný charakter. Prvním tipem tedy je, že strávíte čas výběrem písem, která budete používat.
7. Spojené státy americké vysoce kvalitní obrázkyJak se zmenšuje prostor, obrázky jej budou doprovázet. Vyberte ty, které při snížení neztratí kvalitu a při změně měřítka fungují stejně. Nízká kvalita obrázku způsobí, že váš web bude vypadat špatně.
8. Že vaše obrázky budou vždy vidět plnýZabraňte tomu, aby vaše fotografie byly oříznuty, přidáním img (width: 100%;) kódu do vašeho css. Tímto způsobem říkáte zařízení, aby přepočítalo výšku, kterou by mělo dát obrázku, aby bylo vidět jeho šířku na sto procent.
9. Všechny nízké stejnou adresu URLZapomeňte na subdomény jako www.mysite.com/mobile, protože stejný soubor index.html v kořenové složce bude fungovat pro všechna zařízení (pokud adaptivní design provedete správně). Výhoda již znáte: čím méně subdomén, tím rychlejší bude načítání stránky.
10. Využijte podpory: Buďte nápadití. Přístup na web ze stolního počítače není stejný než z iPadu nebo mobilního telefonu. S prvním budete navigovat klidným a klidným způsobem. S tím druhým to uděláte během nečinnosti a zavřete okno, jakmile se nudíte. Využijte tyto podmínky, abyste uživatele pobavili a pobavili ho za těch pár minut, které se vám bude věnovat. Možná, že když se vrátí domů, rozhodne se vás navštívit uvolněněji.
11. Být inspirován V digitálních publikacích se budete divit, proč tato rada. Velmi snadné: digitální časopisy (dobře) vědí, jak využít podporu a jejich design je velmi inteligentní. Nechte se jimi inspirovat a vytvořte si web, který je těžké opustit.

Více informací - Digitální časopisy

Zdroj - splio, 960.g, sloupcový