Responsiiviset web-tekniikat

Abstract

Insinöörityön tavoitteena oli kartoittaa responsiivisten web-tekniikoiden kehityshistoriaa ja moderneja tapoja tuottaa responsiivisia sivuja parhaita nykykäytäntöjä hyödyntäen. Web-tekniikat lähtivät ulkoasultaan staattisia pikselipohjaisista kokomäärityksistä ja toistolaitteiston kehitys oli oleellisessa asemassa web-tekniikan kehityksessä.

Työssä perehdyttiin responsiivisuuden kannalta oleellisimpiin tekniikoihin ja siihen, kuinka erilaiset mediaformaatit vaativat erillistä huomiota käyttöönotossa. Tutkittaviksi ydintekniikoiksi valittiin HTML5- ja CSS3-kielet, jotka edustivat kaiken web-sivustotuotannon senaikaisia nykystandardeja. Nämä loivat parhaat käytännöt tuottaa eri selainten ja laitteiden kanssa yhteensopivia responsiivisia sivuja.

Insinöörityössä tutkittiin kolmea erillistä sivustoa, jotka kaikki hyödyntävät responsiivista suunnittelua mutta joiden sisältö ja käyttötarkoitus poikkesivat toisistaan huomattavasti. Projekteista kaksi tehtiin Joomla-julkaisujärjestelmään ja yksi ohjelmoitiin kokonaisuudessaan modulaarisista osasista, joista sivut koottiin PHP-tekniikan avulla. Projektia varten tuotetut sivustot on kaikki julkistettu, kaksi niistä kansainväliseen käyttöön. Ne saivat asiakkailta paljon myönteistä palautetta, minkä vuoksi tekniikoiden valintaa voitiin pitää onnistuneena.

Työn tuloksena voidaan nähdä, kuinka responsiiviset tekniikat eivät ole enää vain yksi erityistapaus suunnitella sivustorakennetta vaan enemmänkin tulevaisuuden tapa, jolla pystytään vapautumaan laite- ja selainyhteensopivuuteen liittyvistä ongelmista.

The goal of the thesis was to study the history of development of Web-technologies and modern means to produce responsive web-sites using best modern practices. Web-technologies started to develop from static layouts designed in pixel formats, and the development of display equipment played a key role in the evolution of Web technologies.

The thesis studied the most fundamental technologies of modern Web development and challenges of deploying various media formats. The chosen core technologies were HTML5 and CSS3 languages, which were the modern standards for all Web development of the time. They enabled the best means to produce responsive sites compatible with the most common browsers and devices.

To gain broad perspective of the topic, three different responsive Web-sites were researched. Each of these sites had greatly varying content and purpose of use. Two sites were built on Joomla content management system and the third was programmed from modular files that were combined into the final page using PHP technology. All sites produced for the project are in published use, two for international users. They received much positive feedback from the customers, which indicates that the chosen technologies were successful.

The conclusion of the thesis is that responsive technologies are no longer just an exceptional case of site stuctural design. Instead they should be considered the new standard of the future which can be used to avoid device and browser compatibility issues.