best practices

Chapter Three has a long history of bringing together the rockstars to make wonderful things happen and as participants in the open source process we understand that sometimes making the coolest things takes a community. We have an amazingly vibrant Drupal community in San Francisco - and the surrounding Bay Area - and so it was that we decided to come together to propose something awesome - Drupalcon 2010 in San Francisco.

We have been working hard over the past couple of months - meeting every Wednesday in the Chapter Three office or at Parisoma - to plan, prioritize, and finally propose to the Drupal Association that the next North American Drupalcon be held in late March 2010 in downtown San Francisco at the Moscone Center. It is a lot of work to run a great conference, but we have the right people and the right attitude to produce a wonderful conference in the city we love.

San Francisco is a world class city and a great place to hold a Drupal conference. We are home to Silicon Valley, one of the most vibrant technology communities in the world, and with thousands of web developers, designers, and writers nearby we can guarantee tremendous local buzz and attendance. San Francisco has always been an incubator for startups and new technological innovation and as we look forward, as a Drupal community, to the next few years innovation on the web - what better place to have that conversation that at Drupalcon in San Francisco?

San Francisco is also a center for culture, cuisine, and creativity. Our location offers an ideal combination of cross-pollination with other innovators online, business connections for the expanding Drupal marketplace, and a stimulating and pleasurable experience for conference attendees. The evening party scene will be off the hook and plenty of attention will be paid to hosting events that have more to do with code than cerveza. As the Drupal community grows - and the attendance at Drupalcon is measured in thousands (instead of hundreds) - special care needs to be paid to making sure we maintain our distinctive community feel and give core developers a chance to discuss and plan the next big things for Drupal.

This initiative is only a proposal and the final decision over where Drupalcon North American 2010 will be located is up to the Drupal Association. However, if you are interested in getting involved with our planning process or want to keep up to date with our progress please checkout the proposal website - designed by the wonderful Nica Lorber - and follow us on Twitter.

Perusing the themes available on drupal.org reveals that there are over seven starter themes for Drupal 6 in addition to Zen, the original "starter" theme for Drupal. Starter or "base" themes are a class of themes that seek to provide best-practices starting points for themers to build unique designs. Most include a common set of features necessary for most sites, helping to minimize the repetition of a themer recreating many similar files, markup and code for each project. Also, using the same starting point and similar methods helps with forward maintainability and makes it easier to collaborate within a team.

There are a number of factors that weight ones preferences in a starter theme, such as layout techniques, SEO optimization, accessibility, code/file simplicity, and good documentation and code comments. The fact that there are this many starter themes suggests that many recognize their utility. It also reflects different preferences on what to include in a starter theme. You might also take a look at this Drupal 6.x Starter Theme Comparison table.

It's a daunting task to review this number of themes, and so it would be great to hear from anyone who has had more experience with any of these, as I have relied on Zen for clients projects. All of the themes I review here have table-less layouts, provide IE-specific CSS files, have valid XHTML markup, and run on Drupal 6.

Zen

Created by Jeff Robbins and currently maintained by John Wilkins

Most Drupal heavies are already familiar with the Zen theme. There are many resources that explain the logic behind Zen and how to use it. I will highlight some of Zen's features in order to contrast it with the themes I am reviewing.

Zen is geared toward allowing themers to do nearly all their customization via CSS in a subtheme without having to edit (much) PHP or HTML. Prior to Drupal 6, all sub themes needed to be placed inside the Zen theme folder, but now you can place your subthemes on the same level as the Zen theme folder, a nice new feature. It uses a negative margin technique to achieve a content first source order, which is useful for SEO optimization and accessibility. Advancing the designer-friendly goal further, it offers configurable options in the theme settings for fixed-width or fluid-width layouts and options for the display of the breadcrumb links. In particular, I like its tabs, which utilize the sliding door technique with background images. It also renders edit links in blocks, a great usability feature.

Zen is flexible and feature-rich in order to fit most any scenario. There are a lot of files and code involved, and it can be overwhelming to fully learn how it works inside and out. But with everything Zen provides, many find it much easier to start with it rather than starting from scratch or building on top of an another theme.

