How the Drupal CMS makes web layout easy

Here’s my problem. I want a web site but I don’t know how it should be layed out. I am a web designer and programmer, so my first instinct is – do it myself. Problem is I don’t know what the end product should be, which is always a bad starting point for a project. You always want to start with clear instructions so you don’t waste time (which is money). Well, I had no instructions to myself and I wasted a lot of time trying to design a web site that I could be satisfied with. Every little change that I thought was a step in the right direction ended up taking too much time. It wasn’t quick enough to try new ideas. I was having to settle because of all the effort that had to go into any change. For years I settled. Well now it’s time to be satisfied.

Here is the solution. By chance I was wanting to explore 3rd party tools just for the sake of knowing what tools are out there. There’s a point at which a programmer says, “there is no way I can design everything and have each thing be great”. I’m going to end up with a lot of little tools that are subpar. I can program great things, but it takes focus. So I’ll focus on my few things, let other people do the rest. Hello open source projects.

Besides me needing a better way, customers also want a better way. Customers have wanted to update their own site for a long time. I don’t want to write a tool for them that’s already been written beyond what I’ve already got. I’ve made some tools for customers to maintain their sites but I don’t have time to add the functionality they should have. There is no formatting except for automatic line breaks, and they can’t change menus or create pages, to say the least. They could only edit pages already existing. Which is actually a lot compared to most situations, but I would have a long way to go to catch up with content management systems that are out there. I knew that much before I even used a CMS.

So I know an open source CMS is something I need to explore. Next question – which one? Off to Google we go. I type “top PHP cms” and get some good ideas. The first is a winner called Joomla. The second is an almost winner called Drupal. I tried Joomla but abandoned it for no reason. Seriously, I downloaded Joomla, installed it, and walked away. When I came back I wanted to try Drupal. Maybe I was just exploring, who knows. Poor Joomla. Don’t worry I’m still your friend. Nevertheless, downloaded Drupal from drupal.org, installed it and started customizing it.

There was actually some installation trouble because I want to use Drupal on a shared host, not my exclusive host. The auto install requires you to change settings that are locked down on most shared hosts. They don’t want one customer ruining the server for everyone else. So I solved that by first installing Drupal on my desktop computer. In my case, a Mac, which has an easy built in web server. Just install MySQL, enable PHP, flip on web sharing in your System Preferences, and off you go. So I did that, proceeded through Drupal’s auto install, and exported the finished files to my remote host, including the database SQL file. I think the database being configured is the main thing that finally gets the site going.

Anyway, from there I start customizing. Days later I was still customizing it. Not because it’s difficult. It’s easy. That’s why I called this “How the Drupal CMS makes web layout easy”. It’s all my little tweaks I make on the way to the perfect layout. Biggest problem – I had no idea what I wanted until I saw it. My ability to see it sooner rather than later was because of a CMS. I would start with one idea, do it, look at it, do something else, look at it, do something else. For days. Eventually I had a layout I liked. If I had tried to do that with hand coded design instead of a CMS, I would still be exploring. Enter CMS. Now the problem is solved. I know what I want. It’s done. I have a layout. Quick.

Let’s not confuse layout with theme. Layout is figuring out where elements should be. With hand coding, that takes forever because each change is a redesign. With Drupal, its a few clicks in the Drupal administration pages. Themes can rearrange things, but themes are mostly a matter of picking colors and fluffy borders. The colors and fluffy borders I was making with photoshop were ok, but that had needed a boost as well. I can do it for someone else, but when it’s for myself it becomes a massive challenge for some reason. Maybe my standards are through the roof. Who knows. Anyway, I settled on a theme. The default theme, for now. It is a fluffy blue background. Not bad. It will do.

When I have an impulse to change it I just go to my Drupal administrative pages, click themes, and click one I like. Done. Changed with a click. No photoshop no redesign. Awesome.

Once the layout is done and the theme is in place, what’s left? Turns out there were some little things. There was a subscription link at the bottom of the page that I couldn’t make the Drupal administration pages take away. There was also the site’s rss feed which was returning the wrong feed. There are a few feeds, and I didn’t want the main one. I wanted my wordpress.com one.

So what did I do? I put on an entry level programmer hat and looked at the PHP code. Turns out, every page’s framework is in a single file. Mine is in my themes folder at themes/garland/page.tpl.php. Edit that file and you’re editing every page. Within that page are a bunch of variables where the content fills in. The variables get filled with content in one of a few other files. It is probably in somewhere in the includes or sites folders.

I made good use of a search utility to jam through these folders to find the right one faster. Dreamweaver did the trick. In that program you can search an entire folder’s file contents, which is what you want. In order for Dreamweaver’s search to dig into a file, that file’s file type has to be in the list on Dreamweaver’s file type preferences screen. Just add the extension you need after that long list of file extensions. The next time you search, it will search those extensions as well. Otherwise it skips the file, which is what you want for, say, a binary image file which is just crammed with data that isn’t at all what we’re looking for. Once you get into a file you were looking for, the basic Find utility comes in handy too. The real thing you are trying to find is at the end of a chain of function calls. The variable name you come in with is only the start of your search.

So eventually after several related searches I honed in on my target, made the change and refreshed. A voila – oh wait – nothing changed. Well, turns out I had caching on, which can speed up production sites, but is probably just potential confusion for development. It was showing me an old copy of the page. So I went into my Drupal preferences and dumped its cache. Then I went back to my home page, refreshed, and the change was apparent. All is well.

So the layout is now squared away. Hurray. That was pretty quick. If I had started out knowing what I wanted it would have been even quicker. What project doesn’t flounder without a plan? Note to self, always have a plan, or be willing to waste time.

So what’s next… content and some branded graphics. For now, branding is simple. Find a picture of myself, scale it down, save it into the themes folder over Drupal’s default logo.png. You may want to rename the default photo incase you want to jump back in time quickly. Maybe you accidentally upload a very wrong picture. You want to step back quick if needed. The size that I liked for my new logo.png was 80 pixels by 80 pixels. Thank you Photoshop for cropping and scaling. I’ll see you when I want to get more serious about branding.

The last thing we’ll talk about is content. What’s a site without it? Once you start adding content, you get to see where it lands, which may change your mind about the layout. That’s what happened to me – of course. I won’t bore you with the details.

Anyway, add content. You can just make a simple page, and add it to the Pages or More Pages menu. Or you can add a link to an existing page in one of these menus.

If you want submenu items, think Books, which is Drupal’s name for them. Books can have as many nested menu items as you like. I knew that my Projects link was going to need submenu items, so I made the Projects link be the top Book node, then I added new book Pages under that for my different projects. One subpage for Programming, another for Art, and so on.

You can also add blog entries. I chose to use Wordpress.com instead of Drupal for my blog, only because I wanted to explore as many free and popular 3rd party utilities as possible, plus I could benefit from joining a community. I’m sure Drupal’s blog is great. But wordpress.com’s community amounts to built in marketing. The community can see your posts without searching for them directly. We can all use as much marketing we can get. I think Drupal keeps its own blogs going and they don’t turn off. That’s fine. I just make sure to not confuse people by exposing them somewhere.

OK well, now you have a new tool in your web design arsenal, or at least your curiousity is peaked. No matter how much we listen, we learn best by doing. So don’t be afraid to put Drupal into use. It’s free, but worth a lot more.

Check out Drupal.org to learn more about that fantastic project.