Responsiivisen käyttöliittymän soveltaminen Liferay-ympäristössä

Abstract

Responsiivisella web-suunnittelulla tarkoitetaan sitä, että sivusto ottaa huomioon sitä selaavan laitteen näytön koon. Sivuston elementtien asemointia muuttamalla ja kuvia pienentämällä parannetaan käyttäjäystävällisyyttä eri alustoilla, eikä jokaiselle laitetyypille tarvitse tehdä omaa sivua. Responsiivisuus web-kehityksessä on kasvattanut suosiotaan 2010-luvulla. Älypuhelinten kasvava markkinaosuus voidaan yhdistää responsiivisuuden kysynnän kasvuun.

Opinnäytetyö toteutettiin toiminnallisena ja siinä etsittiin keinoja muuttaa toimeksiantajan Pohjois-Karjalan Tietotekniikkakeskus Oy:n asiakkaiden sivustot toteuttamaan responsiivisen verkkosuunnittelun periaatteita. Tärkeänä toimeksiannon kriteerinä pidettiin syntyvien ratkaisujen kustannustehokkuutta.

Työn tieto-osuudessa tarkastellaan Liferay-portaalia ja sen rakentumista sekä responsiivisen websuunnittelun yleisiä periaatteita. Opinnäytetyön toiminnallisessa osuudessa kuvataan toimeksiantona saadun projektin eteneminen ja tulokset.

Työn aikana löydetystä ratkaisusta esitellään malli PTTK Oy:n demosivustossa. Toimeksiantajalle tehtiin myös kirjalliset ohjeet ratkaisun saavuttamiseksi myöhemmissä tuotantoratkaisuissa.

Responsive web design means that the website, that uses the design, will scale according to the device screen size. Better usability is achieved by changing the layout of the page and re-sizing pictures of the website. This also means that there is no need to make multiple sites for different device types. This design-philosophy has been on the rise since 2010 and it can be linked to the rise of the smart phones.

The thesis was done according to practice-based-thesis implementation. The aim of the thesis is to find ways to convert the Pohjois-Karjalan Tietotekniikkakeskus Oy’s customer sites to follow the principles of responsive web design. One commissioner based criteria for the results of the thesis was cost-efficiency.

In the theoretical part of the thesis, Liferay portal and the way it is built are described. The basic principles of responsive design are also presented. The progression and results of the project are explained at the end of the thesis.

The found results of the thesis are presented in the PTTK Oy’s demo-website. Furthermore, written instructions regarding how to achieve the solution for later production usage were given to commissioner.