Visit the site
Visit the siteThe Hopkins Company, an architectural firm specializing in high-scale residential design and operating for over 40 years, wanted to redesign its website. The site needed to reflect good, professional stylistic taste. The site would organize and showcase to current and prospective clients a library of over 2,100 photographs and almost 170 articles.
About the project
Our theming goal was a simple, professional look that minimized scrolling.
Functionally, we wanted to be able to quickly deliver our library of beautiful architectural photos without overwhelming the user. Therefore throughout the design process we made an effort to minimize the number of clicks and the number of main navigation items (our goal was to cap it at three).
For conceiving the theme, we used Balsamiq (we went ahead and bought it for $79, but there are ways to use it in limited capacity for free). We arrived at a three-panel layout: a left-sidebar, which is stacked on top of the square logo, plus a main content area. A couple of our main goals were to have the website be very image-centric and to minimize scrolling. I can't recommend using Balsamiq enough. It allowed us to fully agree on a layout with the client before even beginning to theme, which helped us avoid backtracking in that area.
To design the theme we modified the Framework theme. We didn't choose Framework for any special reason other than its professional look, intuitive design, the fact that all of its CSS could be found in one stylesheet (convenient for our purposes), and that it used Eric Meyer's CSS reset.
To get the specific design we wanted for our site we used a number of theming techniques: Display Suite, template overrides, jQuery workarounds and, of course, Views (making good use of Mustardseed's "rewrite the output of this field" technique).
Functionally, we aimed to have robust, intuitive galleries and we wanted the user to know where he was on the site at any given moment. I'll discuss how this was achieved in the modules section below.
The outcome has been terrific. Using IrfanView and the Multiupload Imagefield Widget, we were able to rename, compress, size, and upload over 2,100 high quality photographs in a short amount of time. Then, in less than two days we uploaded 167 articles. The photos are now on display in organized galleries throughout the site while the articles are viewable in attractive overlays. And thanks to Boost, pages load incredibly fast even though we're using GoDaddy shared hosting.
Total success.
Why Drupal was chosen
We chose Drupal because it perfectly matched our needs for www.hopkinsco.com: a reliable framework for managing content, excellent image gallery integration, fast performance with Boost, and a vibrant community.
Technical Specifications
Key modules/theme/distribution used:
Views
Views is required to query the database and was essential for organizing and displaying content.
Boost
Because our users would be browsing our architecture website mostly to enjoy viewing the architectural photos, we knew it was essential that everything loaded quickly. People leave if they have to wait between page loads, even if the wait is only a couple of seconds. Boost speeds up load times by caching static HTML pages for anonymous users (some have measured remarkable increases in performance).
Because our site frequently fetches photographs, the site wouldn't have been possible in its current form without Boost. It would have been far too slow.
Colorbox, Lightbox, & Galleria
Our fixed 3-panel theme physically restricted our main content area. This meant that we would want to serve our project images and press articles in an overlay (otherwise the presentation would be too small). We initially chose Lightbox but then switched to Colorbox. Colorbox preloads the images, which is a performance boost in our case, and more importantly, using Colorbox we were able to call the project photos from the View (i.e., without actually navigating to the node's page). Here is an example. This method provides for a better user experience because the user can browse projects of a similar style without being hit by new page loads.
We used Lightbox2 to present press articles. For each article we embedded a customized Galleria theme for the accompanying images.
Display Suite & Display Suite Search
Display Suite is a wonderful tool that enhances the designer's ability to control the output of a standard node. We also enjoyed using Display Suite Search as it allowed us to group content for a better search experience (for example). A special thanks to swentel for his help.
Easy Breadcrumb
Easy Breadcrumb is a wonderfully simple module that generates breadcrumbs based on the current page's URL construction (requires Pathauto and Clean URLs).
Multiupload Imagefield Widget
Multiupload Imagefield Widget probably saved us weeks worth of work. With Multiupload Imagefield Widget we could upload 50 large images at a time. If something was wrong (e.g. an image failed to load), we could delete and retry without breaking a sweat.
Framework (theme)
A good starting point for building our theme.