Highlights:

• fixed-width or fluid layout
• subtheme framework
• content first source order
• graphical tabs
• block edit links
• accessibility features: skip navigation link
• plenty of CSS selectors and divs for endless theming possibilities 
• theme setting options: fixed-width or fluid-width; formatting for breadcrumb links
• graphical styles for status, warning and error messages
• “blank canvas” appearance

Basic

Created by Steve Krueger

Basic is described as a striped-down version of Zen. It features extensible
CSS classes and IDs, and content-first source order with fixed or fluid width.
Its code and CSS are well documented. It also includes some of Zen's
indispensable features, like tabs and block editing/admin links. The most notable difference is that Basic does not include the subtheme framework of Zen, which not everyone needs for their particular purposes. It also does not offer any special configurable options in the theme settings, as Zen does. One unique and very cool feature to Basic is that it detects the end user's browser and provides different body classes depending on the browser.

Also notable is that it provides reusable CSS classes for handling floating and clearing elements in the style.css file, including .clearleft, .clearright, .clearboth, .floatleft, .floatright and .clearfix. The rest of the css files are neatly placed within a /css sub directory which includes most of the same CSS files as Zen: tabs.css, print.css, layout-fixed.css, layout-liquid.css, ie6.css, ie7.css, plus a main.css intended for more design specific styling. Another feature of the CSS is that there are background colors for each part of the layout so that they stand out during the design process.

In terms of template scaffolding, the node.tpl.php it makes it easy for designers to handle their teaser differently by providing clearly marked area for markup sent to the teaser along side HTML sent to a full page. This can cut down on the number of template files necessary to theme teasers separately, while also not requiring a themer to code any PHP.

Highlights:

• fixed-width or fluid layout
• content first source order
• graphical tabs
• block edit links
• accessibility features: skip navigation link
• plenty of CSS selectors and divs for endless theming possibilities
• reusable classes for floating and clearing boxes

Beginning

Created by Robin of biboo.net

Beginning has a centered fixed width layout supporting one, two and no sidebars. It uses negative margins for a content-first source order. It boasts 10 regions, with all the usual suspects, plus three additional 300px wide footer regions that sit three in a row. It also duplicates the display of primary links at the bottom of the page. It has nicely themed status, error and warning messages, with graphics for each, similar to the Zen theme.

A few marks against it: in page.tpl.php there is some HTML inside of PHP,
which is not usually recommended as it makes it more difficult to read the HTML. Also it's missing "skip navigation" links in page.tpl.php, necessary for accessibility. Also, it does not allow for the logo and site name and/or site slogan to appear simultaneously.

Highlights:

• fixed-width centered layout
• content first source order
• accessibility features: skip navigation link
• graphical styles for status, warning and error messages
• three additional parallel 300px wide footer regions

Blueprint

Created by Theodore Serbinski

Blueprint uses the Blueprint CSS framework, which offers a CSS based grid system, a starting point for styling where pre-defined selectors make layout and box elements line up, including font and blocks of text. Many prefer and highly recommend the use of a CSS framework.

I like the light styling on form elements. One unusual thing I noticed is that the names of CSS selectors for all the layout elements are defined inside template.php. So in page.tpl.php the sidebar div will have a print $left_classes variable where the exact names of the classes will be defined in template.php. I do not see any improvements for this arrangement and would make this theme more difficult for designers to use. It would be nice if this theme had skip navigation links for accessibility.

Highlights:

• fixed-width centered layout
• utilizes Blueprint CSS framework
• block edit links
• “blank canvas” appearance

Framework

Created by Andre Griffin

Framework is a solid theme that has a simple code, file structure and layout techniques. It's a fixed width theme that supports one, two and three columns. It also has good documentation through out the code. The CSS is contained it a single well organized and commented style.css file, which includes an proximate pixel font size to em font size table. What a useful resource to in the CSS file! Unlike Zen, it does not use the negative margins to accomplish a content first source order, which may appeal to anyone who finds that the added complexity of the negative margin technique is not always worth its benefits.

