Responsiivisen mobile first -sivustopohjan suunnittelu ja toteutus

Abstract

Tämän opinnäytetyön tavoitteena oli suunnitella ja toteuttaa ensimmäinen mobile first -tekniikalla tehty template eli sivustopohja R2-sisällönhallintajärjestelmään. Lähtökohtana oli tarve luoda mobiililähtöinen sivustopohja kasvavasta mobiilitietoliikenteestä johtuen. Opinnäytetyön toimeksiantajana oli Mobiilimarkkinointi Routa.

Opinnäytetyössä perehdyttiin responsiiviseen web designiin ja mobiililähtöiseen suunnitteluun. Kun sivusto suunnitellaan mobile first -periaatteella, mobiilikäyttäjille pystytään tarjoamaan parempi käyttäjäkokemus kuin jos sivusto suunniteltaisiin ensin tietokoneita varten.

Sivustopohjan toteutusvaiheessa otettiin huomioon toimeksiantajan toiveet sivustopohjan sisällöstä ja ulkoasusta. Lisäksi opinnäytetyössä käytiin läpi, millaisia ongelmia toteutuksessa tuli vastaan.

Lopputuloksena Mobiilimarkkinointi Routa sai otettua käyttöön ensimmäisen mobile first -tekniikalla toteutetun sivustopohjan R2-järjestelmässä. Projektin jatkokehitysideana on parantaa sivustopohjaa tuomalla siihen lisää käyttöliittymäelementtejä.

The objective of this thesis was to design and implement a template into the R2 content management system using the mobile first approach. The starting point was the need to create a mobile-oriented template due to the growing mobile data traffic. The thesis was commissioned by Mobiilimarkkinointi Routa.

The thesis focuses on responsive web design and mobile first design. A site that has been designed using the mobile first technique can offer a better mobile user experience.

The client’s wishes about the content and design of the template were taken into account in the implementation. The thesis also presents what kind of problems were faced during the implementation phase.

As a final result, Mobiilimarkkinointi Routa released its first mobile first template in the R2 content management system. Further development work for this project is to improve the template by bringing new user interface elements to it.