Kasutajate Interneti-ühendus tahvelarvutite ja mobiiltelefonide kaudu suureneb. See, nagu te juba teate, tähendab, et enam ei piisa hea arvutilehe kujundamisest, mis näeb meie arvutis hea välja: seda tuleb näha ka igas mobiilseadmes. Probleem? Erinevad ekraani suurused ja eraldusvõimed. Sellepärast on nii raske teha kujundust, mis kohanduks õigesti kõigi meediumidega (kuulus tundlik konstruktsioon, tõlgitud kui adaptiivne disain).
Siin on mõned näpunäited, mida tuleks nende omadustega kujunduse tegemisel meeles pidada. Pane tähele!
Näpunäiteid kohanduvaks kujundamiseks
- Tehke lihtne mallLihtsa all ei pea ma silmas labast. Ma räägin struktuur Teie veebisaidi HTML: mida selgem see on, seda parem. Pidage meeles, et arvutiekraan mahutab kolm vertikaalset veergu; mobiiltelefoni ekraanil mahub teile ainult üks. Mõelge sellele ja sellele, kuidas te elemendid ümber paigutate.
- Kõrvaldage kõik ebavajalikVältige jQuery efekte, Flash-animatsioone ja muid koode, mis aeglustavad teie lehe laadimist. Mida vähem on teil seda tüüpi sisu, seda kiiremini veeb laaditakse.
- Määratlege stiil css iga "suuruse" jaoksLooge näiteks tiny.css, small.css ja big.css (mis töötavad vastavalt sellele seadmele, mida seda vaadatakse). Näiteks:
@import URL (tiny.css) (min-laius: 300px);
@import URL (small.css) (min-laius: 600px);
@import URL (big.css) (min-laius: 900px);
- Enim kasutatud eraldusvõimed320 pikslit / 480 pikslit / 720 pikslit / 768 pikslit / 900 pikslit / 1024 pikslit
- Muutke mall paindlikuksKui vähegi võimalik, töötage fikseeritud summade asemel protsentidega. Siin on mõned võrdlusekvivalendid: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- Tüpograafia olulisem kui kunagi varem Mõnikord võib teie seadme ekraan olla nii väike, et näete vaid teksti. Sellepärast peame oma saidil valima väga hoolikalt parimad fondid, et nende väiksema suuruse korral ei kaotaks need loetavust. Lisaks peame teadma, kuidas ühendada neutraalsemad fondid teistega isiksusega, mis annavad veebile vajaliku iseloomu. Seetõttu on esimene näpunäide see, et kulutate aega fontide valimiseks, mida kavatsete kasutada.
- USA kvaliteetsed pildidKui ruumi väheneb, kaasnevad sellega ka pildid. Valige need, mis vähendamisel kvaliteeti ei kaota ja skaleerimisel töötavad samamoodi. Madala kvaliteediga pilt muudab teie veebisaidi halvaks.
- Et teie pilte oleks alati näha täisFotode lõikamise vältimiseks lisage oma css-i kood img (laius: 100%;). Sel viisil käskite seadmel pildile antava kõrguse ümber arvutada, nii et selle laius oleks sada protsenti nähtav.
- Kõik madalad sama URLUnustage sellised alamdomeenid nagu www.mysite.com/mobile, kuna sama fail index.html juurkaustas töötab kõigi seadmete puhul (kui teete kohanduva kujunduse õigesti). Eelis on teile juba teada: mida vähem alamdomeene, seda kiiremini leht laaditakse.
- Kasutage tugede eeliseid: Olge fantaasiarikas Veebisaidile juurdepääsemine pole lauaarvutist sama kui iPadist või mobiiltelefonist. Esimesega saate navigeerida rahulikult ja rahulikult. Viimase puhul teete seda tühikäigul ja sulgete akna kohe, kui igav hakkab. Kasutage neid tingimusi kasutaja lõbustamiseks ja laske neil lõbutseda selle paari minuti jooksul, mille nad teile pühendavad. Võib-olla otsustab ta koju jõudes teid lõdvestunumalt külastada.
- Inspiratsiooni saama Digitaalsetes väljaannetes saate teada, miks see nõuanne on. Väga lihtne: digitaalsed ajakirjad (hea) oskavad tuge ära kasutada ja nende disain on väga intelligentne. Saage neist inspiratsiooni ja tehke veebisait, millest on raske lahkuda.
Rohkem informatsiooni - Digitaalsed ajakirjad
Allikas - splio, 960.gs, kolumniaalne
On asju, millega ma pole eriti nõus.
Punktis 5 ... kuna 200px = 15,38% ja järgnevad ... ei saa seda võrdlusvõrdlust teha ilma vanemamõõduta, suurus piksli kohta ei ole suhteline mõõt nagu protsendid!
Määrake pildid laiusega: 100% valed, ma ei arva, et see peaks olema soovitus. Kujutised määratlevad neid paremini oma laiuse ja kõrgusega, nii et server võtab teabe töötlemiseks vähem aega (see ei pea selle suurust arvutama) ja me parandame lehe laadimiskiirust (mis on adaptiivses või tundlikus veebis väga oluline) disain).
Lisaksin juba, kuigi see on nina töö, ... võrkkesta ekraanide pildid. Kui tahame teha reageerivat veebikujundust, on võrkkesta kuvamiseks kohustuslik kasutada pilte, kuna suur osa mobiil- ja tahvelarvutivaadetest kasutab neid ekraane. Seega pole mõtet nende poole gaasiga disainile vaeva näha.
Hea ülejäänud jaoks
Punktis 5 panevad nad teid konteksti ja räägivad kogu 1300px paigutusest koos 3 veeruga, millest üks on 200, 300 ja 1000.
Kui edastate selle protsentidesse, on nende puhul need nagu te ütlete, 15,38% ((200 * 100) / 1300) (allpool koma, rahvusvaheline süsteem: P)
Aga kui räägime 500px paigutusest ja meil on 3 veergu, üks 200-st, teine 200-st ja teine 100-pikselisest, pole protsendid enam samad, antud juhul 200 pikslit = 40% ((200 * 100) / 500)
Need oleksid: 200px = 40% ja 100px = 10%
Tule, nagu ma ütlesin, need pole viide, mida te märkite, vaid ainult viide 1300 pikslisele paigutusele.
osas
Milline läbikukkumine, teil on maailmas täiesti õigus! Aitäh veel kord ;)