Adaptyvus dizainas (reaguojantis dizainas)

Adaptyvus dizainas

Vartotojų, interneto prieigą naudojant planšetinius kompiuterius ir mobiliuosius telefonus, daugėja. Tai, kaip jau žinote, reiškia, kad nepakanka tik sukurti gerą tinklalapį, kuris gerai atrodo mūsų kompiuteryje: jis taip pat turi būti matomas kiekviename mobiliajame įrenginyje. Problema? Skirtingi ekrano dydžiai ir skiriamoji geba. Štai kodėl taip sunku padaryti dizainą, kuris būtų tinkamai pritaikytas prie visų laikmenų (garsiųjų reaguoja dizainas, išversta kaip prisitaikantis dizainas).

Štai keletas patarimų, į kuriuos reikia atsižvelgti kuriant dizainą pagal šias charakteristikas. Atkreipk dėmesį!

Adaptyvaus dizaino patarimai

  1. Padarykite paprastą šablonąPaprasčiau aš neturiu omenyje švelnaus. Aš kalbu apie estructura Jūsų svetainės HTML: kuo aiškiau, tuo geriau. Atminkite, kad kompiuterio ekrane gali tilpti trys vertikalūs stulpeliai; mobiliojo telefono ekrane tilpsite tik vienas. Pagalvokite apie tai ir kaip pakeisite elementus.
  2. Pašalinkite viską, kas nereikalingaVenkite „jQuery“ efektų, „Flash“ animacijų ir bet kokio kito kodo, sulėtinančio jūsų puslapio įkėlimą. Kuo mažiau turėsite šio tipo turinį, tuo greičiau bus įkeltas internetas.
  3. Apibrėžkite stilių CSS kiekvienam „dydžiui“Sukurkite tiny.css, small.css ir big.css (pavyzdžiui), kurie veikia pagal įrenginį, kuriame jis buvo peržiūrėtas. Pavyzdžiui:

    @import url (tiny.css) (min-plotis: 300px);

    @import url (small.css) (min. plotis: 600 taškų);

    @import url (big.css) (min. plotis: 900 taškų);

  4. Dažniausiai naudojamos rezoliucijos320 pikselių / 480 taškų / 720 taškų / 768 taškų / 900 taškų / 1024 taškų
  5. Padarykite šabloną LanksčiąKai tik galite, dirbkite procentais, o ne fiksuotomis sumomis. Štai keletas nuorodų atitikmenų: 200 taškų = 15'38% / 300 taškų = 23'07% / 800 taškų = 61'5384615384%
  6. Tipografija Tai svarbiau nei bet kada. Kartais jūsų įrenginio ekranas gali būti toks mažas, kad matote tik tekstą. Štai kodėl turime labai atidžiai pasirinkti geriausius savo svetainės šriftus, kad sumažinę jų dydį jie neprarastų įskaitomumo. Be to, turime žinoti, kaip neutralesnius šriftus su kitais derinti su asmenybe, suteikiančiu žiniatinkliui reikiamą charakterį. Todėl pirmasis patarimas yra tai, kad jūs praleidžiate laiką pasirinkdami šriftus, kuriuos ketinate naudoti.
  7. JAV aukštos kokybės vaizdaiKai erdvė mažėja, vaizdai ją lydės. Pasirinkite tuos, kurie nepraranda kokybės, kai sumažėja, ir kurie veikia taip pat, kai keičiamas mastelis. Dėl žemos kokybės vaizdo jūsų svetainė atrodys blogai.
  8. Kad jūsų vaizdai būtų visada matomi pilnasNeleiskite nukirpti savo nuotraukų pridėdami kodą „img“ (plotis: 100%;). Tokiu būdu liepiate įrenginiui perskaičiuoti aukštį, kurį jis turėtų suteikti vaizdui, kad jo plotis būtų matomas šimtu procentų.
  9. Visi žemai tą patį URLPamirškite apie padomenius, tokius kaip www.mysite.com/mobile, nes tas pats index.html failas šakniniame aplanke veiks visiems įrenginiams (jei tinkamai pritaikysite adaptyvųjį dizainą). Jūs jau žinote pranašumą: kuo mažiau padomenių, tuo greičiau bus įkeltas puslapis.
  10. Pasinaudokite atramomis: Būkite vaizduotė. Tai ne tas pats, kaip pasiekti svetainę iš stalinio kompiuterio, nei iš „iPad“ ar mobiliojo telefono. Su pirmuoju jūs naršysite ramiai ir atsipalaidavę. Su pastaruoju tai atliksite tuščiąja eiga ir uždarysite langą, kai tik nusibosite. Pasinaudokite šiomis sąlygomis, kad galėtumėte linksminti vartotoją ir priversti juos linksmintis per tas kelias minutes, kurias jie ketina skirti jums. Gal grįžęs namo nuspręs atsipalaiduoti.
  11. Būti įkvėptam Skaitmeniniuose leidiniuose pasidomėsite, kodėl šis patarimas. Labai lengva: skaitmeniniai žurnalai (gerai) moka pasinaudoti parama ir jų dizainas yra labai protingas. Įkvėpkite jų ir sukurkite svetainę, kurią sunku palikti.

