Responsiivisen verkkosivun toteutus Drupal -sisällönhallintajärjestelmällä

Abstract

Verkkosivuja selataan nykypäivänä yhä enenevässä määrin mobiililaitteilla. Tämän on faktan on myös huomannut hakukone Google, joka alkoi vuoden 2015 huhtikuussa suosimaan mobiiliystävällisiä sivustoja hakutuloksissaan. Siksi sivustoja täytyy muokata sopimaan paremmin pienemmille näytöille. Aikaisemmin tämä on tarkoittanut käytännössä sitä, että sivustolle luodaan erillinen mobiiliversio johon käyttäjä ohjataan mikäli hän saapuu sivustolle mobiililaitteella. Tämä on kuitenkin useimmiten kallis vaihtoehto, joka tuottaa toteuttajalle ylimääräistä työtä ja tekee sivustoista hitaita. Vaihtoehto mobiiliystävällisten sivustojen toteuttamiseen on luoda responsiivinen sivusto, joka skaalautuu käyttäjän laitteen näytön mukaan.

Tässä opinnäytetyössä esitellään yksi tapa, joilla responsiivisuuden voi toteuttaa. Työssä käsitellään responsiivisuuden toteuttamista CSS- tai JavaScript-tekniikoita käyttäen. Lisäksi työssä perehdytään siihen, mitä kannattaa ottaa huomioon responsiivista verkkosivua suunnitellessa. Sivuston luomisessa käytän työvälineenä Drupal –sisällönhallintajärjestelmää, johon rakennan responsiivisen teeman.

Opinnäytetyön tuloksena syntyy nosto- ja kuljetusalan yritykselle sivusto, joka toteutetaan responsiivisesti. Sivusto saatiin lähes valmiiksi, ja se julkistetaan kun sisältö saadaan syötettyä paikalleen. Asiakkaan toiveena oli muuttaa sivuston ulkoasu nykyaikaisemmaksi, mutta silti säilyttää hallinnan käyttöliittymä mahdollisimman muuttumattomana. Näissä tavoitteissa onnistuttiin pysymään, minkä takia opinnäytetyö onnistui tavoitteiden mukaisesti.

Nowadays websites are used more often with mobile devices. This is a fact that also Google has noticed. In April 2015 Google started preferring mobile-friendly websites in their search results. Thus, the websites have to be modified to fit better for narrow screens. Earlier this was done by building a separate mobile site, in which the user was redirected, if s/he tried to access the site with a mobile device. However that is an expensive method, which causes a lot of work for developers and makes websites slow. Responsive web design is a very feasible alternative, where the website and its elements response to the width of the device and its screen.

This thesis presents a method to build a responsive website. Two alternative ways for responsive development are introduced: CSS media queries and JavaScript. Some important considerations when designing a responsive website are also discussed. Drupal content management system was used as the tool for building the website.

As an outcome, a new responsive website was designed for a logistics and lifting company. The website is almost ready, and will be published as soon as the text content is completed and placed. The client wished that the layout of the website would be modified in more modern look, but also the administration left as similar as possible as in the existing website. These wishes were fulfilled and as a whole the thesis met the set goals.