Responsiivinen verkkosovellus

Abstract

Opinnäytetyön aiheena on responsiivisen verkkosovelluksen toteuttaminen. Työssä suunniteltiin ja toteutettiin yksisivuinen verkkosovellus, jonka käyttöliittymä mukautuu erikokoisille laitteille. Tavoitteiden toteutuminen todettiin testaamalla käyttöliittymä erikokoisilla laitteilla sekä mittaamalla verkkosovelluksen suoritusteho.

Työssä suunniteltiin verkkosovellus määrätyn sisällön perusteella. Suunnitelmassa luotiin käyttöliittymästä malli, joka on mahdollisimman helppokäyttöinen. Verkkosovellus toteutettiin tehdyn suunnitelman perusteella. Toteutuksessa noudatettiin suunnitelmaa ja pyrittiin toteuttamaan responsiivisuus niin, että verkkosovelluksen suoritusteho pysyy madollisimman tehokkaana. Toteutuksen jälkeen verkkosovelluksen käyttöliittymä testattiin simuloimalla käyttöliittymää erikokoisilla laitteilla. Suoritustehon testaamisessa käytettiin verkkosovelluksen suoritustehon profilointia ja auditointia. Verkkosovelluksen testit suoritettiin käyttämällä selaimen kehittäjän työkalua.

Testituloksista ilmenee, että toteutettu responsiivinen verkkosovellus toimii suunnitellulla tavalla ja täyttää tavoitteet. Käyttöliittymätestien tuloksista nähtiin, että verkkosovelluksen käyttöliittymä mukautuu pienille, keskisuurille ja suurille näytöille. Suoritustehon testeissä puolestaan havaittiin, että responsiivinen toteuttaminen ei heikennä verkkosovelluksen suoritustehoa mobiililaitteilla. Tietokoneilla puolestaan responsiivinen toteutus aiheuttaa pientä heikentymistä suoritustehossa.

Verkkosovelluksen jatkokehityksessä voitaisiin ottaa huomioon suoritustehon parantaminen. Verkkosovelluksen suoritustehoa on mahdollista parantaa tietokoneella korjaamalla testituloksista löydetyt suoritustehoa heikentävät ominaisuudet. Suoritustehoa on mahdollista parantaa myös pienien ja keskisuurien näyttöjen käyttöliittymissä.

The purpose of this thesis was to create a responsive web design. The goal of the work was to design and develop a single page web application with user interface that adapts to different screen sizes. A user interface was simulated on different devices and the performance was tested with browser developer tools.

In the work, a web application was designed based on specific content. A user interface was designed and developed to improve the performance of the web application. The user interface was tested by simulating the web application on different screen sizes. The performance was also tested with browser developer tools using performance profiler and auditions.

Test results showed that the user interface of the web application worked as planned. The user interface adapts to small, medium and large screens. The performance tests did not reveal any decrease in the performance on the mobile devices. On desktops, however, responsivity causes a slight decrease in performance.

In further development the performance of the web application could be improved. The performance on desktops could be improved by fixing the failed test results. The performance could also be improved on mobile devices.