design

My DrupalCon San Fransciso session: Grok Drupal (7) Theming

Laura Scott — Fri, 19 Feb 2010 15:50:36 +0000

The Way Drupal Theming Was

When I started Drupal theming in 2004, it was all a bit overwhelming. Back then, the core theme engine was something called Xtemplate, and it gave the impression to the n00b themer of being a great big mess. When you looked at the page template, it was one big blob of markup and logic, and it was very hard to figure out to change just about anything. What's more, it seemed to be very brittle: change something and you got the white screen of death.

And thus life was for the themer through Drupal 4.5 and the beginnings of 4.6.

New Drupal Theming Power

Then, in 2005, came the PHPTemplate theme engine, thanks to Adrian Rossouw (now with Development Seed), and the heavens opened up.

Suddenly (well, not suddenly, as it took a lot of work) Drupal templating had a structural logic: a nested system that simplified the clutter, gave us defined variables to work with, and provided the basis for extending the system. This was really really cool — so cool that it immediately became the theme engine of choise, and, with Drupal 4.7, it became the theme engine for Drupal core.

I was so excited about it, I did my first Drupal conference presentation on it, at OSCMS 2007 at the Yahoo! campus in Sunnyvale. (It was part of a larger topic of overriding display upon which I collaborated with Greg Knaddison and Ezra Barnett Gildesgame, now of Growing Venture Solutions. The PDF of my slides are available here, though they're pretty outdated now.)

Since then the Drupal theming system has evolved and improved. There are a lot of nifty techniques, tricks, best practices that are available to the themer. What's essential is having a good understanding of the underlying architecture, because that's how you can figure out where to look, how to go about making the changes you want to make the theme yours.

No PHP knowledge is required ... beyond knowing not to muck with what's between the <?PHP ... ?> tags. Of course, knowing some PHP can help. But you can also pick up the basics as you go, if you want to delve into the coded bits.

Learning Drupal Theming in 2010

My session proposed for DrupalCon SF on Drupal theming basics brings a comprehensive look at the Drupal theming system and how the front-end developer new to Drupal can take charge of the output by taking advantage of what Drupal gives you.

You won't come out an expert — that would be a ridiculous promise — but you will come out able to start rocking your own themes. You will have a solid understanding how the Drupal theme is structured, how the various templates work together, how to define regions, how to add your own targeted CSS files and scripts, use of subthemes, some good base themes to work from, how to do custom overrides of obscure, quirky or persnickety output using preprocess ... and you'll grok theming in such a way that even if you don't know how to do something, you'll know how to go about figuring it out, where to look, what to change, etc.

And because we're about to enter the age of Drupal 7, this presentation will be about these things for Drupal 7 (with some notes on how things have changed from Drupal 6). So this session could also be of interest to the experienced Drupal themer who hasn't had a chance to delve much into Drupal 7 yet.

Session voting is now open for DrupalCon SF, so if you think this session sounds helpful to you, or would be of use to the several hundred people new to Drupal who are expected to attend, please vote for my session, "Grok Drupal (7) Theming".

Thanks!

Somewhere over Garland's rainbow

Laura Scott — Mon, 14 Dec 2009 21:56:02 +0000

Garland has been a good thing for Drupal, overall, mainly for the color module. Anyone remember what it replaced in Drupal core? Yeah, it was pretty ugly. Context is important. So even though Garland is something of a front-end developer's nightmare, it has its purpose for the new Drupal user wanting to do at least a modicum of customization to the site's look, without resorting to coding.

And it has served its purpose here. I leaned on Garland (or actually her fixed-width daughter, Minelli) for my blog here for many months ... maybe more than a year. I honestly don't recall. It was since I upgraded to Drupal 6, when I didn't have time to work up a new theme. Garland gave me something so at least I could present the content here (such as it is).

But thanks to the fabulous NineSixty theme, I was able to whip something together yesterday afternoon — the theme you are seeing right here on rarepattern.com. That's right, it took me just one afternoon, even though I was hand-coding a few templates. NineSixty made it all so easy!

I had been designing using the 960 grid for quite some time now, but I had never employed the Ninesixty Drupal theme for implementation before. After hearing all the buzz at Design 4 Drupal Boston 2009, I was definitely curious to try it out. Now was my chance.

My own prior themes for rarepattern had been pretty hacky — quick throw-togethers with plenty of shortcuts. With NineSixty, I spent less time and resorted to fewer hacks. I still have some extraneous styles lurking, and of course there's the usual mark-up excess of some Drupal modules like CCK, but this was about quick implementation, with the emphasis on quick.

One of the beauties of NineSixty is that your page layout mark-up and CSS are pretty much already done. You actually accomplish most of your own layout adjustments directly in your page.tpl.php template. Just copy NineSixty's own into your own theme folder — the folder you created to make a child theme of NineSixty — and edit the classes on the various regions.

grid-8 means 8 grid columns wide

prefix-1 means 1 empty grid column before

suffix-2 means 1 empty grid column after

And there's more — push-x and pull-x, for example — to give you all kinds of power. Just change the classes assigned to each region, and your page falls into place.

The rest is just "skinning."

Drupal 7 freeze means time for a new tag: #D7DX

Laura Scott — Mon, 19 Oct 2009 23:08:42 +0000

Yeah? Maybe?

[update: maybe not. see comments.]

#D7UX [Tweeted] is about Drupal 7 user experience work.

#D7CX [Tweeted] is about upgrading Drupal contrib modules to stable Drupal 7 releases when Drupal 7 itself is released. Over 100 contributed projects now bear this commitment, which is just awesome!

To me, that leaves #D7DX – a focused effort to get some rockin' Drupal 7 design themes going.

Yes, we have #D4D. And beautiful Drupal 7 themes are part of #D4D. But #D4D is also about Design 4 Drupal events, broader #d4d efforts on Drupal.org, and other design efforts that are happening. But why not a more focused tag, not on making Drupal pretty in general, not on improving the designer's experience in Drupal, but focused just on creating beautiful, semantic, exciting, eye candilicious themes for Drupal 7? For core themes, yes, but also for contrib. All ready and stable by Drupal 7 official release. Now is the time!

I'm writing to myself, here, since for someone who's been working with and designing for Drupal since 2004, I'm very late to the contributed theme party. That has to change.

At any rate, it's an occasion to finally get this blog here out of the Minelli realm. That's a long overdue effort. All I need is a little free time.

Yes.

Tweet Tweet!

On rating Drupal modules ... where

Laura Scott — Mon, 17 Mar 2008 00:04:08 +0000

Harry Slaughter recognizes the need for some sort of evaluation system for the huge number of Drupal modules available on Drupal.org. However, I feel he gets the diagnosis wrong.

As far as I can tell, the primary reason for not having a rating system for modules is fear. Module developers in particular are concerned with the fairness of ratings. They are concerned with "gaming" of ratings. They are concerned that inexperienced or "dumb" end users may unfairly give a bad review of a module simply because they don't understand how to use it. These are all reasonable concerns. But they are concerns shared by other OSS projects as well. Sure you will see "bad" reviews, giving a module the lowest possible rating along with some inane review such as "tis modules sukcs BEWARES" :) But who cares, it's just noise that will be drowned out by valid reviews. It works for other OSS projects, and it can work for Drupal.

It's not fear, it's time and energy. Configuring ratings on Drupal.org takes work -- volunteer work, so far. Regarding ratings, it's also a matter of figuring out the proper metrics for evaluating a module. Some measures that come to mind immediately include scalability, ease of use, ease of administration, extensibility (interaction with other modules), as well as aggregated metrics of the status of issues (how long they're open, how many, etc.), number of downloads....

How do you measure that with basic ratings? It's not so easy. Even the architecture and business logic of a ratings system has to be well thought out.

I feel Harry also gets the remedy wrong:

John Forsythe has released what I believe is the first site dedicated to rating and reviewing Drupal modules drupalmodules.com. No doubt this site will be a source of controversy as developers voice their concerns. But we need this resource now.

I encourage my entire audience (hi, mom!) to register at drupalmodules.com and to submit reviews for both your favorite and most hated Drupal contributions. This is a great way for non-techies to contribute to the community. The site is young, and there is naturally a shortage of ratings on the site now, but that will change as the site brings on more users.

Maybe this database will eventually make its way to Drupal.org. For now we can show our support for this type of system by helping build out the database at drupalmodules.com.

I don't think private metrics efforts will get imported into Drupal.org, for risk of skewing the results. And I feel there's some downside to splitting community dialogue into disparate sites scattered around the web. I suppose perhaps it's inevitable -- "scratch your own itch" and all -- but my preference is for Drupal.org-focused efforts.

We're having open discussions about redesigning Drupal.org on groups.drupal.org/drupal-org-redesign-analysis, including implementation of some ratings system.

Angie is co-leader of this effort, and has been putting a lot of energy into making it rock. Kieran is also a leader in this effort, and is looking for team leaders.

I've signed on, as have a number of others. While stop-gap sites that fork and fragment module discussions may have some value to some, I feel we benefit most from gathering the resources of the full community. Rather than build out a remote pantry, let's fix up our own kitchen. Drupal.org is our collective home. Redesign is a lot of work. But as Jack Aubrey would say, "Well, then, there's not a moment to lose!"

Join us!

