Responsiivinen web-kehitys WordPress-julkaisujärjestelmässä
Jutila, Tiina (2013)
Jyväskylän ammattikorkeakoulu
2013
All rights reserved
The permanent address of the publication is
https://urn.fi/URN:NBN:fi:amk-201305219803
https://urn.fi/URN:NBN:fi:amk-201305219803
Abstract
This Bachelor's Thesis studies the implementation of responsive web design in WordPress CMS. The aim was to make for the assigner company’s use a WordPress theme, which would include all neces-sary features for generating responsive websites. The purpose of the theme was to work as a blank template on which the construction of a web page would be as easy as possible.
The work dealt with the challenges in web-development posed by mobile devices and also tech-niques for solving those problems. The features and screen sizes of devices are changing all the time. Manufactures are constantly publishing higher performer devices, but the majority of users is still us-ing an older version of the device. Web pages should serve all users, regardless of whether they have a computer or a smartphone, how fast their network connection is and what browser and ver-sion they are using.
Key issues are scaling the contents to width of the device by using CSS, adaptive images and perfor-mance. The thesis also discusses slightly modern web technologies such as HTML5 and CSS3 and how those techniques are used in modern web-development. One of the major objectives was to find the most efficient solution for displaying images for both the standard and high-resolution screen.
The end-product of the theme was made to respond WordPress theme standards. The theme in-cluded the solution for displaying adaptive dynamic and static images, mobile navigation, the possibil-ity to display alternative content and a customizable CSS-grid. The theme used CSS preprocessor Sty-lus, which was intended to accelerate and facilitate the style file management. The theme was used to build an example website the aim of which was to introduce the theme and its features. Theme was also documented for the company. The document contained descriptions of the properties of the theme, as well as a guidance on HTML and CSS structure.
The work dealt with the challenges in web-development posed by mobile devices and also tech-niques for solving those problems. The features and screen sizes of devices are changing all the time. Manufactures are constantly publishing higher performer devices, but the majority of users is still us-ing an older version of the device. Web pages should serve all users, regardless of whether they have a computer or a smartphone, how fast their network connection is and what browser and ver-sion they are using.
Key issues are scaling the contents to width of the device by using CSS, adaptive images and perfor-mance. The thesis also discusses slightly modern web technologies such as HTML5 and CSS3 and how those techniques are used in modern web-development. One of the major objectives was to find the most efficient solution for displaying images for both the standard and high-resolution screen.
The end-product of the theme was made to respond WordPress theme standards. The theme in-cluded the solution for displaying adaptive dynamic and static images, mobile navigation, the possibil-ity to display alternative content and a customizable CSS-grid. The theme used CSS preprocessor Sty-lus, which was intended to accelerate and facilitate the style file management. The theme was used to build an example website the aim of which was to introduce the theme and its features. Theme was also documented for the company. The document contained descriptions of the properties of the theme, as well as a guidance on HTML and CSS structure.