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

Adaptív kialakítá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


A cikk tartalma betartja a szerkesztői etika. A hiba bejelentéséhez kattintson a gombra itt.

3 hozzászólás, hagyd a tiedet

Hagyja megjegyzését

E-mail címed nem kerül nyilvánosságra. Kötelező mezők vannak jelölve *

*

*

  1. Az adatokért felelős: Miguel Ángel Gatón
  2. Az adatok célja: A SPAM ellenőrzése, a megjegyzések kezelése.
  3. Legitimáció: Az Ön beleegyezése
  4. Az adatok közlése: Az adatokat csak jogi kötelezettség alapján továbbítjuk harmadik felekkel.
  5. Adattárolás: Az Occentus Networks (EU) által üzemeltetett adatbázis
  6. Jogok: Bármikor korlátozhatja, helyreállíthatja és törölheti adatait.

  1.   Didac Rios dijo

    Van, amiben nem értek egyet nagyon.
    Az 5. pontban ... mivel 200px = 15,38% és a következők ... ez a referencia-összehasonlítás nem végezhető el szülőmérés nélkül, a pixelenkénti méret nem relatív mérték, mint a százalékok!

    Adja meg a képeket szélességgel: 100% -ban hibás, nem hinném, hogy ajánlásnak kellene lennie. A képek jobban meghatározzák őket a szélességükkel és magasságukkal, így a szerver kevesebb időt vesz igénybe az információk feldolgozásával (nem kell kiszámítania a méretét), és javítjuk az oldal betöltési sebességét (ami nagyon fontos az adaptív vagy adaptív webben tervezés).

    Már be is venném, bár orrmunka ... képeket a retina képernyőkhöz. Ha adaptív webdesign-ot akarunk készíteni, akkor kötelező a képek használata a retina megjelenítéséhez, mivel a mobil- és táblagép-nézetek nagy százaléka használja ezeket a képernyőket. Tehát nincs értelme félgázzal tervezni őket.

    Jó a többi számára

    1.    Didac Rios dijo

      Az 5. pontban összefüggésbe hoznak és elmondanak egy 1300 képpontos elrendezést 3 oszloppal, a 200, a 300 és az 1000 egyikével.

      Ha százalékokra adja át, akkor esetükben ezek 15,38% ((200 * 100) / 1300) (lentebb tizedesjegy, nemzetközi rendszer: P)

      De ha 500 képpontos elrendezésről beszélünk, és 3 oszlopunk van, az egyik a 200, a másik a 200, a másik pedig 100 képpontos, akkor a százalékok már nem ugyanazok, ebben az esetben 200 képpont = 40% ((200 * 100) / 500)

      Ezek a következők lennének: 200px = 40% és 100px = 10%

      Ugyan, mint mondtam, ezek nem referenciák, amelyeket Ön jelez, hanem csak egy 1300 képpontos elrendezés referenciája.

      tekintetében

      1.    Lua louro dijo

        Micsoda kudarc, teljesen igazad van a világon! Köszönöm mégegyszer ;)