Tämän toimeksiannon tarkoitus on luoda responsiivinen toiminnallisuus Haaga-Helian tietojenkäsittelyn tulevalle ohjelmistokehityksen peruskurssille. Sivun tuli asettua näytölle sopivaksi riippumatta päätelaitteesta ja sen asettamista rajoituksista. Sivuston tulee toimia myös käyttäjäystävällisesti ja moitteettomasti.

Haaga-Helian toimeksiantajalta saatiin pohjaksi staattinen verkkosivu, joka käännettiin XSLT-muunnoksella XML-tiedostoista. Tälläinen sivuratkaisu mahdollistaa helpon datan suodattamisen ja tietojen julkaisun sivulle. Samalla se mahdollistaa uuden kurssisivun luomisen noudattamalla samaa XML-dokumentin rakennetta.

Toimeksianto aloitettiin 2015 kesällä verkkosivun kehittämisellä ja samalla kerättiin aineistoa dokumentointia varten. Syksyllä aloitettiin kirjoittaminen ja tehtiin viimeiset muutokset yhteistyönä toimeksiantajan kanssa. Raportti tuli valmiiksi marraskuussa 2015.

Sivun sisällön asettelemiseen käytettiin apuna Bootstrap sovelluskehystä, jolla toteutettiin responsiivinen ruudukkosysteemi, modaalit ja osa tyyleistä käyttämällä Bootstrapin valmiita komponentteja, kuten painikkeita. Muita projektiin sisällytettyjä kirjastoja ovat Prism.js syntaksien korostamiseen ja Reveal.js kosketusnäytöille optimoitujen dia-esitysten tekemiseen.

Käytettyjä tekniikoita toimeksiannossa ovat responsiivinen suunnittelu, joka sisältää mediakyselyt, juoksevan ruudukon ja joustavat kuvat. Viewport meta-tag määritys, joka liittyy verkkosivun lataamiseen ruudulle oikeassa koossaan – ei alku suurentelua. Ohjelmointikieliin kuuluvat XML, XSLT, HTML5, CSS3, sekä Javascript ja Jquery.

Ongelmia tuli sivun latausaikojen kanssa. Sivu asetettiin esirakennus vaiheeseen tarkoittaen, että kaikki tiedostot käännetään palvelimella valmiiksi ja MacigXML-kirjasto tiputettiin pois. Upotetut videot ja Jsbin-editori siirrettiin aukeamaan omiin välilehtiin, koska Embed.js lataaminen resursseille lähteestä kesti 20 sekunttia. Koska Bootstrapin suosio on niin suuri, sillä tehdyt sivut saattaa näyttää samalta kuin yleisimmät sivustot ja hukkua näin massaan. Bootstrap on kuitenkin erinomainen kehys lähteä kehittämään responsiivisia verkkosivuja, tai ottamaan mallia sen ratkaisuista.

Työ paljastaa, että responsiivisuus on yleistyvä tapa tuottaa verkkosivuille lisä-arvoa kun ei tarvitse erikseen tuottaa mobiililaitteille omia verkkosivuja. Helpompi kohdistaa sivujen asetuksia tietyille selaimen leveyksille, jolloin käyttäjän laitteella ei ole muuta väliä kuin, että sillä pääsee verkkoon. Responsiivisen suunnittelun kanssa kannattaa noudattaa mobile first tapaa, jolloin vain tärkeimmät ominaisuudet tulevat mobiililaitteille ja säästytään yhteensopivuusongelmilta, joita saattaa tulla kun skaalataan ominaisuuksia pienemmäksi.