Responsiivinen teemapohja julkaisujärjestelmille : suunnittelu ja sovitus testijärjestelmään

Abstract

Työn toimeksiantajan Mobiilimarkkinointi Routa Oy:n käyttöön tarvittiin kaikille päätelaitteille skaalautuva verkkosivupohja, joka olisi helposti kustomoitavissa ulkoasultaan eri asiakkaiden tarpeisiin.

Opinnäytetyön tarkoituksena oli esitellä responsiivista verkkosuunnittelua ja hyviä käytäntöjä responsiivisten verkkosivujen suunnitteluun sekä suunnitella ja toteuttaa responsiivinen teemapohja, joka on sovitettavissa eri julkaisujärjestelmille teemaksi.

Responsiivisessa verkkosuunnittelussa sivusto suunnitellaan mukautumaan kävijänsä käyttöympäristöön. Perusperiaatteet responsiiviselle verkkosivulle ovat joustava rakenne, joustava sisältö, sekä uusimpien verkkotekniikoiden mukana tuomat mediakutsut, jotka mukauttavat sivuston rakennetta selainnäkymän mukaan. Hyvän responsiivisen sivuston suunnittelu vaatii kuitenkin muutakin, on otettava huomioon käytettävyyteen liittyviä seikkoja, kuten kosketusohjauksen tuomat haasteet sekä datan käyttö hitailla mobiiliyhteyksillä.

Teemapohja toteutettiin HTML5 ja CSS3 -verkkotekniikoita hyödyntäen, kuitenkin pyrkien säilyttämään yhteensopivuus kaikkien kohtalaisesti käytössä olevien selainten ja selainversioiden kanssa.

Työn lopputuotoksena toteutettiin testijärjestelmäksi valitun Concrete5-julkaisujärjestelmän pohjalle testisivusto, johon suunniteltu teemapohja on sovitettu valmiiksi teemaksi. Sovitettaessa pohjaa testijärjestelmään huomattiin sen vaativan vielä viimeistelyä ollakseen valmis tuotantokäyttöön. Viimeistelyä ei nähty järkeväksi toteuttaa enää tämän opinnäytetyön puitteissa.

The commissioner of the project, Mobiilimarkkinointi Routa Oy, needed a website template that is scalable to different devices and easily customizable to their clients.

The purpose of this thesis was to provide an overview to responsive web design and demonstrate good practices for designing responsive web sites as well as to design and implement responsive website template that is adaptable to a theme for different content management systems and publishing platforms.

In responsive web design the site is designed to accommodate the visitor’s environment. The basic principles for responsive web design include flexible structure, flexible content, and the use of CCS media queries to adjust the structure based on browser view. Good responsive design, however, additionally requires consideration of usability issues, such as touch interface, or data use in slow mobile connections.

The template was carried out with web technologies such as HTML5 and CSS3, still aiming it to be compatible with all fairly used browsers.

The output of the thesis was a demo web site, based on the Concrete5 content management system. The demo site used the theme adapted from the designed responsive template. During the implementation was discovered that some finishing to the template was needed. The finishing part was proved to be a project of its own and therefore was considered to be outside the scope of this thesis.