EAPI Progress: Populating the Site with Web Contents

Screenshot vision-mission page of EAPI
Screen shot of EAPI’s vision-mission page

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.

Pages Designed

Home Page

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.

  1. Header and navigation menu ~ Done.
  2. Identity and image/branding ~ Done.
  3. About ~ Done.
  4. What We Offer (Programs) ~ Done but may be revised.
  5. Latest News ~ (not available yet because nothing has been posted)
  6. Testimonies ~ (not available yet because nothing has been posted)
  7. Contact ~ Done.
  8. Footer ~ In progress.

Accessed directly from the home page

  1. Apply Now ~ In progress…
  2. Links to social media pages ~ Not set yet…
  3. Schedule of classes, possibly to be shown on the Programs section. This is just a widget, not an actual page.

About

  1. Vision-Mission. I designed the Vision-Mission page consistent with EAPI’s brochure. ~ Done.
  2. Our Story ~ Done. I combined 2 articles — About and Story — from the old site into just one page Our Story.
  3. Our Participants ~ Pending; to be clarified as to the nature of data.
  4. Our Staff ~ Done. I used the photo IDs of the staff that I designed for their company ID.

What We Offer (Programs)

  1. Pastoral Residential Program – PLMM ~ Done.
  2. Pastoral Residential Program – PRD ~ Done.
  3. Sabbatical Residential Program – SRE ~ Done.
  4. Academic Programs ~ Done.
  5. Extension Program ~ Done.
  6. 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.

Other Items

  1. Our Journal ~ Waiting for an article about APMS.
  2. News & Events ~ No items yet.
  3. Links ~ Done. See related writing below.
  4. 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.
    1. Upgrade Facilities
    2. Scholarship
    3. Visiting Lectures
    4. Center for Effective Missions
    5. Teaching Equipment
    6. 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.
Sponsored

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.

EAPI Progress: Design Inspiration, Mockup and Wireframe

Design Inspiration

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.

  1. Made the background of the navigation bar and footer of the same colour.
  2. Change the font to Cambria (but this only takes effect if the font is present in the user’s device).
  3. 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.

EAPI Progress: Site Map: eapi.org.ph vs eapionline.org

A site map is a model showing how the contents of a website are organized and linked together from the home page and from anywhere on the site. The site map should not be confused with the navigation menu; though it may be presented similar to it.

Presentation

Each box in the site map represents a specific page, a post archive page, a section of the home page, a link or a media. Note that not all external (outbound) links are presented in the site map.

Initially, there are 16 22 pages — 14 20 static pages and 2 post archive pages — that need to be recreated and redesigned. The post archive pages, though are generated by the system when called, also require creative designing. (Ed. I have combined all 7 pages related to Give A Gift Today into just one page.)

Notes to the Site Map

  1. About is a major menu item that hovering it shows the sub-menu items. Clicking About on the menu goes to the About section of the home page which has a link to the Our Story page. Contents of the About and Our Story pages of the old site are merged into one Our Story page. 
  2. What We Offer refers to programs of EAPI. On the menu, it is titled What We Offer. Clicking it on the menu directs the user to the What We Offer (programs) section of the home page. Hovering it displays the sub-menu items. The programs are also listed on the sidebar.
  3. Each program on the old site comprised two pages: a selling page and its details. The proposed site combined the two pages into one. Thus, the content of PLMM and PLMM details of the old site were merged into one PLMM page.
  4. The Sabbatical Residential Program on the menu opens the SRE page.
  5. The Academic Programs on the menu opens the STL page, which has a link to the LST website.
  6. Life in EAPI goes to the Testimonies section of the home page, which has a link to the Testimonies post archive. Testimonies are post items under the category (label) Testimonies. 
  7. Update. Added a page Programs List, which is independent from all other pages. I have found that a program list is necessary for SEO purposes in case when someone searches for EAPI programs, the search result will point to the program list instead of to a specific program page.
  8. Update. Schedule widget (white box). The schedule widget displays the schedule of classes. It is necessary that interested individuals to have quick access to the schedule of classes, not only from the home page, but also on select pages of the site. This is not a separate page but only a simple storage of dates that the administrator can edit each time there is a change in the schedule of classes. This reusable set of data can be displayed on any page. Its advantage is that the administrator does not have to edit every page where the dates are shown. He only has to edit one source, which is the widget, ensuring that every page shows exactly the same dates.
  9. Journal links to a specific page with a link to Asia-Pacific Mission Studies.
  10. News and Events are post items. By default, all post items will be categorized as news and events unless labeled otherwise.
  11. Update. 27 Jan. On the old site, there were 7 pages related to Give A Gift Today. For the reason that, the contents on the individual pages were really short, I decided to write them all on one page. Thus, from 22 pages, I have reduced the pages to 16.
  12. Contact Us links to the Contact section of the home page. Tested to be working. Set the recipient admission[at]eapi[.]org[.]ph to receive messages.
  13. Links to respective Facebook and Twitter pages. This social media links are shown on the Footer section.

Structure of the Old Site

The existing site – eapi.org.ph – contains 318 static pages; it does not contain any posts. Not all of these pages may exist on the new site; but only those outlined by EAPI.

There is one page that is almost empty; a duplicate perhaps of the STL page linked only to the course on the home page but not through the navigation menu.

There were four dead links, three of which were download links. 

To compare, this file shows the site map (pdf) that I reconstructed for the old site – eapi.org.ph. Note that all other information on this file had been revised.

Difference between a page and a post

A page contains information that is likely to be permanent or relevant for a longer period such as a company profile or its history. A post is like a journal entry that is time-related, less permanent and may become irrelevant through a short time, eg a news item.

Work Journal

  • Constructed site maps of eapi.org.ph and eapionline.org; and submitted to the client for understanding of the changes that I will make on the new site. The site map of eapionline.org presents the scope of my work as far as contents are concerned.
  • Next move — content writing.