There is a bit of color in this theme, and it includes special styling of admin pages, which I find easy on the eyes. There is a function to apply even/odd classes to menu lists. The layout and content has a bare minimum of divs. So if, for example, you wanted to add rounded corners to the design, there are not quite enough divs available for that.  A couple marks against it are that in the page.tpl.php it has a bit of HTML inside of PHP and it does not have the "skip navigation" link in the source for accessibility.

Highlights:

• centered fixed-width layout
• content first source order
• basic floats for multi-column layout
• graphical styles for status, warning and error messages
• three additional parallel 300px wide footer regions

Flexible

Created by Steve Lockwood

This theme has minimal CSS styling, but offers a flexible-width or liquid layout and features configurable accessibility options. It hooks into the theme settings API to enable the theme to offer users the option to switch the page layout from two or three column layout to a linear layout, increase the font sizes and switch between color schemes. It also gives you the option to move these font, color scheme and layout switchers to any block region.

Flexible also provides configurable rounded corner styles through the theme settings for most elements of the page. This feature does complicates the page.tpl.php with a bit more PHP code and adds a separate folder for each rounded corner style with its own images and CSS file. Depending on one's preferences this may or may not be desirable. The theme's settings options also allows you to add classes to specific blocks, specify additional style sheets and add inline styles that will apply to all pages. All in all, an impressive amount of customization that can be made through configuration. Themers looking to explore the settings API should start here for a good example.

Highlights:

• fixed-width or liquid layout
• accessibility features: skip content and skip navigation links; configurable options for providing users with the ability to adjust font size and color scheme
• graphical styled status, warning and error messages
• lots of options via the theme settings API

Foundation

Created by Rowan Kerr

This is a really simple "blank canvas" starter theme with clean code and CSS that is well commented. It's similar to Framework, but without the even/odd selectors on menu lists and with less colorized styles. The only thing that I would say is missing is a "skip navigation" link.

Highlights:

• liquid layout
• "blank canvas" appearance
• basic floats for multi-column layout
• clean easy to read code/markup

Genesis

Created by Jeff Burnz

Genesis is most comparable to Zen. It uses negative margin for the content first layout and has a sub theming framework. It also has Zen'z tabs, and admin block editing links. The sub themes have many empty CSS selectors setup. The project page provides video tutorials on how to get a sub theme up and running as well as how to use Firebug for fast prototyping of styles. It offers the easy ability to select from seven different layouts by changing the ID selector on the body tag in page.tpl.php.

The main differences I can find from Zen is that Genesis does not offer configurable options in the theme settings. It also organizes it's 10 CSS files into a /css sub-folder with instructions on how to select which CSS files to use. Alternatively it is possible to minimize the number of CSS files used in the theme by selecting all-in-one.css file, which aggregates the CSS of all the other files (which is useful when dealing with the 31 CSS file limit with Internet Explorer). It also places the code for IE specific CSS in page.tpl.php. One thing missing is a skip navigation link.

Highlights:

• fixed-width or fluid layout
• subtheme framework
• content first source order
• graphical tabs
• block edit links
• nice amount of CSS selectors and divs for many theming possibilities
• "blank canvas" appearance
• clean easy to read code/markup

Today we're proud to have our showcase case study of Chapter Three's work on Moblin.org posted to the Drupal.org frontpage!

This was one of the more interesting and fun projects we worked on in 2008, thanks in part to our excellent collaborators at Intel, the awesomeness that is Drupal 6, and the close-to-our-hearts use-case of helping an open-source developer community create its home on the web.

I'd posted previously about this project as it featured a new release of the usability-boosting menutrails module, and we'll be sure to add it to our portfolio soon as well, but I wanted to highlight the case-study, because it gives what I consider to be a really great overview of how the project worked.

Also, I sure doesn't hurt that we got some positive reviews from the Moblin team on the project:

