The society "Cakkavala Meditation Centre" was set up in 2000. Thereafter it set up a website with the primary purpose of:
- Disseminating news and information of activities
- Sharing resources on the practice of meditation
- Providing a channel to contact the society
The website's layout (link here) has not changed since it was set up in 2000.
New sections and pages were added as and when needed over time. As a result, the website gradually became disorganised and un-intuitive, with having to click on various pages to search for what they need. The site owner has additionally expressed the wish to improve the site by making it mobile responsive.
This project is an effort to revamp the original website, such that its layout is simple and conducive for viewing of information and accessing online resources. The next objective is to make the site mobile responsive.
A live demo of the revamped website can be accessed here: https://4forces.github.io/project1/
Initial wireframing was done via hand-sketches on paper. This was subsequently digitised by porting over to Adobe XD.
Figure (a): Wireframes by Hand-sketching
Figure (b): Wireframes by Adobe XD
The new site has a similar color theme with the original website, which is light-blue. Blue tones are related to stability, peace and calmness - the qualities of meditation.
The following points were kept in mind in the design of the website:
- Organised
- Simple look and feel
- Ease of navigation
a) Home Page Upon visiting the site, the first page visitors see shows the updates of recent activities. This is inline with one of the site's primary purpose, which is to inform and update on upcoming activities. After which is an introduction of the background of the meditation teacher and the society.
b) E-dhamma Page This page serves as a central repository for the various online resources. The resource materials were scattered, and at times duplicated on various pages on the original site.
c) Contact Page The contact page has a form element designed to receive enquiries and messages from visitors. It is hoped that this feature will provide some convenience to visitors making enquiries. The original site does not have this feature. An email address is also provided in the event visitors still wish to contact the society directly.
The main visitors to the website will be those who are interested in updates on the weekly group meditation sittings and to-be conducted meditation retreats. The second group of visitors are those who may be looking for resources related to the practice of meditation.
- To incorporate a form of database to capture forms data at the contact page.
- To include a message box to indicate successful form submission at the contact page.
- To incorporate a form element for members registration. Either locally, or an external site like Google forms.
The following technologies were used in the construction of this website:
- Bootstrap v4.0
- HTML
- CSS
- JavaScript
Site responsiveness was tested on:
- Firefox
- Google Chrome
- Microsoft Edge
- iPhone 6/7/8
- iPhone X
- Moto G7
- Oppo R11
Checks performed
- W3C Validator - Link here
- CSS Jigsaw Validator - Link here
- Images do not appear distorted
- Site elements display as intended
- Internal and external links are working/not broken
Bugs discovered
- On the homepage, when the carousel arrow is clicked, the page moves up and the "News" header is covered.
- On Microsoft Edge, footer background colour disappears.
HTML and CSS Tips:
Images:
Fonts and Icons:
Scripts:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent