Az adaptív kialakítás (adaptív tervezés)

A táblagépeken és mobiltelefonokon keresztül az internetet használók száma növekszik. Ez, amint azt már tudja, azt jelenti, hogy már nem elegendő egy jó weboldalt megtervezni, amely jól néz ki a számítógépünkön: azt minden mobileszközön is látni kell. A probléma? Különböző képernyőméretek és felbontások. Ezért olyan nehéz olyan tervet készíteni, amely megfelelően alkalmazkodik az összes médiához (a híres reszponzív dizájnfordítva adaptív tervezés).

Íme néhány tipp, amelyeket szem előtt kell tartani, ha ilyen jellegű terveket készít. Figyelj!

Tippek az adaptív tervezéshez

1. Készítsen egyszerű sablontEgyszerű alatt nem azt értem, hogy nyájas. Beszélek a struktúra Webhelye HTML-je: minél világosabb, annál jobb. Ne feledje, hogy a számítógép képernyőjén három függőleges oszlop fér el; a mobil képernyőjén csak egy fér el. Gondoljon bele, és hogyan helyezze át az elemeket.
2. Távolítson el mindent, ami feleslegesKerülje a jQuery effektusokat, a Flash animációkat és minden olyan kódot, amely lelassítja az oldal betöltését. Minél kevesebb ilyen típusú tartalom van, annál gyorsabban töltődik be az internet.
3. Határozzon meg egy stílust css minden "mérethez"Hozzon létre egy például egy tiny.css, small.css és big.css fájlt, amelyek a megtekintett eszköz alapján futnak. Például:
   

   @import url (tiny.css) (min-szélesség: 300px);

   @import url (small.css) (min-szélesség: 600px);

   @import url (big.css) (min-szélesség: 900px);

4. A leggyakrabban használt felbontások320 képpont / 480 képpont / 720 képpont / 768 képpont / 900 képpont / 1024 képpont
5. Tegye rugalmasvá a sablontAmikor csak teheti, dolgozzon százalékkal, fix összeg helyett. Íme néhány referenciaegyenérték: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
6. Tipográfia sokkal fontosabb, mint valaha Az eszköz képernyője néha olyan kicsi lehet, hogy csak a szöveget látja. Ezért nagyon körültekintően kell kiválasztanunk a legjobb betűtípusokat a webhelyünkön, hogy méretük csökkenésekor ne veszítsék el az olvashatóságot. Ezenkívül tudnunk kell, hogyan kombinálhatunk semlegesebb betűtípusokat másokkal a személyiséggel, amelyek megadják az internetnek a szükséges karaktert. Ezért az első tanács az, hogy időt fordítson a használni kívánt betűtípusok kiválasztására.
7. USA kiváló minőségű képekMivel a hely csökken, a képek kísérik. Válassza ki azokat, amelyek csökkentve nem veszítenek a minőségből, és méretezéskor ugyanúgy működnek. Az alacsony minőségű kép rosszul fogja kinézni a webhelyét.
8. Hogy a képeid mindig láthatók legyenek teljesAz img (szélesség: 100%;) kód hozzáadásával megakadályozhatja a fényképek kivágását. Így azt mondja az eszköznek, hogy számolja át a képnek adandó magasságot, hogy annak szélessége száz százalékosan látható legyen.
9. Minden alacsony ugyanaz az URLFelejtsen el olyan aldomaineket, mint a www.mysite.com/mobile, mivel a gyökérmappában ugyanaz az index.html fájl működik minden eszközön (ha az adaptív kialakítást helyesen végzi). Már tudja az előnyét: minél kevesebb az aldomain, annál gyorsabb lesz az oldal betöltése.
10. Használja ki a támaszokat: Legyél fantáziadús Nem ugyanaz a webhely elérése asztali számítógépről, mint iPad vagy mobiltelefon. Az elsővel nyugodtan és nyugodtan navigálhat. Ez utóbbival tétlen órákban megcsinálja, és amint megunta, bezárja az ablakot. Használja ki ezeket a feltételeket, hogy szórakoztassa a felhasználót, és szórakoztassa őket abban a néhány percben, amelyet neked fognak szentelni. Talán hazaérve úgy dönt, hogy nyugodtabban látogat meg.
11. Merítsen ihletet A digitális kiadványokban kíváncsi lesz, miért pont ez a tanács. Nagyon könnyű: digitális folyóiratok (jó) tudja, hogyan kell kihasználni a támogatást, és a kialakításuk nagyon intelligens. Merítsen ihletet tőlük, és készítsen egy weboldalt, amelyet nehéz elhagyni.

Több információ - Digitális magazinok

Forrás - splio, 960.gs, oszlopos