"Working with Chapter Three was great! They understood the development workflow perfectly and accommodated our needs to handle the theming and IA of the site. Add to this the short timeline and last minute changes they put up with. One area that Chapter Three really helped was setting up the development environment for us. This has proved invaluable to managing the site and pushing new features."

--Michael Shaver, Intel

Michael and I will both be keeping an eye on the Drupal.org post, so feel free to drop comments and questions there, and we'll respond as quickly as possible.

We live in a very insecure digital world where it is very possible for those unsavory elements of our society to spy, sniff, inject, and otherwise interfere with the work we do on our computers.

In real terms the odds of anything particular bad happening to any of us while we build Drupal websites and sell awesome fixies is low, as a matter of best practices and general sanity here are a few things you can do to keep your local workstation or laptop a little more secure.

1.) Make sure to use a secure/encrypted session to the company email.

There are generally two ways you can access your webmail account (see below for examples from our company) and while they look and work the same way there are critical differences. If you use the normal "HTTP" connection, the emails you are sending and receiving can be snooped/hijacked by anyone on your same wifi or cable modem network. You must use "HTTPS" to have a secure/encrypted session to the email provider making it more difficult to snoop on your traffic.

HTTP - http://mail.google.com/a/chapterthreellc.com (bad - dont use this)
HTTPS - https://mail.google.com/a/chapterthreellc.com (good - use this)

2.) Be aware that IRC channels are often *not* secure (same goes for private messages through IRC)

The IRC network as a whole is not encrypted and conversations and passwords that flow through it can be easily snooped and recorded. This is true not only for people on your local network, but also for server operators and people with some smart masking/spoofing skills. IRC is often full of very shady people. In general, IRC should not be used to communicate sensitive information or server passwords.

3.) Securely communicate with your colleagues and clients using AIM *with* the OTR

The best way to discuss sensitive topics or share server/login credentials is through AIM (AOL Instant Messenger) using a plugin called OTR (Off the Record). If both users have this plugin, their communication is encrypted and cannot be read by anyone else. Without this plugin, anyone can read your messages and all data goes through the AOL main network to be relayed out....

Main OTR Page: http://www.cypherpunks.ca/otr/
Adium - http://www.adiumx.com/ (included by default)
iChat - http://chris.milbert.com/AIM_Encryption/#MacOTR
Pidgeon/GAIM - http://www.cypherpunks.ca/otr/README-pidgin-otr-3.2.0.txt and http://www.cypherpunks.ca/otr/binaries/windows/pidgin-otr-3.2.0-1.exe
Trillian - http://trillianotr.kittyfox.net/downloads.php

4.) Encrypt Your Harddrive

There are lots of pieces of sensitive data on your harddrive - from server passwords to saved emails and logged IRC/AIM chats - that should be protected. The best way to protect this data, of course, is to keep your laptop under your control, but if the laptop is stolen or misplaced bad things can happen. A very simple solution is to encrypt your user directory so others cannot read that data (even if they steal your computer).

OSX: http://www.youtube.com/watch?v=VQ9HQwGC_64
Windows: http://www.youtube.com/watch?v=coAMTC7uFxA or http://www.youtube.com/watch?v=-8YTaBVB7f0

5.) Consider Locking Your User Session When You Leave

Along the same lines as encrypting your harddrive, its helpful to also "lock" your computer session when you are not using it. This is less important in the office or a trusted work space, but if you have sketchy friends or are in a public place locking your computer will prevent others from stealing your data or pretending to be you.

OSX: http://technology.cca.edu/support/knowledgebase/index.php?article=24#mac
Windows: http://technology.cca.edu/support/knowledgebase/index.php?article=24#Win...

There comes a time in the life of every young child when begin to dress yourself. No longer are you content with the dorky collared shirt your mother laid out for you each morning or the matching shoes you and your siblings wore because it was just easier that way. Instead, you yearn for a little class, a little flash, and for the older kids some san francisco style.

