Responsiivinen verkkosuunnittelu

Abstract

Opinnäytetyössä tutkitaan responsiivisen verkkosuunnittelun mahdollisuuksia ja mobile first –ajattelumallin hyötyjä. Työn tavoitteena oli luoda kaksi erilaista verkkosivudemoa, jotka esittelevät HTML5:n ja CSS3:n ominaisuuksien lisäksi responsiivisen verkkosuunnittelun aja-tusmallia.

Verkkosivujen suunnittelijat voivat nykyään harvoin tietää, millä laitteella heidän julkaisuaan tullaan selaamaan. Kun se on julkaistu, käyttäjiä voi vierailla palvelussa kännyköillä, tableteilla, työpöytäkoneilla tai television ruudulta. Tämä näyttöpäätteiden kokoerojen laaja kirjo aiheuttaa verkkosuunnittelijoille uudenlaisia haasteita. Jokaiselle laitteelle oman palvelun suunnittelu ei myöskään usein ole taloudellisesti kannattavaa. Näiden ongelmien takia Ethan Marcotte on esi-tellyt uuden responsiivisen tavan suunnitella verkkopalveluita.

Ethanin vuonna 2010 kirjoittaman kirjan Responsive web design - julkaisun jälkeen, suunnittelijat ovat vähitellen alkaneet ymmärtämään kyseisen työtavan hyödyt. Aihe on myös ajankohtainen siinä mielessä, että mobiililaitteiden selaimissa on yleisesti ottaen hyvä tuki CSS:lle, HTML:lle ja Javascriptille, joten luotuasi responsiiviset verkkosivut, ne eivät jää vain tietyn kehittyneen päätelaitteen hienoudeksi, vaan suurimmalla osalla esimerkiksi älypuhelimista on mahdollisuus niitä hyödyntää.

In this thesis I examined the abilities and benefits of responsive web design and using the concept of mobile-first. The goal of the thesis was to create two different types of web demos that demonstrate HTML5 and CSS3 features, and follows the idea of responsive web design.

Web designers can nowadays rarely know with which device their publication will be browsed. After the publishing users can visit the service with mobile phones, tablets, desktop computers or television screen. This range of display device sizes create chal-lenges to web designers. Also creating a specific service to every platform is not profita-ble. The solution to these problems Ethan Marcotte has presented a new responsive way of designing web services.

After the release of Ethan’s book Responsive web desing, written in 2010, designers have started to understand the benefits of responsive design. The topic is also current because mobile browsers have generally good support for CSS, HTML and JavaScript. After pub-lishing the websites majority of smartphone owners have the opportunity to browse them.