Responsive Web Design - Kohanduv veebidisain (0)

EESTI INFOTEHNOLOOGIA  KOLLEDŽ  
 
 
 
 
 
Rigden Aunapuu 
 
KOHANDUV   DISAIN  ehk  RESPONSIVE  
DESIGN 
 
Referaat 
 
IT sotsiaalsed,  eetilised  ja professionaalsed aspektid 
 
 
 
 
 
 
Tallinn 2016  
 
SISUKORD
 
1.  KOHANDUVA DISAINI RAAMISTIKUD ...................................................................................... 4
1.1
Bootstrap raamistik .................................................................................................... 5
2.  KOHANDUVA VEEBIDISAINI AJALUGU ..................................................................................... 6
3.  KOHANDUV VEEBIDISAIN SEADMETEL .................................................................................... 7
4.  KOHANDUVA VEEBIDISAINI ALTERNATIIV ............................................................................... 9
KOKKUVÕTE .................................................................................................................................. 10
KASUTATUD ALLIKAD .................................................................................................................... 11
 
SISSEJUHATUS 
Autor  valis  käesoleva  teema  seetõttu,  et  uurida  põhjalikumalt  ja  konkreetsemalt 
kohanduva  disaini   tausta   ja  materjale.  Üha  enam  levib  selliseid  veebliehti,  kus 
kasutatakse kohanduvat disaini (ing. k. responsive design). Responsive design lühidalt ja 
inimkeeles  öeldult  tähendab  veebi,  mis  oskab  toimetada  erinevate  ekraanisuuruste 
seadmetega.    Selline  stiil  teeb   kodulehe   palju  kasutajasõbralikumaks  ja  mugavamaks. 
Hoolimata  sellest,  kus  sa  vaatad  kodulehte  (nutitelefon,  arvuti,   tahvelarvuti   jt),  on  kõik 
informatsioon  samamoodi  kättesaadav,  sest  kodulehe  kood  on   selliselt   üles  ehitatud,  et 
elemendid liiguvad vastavalt ekraani suurusele. ( http://www.okia.ee )  
Tehnoloogiliste   saavutuste   tõttu  suureneb  inimeste  arv,  kes  kasutavad  nutiseadmeid 
veebilehtede   sirvimiseks.  Kui  mingil   põhjusel   pole  sülearvuti  või  lauaarvuti  meile 
kättesaadav, vaatame veebilehti nutitelefonist. Seega on oluline, et koduleht oleks tehtud 
kohanduva  disaini  põhimõttel.  Veebilehe  autori  jaoks  võib  see  rohkem  aega  ja  vaeva 
nõuda, aga kui varasem kogemus on olemas, siis on hiljem sellise koodi lugemine palju 
lihtsam ja loogilisem. Samuti jääb kasutajal parem esmamulje kodulehest.  
 
 
 
 
 
 
 
 
 
1. KOHANDUVA DISAINI RAAMISTIKUD 
 
Raamistike  on  internetis  väga  mitmeid,  mõned  neist  on  lihtsamad  ja  osa   täielikud   ehk 
sisaldavad juba olemasolevaid seadistusi, mis tuleb  koodis  lihtsalt üles kirjutada, et need 
veebilehel nähtaval kohal oleksid. See tähendab, et ei ole vaja otsida internetist erinevaid 
navigatsioone,  interaktiivseid  ikoone  vms.  Kõik  on  juba  raamistikus  olemas.  Samuti  on 
internetiavarustest võimalik palju tasuta allalaaditavaid raamistike leida. 
Ükski  raamistik  pole  veebiarendaja  jaoks  perfektne,  võib  isegi  öelda,  et  veebiarendaja, 
kes  tunneb  HTML’i,  CSS’i  ja  Javascripti,  peaks  oskama  ise  luua  koodi,  mis  oleks   grid  
system’il tuginev. Kahjuks tuleb alati ise midagi juurde panna või ära võtta, et oodatav 
tulemus  oleks  selline  nagu  soovitud.  Selleks  tuleb  ise  aru  saada  raamistikus   olevast  
koodist.  
 
 
 
 
 
1.1  Bootstrap raamistik 

Bootstrap  on  üks  populaarseimaid  raamistike,  mida  kasutatakse  tänapäeval.  Seda 
põhjusel, et see on  lihtsasti  installitav ja kergesti kasutatav, lihtsustades ja kiirendades ka 
tööprotsessi. Selle installeerimiseks tuleb lihtsalt alla tõmmata bootstrap’i CSS  laiendus , 
mis  tuleb  lingina  lisada  ka  HTML  koodi,  et  raamistik  aktiveerida. 
( http://www.awwwards.com/ ) 
Nagu iga teine kohanduva veebidisaini raamistik, töötab ka Bootstrap grid süsteemil ehk 
leht  on  jaotatud  veergudeks.  Veebiarendajal  tuleb  lihtsalt  koodis  täpsustada,  millistele 
veergudele ta soovib elemente paigutada. (Joonis 1) 
Joonis 1 Grid süsteem, mille põhjal tehakse kohanduv veebileht  
( https://www.cybercrab.com/ ) 
 
2. KOHANDUVA VEEBIDISAINI AJALUGU 
 
Selleks,  et  aru  saada  üleüldse  kohanduvast  veebist,  peame  vaatlema  selle  ajalugu,  mis 
tegelikkuses pole kuigi pikk. Vaatama, kus kohas ja millal selline asi kasutusele esimest 
korda võeti. Kui  oskame  rääkida ajaloost, siis saame ka öelda, kuhu selline arendus võib 
viia tuleviku veebi. 
Kohanduv veebidisain on tänapäeva mõistes üsna uus  leiutis . Esmakordselt kasutati seda 
Audi  kodulehel (www.audi.com) aastal 2002. Selle loojaks oli razorfish’i nimeline grupp, 
kuhu kuulusid Jürgen Spangl, Ken Olling, Jan  Hoffmann  ja Jim Kalbach. Responsive web 
design  (RWD)  sai  oma  nime  Ethan  Marcotte’lt,  kes  on  kirjutanud  ka  raamatu  samal 
teemal. ( http://www.experiencinginformation.wordpress.co m) 
Alles  viimastel  aastatel  on  trend  suurenenud  ja  paljud  firmad  või  isikud,  kes  pole  veel 
seda  kasutusele   võtnud ,  teevad  seda  peagi,  et  oma  veebilehe  vaadatavust  suurendada. 
Tegemist  on  uue  asjaga  veebiarenduses,  sellepärast  pole  ka  ajaloost  väga  pikalt  midagi 
rääkida.  Kindlasti  on  see  üks  oluline  arengu  etapp  veebiarendusest,  lihtsustades  tööd  ja 
tehes kodulehe kohanduvaks iga  seadmega . ( http://www.http//engage.synecoretech.com/ ) 
Enne suurt  nutitelefonide  kasutuselevõttu, olid paljud  veebilehed  kindlas suuruses tehtud, 
peamiselt  800x1024  pikslised   ekraanid .  Vastavalt  sellele  suurusele  tehti  ka  veebileht. 
Nüüd  kui  nutitelefonide  ja  tahvelarvutite  jt  suur  areng  toimub,  on  inimeste  vajadused 
suurenenud 
ja 
enam 
nii 
lihtsalt 
ei 
saa 
kui 
5-10 
aastat 
tagasi. 
( http://www.http//engage.synecoretech.com/ ) 
 
 
 
 
 
 
 
 
3. KOHANDUV VEEBIDISAIN SEADMETEL 
 
Teame, et responsive web design on kasutusele võetud just selle tõttu, et kasutajatel on 
erinevate ekraanisuurustega  seadmed . Mida aeg edasi, seda rohkem neid kasutajaid tekib 
– samuti tekib ka uusi seadmeid.  
Väiksematel  seadmetel  kaovad  osad  elemendid  ära,  mis  kodulehe  koodis  on  küll 
kirjutatud, kuid millele on lisatud seadistused selliselt, et kui väiksematel seadetel veebi 
vaadata,  siis  osa  elemente  kaob  ära.  See  on  hea  sellepärast,  et  kui  kasutaja  tahab 
kodulehte  vaadata  väiksemast  seadest,  siis  ei  oleks  elemendid  üksteise  otsas  vaid 
asetseksid  proportsionaalselt  ja  loogiliselt.  Näiteks  on   menüü   üheks  väikseks  ikooniks 
tehtud, mille peale vajutades  avaneb see tavaliselt vertikaalselt (Joonis 2). 
 
Joonis 2 Kohanduva disaini navigatsiooni menüü suurel ekraanil ja väiksel ekraanil 
( https://webdesign.tutsplus.co m) 
 
Kõike uuemaks nutiseadmeks võib pidada nutikellasid, mis lisaks ajale näitavad ka meie 
liikumist, lasevad meil  salvestada  informatsiooni, kasutada GPS’i jms. Kahjuks pole veel 
ükski  nutikella  tootja  ( Apple ,  LG  jt)  suutnud  seadmele  sisse  ehitada  brauserit.  Apple, 
näiteks  ei  suutnud  seda  tööle  saada,  sest  ekraan  on  nii  väike,  et  suudaks  kuvada  ainult 
paar rida teksti. Võrdluseks võiks tuua selle, et  arhitektuur  võiks teha maja, mis on 15” 
kõrge,  aga  sellisel  juhul  keegi  ei  kasutaks  seda.  Seda  põhjusel,  sest  inimese  keha  on 
kindlas 
suuruses 
ja 
selle 
mõõtmeid 
me 
muuta 
ei 
saa. 
( http://www.webdesignerdepot.com/ ) 
Kuna nutikellad on tõesti väikeste ekraanidega ja inimese sõrmed on jämedad, siis oleks 
ka  brauseri  kasutamine  raskendatud,  sest  alati  ei  pruugi  me  sinna  saada,  kuhu  tahame. 
Näiteks  tahame  hüpata  teisele  lehele  hüperlingi  abil,  kui  aga  on  kaks  linki  kõrvuti,  siis 
võime hoopis teisele veebilehele sattuda.  
Mitte ainult Apple’i  firmale  ei valmista see probleem peavalu, vaid ka teistele seadmete 
tootjatele. Fakt on see, et me ei saa panna veebi tööle margisuurusele  ekraanile . Samuti ei 
saa  me  seadmeid   suuremaks   teha,  sest  sellisel  juhul  oleksid  nad  juba  käepeal  mitte 
kantavad  ( nutikell   poleks  enam  käepeal   kantav ,  sest  liiga  suur  seade  hakkaks  häirima). 
( http://www.webdesignerdepot.com/ ) 
Sellisel  juhul  ei  aitaks  kohanduv  veebidisain  neid  probleeme  lahendada.  Küll  aga  saab 
tehnika  areng  paremaid  võimalusi  luua,  näiteks  käeliigutusega   navigeerimine   või 
hääljuhtimine.  
Võib  juhtuda,  et  paarikümne  aasta  pärast  või  isegi  varem  on  kõik   nutiseadmed   selliselt 
ehitatud, et loovad automaatselt kohanduva lehe vastavalt seadme suurusele. Nii muutub 
ka  veebiarendajate  elu  lihtsamaks.  Teine  võimalus  on  see,  et   luuakse   uus 
programmeerimiskeel,  mille  põhjaks  ongi  kohanduv  veeb.  Tulevik  on  ettearvamatu  ja 
kindlalt ei saagi midagi väita.  
 
 
 
 
4. KOHANDUVA VEEBIDISAINI ALTERNATIIV 
 
Veebidisainerid  võivad  arutleda,  et   kumb   on  parem  või  eelistatum  kas   Adaptive   design 
või  Responsive.  Põhimõte  ja  eesmärk  on  praktiliselt  sama  –  teha  veebileht  iga 
ekraanisuuruse seadmega kohanevaks. Ainult, et kasutatakse natuke teist metoodikat. 
Kui  responsive  web  design’i  puhul  luuakse  kood,  mis  on  iga  seadmega  sobiv,  siis 
adaptive’i  puhul  luuakse  iga  ekraanisuuruse  jaoks  sobiv  veebileht.  See  tähendab,  et  kui 
kasutaja  läheb  kodulehel  nutiseadmest,  siis  brauser  automaatselt  tuvastab  ära  ekraani 
suuruse ja avab sobiva suurusega veebilehe ehk tulemus on sama, mis responsive’i puhul. 
Miinusteks võib pidadada adaptive’i puhul just seda, et tuleb luua mitu veebilehte, et need 
oleksid  sobivad  suuruses,  mis  omakorda  nõuab  rohkem  tööd.  Adaptive  design’i  jaoks 
kasutatakse 6 erinevat laiust: 320, 480, 760, 960, 1200, 1600 (px).  Plussideks  on kindlasti 
see,  et  on  võimalik  rohkem  kontrolli  saada  kodulehe  üle  (sisu  ja  disain),  mida 
responsive’i puhul ei saa. ( https://www.uxpin.co m) 
Adaptive on praktiliselt 2x kiirem veebis kui responsive. Seda näitavad ka andmed tabelis.  
(Tabel 1) 
 
Tabel  1 Kiirused brauseris: Adaptive vs Responsive design ( https://www.uxpin.co m) 
 
 
 
KOKKUVÕTE 

Kohanduv disain on veebi väga olulisel määral muutnud, lihtsustades meie elu, nagu kõik 
tehnoloogilised  leiutised. Suurematel ekraanidel pole see nii oluline kui nutitelefonides ja 
tahvelarvutites, kus ekraanid on väiksed. Kasutaja jaoks teeb kohanduv disain kodulehe 
sirvimise  lihtsamaks  kui  kunagi  varem.  Lihtsalt  öeldes  ei  ole  vaja  kohanduva  disaini 
puhul kerida ekraani  horisontaalselt , vaid ainult vertikaalselt ülevalt alla.  
Võib kindlalt väita, et erinevatele seadmetele disaini tegemisega kaasnevad probleemid, 
seetõttu on kohanduv veeb olulise tähtsusega. Nii saab alati kindel olla kliendi rahulolus, 
ükskõik kus kohast veebilehte vaadatakse.  
Kindlasti  on  veebiarendajate  ja  disainerite  hulgas  eelistatuim  responsive  web  design, 
mitte  adaptive.  Just  selletõttu,  et  vähem  tööd  tuleb  teha  ja  tulemus  on  sama.  Kui  aga 
kliendil  on  raha,  siis  tasub  teha  adaptive  design’il  põhinev  veebileht,  et  seadmetel 
jookseks veebileht kiirelt ja oleks lihtsasti kontrollitav. 
 
 
 
 
KASUTATUD ALLIKAD 
 
https://www.okia.ee/blog/2011/09/mis-on-responsive-web-design/ 
http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks -
for-web-design.html 
http://engage.synecoretech.com/marketing-technology-for-growth/bid/204297/A-Brief -
History-of-Responsive-Web-Design 
https://experiencinginformation.wordpress.com/2012/07/22/the-first-responsive-design -
website-audi-circa-2002/ 
http://www.responsivegridsystem.com/ 
http://cybercrab.com/responsive-website-psd-design 
http://www.webdesignerdepot.com/2015/03/the-future-of-responsive-web-design/ 
https://webdesign.tutsplus.com/tutorials/big-menus-small-screens-responsive-multi-level -
navigation--webdesign-8452 
https://www.uxpin.com/studio/blog/responsive-vs-adaptive-design-whats-best-choice -
designers/