In this spirit, for our first year and a half of doing business, Chapter Three has rolled with a functional and utilitarian website design created by, well, Josh's mother. A great graphic designer in her own right, Josh's mother helped us with an initial design and it helped kick off our successful business.

However, with no disrespect to Jeremy Bentham or Josh's mother, we recently put our collective heads together with the inspired graphic artist Monica Katzenell and are launching a new website. The new design is a little sleeker and gives a lot more information throughout the site about who we are as a company, the projects we have done, and the way we have participated in the Drupal community.

To make it all happen, on a technical level we make moderately liberal use of the Drupal block system and created several of our pages with the soon to be dominate Drupal content layout system called Panels module. Much of the image resizing is done through Imagecache and there is some neat integration with the Bio Module to generate our About Page listing and store biographical about everyone who works for the company.

Now that we are all dressed up, anyone want to dance?

I simply cannot recommend highly enough Clay Shirky's new book, Here Comes Everybody: The Power of Organizing Without Organizations. He's been the "smartest guy in the room" when it comes to the internets for a while now, resisting the lure of hype while still appreciated the revolutionary changes we're all living through.

This particular passage struck me as an excellent summation of what Chapter Three is all about:

We are plainly witnessing a restructuring of the media businesses, but their suffering is not unique, it's prophetic. All businesses are media businesses, because whatever else they do, all businesses rely on the managing of information for two audiences -- employees and the world. The increase in the power of both individuals and groups, outside traditional organizational structures, is unprecedented. Many institutions we rely on today will not survive this change without significant alteration, and the more an institution or industry relies on information as its core product, the greater and more complete the change will be.

One of Shirky's overarching points is that any specific technology is only a small part of the equation. What's critical is that the technology is ubiquitous to the point of invisibility (as the web is rapidly becoming), and that new and helpful social practices emerge which make advantageous use of the new capabilities the technology offers.

Being a part of the Drupal community is fascinating in this respect because we are at once participating in an astounding phenomena (the peer-based production of an amazingly useful piece of software) and helping others use that tool, and the methods used to make the tool itself to pursue their objectives.

It's a jungle out here, but I wouldn't have it any other way.

With the release of Drupal 6.0, there have been major steps forward in the theme layer. Two of the most important are the standardization of template files and their associated pre-process functions, and the addition of theme.info files which allow the overriding of whole core stylesheets.

This Sunday I gave a 45 minute overview lesson on these topics for The Drupal Dojo. There will be more later, but in brief I think with this core advance, all that remains for Drupal to be a truly designer-friendly platform is better documentation of best practices.

Check out the screencast for details.

Much like the parent who gives their child the keys to the family car, there comes a time in our client engagements where we set up administrative accounts for our clients to begin managing their own content. At Chapter Three we call this Capacity Building and try to make the process as smooth and intuitive as possible. The problem is the default Drupal administration interface makes this difficult.

In general, the Drupal administration navigation menu (see right) is simply too complex to be really intuitive. There are all sorts of options (read noise) available that have little relevance to the particular administration needs of our clients. Some of this menu can be distilled down through permissioning, but with general permission categories in Drupal like "access administration pages" its not possible to remove all the options. Plus, many of the most relevant options are buried several layers deep in the navigation. Its unlikely our clients will regularly find them on their own.

In the past we have build a static "administration page" where we listed the major administration pages and provided links to each, but with our latest project (that had a number of different editors and content managers who all needed to update the site) we wanted to improve our business practices and give our clients a better way to manage their website. The solution we came up with was to provide a constantly present top menu that would only appear for site administrators and would allow them easy access to their specific administration options in a nice drop down menu. We populated the menu through the Drupal menu system with the 20 or so administration pages that were needed to manage the site. This menu display was accomplished by using the SimpleMenu module and can be seen below.

To manage the individual pieces of content on the site we built one, general purpose "Content Management View" using the wonderful Views module. The idea here is to provide a consistent UI to manage each type of content and to allow site administrators to filter, search, and sort that content for their editorial and review purposes. Setting this interface up as a View allows us a lot of flexibility later to add additional administrative options and support different content types.