An Apple Store a day keeps the dreadful designs at bay

Laura Scott — Fri, 25 May 2007 04:12:35 +0000

So we learn from Secret Notes:

Apple's stylish stores and computers, all of which feature unrestricted Internet access, have become such the hang-out and gathering place for MySpace junkies that the powers that be have elected to block the popular social networking site from its systems.

By the close of business Thursday, most Apple retail stores will have implemented the block, designed to reduce the level of loitering at the stores.

More likely Apple's design aesthetic just cannot brook dreadful MySpace page designs appearing within their bricks and mortar.

The horror! The horror!

Nervous time [updated]

Laura Scott — Thu, 08 Mar 2007 15:56:35 +0000

It looks like the session we proposed for the OSCMS Summit has been scheduled for March 22nd at ~~1:45 p.m.~~ 11:30 a.m [?], ~~first~~ last session ~~after~~ before lunch, in "the big room." Even though I feel confident in the topic and the deep knowledge of my co-presenters, I do feel some stage fright. Eeep!

Update: My session on community building was also booked later the same day. That concept from the start is for more of a round table discussion, so I hope people attending this one will come chock full of ideas and experiences to share.

CSS: A house of cards built in code

Laura Scott — Fri, 02 Feb 2007 15:06:56 +0000

And Internet Explorer just loves to knock it over. And that's enough said on that.

You've got to know when to 'no' them

Laura Scott — Sat, 27 Jan 2007 20:15:28 +0000

One of the challenges in project development is dealing with "scope creep" -- the often incremental changes to a project's goals, features and other specifications that can end up increasing the cost and timetable for completion of the project. Boris Mann points to Susan Mernit's excellent thoughts on the subject:

As someone who spent a lot of her career being the cutting-edge, push the mass market troublemaker, having a job being the one who says No, is an interesting experience--but it is also incredibly cool.

Working with a team of smart people who are passionate about the customer experience, the product AND the business objectives is tremendously fun--and sometimes, completely harrowing.

I've learned that No can cover a myriad of things:

* We're not going to do this right now.

* We won't do this ever, not on my watch.

* This isn't ready to be executed.

* You need to think this through more.

* What are you, nuts?

* Oh geeze, I wish we could do this..but we're not going to, not now.

While what Susan says is aimed more at internal R&D projects, Boris notes the same can be true for client work:

Many web projects, the "launch" of a site is just the beginning. *Maybe* the functionality and content are done, on simpler sites, but now it's time to start marketing and promoting the site. In most other cases, there a bunch of items that fall into a staged launch schedule (say "no" for launch and plan it for a later rollout) or in a big "future features" bucket (say "no" to it at first, and dump it in the future features bucket) which can be revisited over time. And of course, feedback from the users of any website should be taken into account when looking at these lists.

Boris says that in general he's "too nice." I can relate. After 15 years of professional work replete with enough of those hard lessons that I really should know better, I still try maybe a bit too hard to be agreeable to client requests for changes.

In comments on Boris' post, Khalid writes:

It starts with "can you add X?" and you say yes. Then "oh, and it would be nice to have Y too!", and you again say yes. Then "we cannot launch without Z! It is a must!", ad nauseum ...

Not only does this burden you, the site builder, but it takes valuable time and effort from basic features, and can delay the launch.

So, saying "No" is a way to prevent this scope creep.

There is always phase 2 ...

Indeed.

