Sosiaalinen verkkopalvelu mobiiliksi : tapaus Wreckamovie.com

Abstract

Opinnäytetyön aiheena on verkkopalvelun mobiiliversion suunnittelu. Työn toiminnallisena osana suunniteltiin ja toteutettiin yhteisöllisen elokuvatuotantopalvelun Wreckamovie.comin mobiiliversio, joka löytyy osoitteesta http://www.wreckamovie.com. Kirjallisessa osassa dokumentoidaan toiminnallisen osan työvaiheita ja ratkaisuja sekä työskentelyssä käytettyjä työmenetelmiä ja kehitysympäristöä. Siinä käydään läpi kohdelaitteet ja niiden selaimet sekä painotetaan mobiililaitteiden yleistymistä web-selainlaitteena ja kuinka siihen tulisi suhtautua.

Työ tehtiin Star Wreck Studios Oy:n toimeksiantona. Yksityiskohtaisella tasolla se tukee Ruby on Rails sovelluskehyksellä rakennettujen sivustojen mobiiliversioiden kehittämistä. Se on kuitenkin suunnattu kaikille mobiililaitteet huomioonottavasta web-kehityksestä kiinnostuneille.

Työ pyrkii motivoimaan mobiililaitteiden huomioimiseen web-kehityksessä ja käy läpi erilaisia lähtökohtia ja ajattelutapoja mobiilisuunnitteluun. Työssä myös tarkastellaan mitä hyötyjä koko kehitettävän palvelun kannalta voidaan saavuttaa suunnittelemalla se mobiililaitteiden rajoitusten ehdoilla nk. mobiili edellä -suunnittelutavan mukaisesti.

Lisäksi työ avaa responsiivisen web-suunnittelun käsitettä, jonka periaatteena on rakentaa web-sivun sommitelma mukautumaan sitä näyttävän laitteen ominaisuuksien kannalta parhaalla mahdollisella tavalla. Suunnittelutavasta annetaan perustavanlaatuisia kooditason esimerkkejä, jotka vaativat lukijalta ainoastaan HTML- ja CSS-ymmärrystä. Työssä käydään myös läpi mobiililaitteen tunnistaminen Ruby on Rails -sovelluskehyksen avulla ja kerrotaan, mitä eri tapoja on toteuttaa sivustolle mobiiliversio.

Työn tärkeäksi johtopäätökseksi nousi se, että web-palvelu tulisi kehittää niin, että sen käytettävyys ja suorituskyky olisivat optimaalisia aina sitä selaavalle laitteelle. Tämä on päällimmäisenä ajatuksena responsiivisen suunnittelun ajattelutavassa, jota voidaan pitää tulevaisuuden mallina web-suunnittelulle.

The topic of this thesis deals with designing a mobile optimized website. It was carried out as an assignment of Star Wreck Studios Oy. The functional part of the thesis consisted of designing and building a mobile and thus optimized version of the social filmmaking website Wreckamovie.com. The solutions made in different stages of the functional part are documented in the literary part. It also includes the practices used and the development environments, and takes a look at the target devices outlined in the assignment. It emphasizes the growth of mobile as a web access device and shows ways to react to it.

In a detailed level, the thesis will support the development of web sites by giving basic code examples. The applied web application framework is called Ruby on Rails. However, it is aimed for everyone interested in mobile optimized web design.

The aim of the thesis is to motivate the web designer to take the mobile devices into account in their design. It takes a look at different styles and views of designing for mobile such as designing Mobile First. It shows what kinds of benefits may be achieved by designing a website embracing the constraints of mobile devices, rather than fighting them. The thesis also covers the concept of Responsive Web Design and gives code examples of it. Its’ principle is to design a web page to adapt to the media that renders it with the help of media queries and flexible grids.

The main conclusion of the thesis is that the web service should be developed in such way, that both its usability and performance are always optimized to the device rendering it. Responsive Web Design is all about that and it could be seen as the way of web design of the future.