Mukautuva web-kehitys

Abstract

Mobiililaitteet yleistyvät kovaa vauhtia ja samaan aikaan Internetiä selataan niillä yhä enemmän. Tämä aiheuttaa haasteita Internet-sivujen kehitykselle, koska eri laitteille halutaan oma räätälöity versio selattavasta sivustosta.

Aiemmin perinteisessä web-kehityksessä sivuista on tehty erilliset versiot desktop-päätelaitteille ja mobiililaitteille. Tämän mallin ongelmana on sivuston erillisten versioiden työläs ylläpito ja työmäärä jo sivun kehitysvaiheessa.

Nykyisin sivujen kehityksen suuntana on mukautuva web-kehitys, jossa sivusta tehdään vain yksi versio ja tämä sama sivu mukautuu käyttäjän päätelaitteen tai selainikkunan koon mukaisesti hänen näytölleen helposti käytettäväksi. Työssä käytiin läpi mitä mukautuva web-kehitys on. Lisäksi käsiteltiin tekniikoita, joita tarvitaan sivuston toteuttamiseen mukautuvan web-kehityksen periaatteilla.

Työn toimeksiantajana toimi Jyväskylän ammattikorkeakoulun tietojenkäsittelyn koulutusohjelma. Uudet opiskelijat osallistuvat opintojensa alkuvaiheessa Web Page Development-opintojaksolle, jossa opetellaan Internet-sivujen tekemistä. Materiaalia mukautuvan web-kehityksen opettamiseen ei ollut kyseisellä opintojaksolla tulevaisuuden kannalta tarpeeksi, ja sen myötä tässä työssä toteutettiin kehittämistyönä Foundation-frameworkin päälle rakennettu tutoriaalisivusto, joka on tarkoitus ottaa opetuskäyttöön Web Page Development -opintojaksolla. Sivusto itsessään toimii esimerkkinä mukautuvasta sivusta, ja siltä löytyy linkkejä tutoriaaleihin. Tutoriaalisivusto todettiin hyväksi keinoksi opetella mukautuvan web-kehityksen perusperiaatteita.

Sivuston toimivuutta opetuskäytössä voisi tulevaisuudessa tutkia ja mahdollisesti jatkokehittää sivustoa. Lisäksi voisi tutkia vaihtoehtoisia tapoja opetusmateriaalin toteuttamiseksi.

The number of mobile devices is increasing every day and at the same time the use of those devices for browsing the Internet is increasing rapidly, which causes challenges for developing web -sites because there is a need to show a customized version of the site for different devices used to browse the site.

A common style to develop web-sites was to produce different versions of the site for desktop devices and mobile devices. The problem with that technique is the huge workload it takes to develop and maintain the site.

Nowadays the trend of developing web-sites is responsive web design. The idea of responsive web design is to make only one version of the site that adapts according to the device used to browse the site or the size of Internet browser and adapting makes the site easier to navigate. This thesis defines responsive web design and discusses what the techniques are needed to develop websites with responsiveness in mind.

This thesis was assigned by JAMK University of Applied Sciences, -Business Information Systems. New students take part in Web Page Development course at the beginning of their studies. The goal of the course is to learn how to make websites and so far there has not been enough material for future needs of the course to teach responsive web design. With that in mind this thesis developed a tutorial site on Foundation- framework as a development project and the site is planned to be launched as a teaching tool of the course. The site itself acts as an example of responsive website and it contains links to more tutorials. The tutorial site was found to be a good way to learn the basics of Responsive Web Design. Alternative ways to produce teaching material could be researched in the future and also how well the site works for teaching purposes. The site could be then improved if needed.