Siirtyminen responsiiviseen verkkosivusuunnitteluun
Blomberg, Mika (2015)
Blomberg, Mika
Lahden ammattikorkeakoulu
2015
All rights reserved
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-201504295520
https://urn.fi/URN:NBN:fi:amk-201504295520
Tiivistelmä
Responsiivisella verkkosivusuunnittelulla tarkoitetaan tapaa suunnitella ja työstää verkkosivu niin, että sivu mukautuu näyttölaitteelle sopivaksi tämän koosta riippumatta. Aikaisemmin responsiivisten verkkosivujen sijaan tehtiin erillisiä web-mobiilisivuja, joiden ylläpitämiseen meni paljon aikaa. Responsiivista verkkosuunnittelua varten on kehitetty monia erilaisia frameworkkeja, joista muutamia käsitellään tässä opinnäytetyössä.
Opinnäytetyön tarkoituksena oli käydä läpi verkkosivujen teon perusteita, selvittää mitä responsiivinen verkkosuunnittelu on ja miten eri responsiiviset frameworkit toimivat. Työn käytännön osuutena työstettiin verkkosivut viidellä eri tekniikalla, jotta frameworkien välinen vertailu oli mahdollista. Toimeksiantajana opinnäytetyössä toimi DevNet Oy
Työssä käsitellään aluksi muutamia verkkosivutekniikoita, joiden ymmärtäminen on oleellista verkkosivujen suunnittelussa. Tämän jälkeen käydään läpi verkkosivujen suunnittelua ja sen vaiheita. Suunnittelun jälkeen käydään läpi responsiivista verkkosuunnittelua ja tämän pahimpia kilpailijoita. Lisäksi tarkastellaan kolmea eri responsiivista frameworkia, joita käytetään demosivuston tekemisessä. Työn lopussa suoritetaan frameworkien vertailu ja valitaan paras mahdollinen framework DevNet Oy:tä varten, jolla voitaisiin korvata nykyinen 960 Grid System-framework.
Sopivimmaksi frameworkiksi valittiin Bootstrap, sillä se sisältää kaiken sen, mitä responsiiviselta frameworkilta vaaditaan eikä erillisiä css-tiedostoja tarvitse käydä läpi, jotta web-ohjelmoija löytää oikeat tyylit. Bootstrap noudattaa myös mobile first-periaattetta, mikä helpottaa nettisivujen ulkoasun suunnittelua. Mobile first-ajattelu myös ennaltaehkäisee monia mahdollisia yhteensopivuusongelmia, joiden korjaamiseen menisi runsaasti aikaa.
Opinnäytetyön tarkoituksena oli käydä läpi verkkosivujen teon perusteita, selvittää mitä responsiivinen verkkosuunnittelu on ja miten eri responsiiviset frameworkit toimivat. Työn käytännön osuutena työstettiin verkkosivut viidellä eri tekniikalla, jotta frameworkien välinen vertailu oli mahdollista. Toimeksiantajana opinnäytetyössä toimi DevNet Oy
Työssä käsitellään aluksi muutamia verkkosivutekniikoita, joiden ymmärtäminen on oleellista verkkosivujen suunnittelussa. Tämän jälkeen käydään läpi verkkosivujen suunnittelua ja sen vaiheita. Suunnittelun jälkeen käydään läpi responsiivista verkkosuunnittelua ja tämän pahimpia kilpailijoita. Lisäksi tarkastellaan kolmea eri responsiivista frameworkia, joita käytetään demosivuston tekemisessä. Työn lopussa suoritetaan frameworkien vertailu ja valitaan paras mahdollinen framework DevNet Oy:tä varten, jolla voitaisiin korvata nykyinen 960 Grid System-framework.
Sopivimmaksi frameworkiksi valittiin Bootstrap, sillä se sisältää kaiken sen, mitä responsiiviselta frameworkilta vaaditaan eikä erillisiä css-tiedostoja tarvitse käydä läpi, jotta web-ohjelmoija löytää oikeat tyylit. Bootstrap noudattaa myös mobile first-periaattetta, mikä helpottaa nettisivujen ulkoasun suunnittelua. Mobile first-ajattelu myös ennaltaehkäisee monia mahdollisia yhteensopivuusongelmia, joiden korjaamiseen menisi runsaasti aikaa.