Siirtyminen responsiiviseen verkkosivusuunnitteluun

Abstract

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.

Responsive Web Design is a way to design and make websites that adapt to the display screen despite its size. Before responsive websites there was a separate website for mobile phones which took a lot of time to maintain. There have been developed several types of frameworks for responsive web design, some of which are dealt with in this thesis. The purpose of this thesis was to go through some basics of web development and to clarify what responsive web design is and how different responsive frameworks work. As a practical part of the thesis, a website was made using five different techniques so that a comparison between different frameworks could be done. The company that commissioned the thesis was DevNet Oy. A few website techniques are presented at the beginning of the thesis because it is important to understand different techniques in website designing. After that website designing and its phases are dealt with as well as responsive web design and its worst competitors. The demo website was made using three different responsive frameworks. The most suitable framework for DevNet Oy was chosen. That framework could replace the currently used 960 Grid System -framework. The most suitable framework was Bootstrap, which contains everything that a responsive framework is required to have and there is no need to go through separate CSS files to find the right styles. Bootstrap is also based on the principle “mobile first”, which makes website layout design much easier. The mobile first idea prevents many compatibility problems where fixing would take a lot of time.