This price is good for three years. This promo is valid until midnight of 30 November 2020 USA Eastern Time (01 December 2020, 12:00 PM Philippine Time). The next day, the price of this web hosting service goes back to its regular price.
Should you continue to subscribe after a year, price goes back to its regular price. One way to save is to sign up for a 3-year subscription. Price for a 3-year subscription is cheaper always. You will be billed every 3 years unless you cancel your subscription.
Your first Domain Name is always free for the first year life as long as you continue your subscription.
In case you missed this sale, you can avail yourself of still a cheaper discounted web hosting price at $3.95 monthly. Simply subscribe for 3 years to enjoy this discount.
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.
Center for Effective Missions
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.
After scouring the WordPress’s repository of designs for hours, I finally found a design that suits my taste — Interior Design by Astra. I like its minimalist design; its simplicity and neatness; and its being different from the common and traditional layout and design. A plus for this WordPress theme by Astra is that it was designed with Elementor, a visual page designer for WordPress that I commonly use. Though this design was conceptualised with interior design in mind, all I have to do is tweak it a bit to make it appropriate for EAPI.
The gallery that follows shows the original design of this WordPress theme by Astra. The home page that I would create for EAPI does not have to be exactly like in this demo. It will definitely look different. For one thing, what contributes to the beauty of this design are the photos that it used. Replace them with something else would already give the home page a different tone.
The demo site on Astra’s website will already serve as a mockup. A wireframe is no longer necessary for me to prepare because this demo site will already give you an idea.
As I progress through this web design process, I will show you how the individual pages would look like.
Design Changes as Requested by Client
Prior to Christmas, as requested by the client, I made a few changes.
Made the background of the navigation bar and footer of the same colour.
Change the font to Cambria (but this only takes effect if the font is present in the user’s device).
Some text editing
There were other requests which I will attend to after I have contained the needed data.
New Year entered with a big bang! As I was about to resume work, eapi.org.ph was no longer accessible. It looked like, the client missed the renewal of its domain name subscription.
Being the old site as my only source of data, I had to save every page I could. I managed to save the most pertinent ones; I left the rest to the client. There were 130 pages all in all; the gallery contained 262 photos.
After reporting the situation to EAPI, the client said that they were always on time with their domain name subscription. So, it could have been a malware that intercepted my browsing or that infected the host’s server. After a few hours, the site was back again.
Organizing the Data
I noticed that contents of the old site need a re-or. There were info that can be combined into one page; there were links that were dead; and navigation that need to be simplified.