Responsiivinen verkkosuunnittelu

Abstract

Tämä opinnäytetyö käsittelee responsiivisen verkkosuunnittelun ja -ohjelmoinnin historiaa, perusperiaatteita ja toteutustapoja. Työn toimeksiantajana toimii Ladies’ Bike Club, jonka verkkosivuston olen toteuttanut toimimaan responsiivisena. Opinnäytetyöni tavoitteena on toimia informatiivisena ja selkeänä responsiivisen verkkosuunnittelun peruspakettina web-suunnittelijoille ja -ohjelmoijille sekä myös muille aiheesta ja alasta kiinnostuneille. Työn tarkoituksena on toimia myös apuna responsiiviseen verkkosuunnitteluun siirtymisessä, koska se käsittelee responsiivisuuden perusperiaatteita sekä -toteutustapoja, joiden pohjalta aihetta on helppo lähteä tutkimaan syvemmin, sekä myös innostaa mahdollisimman monia web-alan ammattilaisia sekä opiskelijoita tutustumaan responsiiviseen verkkosuunnitteluun ja muuttamaan omia verkkototeutustapojaan sen mukaiseksi.

Responsiivisen verkkosuunnittelun perusperiaatteita käsittelevässä luvussa käydään läpi joustavaa asemointia, mukautuvia kuvia ja media queryn käyttöä sekä muita näihin liittyviä oleellisia seikkoja. Toteutustekniikoita käsittelevä osio sisältää mukautuvat kuvat, viewport meta tagin, CSS-tiedostojen rakenteen, media queryt sekä sisällön näyttämisen ja piilottamisen web-sivustolla. Opinnäytetyön käytännön osuudessa tutustutaan Ladies’ Bike Club -sivuston lisäksi kahden muun yrityksen responsiivisiin internetsivustoihin, jotka olen toteuttanut harjoitteluni aikana. Luvussa käydään läpi sivustojen toteutukseen käytettyjä tekniikoita sekä analysoidaan lyhyesti lopullista aikaansaannosta.

Valtava erilaisten laitteiden, näyttökokojen sekä resoluutioiden kirjo on saanut aikaan sen, että verkkosuunnittelu ja -kehitys ovat siirtyneet uudelle aikakaudelle, jossa joustavuus ja mukautuvuus ovat avainsanoja. Responsiivinen verkkosuunnittelu tarjoaa ratkaisun, joka auttaa pitämään verkkosivumme teknologiamuutoksissa mukana nyt sekä tulevaisuudessa, mutta sekään ei ratkaise kaikkia nykyisten laitteiden tuomia ongelmia.

Joustava asemointi, mukautuvat kuvat sekä älykäs media queryien käyttö mahdollistavat mukautuvan verkkosivuston toteuttamisen, mutta tekniikat, joilla saavutetaan sivuston ja sen eri näyttökokojen lopullinen ilme, ovat riippuvaisia monesta eri asiasta. Responsiivisten verkkosivujen toteuttamiseen ei ole yhtä ainoaa oikeaa tapaa.

Responsiivinen verkkosuunnittelu ei ole ainoastaan uusi tapa toteuttaa verkkosivuja, vaan se antaa mahdollisuuden muuttaa internetin käyttökokemusta paremmaksi ja ottaa käyttäjät aivan uudella tavalla huomioon, oli heillä käytössään sitten pöytätietokone, tabletti tai matkapuhelin.

This Bachelor’s Thesis covers the history, principles and implementation of responsive web design and programming. The client of this thesis is Ladies’ Bike Club whose website I have developed to work responsively. The purpose of my Bachelor’s Thesis is to provide informative and explicit knowledge about the basics of responsive web design for the web designers and developers and also for those who are interested in this topic and field. This thesis is also meant to help in switching over to responsive web design by covering the main principles and implementation of responsive web design, which make it easier to research the topic further. The goal is to inspire as many web professionals and students as possible to familiarize with and implement responsive web design.

The chapter about the principles of responsive web design covers fluid grid, flexible images, the use of media queries and other relevant aspects concerning these. The section covering the implementation techniques goes over flexible images, viewport meta tag, the structure of CSS-files, media queries as well as displaying and hiding the content of a website. In the practical section of the thesis the website of Ladies’ Bike Club as well as two other responsive websites that I built during my training period are introduced. In this chapter the techniques used in creating the websites are explained and the final outcomes are briefly analysed.

An enormous range of different devices, screen sizes and resolutions has caused that web design and development have proceeded to a new era where flexibility and adaptability are keywords. Responsive web design offers a solution that helps us keep our websites along with the development of technology today and in the future, but it alone does not solve all the problems that existing devices bring forth.

Fluid grid, flexible images and intelligent use of media queries allow the creation of adaptable websites but the techniques with which the final appearance of the website and its different screen sizes are accomplished are dependent on many different matters. There is no single right way to create responsive websites.

Responsive web design is not only a new way to create websites but a possibility to make the experience of using the Internet better and to take the users into account in a completely new way, whether they are using a PC, a tablet or a mobile phone.