An Intro to Terrain - The Hexagon-Based Responsive Starter Theme
5 min read
Background Reading
The purpose of this post isn't to explain the concept of responsive design. There are many great resources out there that already do this, most notably Ethan Marcotte's article on A List Apart. Or better yet, read the book; it's a quick read and it's well worth it.
Nor is it my aim to debate the merits of responsive design. I'm already convinced that this approach is beneficial, and, again, there are so many voices in the community arguing this point that I don't feel the need to chime in.
Instead, this post will discuss Terrain, a specific Hexagon-based implementation of responsive design in Drupal.
The Concept
Both in principle and in practice, I don't like doing the same thing twice. Why add this snippet of code to every new theme I create?
img, iframe, video, embed { max-width: 100%; }
On one hand, every design is unique, and that is especially true when designing for multiple viewports and browser capabilities. Because of this, "some recommend against using a base theme at all". On the other hand, there is a set of design elements that can be generalized out to most responsive designs. In Terrain, these elements are:
- Larger links for smaller viewports, making links easier to click on smaller touch devices
- Max-width settings on images and other media
- A Fluid grid
- Single column layout on smaller viewports
- Larger base font on larger viewports
- Initial-scale settings to fix automatic resizing
I've found that starting out with these basic elements saves time when creating a new responsive theme. And with a starter theme in place for Terrain, it's easy to tailor the theme to your specific design.
This theme is also meant to give users a quick start to responsive design. Fire it up, without changing any configuration settings, and you have a simple, usable, 100% responsive theme.
Explaining Our Decisions
Why doesn't Terrain "respond" in Internet Explorer?
Simply put, we made a deliberate decision not to implement IE support, despite the availability of javascript libraries such as adapt.js and respond.js that were created for this purpose.
To borrow a quote from Jeffrey Zeldman's "To Hell With Bad Browsers":
For years, we’ve been taught to be good little web designers, building sites that work in browsers that don’t. Each site we build the old-fashioned way becomes one more dung heap of bad code, one more web destination that will eventually stop working as browsers and standards evolve.
The longer we do it, the more doomed sites proliferate. Thousands of new sites premiere every day. Most of them are built to support bad browsers intead of standards. It’s an epidemic. Enough already. We finally have good browsers. Let’s use them.
Even though this article was published in 2001, it still accurately summarizes my view on non-standards-compliant browsers. This doesn't mean Terrain will be unusable or ugly on Internet Explorer 8 and below, it just means that IE8- won't have the benefit of being able to utilize some of the responsive features, i.e. progressive enhancement for more capable browsers.
Why did you choose a fluid grid / responsive approach (as opposed to adaptive)?
From an ideological perspective, I wanted my designs to be able to truly respond to their environments, as opposed to creating 3-5 similar designs to "fit" different classes of device. This approach has several real-world advantages, from future-proofing against new sizes of tablets and other devices, to maximizing the use of (very) limited screen space on smartphones.
Of course there are also downsides with this method, like how much control you might have to concede over your pixel-perfect design. So if having that kind of control over your design is important to you or your project, Terrain might not be a good fit.
Why is Terrain based on Hexagon?
If you haven't heard of Hexagon, I highly suggest you go download it and try it out. Hexagon is a powerful base theme by the brilliant Joon Park (dvessel), with features like:
- Built-in plugin system, with available plugins for Accessible Tabs and Accessible Accordions regions, region grouping, 960.gs, module compatibility, smarter styles, and more
- Granular separation of files, such as variable preprocess functions
- Better file caching and overrides
Building on this framework means Terrain can utilize all of Hexagon's features, while itself staying simple and lean.
Why does Drupal need another responsive starter theme?
Like most projects that appear to duplicate functionality, Terrain uses a slightly different approach. None of the responsive starter themes we tried quite fit our needs, so we rolled our own solution. As I mentioned above, we built Terrain to be extremely lean, while still leveraging the functionality of Hexagon.
Future Improvements
The first item on my Terrain to-do list is a 7.x version. A close second is a set of usability improvements, including better documentation, a quickstart guide (for both Terrain and Hexagon), and more helpful comments. Code improvements, such as more grid options and HTML5 support, extensible functionality, such as a responsive slideshow feature, and responsive image support are also coming soon.
Terrain is currently available for download as a 6.x-1.0-alpha1 release on drupal.org.