The end goal is to make it as easy as possible for our clients to easily work with the Drupal CMS and to manage their specific content. This kind of system is something we intend to refine and deploy in future sites.

Las Vegas casino magnet Steve Wynn was rumored to say that Defcon was "a dangerous and chaotic mess" that will "never set foot in one of my hotels". I guess his comments are understandable. During one conference the attendees reprogrammed the hotel elevators to stop on every floor and rerouted the pay per view channel to the casino's internal CCTV. Oh well, he probably said the same thing about Britney Spears after kicking her out of his hotel.

While Josh was out wowing the liberal bloggers this year, I was in Las Vegas with a good mix of 6000 reverse engineers, computer security professionals, federal agents, academics, and freelance hackers. There were solid talks about intellectual property law, the Tor Project, cool WIFI tricks, and other cool topics. Plus, lockpicking and WIFI villages and a couple off the hook parties.

At such a cool, security focused event it was no surprise that Drupal made an apperance. Outside of the peer to peer praise received when I introduced myself as doing Drupal development, the internal conference Defcon TV system (dctv.defcon.org), set up by RantMedia, was running Drupal. If you consider Drupal's track record for vulnerabilities against other CMS systems you can see why. Especially with the latest security release of Drupal 5.2, the robust Security Team and the policy of full disclosure, Drupal is poised to be the "most secure CMS".

Earlier this week I spent an afternoon setting up and configuring WYSIWYG editing for a client's website. Although at Chapter Three we are big fans of HTML Literacy, we realize that many users would feel more comfortable in a WYSIWYG environment. We did a little brainstorming and came up with some basic recommendations to make TinyMCE work better.

1.) Keep the Interface Simple - TinyMCE out of the box has all of its bells and whistles displayed which is in some ways cool - TinyMCE can do a lot. However, much like the selection at Old Country Buffet, sometimes too many options can be confusing and hard to narrow down. There is a temptation to leave options there that "may be useful". Instead, we first started by disabling all of the options and then selectively enabling only the options we really needed. This ended up being just the bold, italics, underline, font size, and ordered list buttons. Keep it simple or you will end up showing your users something monstrous like:

Bad:

Good:

2.) Resizing Good, Path Bad - TinyMCE allows for textareas to be resizable and this is a wonderful feature. It gives users more space to work and is far less annoying than having to compose a page long post by scrolling through a four line tall textarea. The problem is that in order to enable this feature in TinyMCE you also need to turn on the "Path Display" option. This feature allows users to see their current depth and path in the HTML code and can be useful in some cases - including building HTML literacy, but in most cases its both cluttering and confusing. To remove it and keep the resizing option, we simply enabled them both and then used CSS to hide the information:

.mceStatusbarPathText { visibility: hidden; }

3.) HTML Literacy is Still a Good Thing - Even though the user is working in a WYSIWYG environment, allowing the user the ability to be exposed to and maybe even edit the HTML code can be a really good thing. TinyMCE allows for the creation of a "HTML" button that creates (in a separate window) a rendering of the textareas HTML content and allows the user to edit the code. Now, it is best to keep the interface simple, but helping to educate users about HTML can be a really good step to improved HTML literacy.

4.) Only Use TinyMCE When You Have To - The easiest way to simplify the way TinyMCE is used on your site is to only use it in cases where you really need WYSIWYG editing capabilities. This is, unfortunately, a little tricky to do in Drupal since the Drupal implementation of TinyMCE only allows the display of WYSIWYG editing on a per page basis instead of a per field basis. This is typically not a problem since most pages just have one textarea, but if you have a page (say the editing of a particular node) with multiple textareas, but only want TinyMCE on one or two of them, its sort of tricky how to do it.

One possible solution - that we ended up using - is to use a theme override for the TinyMCE theme to enable or disable textareas based on name. This solution works in tandem with the built in display controls and simply adds the finer grain control needed. In this example, we have only enabled TinyMCE to show on node/* pages but have four different textfields that we do not want TinyMCE to show on. To accomplish this we use the following theme override: