Capstone Blog: Off To A Good Start | Progress Report #1

Posted on Mon, 09/21/2015 - 22:53

I’ve continued to put in a lot of study time, in terms of giving myself a crash course in the backend development side of the Drupal CMS. I’ve been especially focused on the Drupalize.me video series on "Module Development for Drupal 7”. This is actually very important for my project, as I’ll explain later in this post.

In terms of other further studying, I’m looking to finish the Drupalize.me series on module development that I mentioned, as well as review their series on “Building Websites in Drupal 7 Using Panels” and “Customize Panels Styles with CTools Styles Plugins”, as a refresher for dealing with the (in)famous Panels module in Drupal, the basis of the Panopoly distribution that I’m building my own distribution on top of.

Beyond studying, I’ve thankfully also been able to start building things for my capstone project throughout the month of September. As a foundation, I started by creating my prototype website on the Pantheon website management platform. Pantheon is great for experimental development work, because it provides web hosting and Drupal app support free of charge to web developers (up until you want to go live with a production site).

As planned, I created a Drupal site using the Panopoly distribution as my base to start working with. I’ve begun prototyping some of the basic features that were promised in my project proposal, as well as going off of the initial round of user research that I conducted back in August.

One of the first items I worked on in my prototype site was creating a simple, professional-looking, yet customizable theme for the site. (Note: In Drupal, a theme is the presentation layer of the software that controls the site’s output. For example: HTML, CSS, JS, etc.)

I decided to use the Radix base theme, since it was specifically built to function well with Panels and Panopoly. The Radix base theme also implements the Bootstrap front-end framework, allowing for a responsive, mobile-first presentation layer out of the box. Another helpful feature of the Radix base theme is its simple integration with Bootswatch sub-themes, which provide professionally-styled, Bootstrap-based sub-themes that are easily modifiable using the LESS or SASS CSS preprocessors.

For the main theme of the Open Eggheads site, I chose to go with the Bootswatch theme “Yeti” as my foundation. This will function as the default theme for all Open Eggheads websites. Later on during this capstone project, I may explore adding other themes for the user to choose from. But, for now, I am only providing a single theme.

However, I am providing users with the ability to choose different color schemes within the Yeti theme. This choice between color schemes is made possible by the Colorizer module in Drupal. Importantly, the Colorizer module integrates with all Radix-based themes. As a result, Open Eggheads users will be able to customize the color scheme of their websites via the easy-to-use Colorizer interface. User will be able to [1] choose from a set of pre-defined color schemes or [2] create their own custom color scheme with the point-and-click color wheel provided by the Colorizer module.


Choose a pre-defined color scheme


Or create your own custom color scheme

Keeping ease-of-use in mind, users will be able to access this color scheme form, along with other basic website configuration settings, as a simplified administration page. This “Open Eggheads Admin Page" will be accessible via the Drupal admin toolbar present at the top of each page when logged in as an administrator. This page will allow the end user to alter basic settings on their website, without ever having to dive deep into the often confusing and complex Drupal administration menu. Adding this functionality is where my new knowledge from the video series "Module Development for Drupal 7 comes into play. In order to create the Open Eggehads Admin Page, I had to code my own custom module that pulls in all the necessary forms and information into one, easy-to-use admin page. This is my first foray into custom Drupal module development, but it is definitely worth the effort in terms of providing an outstanding user experience for the users of the Open Eggheads distribution.


Link to the custom Open Eggheads Admin Page

Another UX design feature I’m working on is adding a Shortcuts menu that will be visible underneath the admin toolbar mentioned above. This Shortcuts menu will act as another way for logged-in users to initiate common actions/tasks on their website, but with just a single click.


Example of planned Shortcuts menu

For the Open Eggheads distribution, I am also planning on create default content throughout the website, that will act as an easy starting point for users. For example, the homepage will contain some sample data that the user can then quickly edit to display their own info, without requiring the user to layout the page themselves. This default content will be integrated into the packaged Open Eggheads distribution, using the Features and UUID Features modules to export the default content into code.


Example of default homepage content

As for other features on the Open Eggheads prototype site, I’ve also begun work on creating a CV page where users can dynamically display their personal CV as well as provide a download link for the CV. To display the CV on the page, the Open Eggheads site will make use of the PDF.js platform, which allows PDF files to be displaying within a standard browser window. After installing the PDF.js library and doing some initial testing, I ran into some implementation issues and will need to run further testing in order to get this feature working.

In regards to other features, I will soon begin working on building the Research and Publications features described in my project proposal. I am also hoping to conduct a round of user testing on the Pantheon-based prototype site in the near future, in order to collect some real user interaction data.