MicroAssist, an Austin technology training and consulting company, has re-launched its web site using Drupal.

MicroAssist, an Austin technology training and consulting company, has re-launched its web site using Drupal. The Drupal reconstruction allowed us to rapidly develop new features and streamline the content management process. Drupal developers Pavel Karoukin and Jacob Williams share a few of the techniques used to build the new site.

About MicroAssist

For over two decades, MicroAssist has been a trusted partner for countless organizations in need of custom E-Learning, classroom training, and technology services. As one of Central Texas’ most experienced software education centers, a primary training vendor for the State of Texas, and a Microsoft Certified Solution Partner, MicroAssist has successfully worked with clients in a wide range of fields in both the private and public sectors.

Why Drupal

The previous version of the MicroAssist website was built in the DotNetNuke CMS within a Windows server environment. Deficiencies of the existing website were identified in several areas:

1. Accessibility
2. Search engine optimization
3. Content Management
4. New feature development
5. Security
6. Web site performance
7. Marketing tools

Accessibility

MicroAssist CEO Sanjay Nasta and CTO Hiram Kuykendall are longtime advocates of internet accessibility for individuals with visual, auditory or mobile impairments. We strive to make our site as accessible as possible, but faced difficulties with our previous CMS. The Drupal cms made it much simpler to meet our accessibility goals:

• Menu items are rendered in lists by default.
• Tables are used only for tabular data and not for page layout.
• Correct order of headings allows for easy page navigation when using screen readers.

We used the WAVE toolbar plug-in for FireFox to identify remaining issues.

To research color contrast issues we used the great FireFox plug-ins WCAG Contrast Checker and ColorZilla.

Search Engine Optimization

Effective search engine optimization starts from clean HTML code. We used Genesis base theme. This base theme provides:

• clean and valid HTML out of the box
• flexible layout elements and classes
• optimized placement of content early in source code with navigation and block content following

We use several modules to enhance on-page search engine optimization such as Page Title and Nodewords. The Page Title module allows us to define search engine-friendly page titles, while keeping the original title on the visible page.

In order to automate the management of meta keywords and descriptions, we use Nodewords integrated with another wonderful module, Token. This allows us to use a node teaser as a meta description and node tags as meta keywords.

In transferring the content from the old site to the new site, the Yahoo Terms Extractor module was a great time-saver. It extracted keywords from page content and put these as node tags, which later were used by Nodewords to add meta keywords.

And, of course, we use the famous Pathauto module to keep our URLs clean and read-able. Below is the Google search result:

Content Management

Drupal comes with a great UI for content management. Every content type in Drupal is a node that has the same UI for adding, changing, or removing content. Further extension of specific types of content is done with the help of the CCK module.

In order to keep site navigation consistent, we placed links to each node into the Primary Links menu. This allows us to have a site map using the Site Map module, a sub-menu block in the sidebar with help from the Menu Block module and a nice breadcrumb using the Menu Breadcrumb module.

The Views module is very helpful in organizing posted content by category. When content is posted, the module automatically displays it in the designated sections of the site, depending on the categories chosen by the author.

Several custom blocks on our site contain hand-coded HTML. In order to discern which blocks our less html-savvy editors could access and which they could not, we use the Block Access module. This module allows us to keep only the Title and Body fields editable for selected blocks.

With help from the Control Panel module we created a page for our site editors where they can quickly create new content, access a list of existing content, see all web form submissions, add/delete users and assign user permissions. This helps these users focus on common tasks and not be overwhelmed with the number of administrative pages in Drupal.

We also used the stock Drupal Book module to create an onsite manual for our content editors. With help of SWFTools and Flowplayer we put together short tutorials and screen casts on how to manage the website.

New feature development and security

Drupal provides great infrastructure for developing new code without changing existing code. The concepts of modules and hooks help a lot when you need to change behavior of some core component and at the same time keep from re-merging changes over and over again after each Drupal upgrade.