Daugiau informacijos - Skaitmeniniai žurnalai

Šaltinis - splio, 960.gs, kolumbalinis


3 komentarai, palikite savo

Palikite komentarą

Jūsų elektroninio pašto adresas nebus skelbiamas. Privalomi laukai yra pažymėti *

*

*

  1. Atsakingas už duomenis: Miguel Ángel Gatón
  2. Duomenų paskirtis: kontroliuoti šlamštą, komentarų valdymą.
  3. Įteisinimas: jūsų sutikimas
  4. Duomenų perdavimas: Duomenys nebus perduoti trečiosioms šalims, išskyrus teisinius įsipareigojimus.
  5. Duomenų saugojimas: „Occentus Networks“ (ES) talpinama duomenų bazė
  6. Teisės: bet kuriuo metu galite apriboti, atkurti ir ištrinti savo informaciją.

  1.   Didakas Riosas sakė

    Yra dalykų, su kuriais iš tikrųjų nesutinku.
    5 punkte ... kadangi 200px = 15,38% ir tolesni ... šio palyginimo negalima atlikti be pagrindinio mato, taškų dydis nėra santykinis matas, pvz., Procentai!

    Nurodykite vaizdus, ​​kurių plotis: 100% neteisingas, nemanau, kad tai turėtų būti rekomendacija. Vaizdai geriau apibrėžia juos pagal jų plotį ir aukštį, todėl serveris užtrunka mažiau laiko apdoroti informaciją (neprivalo apskaičiuoti jos dydžio), o mes pageriname puslapio įkėlimo greitį (labai svarbu pritaikant ar reaguojant į interneto dizainą) .

    Aš jau įtraukčiau, nors tai yra nosies darbas ... tinklainės ekranų vaizdai. Jei norime kurti interaktyvų interneto dizainą, tinklainės tinklui rodyti privaloma naudoti vaizdus, ​​nes didelė dalis mobiliųjų ir planšetinių kompiuterių rodinių naudoja šiuos ekranus. Taigi nėra prasmės dėti pastangų jiems projektuojant pusiau droseliu.

    Gera poilsiui

    1.    Didakas Riosas sakė

      5 punkte jie pateikia jums kontekstą ir pasakoja apie bendrą 1300 taškų išdėstymą su 3 stulpeliais, vienu iš 200, 300 ir 1000.

      Jei perduosite jį procentais, jų atveju jie yra tokie, kaip sakote, 15,38% ((200 * 100) / 1300) (žemiau dešimtainio skaičiaus, tarptautinė sistema: P)

      Bet jei kalbėsime apie 500 taškų išdėstymą ir turėsime 3 stulpelius, vieną iš 200, kitą iš 200 ir kitą iš 100 taškų, procentai nebebus tokie patys, šiuo atveju 200 taškų = 40% ((200 * 100) / 500)

      Jie būtų: 200 taškų = 40 proc. Ir 100 taškų = 10 proc.

      Nagi, kaip jau sakiau, jie nėra nuoroda, ką jūs nurodote, jie yra tik 1300 taškų išdėstymo nuoroda.

      dėl

      1.    Lua louro sakė

        Kokia nesėkmė, jūs visiškai teisus pasaulyje! Ačiū dar kartą ;)