Prilagodljiv dizajn (odziven dizajn)

Število uporabnikov, ki dostopajo do interneta prek tabličnih računalnikov in mobilnih telefonov, narašča. To, kot že veste, pomeni, da ni več dovolj oblikovati dobre spletne strani, ki je videti dobro v našem računalniku: videti jo je treba tudi na vsaki mobilni napravi. Težava? Različne velikosti in ločljivosti zaslona. Zato je tako težko narediti dizajn, ki se pravilno prilagodi vsem medijem (slavni odzivno oblikovanje, prevedeno kot prilagodljiv dizajn).

Tu je nekaj nasvetov, ki jih morate upoštevati pri izdelavi dizajna s temi lastnostmi. Bodite pozorni!

Nasveti za prilagodljivo oblikovanje

1. Naredite preprosto predlogoS preprostim ne mislim blagega. Govorim o strukturo HTML vašega spletnega mesta: čim bolj jasen je, tem bolje. Upoštevajte, da lahko računalniški zaslon sprejme tri navpične stolpce; na zaslonu mobilnega telefona boste prilegali samo enega. Razmislite o tem in o tem, kako boste premestili elemente.
2. Odpravite vse nepotrebnoIzogibajte se učinkom jQuery, Flash animacijam in kateri koli drugi kodi, ki upočasni nalaganje strani. Manj vsebine kot te vrste imate, hitreje se bo splet naložil.
3. Določite slog css za vsako "velikost"Ustvarite tiny.css, small.css in big.css (na primer), ki se izvaja na podlagi naprave, v kateri si jo ogledujete. Na primer:
   

   @import url (tiny.css) (najmanjša širina: 300px);

   @import url (small.css) (najmanjša širina: 600px);

   @import url (big.css) (min-width: 900px);

4. Najpogosteje uporabljene ločljivosti320px/480px/720px/768px/900px/1024px
5. Naj bo vaša predloga FLEKSIBILNAKadar koli lahko, delajte z odstotki namesto s fiksnimi zneski. Tu je nekaj referenčnih enakovrednosti: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
6. Tipografija Pomembneje je kot kdaj koli prej. Včasih je zaslon naprave lahko tako majhen, da na njem vidite samo besedilo. Zato moramo zelo skrbno izbrati najboljše pisave na našem spletnem mestu, tako da ko se zmanjšajo, ne izgubijo čitljivosti. Poleg tega moramo vedeti, kako bolj nevtralne pisave kombinirati z drugimi z osebnostjo, ki daje spletu potreben značaj. Zato je prvi nasvet, da porabite čas za izbiro pisav, ki jih boste uporabljali.
7. Usa visokokakovostne slikeKo se prostor zmanjša, ga bodo spremljale slike. Izberite tiste, ki ob izgubi ne izgubijo kakovosti in delujejo enako, ko se spreminjajo. Zaradi slike nizke kakovosti bo vaše spletno mesto videti slabo.
8. Da so vaše slike vedno vidne polnPreprečite, da bi bile vaše fotografije odrezane, tako da v svoj css dodate kodo img (width: 100%;). Na ta način naročite napravi, naj preračuna višino, ki jo mora dati slika, tako da bo njena širina vidna stoodstotno.
9. Vse nizko isti URLPozabite na poddomene, kot je www.mysite.com/mobile, saj bo ista datoteka index.html v korenski mapi delovala za vse naprave (če prilagodljivo zasnovo pravilno izvedete). Prednost že poznate: manj poddomen, hitreje bo nalaganje strani.
10. Izkoristite podpore: Bodite domiselni Do spletnega mesta ni enako dostopati iz namiznega računalnika kot iz iPada ali mobilnega telefona. S prvim boste krmarili mirno in umirjeno. S slednjim boste to storili v praznih urah in zaprli okno, takoj ko vam bo dolgčas. Izkoristite te pogoje, da razveselite uporabnika in se zabavajte v teh nekaj minutah, ki jih bo namenil vam. Mogoče se bo po prihodu domov odločil, da vas bo obiskal bolj sproščeno.
11. Dobiti navdih V digitalnih publikacijah se boste spraševali, zakaj ta nasvet. Zelo enostavno: digitalne revije (dobro) znajo izkoristiti podporo in njihova zasnova je zelo inteligentna. Navdihnite se zanje in naredite spletno mesto, ki ga je težko zapustiti.

Več informacij - Digitalne revije

Vir - splio, 960.gs, stebrast