Palielinās lietotāju skaits, kuriem ir piekļuve internetam, izmantojot planšetdatorus un mobilos tālruņus. Tas, kā jūs jau zināt, nozīmē, ka nepietiek tikai ar labas tīmekļa lapas noformēšanu, kas labi izskatās mūsu datorā: tā ir jāredz arī katrā mobilajā ierīcē. Problēma? Dažādi ekrāna izmēri un izšķirtspēja. Tāpēc ir tik grūti izveidot tādu dizainu, kas pareizi pielāgotos visiem plašsaziņas līdzekļiem (slavenais atsaucīgi dizains, tulkots kā adaptīvs dizains).
Šeit ir daži padomi, kas jāpatur prātā, veidojot dizainu ar šīm īpašībām. Pievērs uzmanību!
Padomi adaptīvam dizainam
- Izveidojiet vienkāršu veidniAr vienkāršu es nedomāju mīlīgu. Es runāju par struktūra Jūsu vietnes HTML: jo skaidrāks tas ir, jo labāk. Paturiet prātā, ka datora ekrānā var ievietot trīs vertikālas kolonnas; mobilā tālruņa ekrānā jums būs piemērots tikai viens. Padomājiet par to un to, kā jūs mainīsit elementus.
- Novērst visu nevajadzīgoIzvairieties no jQuery efektiem, Flash animācijām un jebkura cita koda, kas palēnina jūsu lapas ielādi. Jo mazāk šāda veida satura jums ir, jo ātrāk tīmeklis tiks ielādēts.
- Definējiet stilu css katram "izmēram"Izveidojiet tiny.css, small.css un big.css (piemēram), kas darbojas, pamatojoties uz ierīci, kurā tā tiek skatīta. Piemēram:
@import url (tiny.css) (min-platums: 300 pikseļi);
@import url (small.css) (min-platums: 600 pikseļi);
@import url (big.css) (min-platums: 900 pikseļi);
- Visbiežāk izmantotās izšķirtspējas320 pikseļi / 480 pikseļi / 720 pikseļi / 768 pikseļi / 900 pikseļi / 1024 pikseļi
- Padariet savu veidni ELASTĪGUKad vien varat, strādājiet ar procentiem, nevis fiksētām summām. Šeit ir dažas atsauces ekvivalences: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- Tipogrāfija Tas ir svarīgāk nekā jebkad. Dažreiz ierīces ekrāns var būt tik mazs, ka redzat tikai tekstu. Tāpēc mums ļoti rūpīgi jāizvēlas labākie fonti mūsu vietnē, lai, samazinot to izmēru, tie nezaudētu salasāmību. Turklāt mums jāzina, kā neitrālākus fontus apvienot ar citiem ar personību, kas tīmeklim piešķir nepieciešamo raksturu. Tāpēc pirmais padoms ir tas, ka jūs pavadāt laiku, izvēloties fontus, kurus izmantosiet.
- Izmantot augstas kvalitātes attēliKad telpa ir samazināta, tai tiks pievienoti attēli. Atlasiet tos, kuru kvalitāte nezaudē, kad tiek samazināta, un mērogojot darbojas vienādi. Zemas kvalitātes attēls padarīs jūsu vietni sliktu.
- Ka jūsu attēli vienmēr ir redzami pilnsNovērsiet fotoattēlu sagriešanu, CSS pievienojot kodu img (platums: 100%;). Tādā veidā jūs liekat ierīcei pārrēķināt attēlam piešķiramo augstumu, lai tā platumu varētu redzēt simtprocentīgi.
- Viss zems to pašu URLAizmirstiet par tādiem apakšdomēniem kā www.mysite.com/mobile, jo tas pats index.html fails saknes mapē darbosies visām ierīcēm (ja pareizi izveidojat adaptīvo noformējumu). Jūs jau zināt priekšrocību: jo mazāk apakšdomēnu, jo ātrāk tiks ielādēta lapa.
- Izmantojiet balstu priekšrocības: Esiet iztēli. Tas nav tas pats, kas piekļūt vietnei no galddatora, nevis no iPad vai mobilā tālruņa. Ar pirmo jūs orientēsieties mierīgi un mierīgi. Ar pēdējo jūs darīsit to tukšgaitā un aizvērsiet logu, tiklīdz jums būs garlaicīgi. Izmantojiet šos nosacījumus, lai izklaidētu lietotāju un liktu viņam izklaidēties dažās minūtēs, ko viņš gatavojas veltīt jums. Varbūt, kad viņš atgriezīsies mājās, viņš izlems apmeklēt jūs mierīgāk.
- Iedvesmoties Digitālajās publikācijās jūs interesēsieties, kāpēc šis padoms. Ļoti viegli: digitālie žurnāli (labi) zina, kā izmantot atbalsta priekšrocības, un to dizains ir ļoti inteliģents. Iedvesmojieties no viņiem un izveidojiet vietni, kuru ir grūti pamest.
Vairāk informācijas - Digitālie žurnāli
Avots - splio, 960.gs, kolonāls
Ir lietas, kurām es īsti nepiekrītu.
5. punktā ... tā kā 200px = 15,38% un turpmākie ... šo atsauces salīdzinājumu nevar veikt bez vecāku mērvienībām, izmērs pikseļos nav relatīvs mērs, piemēram, procenti!
Norādiet attēlus ar platumu: 100% nepareizi, es nedomāju, ka tam vajadzētu būt ieteikumam. Attēli tos labāk definē ar platumu un augstumu, tāpēc serverim ir nepieciešams mazāk laika informācijas apstrādei (tam nav jāaprēķina lielums), un mēs uzlabojam lapas ielādes ātrumu (kas ir ļoti svarīgi adaptīvajā vai atsaucīgajā tīmeklī) dizains).
Es jau iekļautu, kaut arī tas ir deguna darbs ... attēlus tīklenes ekrāniem. Ja mēs vēlamies veikt atsaucīgu tīmekļa dizainu, tīklenes attēlošanai ir obligāti jāizmanto attēli, jo liels skaits mobilo un planšetdatoru skatu izmanto šos ekrānus. Tāpēc nav jēgas pielikt pūles to dizainam ar pusvārstu.
Labi atpūtai
5. punktā viņi liek jums kontekstu un stāsta par kopējo izkārtojumu 1300px ar 3 kolonnām, vienu no 200, 300 un 1000.
Ja jūs nododat to procentiem, viņu gadījumā tie ir, kā jūs sakāt, 15,38% ((200 * 100) / 1300) (zemāk aiz komata, starptautiskā sistēma: P)
Bet, ja mēs runājam par 500 pikseļu izkārtojumu un mums ir 3 kolonnas, viena no 200, otra no 200 un otra ar 100 pikseļiem, procenti vairs nav vienādi, šajā gadījumā 200 pikseļi = 40% ((200 * 100) / 500)
Tie būtu: 200 pikseļi = 40% un 100 pikseļi = 10%
Nāc, kā jau teicu, tās nav atsauce uz to, ko jūs norādījāt, tās ir tikai atsauce uz 1300 pikseļu izkārtojumu.
vēlējumiem
Kāda neveiksme, jums ir pilnīga taisnība pasaulē! Vēlreiz paldies ;)