Responsiivinen verkkosuunnittelu sisällön asettelussa

Abstract

Tässä opinnäytetyössä käsitellään responsiivista verkkosuunnittelua ja sen vaikutusta verkkopalveluiden sisällön asetteluun ja sisältöhierarkiaan suunnittelijan näkökulmasta. Teoriapohjana toimivat alan ammattilaisten kirjoittamat artikkelit ja teokset.

Aluksi esitellään responsiivista verkkosuunnittelua ja sen eroja perinteiseen suunnitteluun verrattuna sekä olemassa olevia sisällönasettelun ja navigaation malleja. Opinnäytetyössä tarkastellaan olemassa olevia responsiivisesti suunniteltuja verkkopalveluita ja niiden käyttäytymistä viidellä erilaisella laitteella: iPod Touchilla, Nokia 5230:lla, Nokia Lumia 610:lla, iPadilla ja tietokoneella. Tarkastelussa on seitsemän verkkopalvelua, joista viisi on suomalaista ja kaksi ulkomaalaista.

Opinnäytetyössä havaittiin suomalaisten verkkopalveluiden suosivan yhtä sisällönasettelumallia ja käyttävän monipuolisemmin navigaatiomalleja. Sisällön elementit asettautuvat verkkopalveluissa yhtä lukuun ottamatta noudattaen Jacob Nielsenin F-katselukuvio-teoriaa.

This thesis deals with responsive web design and its impact on website content layout and content hierarchy. The point of view is designer's. The theory is based on articles and books written by experts of the field.

Initially, the responsive web design and its differences from traditional web design are presented. The contend layout and navigation patterns are also examined. The thesis deals with real websites and observes their functionality when the screen is resizing. This is done with five devices: iPod Touch, Nokia 5230, Nokia Lumia 610, iPad and a computer. Five of the websites are Finnish and two are foreign.

The observations showed that the Finnish website seemed to use one certain content layout pattern more than others. The elements of content in all web-sites except in one, follow Jakob Nielsen’s F-shaped pattern for reading web content.