Responsiivinen web-kehitys WordPress-julkaisujärjestelmässä

Abstract

Opinnäytetyössä tutkittiin responsiivisen web-kehityksen toteuttamista WordPress-julkaisujärjes¬-telmässä. Tavoitteena oli toteuttaa yrityksen käyttöön WordPress-teema, joka sisälsi tarvittavat ominaisuudet mukautuvien verkkosivujen toteuttamiseen. Teeman tarkoituksena oli toimia pohjana, jonka päälle verkkosivun rakentaminen olisi mahdollisimman vaivatonta.

Työssä käsiteltiin mobiililaitteiden asettamia haasteita web-kehityksessä, sekä tekniikoita niiden rat-kaisemiseen. Päätelaitteiden ominaisuudet sekä niiden näyttökoot muuttuvat alinomaan. Laitevalmis-tajat julkaisevat koko ajan suorituskykyisempiä laitteita, mutta suurella osalla käyttäjistä on yhä käytössä laitteen vanhempi versio. Verkkosivun tulisi palvella kaikkia käyttäjiä riippumatta siitä, onko hänellä tietokone vai älypuhelin, kuinka nopea hänen verkkoyhteytensä on ja mitä selainta ja sen versiota hän käyttää.

Keskeisimpinä asioina ovat sisällön skaalaaminen päätelaitteen leveyteen CSS:n avulla, mukautuvat kuvat sekä suorituskyky. Opinnäytetyössä tarkasteltiin myös pintapuolisesti modernien web-tekniikoiden, kuten HTML5 ja CSS3, hyödyntämistä nykyaikaisessa web-kehityksessä. Etenkin kuvien näyttämiselle pyrittiin löytämään mahdollisimman suorituskykyinen ratkaisu, joka toimii sekä nor-maaleilla että korkearesoluutioisilla näytöillä.

Lopputuotteena tehty teema tehtiin vastaamaan WordPressin asettamia teeman standardeja. Teemaan sisällytettiin ratkaisu dynaamisten sekä staattisten kuvien mukautumiseen, mobiilinavi-gaatio, mahdollisuus vaihtoehtoisen sisällön näyttämiseen ja kustomoitava CSS-grid. Teemassa käytettiin CSS:n esikäsittelijää Stylusta, jonka tarkoituksena oli nopeuttaa ja helpottaa tyylitiedoston hallintaa. Teemalla toteutettiin esimerkkisivusto, jonka tarkoituksena oli esitellä teeman ja sen ominaisuuksien toimintaa. Teemasta myös kirjoitettiin toimeksiantajana toimineelle yritykselle dokumentti, joka sisälsi dokumentaation teemassa käytetyistä ominaisuuksista sekä ohjeistuksen.

This Bachelor's Thesis studies the implementation of responsive web design in WordPress CMS. The aim was to make for the assigner company’s use a WordPress theme, which would include all neces-sary features for generating responsive websites. The purpose of the theme was to work as a blank template on which the construction of a web page would be as easy as possible.

The work dealt with the challenges in web-development posed by mobile devices and also tech-niques for solving those problems. The features and screen sizes of devices are changing all the time. Manufactures are constantly publishing higher performer devices, but the majority of users is still us-ing an older version of the device. Web pages should serve all users, regardless of whether they have a computer or a smartphone, how fast their network connection is and what browser and ver-sion they are using.

Key issues are scaling the contents to width of the device by using CSS, adaptive images and perfor-mance. The thesis also discusses slightly modern web technologies such as HTML5 and CSS3 and how those techniques are used in modern web-development. One of the major objectives was to find the most efficient solution for displaying images for both the standard and high-resolution screen.

The end-product of the theme was made to respond WordPress theme standards. The theme in-cluded the solution for displaying adaptive dynamic and static images, mobile navigation, the possibil-ity to display alternative content and a customizable CSS-grid. The theme used CSS preprocessor Sty-lus, which was intended to accelerate and facilitate the style file management. The theme was used to build an example website the aim of which was to introduce the theme and its features. Theme was also documented for the company. The document contained descriptions of the properties of the theme, as well as a guidance on HTML and CSS structure.