Responsive Theming for Drupal (2014)

Chapter 8. Alternative Options and Next Steps

Congratulations! You have now mastered responsive theming for Drupal, right? Hardly. There’s still a lot to learn. The following sections suggest some places you can go from here to continue on your quest.

Study Some More Base Themes

We only talked about three base themes, and all are solid, mature, and popular. But they are by no means the only options. There are many more. Here are a few more you might want to check out:

§ AdaptiveTheme

§ Bootstrap

§ Foundation

§ Sasson

§ Starkish

§ Basic

§ Skeleton

Even this isn’t anywhere near exhaustive. There are dozens, each with their unique pros and cons and differences, and it’s definitely worth the effort spent to find one that matches your preferences closely. But to do that, you’ll need to understand how they differ.

Learn How to Compare Base Themes

Various base themes can be completely different all around, so it’s important to pick one that lines up with your personal preferences. They tend to differ in terms of things like:

§ Opinionated versus minimal

§ Custom grid versus pre-decided grid

§ GUI focused versus code focused

§ CSS versus Sass versus LESS

For example, if you prefer minimal base themes that let you handle most/all of the CSS, you might like Starkish or Zen. If you like LESS instead of Sass, check out Bootstrap. If you like building layouts in the GUI, use Omega 3.x. If you like a solid, feature-rich base theme that tries not to do anything crazy, you might feel at home with AdaptiveTheme.

It’s all about trying them out and going with what sticks.

Become an Expert on Your Base Theme of Choice

Once you’ve found your sweet spot, dive in and dive deep. You should know the basics after doing one or two site builds on it, so at that point it’s time to move on.

I recommend digging through the issue queues to see if you can answer questions that people ask, especially the ones that you yourself don’t already know the answer to, meaning you’ll have to do some research.

Or, even better, find bug reports or feature requests and submit a few patches. This is a good way to get yourself acquainted with the internals of what makes the theme tick. After writing a few patches for it, you usually find yourself with a solid understanding of how it’s built and how all the pieces fit together.

Or, best of all, apply to be a comaintainer of the base theme to see if you can join its dev team and play a part in the decisions and architecture conversations going forward. This is an awesome way to learn from people who are smarter than you and be a part of something you’re passionate about.

Study Up on Some Non-Drupal-Exclusive Responsive Techniques

Obviously, the world of responsive web design is much much bigger than Drupal alone. A lot of the innovation in that world tends to take a while to drip down into Drupal theming, so it’s important to stay current with responsive development as a whole.

To start, get acquainted with the heavy hitters. Here’s a short list that should get you going.

§ “Responsive Web Design” by Ethan Marcotte on A List Apart. This is the 2010 article that started it all.

§ Modernizr

§ HTML5 Boilerplate

§ Sass

§ Compass

§ Bootstrap

§ Foundation

Once you have worked through that list, the next step is to just stay current with new developments. For that, I recommend subscribing to Responsive Design Weekly, which will give you a good snapshot without burning you out.

Know the Alternatives

Responsive isn’t the silver bullet. Different situations call for different solutions, just like any other area of development. If our friend Riley’s site was a fancy interactive budget planner with all the bells and whistles rather than a turnip sauce commerce site, then you’d really be shooting yourself in the foot trying to just scale that down for mobile rather than building something specifically for mobile from the ground up. Remember progressive enhancement versus graceful degradation?

Let’s take a look at some other options for accommodating mobile and tablet users.

Create a Separate Theme

Use a module like Mobile Theme to automatically switch to an alternate theme for mobile users, and you will not be subject to the same confinements that responsive gives you (specifically, the fact that mobile and desktop users have to share the same markup).

There are a few downsides to this. First of all, it means that you more or less have to build two frontends. With two themes comes two sets of block configurations, two sets of templates, two of just about everything. It adds a lot of work.

It also can complicate things if you’re going for high performance. It makes configuration of things like Varnish more difficult. This is because it has to make a choice about what to send the user based on the user agent of the user’s browser, instead of just sending the same response to every anonymous user who requests that URL.

Serve the Desktop Experience

Mobile browsers are good at displaying desktop-oriented sites by zooming out by default and letting the user swipe around from spot to spot. People are used to this and it’s fine in a lot of cases—it’s just not going above and beyond like we as web developers love to do.

That said, this is obviously not the optimal solution and should only be used in cases where budget or time absolutely prevents any kind of work on the mobile/tablet front. It makes sites harder to navigate, it makes certain interactions impossible, it leaves lots of users frustrated, and it’s just all around a bad thing to do if you can help it.

Provide a Mobile App

In some cases, a mobile browser just isn’t going to be able to handle the level of interaction that your site needs. If you have a highly interactive desktop experience that won’t translate well to or perform well on a mobile browser, then a mobile app is a good choice. Just use Drupal as the API with the help of the Services module or the RESTful Web Services module and hit that API from your mobile app.

For example, let’s say you built an awesome interactive budgeting site that works like a champ on desktop browsers, but the interaction (with sliders and drag/drop and all the goodies) just doesn’t work well as a mobile website. It needs to be a native app for users to get the full experience.

The obvious downside is that it forces the user to download and install something (which most users won’t do), but in some cases it’s just the only possible solution to do what the client needs to do.

Be A Student of the Community

The most important skill to be a smart and efficient learner is teaching yourself how to stand on the shoulders of Drupal giants. Learn to devise better Google searches, learn to ask a well-crafted question on IRC or the issue queues, and above all learn to be humble and accept that you are almost never the smartest person in the room. This is a powerful realization and one that can be very rewarding.

Squeeze all the juice you can out of the amazing Drupal theming community, and there is a lot of juice. Just ask Riley!

Colophon

The animal on the cover of Responsive Theming for Drupal is a scissor-tailed Nightjar (Hydropsalis torquata). Sometimes called the fork-tailed Nightjar, this South American bird is known for the males’ elongated tail feathers, which can grow to be twice the size of their bodies. These brown, white, and black feathers are primarily used as display pieces during the mating season; females have short tails that contain no white. During courtship, the males and females find an open patch of ground, and while the females sit and watch, the males open and close their wings rapidly and jump into the air. This causes the tail feathers to whip and snap around and demonstrates the male’s agility and strength.

The range of the scissor-tailed Nightjar extends through many countries in South America, but is most concentrated in Argentina, Brazil, Bolivia, Paraguay, and Peru. They favor forests and woodlands or the cerrado, a kind of savannah with dense vegetation that is found in the more southerly parts of South America. Because they have such a large territory and fairly stable population numbers, this species of bird has been designated “Least Concern” by Birdlife International.

Females can grow up to 30cm long and weigh 70g; the males are slightly smaller. With a primary diet of insects, these birds are experts at snatching moths or beetles out of midair, but will also hunt close to the ground for bugs, ants, crickets, or grasshoppers.

Both sexes contribute to raising the young, but Nightjars do not build any form of nest or structure to protect the eggs, so defending them is an important job. The females lay the eggs directly on the ground and sit on them for 15 days. Males will spread their wings and jump at predators to discourage them, but the female and the clutch still remain vulnerable to attacks. After they are born, chicks stay with their parents for several weeks, and then the breeding pair splits up and will find new partners when the next season arrives.

The cover image is from Johnson’s Natural History. The cover fonts are URW Typewriter and Guardian Sans. The text font is Adobe Minion Pro; the heading font is Adobe Myriad Condensed; and the code font is Dalton Maag’s Ubuntu Mono.