DeM-Profit Verkkosivujen toteutus ja nopeusoptimointi

Abstract

Tavoitteena tässä opinnäytetyössä oli suunnitella ja toteuttaa verkkosivut DeM-Profit –suunnittelutoimistolle. DeM-Profit on pieni yritys, jonka palvelut koostuvat yritysviestinnästä, muotoilusta ja tuotekehityksestä. Yrityksellä ei ollut aiempia verkkosivuja ja sivujen oli tarkoitus esitellä DeM-Profitin toimintaa, heijastaa yrityksen ilmettä ja toimia yhteydenottokanavana asiakkaiden ja yrityksen välillä.

Sivujen tuli mukautua sopiviksi erikokoisille näytöille, jotta niiden käyttö olisi miellyttävää, huolimatta siitä millä laitteella niitä selataan. Tavoitteiden saavuttamiseksi prosessin aikana huomioitiin erityisesti käytettävyys, nopeusoptimointi ja ulkoasun joustavuus. Verkkosivujen suunnittelua ja toteutusta lähestytään mobiililaitelähtöisestä näkökulmasta, ja lisäksi käytetään hyödyksi joustavan suunnittelun periaatteita.

Mobiililaitteiden käyttö internetin selailussa on kasvanut räjähdysmäisesti mikä on tuonut muutoksia verkkosuunnitteluun. Työssä tarkastellaan kuinka joustavasuunnittelu, mobiili lähtöisyys ja nopeusoptimointi liittyvät toisiinsa, ja kuinka ne on otettava huomioon suunnittelun ja toteutuksen erivaiheissa. Työssä käydään läpi myös nopeusoptimointiin vaikuttavia tekijöitä, sekä vertaillaan joustavan suunnittelun etuja verrattuna erillisiin mobiililaitteille suunnattuihin verkkosivu versioihin. Sivujen rakentamisessa käytettiin WordPress-sisällönhallintajärjestelmää ja Bootsrap kehityspohjaa, jotka molemmat ovat suosittuja työkaluja verkkosivujen toteutuksessa ja ne tukevat myös työn tavoitteiden saavuttamista.

The objective of this bachelor´s thesis was to design and implement websites for DeM-Profit- design company. DeM-Profit is a small company-, who offers communication services for companies, and also design and research and development services. The company did not have a former website, therefore, the purpose of the site was to present DeM-Profit’s, operational environment, and also to reflect the image of the company and function as a communication channel between customers and the company.

The goal of the website was that it would fit to screens of different sizes, so that the usage of the site would be user-friendly, regardless of the used browser is. In order to achieve the objective, a special notion was made for usability, speed optimization and design-, during the process. The designing and implementing of the website is approached firstly from mobile phone point of view, as well as the principles of responsive design.

The usage of mobile devices-, has rapidly increased and this has brought changes to web design. This study observes-, how responsive design, mobile orientation and speed optimization are linked together and how these factors have to be taken into account during different stages of design and implementation. In this, factors that affect speed optimization are observed, as well as the benefits of responsive design compared to website versions targeted for separate mobile devices. The website were built with WordPress content management system and Bootsrap framework, which are both popular tools used for implementing websites, and which also supports the achievement of the objectives for this study.