We leveraged these features when building modules for integrating with our legacy ColdFusion website. Our custom module essentially acts as an http proxy and is plugged in to menu via menu hook system. Custom titles and breadcrumbs were implemented via theming hooks. It is easy to customize the behavior of various core Drupal elements without needing to modify any of the Drupal source code. Now the content of the old website appears as an integral part of the new one.

To manage the updates for Drupal and our many third-party modules, we use Drush. Drush allows us to do a full site update with one command, “> drush up”. Drush handles the downloading of the latest core and third-party module updates, backs up existing modules and executes all module database updates.

However, even with Drush managing our code, we NEVER do code changes on the production server – and we strongly advise against doing so. Instead, we use a git repository. Each developer works on their own development machine – whether it is for development of new modules, changes to the theme or simple module updates using Drush.

After finishing and doing complete test, a developer commits all changes and pushes them to the main repository. After testing by other developers, all changes are pulled from main repository to the production web site.

Use of git version control system allows us to keep track of all changes, being able to revert to any revision if something goes wrong with most recent one and allows us to work on the code together.

One important moment about using git for deployment (as well as any other deployment method) - keep “settings.php” file separated between development and production environments. This is very easy with git - just create “.gitignore” file in the root folder of your project and add “sites/default/settings.php” into it. This will instruct git to not include settings files into repository. You may also choose to ignore the .htaccess file in your git repository.

Scalability and Availability

Drupal provides quite few performance features out of the box and more as third party modules. First of all we activate aggregation of CSS and JS files. Drupal has many CSS and JS files and our theme, for ease of development, separates styles and javascript between several files. Without aggregation each file would need to be requested from the web server and browsers usually can handle only 6 simultaneous requests. Aggregating all style sheet and javascript files gave us faster page open speed.

We use Memcached with the help of the Memcache module as well as Boost for caching pages for anonymous users. The boost module allows us to generate static pages from dynamic content and serve these static pages to anonymous users without even firing Drupal code! The difference in serving static content is tremendous - 100ms with static page cache vs. 500ms with using built-in drupal database cache.

Our server infrastructure consists of two load balancers managed by heartbeat, two web servers running Apache/PHP/Memcache and a separate MySQL database server.

On the web servers we run APC byte code cache which allows PHP to compile code once and cache it in RAM.

Marketing

We added the Webform module to the new web site. Our marketing team was thrilled by having ability to quickly build all kinds of forms.

We host a lot of download-able material on our site for our students and random visitors and our marketing team wanted to know who and why downloads this. We came with idea of developing custom module for that - Squeeze Page (this module is still in development phase so please feel free to try it and post any feedback into issues queue).

This module allows you to put some random page behind a web form which visitors are forced to complete before proceeding to this page. In our case we created a “Files page”, which is used to host templates, screen casts and other learning material. We put this page behind a web form and ask all visitors who want to download files to tell us about themselves and their interests.
Slide show on the home page

While doing all kind of slide-shows on a customer’s website we developed a pattern for it. Basically, we create a new content type called “Slideshow”, remove the Body field and add a ImageField CCK field called “Slides”, with unlimited images to upload setting.

We use a custom template for Slideshow node type (node-slideshow.tpl.php), where we integrate all required markup for the slide-show.

ImageField provides 3 text fields for each image - Title, Alternate Text and Description. We needed 4th field for URL. We installed ImageField Extended module to add URL field to description of the image.

Leveraging core node and CCK UI we have an easy way to add/remove/change slides anytime without touching the code base, or worrying about resizing images (this is done by another wonderful module - ImageCache).

Modules highlight

• CCK
• Views
• Imagecache
• ImageField Extended
• Webform and custom developed for this project Squeeze Page module
• Pathauto
• Yahoo Terms Extractor
• Token
• Page Title
• Nodewords
• Site Map
• Menu Block
• Menu Breadcrumb
• Genesis Base Theme

Conclusion

Site still is constant work in progress. For example our marketing team just asked to add feature to know where from visitor came to webform and surprisingly there is module for that - Visitor Path. Drupal allows us to be ready for any changes our business will require from us. And friendly community provides confidence that we always can solve any problem.

Thank you Drupal.org community!