Responsiivinen suunnittelu
Huuskonen, Markku (2012)
2012
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2023101627616
https://urn.fi/URN:NBN:fi:amk-2023101627616
Tiivistelmä
Opinnäytetyön tavoitteena oli kehittää Pohjois-Suomen Erämessujen Internet-sivut käytettäväksi mobiilipäätteellä. Tavoitteen saavuttamiseksi on käytetty responsiivista menetelmää. Responsiivisuuden toteuttamiseen tarvitaan HTML5-, sekä CSS3-teknologiaa.
Tietoperustana työssä on suurimmaksi osaksi käytetty Responsive Web Design with HTML5 and CSS3 kirjaa, sekä World Wide Web Consortiumin tarjoamia dokumentteja. Responsiivisuuden lisäämistä sivustolle on projektin alussa testattu paikallisella palvelimella. Testauksen jälkeen lähdekoodi on lisätty Pohjois-Suomen Erämessujen sivuille.
Toiminnallisen osuuden tuotoksena sivut muuttuivat responsiiviseksi. Sivut skaalautuvat näytön koon mukaan oikeassa mittasuhteessa. Mobiiliversion käyttöliittymä on helppolukuinen ja yksinkertainen käyttää. Jatkokehitysehdotuksena on suorituskyvyn parantaminen mobiilipäätteillä. Suorituskykyyn liittyvät haasteet on kirjattu osaksi raporttia. The subject of this thesis is responsive design and adding responsiveness to content management system Joomla!. The employer of the study is Northern Finland’s Outdoor Life Fair.
The purpose of the thesis was to add mobile support to Northern Finland’s Outdoor Life Fair’s website. A responsive design was used to achieve this goal. To create a responsive website you need HTML5- and CSS3-technology.
Theoretical base relies mostly in Ben Frain’s book Responsive Web Design with HTML5 and CSS3 and World Wide Web Consortium’s documentation. At the start of the project responsiveness was tested on a local server. After testing the source code was added to Northern Finland’s Outdoor Life Fair’s website.
The functional part of the thesis work consists of Northern Finland’s Outdoor Life Fair’s website with responsiveness. The pages of the website scale according to the screen size of the user. The user interface of the mobile version is easy to read and simple to use. Suggestion for future development is to optimize performance in mobile devices. Challenges regarding performance have been written to the report.
Tietoperustana työssä on suurimmaksi osaksi käytetty Responsive Web Design with HTML5 and CSS3 kirjaa, sekä World Wide Web Consortiumin tarjoamia dokumentteja. Responsiivisuuden lisäämistä sivustolle on projektin alussa testattu paikallisella palvelimella. Testauksen jälkeen lähdekoodi on lisätty Pohjois-Suomen Erämessujen sivuille.
Toiminnallisen osuuden tuotoksena sivut muuttuivat responsiiviseksi. Sivut skaalautuvat näytön koon mukaan oikeassa mittasuhteessa. Mobiiliversion käyttöliittymä on helppolukuinen ja yksinkertainen käyttää. Jatkokehitysehdotuksena on suorituskyvyn parantaminen mobiilipäätteillä. Suorituskykyyn liittyvät haasteet on kirjattu osaksi raporttia.
The purpose of the thesis was to add mobile support to Northern Finland’s Outdoor Life Fair’s website. A responsive design was used to achieve this goal. To create a responsive website you need HTML5- and CSS3-technology.
Theoretical base relies mostly in Ben Frain’s book Responsive Web Design with HTML5 and CSS3 and World Wide Web Consortium’s documentation. At the start of the project responsiveness was tested on a local server. After testing the source code was added to Northern Finland’s Outdoor Life Fair’s website.
The functional part of the thesis work consists of Northern Finland’s Outdoor Life Fair’s website with responsiveness. The pages of the website scale according to the screen size of the user. The user interface of the mobile version is easy to read and simple to use. Suggestion for future development is to optimize performance in mobile devices. Challenges regarding performance have been written to the report.