Part of this tension arises from the fact that, in the end, we want the project to conform to the client 's desires. After all, it's not our website (or DVD or video), it's the client's, and when the client wants something, the first instinct is to say "okay." And yet, and yet ... when budgets are bumped up and timetables pushed back, quite often nobody is happy. (And it can be especially problematic when you're the developer and you have other projects scheduled and limited resources to apply to them all.)

It goes back to the post to which Susan refers, by Fred Wilson:

There's always the desire to please the customers. But knowing what you are going to do and focusing on it is so critical. Saying yes might seem like no big deal. It's only a few lines of code, right? Wrong. It's never just a few lines of code. So say no as often as you can. It's counter intuitive to the entrepreneur mindset, but it's critical.

I can't say I agree with any categorical rules like this, but I can understand the root of such sentiments. I often find myself stuck between wanting to accommodate the client now vs. wanting to keep the often-complex project on track.

Susan writes:

Yep, I say No a lot more than I used to--but it makes it feel so good when I get to say yes.

I wish I could relish saying "no" as much as Susan does.

[Apologies to Kenny Rogers for the title]

Comcast makes a bad user interface just a bit worse

Laura Scott — Fri, 26 Jan 2007 03:36:50 +0000

It was already bad enough, the kludgy UI that didn't even qualify for GUI, where moving through the channel selections was less like surfing and more like creeping up and down with a walker and orthopedic shoes.

Now, without improving a thing, Comcast has added on-screeen ads at the bottom of each guide screen. Not only that, as you scroll through the ads, the cursor ends up including the ads in the sequence, making it that much harder to go through the guide.

Digital cable is now that much less usable. Just lovely.

Internet Explorer 7, oh dear!

Laura Scott — Thu, 19 Oct 2006 16:31:04 +0000

So far, all the buzz is pretty much about IE7's "new" features like the tabbed browsing that other browsers have had for years now, with some mention of the upcoming Firefox 2 release.

But just wait until websites start breaking. Internet Explorer has always required non-web-standard hacks. The net effect of this has been my thumbnail estimate of 30-40% of loss of productivity in the web design field while developers work around Microsoft's "we don't need no stinkin' standards" attitude and break out the duct tape and chewing gum to make sites that work in every other browser work in IE.

IE7 honors some more web standards, but still has its own quirks -- some new ones, apparently.

Let the kvetching begin!

Dotslash Drupal theme

Laura Scott — Wed, 16 Aug 2006 04:22:28 +0000

Over the past few days, while doing some free-association doodling to clear my head between design work for clients, I came up with this crazy little theme. There's no Reboot occasion. Just needing a change here. I suppose I should add a screenshot to the portfolio, along with others in an overdue update.

Anyway, it seems to work in Firefox, Safari and IE (Win). If it's crazy breaking somewhere, please let me know.

Technorati makeover

Laura Scott — Tue, 25 Jul 2006 16:10:26 +0000

[image: "Technorati's new look", posted by scattered sunshine]

This will take some getting used to....

...but I think I like Technorati's new look. More colorful, less of that ugly green, and a little gel-effect to the graphics. Nice!

As for usability, it's much more personalized, less general, on the home page. But I think that's a good thing.

Redesign Slashdot (...and /. your design?)

Laura Scott — Wed, 26 Apr 2006 23:24:24 +0000

Oh, the irony of posting this on my obscure little blog....

Slashdot is having a competition to redesign the site. Cmdr Taco sets up the criteria so:

I will pick the winner based on a series of arbitrary and random criteria, many of which I will list below. The list is by no means comprehensive, but it should give you a good starting point.

I'm sure there are ultimately things that I'm forgetting. But the key goal here is to create the new look & feel for Slashdot. The winner is the one who creates what gets us the closest to a new site design.

This contest will be highly subjective. Ultimately tho, it falls upon me to select the winner based on arbitrary and subjective factors like aesthetics, as well as more tangible ones like implementability and compatibility.

Guidelines follow. Check it out.

Running 4.7 ... kinda sorta almost

Laura Scott — Sat, 08 Apr 2006 03:12:27 +0000

This is what you call the half-way update. This site is now running Drupal 4.7, but the theme itself continues with the old code. I have more updating to do, but since virtually nobody even sees this blog, well, I suppose it doesn't matter too much at this point. If you come across any bugs here, please let me know. (And yes, I know about the errant navigation link up top.)

When/if I get a break tomorrow from work work work, I'll tinker around some more and make those requisite changes to the theme. And then we can have some more fun with 4.7.

Already I'm loving it. This is a huge update for Drupal!

Sometimes a little redesign is necessary

Laura Scott — Mon, 27 Mar 2006 07:34:01 +0000

I just went and did it: a little css reboot. I just couldn't take the drab look of this place any more. Really, the old theme was an embarrassment. My apologies are offered in advance to those of you on dial-up for whom this page will take some 40 seconds or so to load fully. The graphics should all be there by the time you finish reading this post -- Evelyn Wood graduates excepted.

The theme is powered by phpTemplate. (I'm still running Drupal 4.6 here.) The photograph is mine, shot in Colorado. There are more where that came from on my photoblog.

Lucky for me there's an occasion for this. I saw the CSS Reboot happening last year, but it was a total coincidence that this little redesign is coinciding with the current "event."

Alas, this site is not validating right now. Grrr! Part of the problem -- most of it -- is because I blog using ecto, which doesn't quite generate valid strict xhtml -- or at least it doesn't with the settings I'm using. But I'm sure one or two of the errors are in my Drupal theme template files themselves. (If I were a petty soul, I'd be gratified that I'm getting fewer errors than the CSS Reboot site itself. But I'm only petty enough to mention it without any joy.) I'll try to clean things up before the May 1 deadline. Because even though I did this for myself, the site really should validate.

But it's late. I'm tired. I have work to do tomorrow, and for many tomorrows after that. Hopefully I'll find some time before tomorrow is yesterday.

(Okay, dial-up visitors. By now the background images should have loaded by now. Do you like it?)