Building the Web Pages
With the web contents properly organised with the aid of a site map, it’s now time to build the pages.
There are initially 16
22 pages that are to be recreated and redesigned, the home page (1) included. Thirteen (13) Nineteen (19) are static pages; two (2) are post archive pages that will be generated by the system when called. Most of these pages are linked from the home page. Twelve (12) are accessed through the navigation menu; 6 are accessed through a page; and three (3) directly from the home page but not from the menu.
Update. For the reason that the contents of the 6 pages under Give A Gift Today were very minimal, I decided to fit them all on one page. Thus, the total 22 pages have been reduced to 16.
For SEO and UX purposes, I find it necessary that a Programs List page should also be designed. This page can be accessed from anywhere on the site wherever applicable but it does not have to be from the menu.
- SEO (search engine optimisation). In case someone searches for EAPI Programs, the programs list will show up.
- UX (user experience). For other users, it will be more convenient for them to see all the available programs on one page, rather than mousing on the menu or going back to the home page (programs section).
- Backend convenience. It will be convenient to gather all related information under one parent page for visual presentation and organisation.
The Need for A Calendar
It took me hours for two days exploring the need for a calendar that will show the schedule of classes.
The schedule of classes is a vital info. This info should be easily accessible from the home page. Most likely, a prospective participant would be interested in the duration and schedule of classes.
First solution failed
I thought first of an events calendar. Instead of entering the program information as a static page, treat each one an event page (a dated type of post). After an event (program duration) has ended, the administrator will simply change the date.
I looked at 3 possible calendar solutions, applied and tested these plugins (also called extension apps), but none has satisfied me. Problems I have encountered were design customisation, dimensions, visual look inconsistent with the site scheme, etc.
The problem with events plugin is that each event is specific to a day. If an event covers a series of days, a repeating event feature is available. The problem with a repeating feature is that it expires daily. For that reason, the duration of classes changes. For example, if the class schedule is 5 Jan—27 Jun, once 5 Jan lapses, the schedule becomes 6 Jan—27 Jun.
I also looked at WPClass – a plugin tailored for classrooms – but this app is too big for EAPI that it might make the site heavy.
A simple solution is all I need
The ideal locations of the schedule of classes are: the home page, the side bar, and the individual program info pages. All in all, these are 7 locations on the site. Thus, each time there is a change in dates, the administrator has to edit 7 locations; which makes the update prone to typo error or data inconsistency.
The solution that I was looking for is that the administrator had to edit the data from only one location (technically, just one record in a database), then every section of the site is updated where the schedule is shown.
After hours of looking for a solution and testing it, finally, I was able to achieve my goal without the need of an events calendar.
The home page has 8 sections. How these sections look and function are not final yet because I have not applied yet the client’s requests.
- Header and navigation menu ~ Done.
- Identity and image/branding ~ Done.
- About ~ Done.
- What We Offer (Programs) ~ Done but may be revised.
- Latest News ~ (not available yet because nothing has been posted)
- Testimonies ~ (not available yet because nothing has been posted)
- Contact ~ Done.
- Footer ~ In progress.
Accessed directly from the home page
- Apply Now ~ In progress…
- Links to social media pages ~ Not set yet…
- Schedule of classes, possibly to be shown on the Programs section. This is just a widget, not an actual page.
- Vision-Mission. I designed the Vision-Mission page consistent with EAPI’s brochure. ~ Done.
- Our Story ~ Done. I combined 2 articles — About and Story — from the old site into just one page Our Story.
- Our Participants ~ Pending; to be clarified as to the nature of data.
- Our Staff ~ Done. I used the photo IDs of the staff that I designed for their company ID.
What We Offer (Programs)
- Pastoral Residential Program – PLMM ~ Done.
- Pastoral Residential Program – PRD ~ Done.
- Sabbatical Residential Program – SRE ~ Done.
- Academic Programs ~ Done.
- Extension Program ~ Done.
- Life in EAPI ~ Will be done upon availability of data.
Program Info Page Structure and Elements
Each program info page has 2 columns: the wider column contains the general info and details of the program; the right column contains the amount of course fee, contact info, apply now button, link to the brochure and the schedule of classes.
The program info column is further divided into two sections: a brief background about the program and the specific details. The details of the program are rather long, so I used a toggling method wherein it shows only the titles while the rest of the text is hidden, giving the user a choice whether to continue reading or not.
- Our Journal ~ Waiting for an article about APMS.
- News & Events ~ No items yet.
- Links ~ Done. See related writing below.
- Give A Gift Today ~ Done. The old site had 6 sub-pages related to Give A Gift Today. For the reason that the contents on each sub-page were really short, I decided to fit them all on one page. Thus, the number of static pages were reduced from 22 to 16. As a result, the following subjects can all be found on a single page Give A Gift Today.
- Upgrade Facilities
- Visiting Lectures
- Center for Effective Missions
- Teaching Equipment
- Learning Resource Centre
About the Links Page
I thought this was a page that I could finish in minutes; but it took me two nights to complete it.
I had found the original page bland because it was simply a list of text. So, I thought of making it look more appealing by adding some images.
For the images, I used screenshots of the home pages of each organisation’s site.
- First, I tried using a gallery but it didn’t show up the way I was thinking.
- So, I thought of using image boxes instead. I was already expecting that the page would look very colourful because of the varying colours of the screen shots — something I did not want to see because it would not be consistent with the design. A solution was to filter the images to blend them with the background.
- After filtering 16 screen shots, I changed my mind and settled with desaturating the images completely to greyscale or black and white to minimise the colours on the page. To perk it up a bit, when users hover on an image, they see the original colours of the home page.
- And the result is —
More about the Links page.
- CBCM’s website no longer exists. Instead, I directed it to its Facebook page. I also corrected the word Bishop’s to Bishops’.
- FCBCO does not have a website either; so no link was used. All it had were articles from various websites. Likewise, I corrected the word Bishop’s to Bishops’.
- Included a schedule of classes to provide the users to further explore the programs.
Always Choose an Eco-Friendly Web Host Company
Give Earth a chance. You can contribute in minimising carbon footprints. Choose a web hosting provider that uses Green Energy such as GreenGeeks. GreenGeeks is 300% powered by renewable energy.