Kohanev disain (tundlik disain)

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

1. 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.
2. 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.
3. 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);

4. Enim kasutatud eraldusvõimed320 pikslit / 480 pikslit / 720 pikslit / 768 pikslit / 900 pikslit / 1024 pikslit
5. 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%
6. 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.
7. 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.
8. 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.
9. 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.
10. 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.
11. 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