Adaptivní design (responzivní design)

Adaptivní 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ý


Zanechte svůj komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

*

*

  1. Odpovědný za údaje: Miguel Ángel Gatón
  2. Účel údajů: Ovládací SPAM, správa komentářů.
  3. Legitimace: Váš souhlas
  4. Sdělování údajů: Údaje nebudou sděleny třetím osobám, s výjimkou zákonných povinností.
  5. Úložiště dat: Databáze hostovaná společností Occentus Networks (EU)
  6. Práva: Vaše údaje můžete kdykoli omezit, obnovit a odstranit.

  1.   Didac Rios řekl

    Jsou věci, se kterými moc nesouhlasím.
    V bodě 5 ... protože 200px = 15,38% a následující ... toto referenční srovnání nelze provést bez rodičovské míry, velikost na pixely není relativní míra jako procenta!

    Určete obrázky se šířkou: 100% špatně, nemyslím si, že by to mělo být doporučení. Je lepší definovat obrázky podle jejich šířky a výšky, takže zpracování informací serveru zabere méně času (nemusí počítat jeho velikost) a vylepšíme rychlost načítání stránky (velmi důležité v adaptivním nebo responzivním webu) design).

    Už bych zahrnoval, i když je to nos ... obrázky pro sítnicové obrazovky. Pokud chceme vytvořit responzivní webový design, je pro zobrazení sítnice povinné používat obrázky, protože tyto obrazovky využívá vysoké% zobrazení mobilních telefonů a tabletů. Nemá tedy smysl dávat jim úsilí do návrhu na poloviční plyn.

    Dobré pro zbytek

    1.    Didac Rios řekl

      V bodě 5 vás uvedou do kontextu a řeknou vám o celkovém rozložení 1300 pixelů se 3 sloupci, jedním z 200, 300 a 1000.

      Pokud to předáte procentům, v jejich případě jsou, jak říkáte, 15,38% ((200 * 100) / 1300) (desetinně níže, mezinárodní systém: P)

      Ale když mluvíme o rozložení 500px a máme 3 sloupce, jeden z 200, další z 200 a další z 100px, procenta již nejsou stejná, v tomto případě 200px = 40% ((200 * 100) / 500)

      Byly by: 200px = 40% a 100px = 10%

      No tak, jak jsem řekl, nejsou to reference, co uvedete, jsou to jen reference na rozložení 1300px.

      jde o

      1.    Lua louro řekl

        Jaký neúspěch, máte ve světě naprostou pravdu! Ještě jednou děkuji ;)