Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
By mrP on
Heart & Ram Design Co. is a graphic design firm producing logos, merchandise, print material, web / mobile app design, and children's silhouettes. Contemporary or traditional, business or social, customized or ready-made.
Why Drupal was chosen:
Drupal is a solid CMS with an exceptional community and ability to accommodate current and future use cases.
Describe the project (goals, requirements and outcome):
Goals
The client was undergoing a re-branding of their company. Their existing site was a basic portfolio site without (1) any distinguishing or unique characteristics, (2) details about portfolio items, (3) graphical consistency, or (4) mobile responsiveness.
They wanted a responsive website that provided simplicity and came up with a web design mock-up that met their design objectives. One key requirement was the ability for designers to add new content to both the blog roll and the portfolio while enforcing consistency.
Site Development
Base Theme: AdaptiveTheme vs. Omega
Heart and Ram Design Co. was my first project in which the client fully embraced responsive site design. As such, I was challenged to find a base theme that met my criteria for a small project such as this:
- Logical theme structure
- Responsive layouts
- Comprehensive configuration UI
- HTML5 sub-themes / starter templates
- Works well with Display Suite
While Omega is a fantastic framework, I found AdaptiveTheme easier to use without the need for additional theme configuration modules. Sky was then selected as the base sub-theme and customized via Footheme.
Responsive Design
The benefits and challenges of responsive design have been discussed by many others. For this project, the most challenging aspect of responsive design was image scaling (Which responsive images solution should you use?). In the end, Flexslider was deemed as well-suited for the homepage slideshow, while picturefill was utilized for individual elements such as banner images in which image scaling led to unusable visual details.
In addition, some tricks from http://css-tricks.com/responsive-data-tables/ were utilized.
In an Acorn Shell
While Heart & Ram Design Co. is just a small project among many impressively large / customized Drupal implementations, it does highlight the common demands of small business clients who want to be responsive to modern demands for mobility and compete with larger firms. Drupal provides a infrastructure to scale and change as business evolves. This project demonstrates what can be done for clients wanting to utilize the contrib first, custom last approach.
Technical specifications
Key modules/theme/distribution used:
Why these modules/theme/distribution were chosen:
- AdaptiveTheme is a well-built, logical, and easy to use framework for responsive Drupal sites. Sky/Footheme was used as the baseline for developing the custom theme
- FlexSlider provides an easy to implement responsive slideshow that integrates with Views
- The client wanted an easy to browse between ordered portfolio content, and Custom Pagers + Nodequeue fit the bill for this need
Team members:
Project team:
Web Design - Michelle Bastarache at Heart & Ram Design Co.
Sectors:
Arts
Media
Small business
