Responsiivinen web-suunnittelu yhtenä käytettävyyden osa-alueena

Abstract

Tässä opinnäytetyössä tarkasteltiin responsiivista web-suunnittelua osana käytettävyyden huomioimista web-suunnittelussa. Opinnäytetyön yhtenä osana suunniteltiin responsiiviset verkkosivut Chilispere -nimiselle tapahtumalle. Verkkosivujen suunnitteluprosessin aikana tutustuttiin ja tutkittiin käytettävyyttä yleisesti, sekä tarkasteltiin responsiivisen suunnittelun vaikutusta sivuston käytettävyyteen.

Erilaisten älypuhelinten ja tablettien yleistyessä syntyi uudenlainen tarve ratkaista sivujen käytettävyys kun päätelaitteen ominaisuuksista ei voitu tehdä oletuksia. Responsiivisen web-suunnittelun avulla pyrittiin luomaan erilaisiin päätelaitteisiin mukautuvat verkkosivut. Responsiivisen suunnittelun osa-alueina toimivat mukautuva sommittelu, mukautuvat kuvat, sekä media queryt. Responsiivisen suunnittelun pohjana toimivat html5-kuvauskieli sekä css3-tyylimääreet.

Esimerkkinä toimivien responsiivisten verkkosivujen suunnittelussa pyrittiin huomioimaan käytettävyyden merkittävimmät osa-alueet, eli sivuston navigointi, sisällön esitystavat, sekä sivuston saavutettavuus. Responsiivisen suunnittelun menetelmillä pyrittiin luomaan sivut, jotka mukautuvat aina suurista, korkearesoluutioisista näytöistä pieniin älypuhelinten näyttöihin. Lisäksi sivustossa huomioitiin kosketusnäytöllisten päätelaitteiden erityisvaatimukset käytettävyyden suunnittelussa. Verkkosivuja testattiin eri päätelaitteilla ja eri selaimilla.

Responsiivinen suunnittelu on erinomainen vaihtoehto ratkaista päätelaitteiden laajan kirjon tuoma haaste käytettävyydessä. Responsiivisuus ei kuitenkaan yksin ratkaise kaikkia käytettävyyden ongelmia, vaan toimii yhtenä käytettävyyden osa-alueena. Lisäksi on muistettava, että käyttökokemus ja käytettävyys ovat aina subjektiivisia kokemuksia, eivätkä samat ratkaisut toimi kaikissa tilanteissa.

The purpose of this thesis was to explore responsive web design as part of usability in designing for web. One part of the thesis was to design a responsive website to a festival called Chilispere. This thesis explores usability as general during the design process and how responsive design affects the usability of a website.

As different mobile devices and tablets became more common a new kind of demand emerged to resolve usability issues when the features of a device were unknown. Responsive design was an attempt to create websites that could respond and conform to different devices and resolutions. Responsive design consists of fluid grids, fluid images and media queries. The foundation of responsive design is html5 markup language and css3 style sheet language.

In designing the responsive website the attempt was to consider the main issues of web usability, as the navigation, the presentation of the contents and the accessibility. The aim was to design a website that could respond to devices varying from large high-resolution devices to smartphones. In addition the website was designed to consider the special characters of touchscreen devices in usability. The website was tested in different devices and different browsers.

Responsive design is an excellent alternative to resolve the usability challenge brought by different browsing devices. Still, responsive design does not resolve all the usability problems by itself, but is merely one part of usability. In addition you must remember that user experience and usability are subjective experiences and the same solution does not work for all situations.