ACTFL is a national organization dedicated to the improvement and expansion of the teaching and learning of all languages at all levels of instruction. Its mission is to provide vision, leadership, and support for quality teaching and learning of languages. ACTFL has an individual membership of more than 12,000 foreign language educators and administrators from elementary through graduate education, as well as government and industry.
Drupal 7 was the ideal CMS for the ACTFL project with its flexible, yet feature rich core content management capabilities. ACTFL has many third-party software systems providing online community, e-commerce, and member database solutions. Drupal provides a versatile foundation for integrating these third parties. Because of rapid growth, ACTFL needed a platform that would grow with the organization as additional resources and third parties were added – even though there were already six integration points defined as part of the initial requirements, future solutions and services were discussed in the initial planning stages.
New Target and ACTFL wanted to design a flexible and user-friendly website that would serve as the principal online resource for ACTFL members, attract interest to ACTFL and its products and services from numerous constituent groups, highlight the importance of language education, and strengthen ACTFL’s brand identity. The new site meets these goals; it is beautifully designed, provides more intuitive access to content via strong, organized information architecture, showcases the organization’s many member benefits to current and potential members, integrates with more than 6 ACTFL third party software systems, and establishes a new vibrant look and feel across multiple ACTFL web properties.
Front-end Design
Through a series of meetings and interviews with ACTFL stakeholders and internal staff, we reorganized the information architecture to create well-structured navigation making actfl.org a more intuitive website to use. Because the website serves multiple audiences, it needed a non-hierarchical taxonomy to avoid the limitations classic hierarchy-based navigation models employ. Taxonomy and other modules were used to implement the classification system created mutually by ACTFL and New Target through a series of in-depth planning meetings. The amount of time to reorganize and classify content in websites that have grown organically over many years is often underestimated by associations. ACTFL recognized the importance and staffed the project properly internally as all associations should when undertaking a project of this scope and magnitude.
After the information architecture was complete, we designed website graphics and imagery to be professionally in line with the ACTFL brand and the current ACTFL marketing campaign, “I belong.” To maintain continuity across all web properties, we applied the redesigned look and feel to third-party sites and ACTFL micro-sites such as aappl.actfl.org. Bringing all ACTFL websites, microsites, and third-party systems in line with the look and feel of the ACTFL.org brand was a key success metric that was achieved.
Below is an example of the website look and feel slightly altered to provide a distinct feel to an ACTFL program microsite.
Below is an example of the look and feel of the main website as applied to the Higher Logic Community Platform via a CSS overwrite.
We provided ACTFL with a Style Guide and set of standards for writing and design to ensure all future web content aligns with the ACTFL look and feel. Additional features which were implemented to improve front-end design include a jQuery Superfish module for mega menu functionality, as well as a custom slideshow built with jQuery and CSS to highlight marketing messages.
Finally, we designed a mobile version of the site which can be easily edited and updated by non-technical ACTFL staff members via the same web-based user interface that the main site utilizes.
Back-end Development
We developed the Drupal CMS as a multi-site to allow staff the ability to manage the main website, the mobile site, and the separate AAPPL site from one easy-to-use, web-based administrative dashboard. We created specific content types and a new workflow process based on conversations with internal staff. This process allows the staff to adhere to a review path for web content as it is created, edited, and posted to the site.
Integration
We connected all 3rd party tools to the CMS in order to create a simple single login for all members. This included integrating the ACTFL AMS (iMIS15), Online Community (Higher Logic™), and the ACTFL Boxwood Career Center with the new Drupal 7 CMS. When the user logs into the member area of the website, a user session is initiated and tokens are created if necessary. Once the user logs out of the CMS, the single-sign on (SSO) token is no longer valid.
We used a CSS override where possible to carry the design through to the 3rd-party tools; where it was not possible, we delivered a PSD file to the 3rd party to ensure the tools were styled to mirror the look and feel of the new website. The following 3rd-party design integrations may also be viewed:
- Boxwood Career Center (http://jobcentral.actfl.org)
- ISGWeb for iMIS (http://isgweb.actfl.org/ISGWeb/Purchase/SearchCatalog.aspx)
- CapWiz (http://capwiz.com/actfl/home/)
Additional features include a Twitter module which pulls the latest tweets from the ACTFL Twitter account, an improved news section, a contact web form which directs inquiries directly to the responsible department and thereby reduces time spend by ACTFL on forwarding emails to the correct department, as well as content types and blocks used to easily update content. We also implemented a weather module on the convention pages to display current weather conditions to conference attendees and we used Workbench to provide a unified user interface for content and the ability to control content editing rights.
Migration
Once the site was built out, we helped ACTFL clean up the existing content by removing the unnecessary pages and migrating the remaining content pieces from the existing i4a™ Content Management System to the new Drupal 7 platform.
The new site provides a secure environment to the ACTFL members to protect their financial data and member profiles. It is PCI Compliant and tested for SQL Injection Vulnerability.
Technical specifications
We chose the modules above and many others for their ability to best meet the ACTFL requirements. Additionally, through our prior experience, we have seen that the selected modules are consistently maintained and supported by the Drupal community.
More specifically, we selected the Domain Access module for sharing content between the main site, mobile site, and micro-site. The content types are available based on roles and permissions, i.e. the AAPPL administrator does not have access to ACTFL content, while the ACTFL administrator has access to all content.
We selected the Nice Menus module for the footer menus and the Superfish module for the main navigation. After enabling the Superfish module, we altered the CSS, which enabled it to appear as mega-menu.
Additional team members:
Howie Berman, ACTFL Director of Membership and Administration
Jaime Bernstein, ACTFL Membership Coordinator
Comments
Congrats for completing such
Congrats for completing such a nice portal. It is really encouraging..
Rajeev Kumar,
@drupler@bihar.social (ActivityPub)
Thank you!
We worked hard and are proud of the site! It was a fun project.
I believe it must have been.
I believe it must have been. I will also post about a portal soon which we have just started. Lets see how much time it takes..
Have nice time :)
Rajeev Kumar,
@drupler@bihar.social (ActivityPub)
superfish css to mega menu
Hi I'm working on a site with superfish integrated in the subtheme. http://desertsouthwestconference.org. What CSS did you use to modify the menu into mega menus?
We used the default Superfish
We used the default Superfish classes plus additional custom styles.
We're not actually using MegaMenu here, though some of the classes indicate that we did. This menu style was a decision made late in development and we had some issues installing MegaMenu at that time - though we do use it often.
Then using the list item odd/even classes, we targeted them with float:left; clear:left, and float:right; clear:right to create the columns.
There is problem with your
There is problem with your menu drop down. If we hover on main, drop down opens but if we move curser to the childs, the hovering effect on parent doesn't stay..
It's difficult to decide in this case that which is the parent for this multicolumn drop down.
Thanks,
Rajeev Kumar,
@drupler@bihar.social (ActivityPub)
I don't see what you are
I don't see what you are describing. If we hover on main, drop down opens and when we move curser to the childs, the hovering effect on parent does stay.
Yes now it does. I realy saw
Yes now it does. I realy saw this problem yesterday & so that I wrote.
Thanks
Rajeev Kumar,
@drupler@bihar.social (ActivityPub)
Theme is awesome! It is
Theme is awesome!
It is custom designed?
Yes. We started with
Yes. We started with wireframes, then comps were made in Photoshop.
Awesome design with nice menus
What I liked most in your design is the awesome use of nice menus. It looks good also easy to navigate. Is there any caching used for anonymous users and authenticated users? I see you have a community of more than 12000 users.
--
Passionate about Drupal
Overlaying login page
What module you used the overlaying login page?
I too am interested in
I too am interested in knowing which module.
From a quick gander at it, I'd assume its a custom module that uses CT tools modals?
I'm not sure if they used CT tools modals
I'm not sure if they used CT tools modals coz they didn't include that module to their Key modules/theme/distribution used.
By using firebug, you can
By using firebug, you can check the element (or manually go through the html source)
yeah your right it's a modal forms
yeah your right it's a modal forms thanks.
what about the join us ribbon are they using a module?
Id imagine its just done in
Id imagine its just done in the theme layer. No sense in making a module for something so specific and narrow.
It is indeed modal forms curtailed for our needs
At the time when we were doing this, the modal forms module was still in dev stage. We wanted something much simpler and quicker. Also, we had some custom requirements with the the login submit handlers as it also involves some SSO. It does use Ctools. The design is a combination of HTML rendered from "nvl-modals-ctools-modals.js" file and custom theme specific CSS.
Sateesh Nutulapati
Devops Solutions Architect at New Target, Inc.
It's a custom module.
It's a custom module.
Web Developing
As per the todays day in developing technology of Application and specially dynamic in developing so, the drupal is to much helpful and it is latest in most of all IT sectors and it gives best results.
It has nice three tier architectures and it allows developer in freedom to put JQuery on it. It also allows developer in Cascadding Style Sheet that is igher Logic Community Platform. Big thanks to Brian New some, to write this kind of Article with ACTFL project, so beginner can understand the things from this article. Feom me big Hi-Fi to him.
Very Good Theme
I like this theme too much. Will you help me to find this theme ??? I want to use & test this theme on my site.
It is highly unlikely they
It is highly unlikely they would release their theme to be used by the general public. It would make their brand image weaker.
It is not about brand image
It is not about brand image my friend. The client has paid for the custom design and certainly is entitled for exclusivity :-)
Sateesh Nutulapati
Devops Solutions Architect at New Target, Inc.
Great Site
Hey this is a great looking site. I love the way you have used Drupal to bring everything together.
Excellent work
What module you used the overlaying login page?
and this is a great looking site, excellent work......
_
The combination of gray and green colors on community section, made it very nice. I like to know did you use any special module for making community? Is it the default drupal forum module?
We did not use a Drupal
We did not use a Drupal module for the community. We implemented a single sign-on from Drupal to Higher Logic, the community 3rd party application, and we were able to gain access to the application's creative layer to overwrite the CSS with our creative styles to provide an integrated user experience for when a user navigates to and from the community from the main Drupal website. Thanks for the question!
Congratulations
The site looks great on all devices, including mobile. Good job.
--