Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Building in the buff

Parent Feed: 

Steve Fisher and I have talked about “designing in the open” on our Using Blue video podcast. The current design on that website is a work in progress; as we figure out how users are interacting with the content, we’ll tweak and refine the design. The concept is particularly useful in combating “the perfect is the enemy of the good.”

With my personal website, I’d like to extend the designing in the open concept right down to the roots. This site needs to be upgraded to Drupal 7, so I’ve decided to document and illustrate the entire process of rebooting my website.

This will not be a simple upgrade. I’ll be re-thinking the purpose and goals of my site and rebuilding it from the ground up. And I’ll be attempting to incorporate a myriad of design principles and best practices as I go.

  • Drupal 7 upgrade process
  • Content strategy
  • HTML5
  • Sass
  • Zen 7.x-5.x
  • Design techniques in this order: typography, color, composition
  • Mobile first
  • Responsive Design
  • Flexible grids
  • Flexible images + Drupal magic
  • Front-end performance

I’ve actually been meaning to re-design my site since reading Mark Boulton’s Designing for the Web almost two years ago. But, if you’ve listened to Episode 3 of Using Blue, you’ll already know that I think the web is about to undergo a profound shift in the way we build sites. So now’s the time to stop listening and discussing and to start building and discussing.

Sounds good, but what’s with the crappy design?

Some of you are asking “Why should I bother following this discussion when your site looks like a time traveler from Netscape 1.0?” A fair question, actually.

Most designers would be horrified to present something so unpolished and lacking in any good design principles. (And to add insult to injury for many designers, I’ve added Photoshop-nauseu-inducing blue guide lines to the background.) But I am unafraid. Or rather, I’m shameless.

The current “design” is a mixture of:

  1. Browser defaults
  2. Drupal 7 defaults
  3. Zen 7.x-5.x-dev defaults
  4. A very minimally tweaked Zen sub-theme (Adding support for my blog posts’ title/tagline combo.)

Since I’ve had a hand in creating many of the defaults in Drupal 7 and in Zen, I should own them.

The markup and sytling you currently see is the Pǔ (樸), or the “uncarved block”. It has no right or wrong, no beauty or ugliness. It is markup in the receptive state, ready to become.

Or to put it in site builder terminology: One of the purposes of Drupal’s and Zen’s default markup and CSS is to be easy to alter and extend. And to be a reasonable starting point. But it’s just a starting point, you will need to alter it to meet the needs of your site.

What’s next?

As you can see from the site, I’ve already done some of the work. In fact, you’re looking at a brand spankin’ new Drupal 7 site. The next post in this series will describe the upgrade process I used to get my site off of Drupal 6.

When are you rebooting?

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web