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
- 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.
- 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.
- 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ų);
- Dažniausiai naudojamos rezoliucijos320 pikselių / 480 taškų / 720 taškų / 768 taškų / 900 taškų / 1024 taškų
- 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%
- 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.
- 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.
- 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ų.
- 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.
- 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.
- 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