Verkkosivustojen responsiivinen suunnittelu ja kehitys

Abstract

Insinöörityön tavoitteena on tutkia responsiivisten verkkosivujen toteutusta ja siihen liittyviä menetelmiä ja työtapoja. Tilaajayritykselle toteutettiin kolme responsiivista verkkosivuprojektia, joiden aikana yrityksen työtapoja responsiivisten verkkosivujen osalta kehitettiin.

Responsiiviset toteutukset tarkoittavat verkkosivujen toteutusta, joka ottaa huomioon kaikki laitteet pienistä älypuhelimista isoihin työpöytätietokoneisiin. Responsiiviset verkkosivut ovat yleistyneet nopeasti pieninäyttöisten laitteiden kasvun myötä. Responsiiviset sivut mukautuvat päätelaitteen näytön kokoon sopivaksi, mikä luo miellyttävän käyttökokemuksen kaikille käyttäjille.

Insinöörityö sisälsi responsiivisten verkkosivujen toteutuksen suunnittelusta tekniseen toteutukseen. Teknisen toteutuksen mahdollistavat modernit verkkoteknologiat, kuten HTML5, CSS3 ja JavaScript. Projekteissa käytettiin responsiivisiin toteutuksiin sopivia menetelmiä, kuten SCRUM.

Insinöörityön toteutuksen pohjana olleiden kolmen responsiivisen työn tuloksena responsiivisten verkkosivujen toteutukseen liittyvistä työtavoista ja tekniikoista opittiin paljon tulevia projekteja silmälläpitäen. Projektien toteutuksien aikana huomattiin, että sellaisista työkaluista kuin Twitter Bootstrap ja SASS on huomattavaa hyötyä nopeatempoisessa responsiivisessa kehityksessä. Myös projektien huolellinen suunnittelu on ensiarvoisen tärkeää responsiivisissa projekteissa.

The purpose of this thesis is to study the design and implementation of responsive websites. The study consisted of three different websites, which were designed and implemented for the employer company.

Responsive websites attempt to take into consideration all devices from small mobile devices to larger desktop computers. Responsive websites have grown in popularity following the growing number of small touchscreen devices. Responsive websites adapt to fit the needs of the device, offering a comfortable user experience for all users.

The thesis included technical implementation and design of responsive websites. The technical implementation was carried out using modern web technologies such as HTML5, CSS3 and JavaScript. Project management strategies suitable for agile development such as SCRUM, were used.

The three projects, which were implemented in this thesis helped improve the workflow and techniques for future projects. During the projects, it became clear that tools and techniques such as Twitter Bootstrap and SASS, greatly improved the fast paced development of responsive websites. In addition, thorough planning and designing is critical in responsive projects.