Global Prenatal Initiative

Categories: , , , ,

GPI is a global organization of non-profits with the goal of raising awareness and creating and sustaining positive change in maternal empowerment during the 9 months of pregnancy.  I was contacted by the folks at CKA Creative to assist in “responsifying” their website as well as adding some additional functionality to the WordPress backend.

The website is fluid across all screen sizes, but has 3 distinct breakpoints for mobile, tablet, and desktop sizes.  On smaller screens, a combination of JavaScript and CSS hides the menu to give more screen real estate to the rest of the site.  Where possible, icon fonts were used in place of images for a sharper appearance on high-dpi and retina devices.  The CSS was generated by Sass and includes some custom mixins for each breakpoint.

Behind the scenes, a WordPress-powered CMS controls all aspects of the site.  Most interestingly is that each Region has their own login and can control their own content, without access to the main pages or other regions on the site.  They have the ability to control the text and images of their regional page, as well as add new blog posts or events, which get automatically associated with their own region.  In addition, the site admin has control to create or edit content for any region on the site.  This was accomplished with a combination of custom metaboxes and the WordPress roles and capabilities API.