By now, the Drupal contributed repository grew so big that there are likely multiple solutions to the same problems there. Maybe these solutions solve the tasks with different angles, have slightly different features, but at their core, they aim at solving the same issue. So it is getting harder for site builders to pick the modules they want to use (and drupal.org is planned to offer more tools in helping with the selection). When it comes to core inclusion though, one needs to very clearly define the requirements and meet core goals, such as lean and mean implementation, maintainability and reusability.

With Mark Boulton's and Leisa Reichelt's suggestion to have most of the Drupal administration interface show up in an overlay on top of the public facing webpage, we are again at such technology crossroads. Drupal 6 at least has two contributed modules to implement a similar-looking solution: Popups API and Modal Frame API. Both got their pros when I researched for possible overlay implementations, and frankly, when there are already two modules implemented for the same complex task, why would we start from scratch?

The goals for the core overlay (purposely not called a modal dialog) is to take up most of the window with a dim background on the original page content. The overlay would have a close button on its right side and possibly tabs on top to switch to different subpages (loaded via Ajax or will already be on the same page, but hidden). We don't need the overlay to be moveable or resizable. We don't need to show multiples at once, since it only makes sense to show one. However, the overlay should work well with the header so that when an option is selected, it keeps being active in the header, and the header should work so one can pick another area to work on without first closing the overlay.

For easier evaluation of how we can meet these goals, I've ported both above mentioned modules to Drupal 7 and implemented Drupal 7 user experience "skins" for them. In the case of Popups module, it was a skin which the module already supports via an internal API, with Modal Frame API, it was an actual glue module which mapped elements marked up for being displayed in the overlay to a style similar to what Mark and Leisa suggests. Neither of them is pixel perfect to what is to be done, but the initial goal was to have D7 versions to evaluate and discuss the implementation internals, so we can fix up styling once we picked either one or a third way.

You can find my Popups module port patch at http://drupal.org/node/466732#comment-1681554 and the Modal Frame API port patch at http://drupal.org/node/491224#comment-1703366 but to make all these easier to test with the D7UX header in progress, all this code is available with the glue modules and custom skins in the D7UX code repository. You can try out both by installing with the d7ux install profile and then either turning on the "Popups API" module or the "D7UX overlay look" module. Make sure to only have one of them enabled at once and let Drupal install their dependencies. Switch between the two implementations by switching between the two modules.

Let's go beyond the UI and compare the modules:

We are obviously at crossroads with picking our ways. The Popups module approach already has numerous core patches which were suggested earlier, while Modal Frame API leverages jQuery UI to lessen custom code burden and iframes to avoid colissions in merging HTML documents, which might be more attractive.

What did I miss in my comparison? Did I miss another alternative? What do you think a core solution should look like? jQuery UI to core? Just a targeted custom implementation for our own needs? IFrames or HTML merging? JSON output or overlay specific theming? These are general conceptual questions, so I choose to write a blog post to try and start a conversation instead of using the issue queue, which would be useful for more targeted questions. However, answers to some of the questions infer answers to others. What do you think?

Seeing how Young Hahn, David Rothstein, Paul Lovvik, Charlie Gordon, Daniel F. Kudwien, myself and others work on parts of the Drupal 7 user experience implementation already, it is getting harder to apply all the patches, keep up with their development and get them integrated to work together with various efforts.

At Acquia, among other Drupal 7 UX improvements, we've been working making the overlays work as designed by Mark Boulton and Leisa Reichelt. The plan includes a header with two levels of fixed items, which all invoke overlays (almost full window popups), showing above the current page. Instead of reinventing the wheel, we started working towards porting the existing Popups module to Drupal 7 and implementing the Drupal 7 overlay looks via a skin, so we can leverage the existing work, testing and wisdom from the module.

Due to how hard JS is to debug still with Firebug, we faced some issues, but given that we are over those, we have the basic overlay looks ready and facing some other engineering problems which are pretty much standard with how the Popups module works. For integration purposes (and because our proof of concept version of the header did not look as good), we worked with Young Hahn's header patch. You can find my modifications to that to work with overlays on the issue. While Young's patch does not yet map to the D7UX plan to have a fixed set of top level items and a fixed set of lower level items, redefining the D7 admin information architecture, for working out the overlay, it is pretty good as it is now.

Since we were working on (a) porting Popups module to Drupal 7, (b) create a d7ux skin for it, (c) a header which we did not use in this experiment, and Young Hahn was working on a header which needs a patch and images added, I've decided to pull together a quick Drupal package for your testing pleasure. The distribution includes a D7UX install profile which should be used so that the proper modules are set up. It also includes the latest header patch from Young's issue (which has my popups class modifications) and the images and sprite from there. The ported Popups module and the D7UX skin for it is also included.

While I am searching for the best ways to collaborate on the overlay (and possibly also on the header), so we don't need to work back and forth in issue queues, possibly stepping on each other's toes, I am also sharing the D7UX Popups module theme as a separate package, so those fond of applying patches and adding up images from different sources can keep up with development.

There are some pretty significant known issues with the overlay/popups. The biggest one being that since the overlay page is loaded into the same DOM tree (same HTML document) as the rest of the page, ID collissions can easily apply. If you load up a node edit form on a page with a node edit form, #node-edit will appear twice. Behaviours rightly assume that an HTML ID will ever appear once, so they do not expect this situation. This breaks some behaviors. Also, since Popups modules opens new popups on clicking on new links without closing the previous ones, this can also happen if you open two node forms in the popup in a page view. There are also smaller styling problems (eg. overlays on lower layers move up a few pixels when new popups are opened), but we should focus on the significant issues first.

I am looking at breaking down the Popups module (again) to core patches so its parts can be included in core. That would assume that the basic working of it (loading up new HTML-particles into the same HTML document) can be made work without major issues. The great maintainer of Popups module, Tao Starbow worked on quite a few core patches, but unfortunately those got the fate of the overdebated. The issues were split up, then some of the individual pieces were discussed to be over-generalized and in other areas, the scope of Popups in core was narrowed considerably to some confirm forms. No doubt Tao got burnt out from there.

That was way before Mark and Leisa suggested using the overlay technique for the Drupal 7 administration UI. I hope we can revive and refocus some of the issues and get this effort going faster, so we can focus on usability of the actual admin screens showing up in the overlays. Rendering API, JS and CSS wizards welcome! Look for my upcoming blog post on a plan to get this into core!

Download the full Drupal package to test or download the d7ux-popups-skin only, if you are keen on applying all the patches yourself. Place the skin into the skins directory of Popups module.

My previous blog post entitled On a mission to improve page regions in Drupal 7 outlined how special casing things like custom help settings, the mission statement and footer message make understanding and using Drupal harder and general assumptions not being applicable to set text formats or visibility on such items. Having the somewhat special content region was also another example.

Last spring, I've read a Drupal theming book and was amazed by how things like the search and menu features for themes need special settings and theming while their parallel implementation exist as blocks. I was also deep in improving input formats (which was since then taken on by others) and did a comparison of what is not input format enabled in Drupal. That uncovered even more parallel implementations of things which should basically be blocks.

At Acquia, we are (among other cool things) hard at work to improve the user experience for Drupal 7 and as part of that effort, I am focusing on regions and blocks so that page building can be more unified then ever. You should know where to look to position your content, disable items on the page, set up custom text for pages, etc.

Help settings

I started off with the help settings. Drupal themes have a $help variable and that help text is usually generated by one or more modules. There are two independent user provided settings for help however. One can put admin provided help on top of the user registration and the contact pages. These are implemented as custom settings which add this help to the page in custom ways.

I realized that by making the $help item a region, we can gain certain cool features:

1. You could add custom help to any page you want. Cut out the two one-off settings and let the admin put custom help on any page they want.
2. Use your favorite input format to enter the text with your favorite WYSIWYG editor for it (or without that obviously).
3. The admin could completely disable display of help. Display of help could even be disabled for higher roles (site editors), for whom help might be in the way. Different custom help could be provided for different roles.
4. Admins could provide users with user customization possibility for the help display. This is already supported by Drupal for any block.
5. Custom set help text could be displayed on more then one page (eg. in a site area).

All this without coding, loosing two custom settings and making the help area a region. Pretty cool, heh? Check out the patch which needs a reroll here: http://drupal.org/node/240873

Content region

In Drupal, the main page content is output by appending the blocks put into the content region in this order. There is no way to put stuff above the main page content by default. Many themes worked around this in Drupal 5 and 6 by adding a content_top and a content_bottom region instead, so you can put stuff above and below the main page content. I believe "top" and "bottom" or "above" and "below" are keywords we handle inside the regions system. We move stuff around inside one region to order them. So I suggested we should have one region for content and make the "main page content" a regular looking block instead.

There are obviously some improvements needed to ensure that all themes can accommodate this block and that people cannot easily turn it off. These are being discussed. Patch needing review at http://drupal.org/node/428744

Site mission

This case provided the title hint for the blog post. Mission statement is a setting in Drupal at least in the past half decade. It is configurable on a plain textarea on the site settings page (no input format selection) and is hardwired in themes to show on the front page of the site. Or not at all if the theme customization options have it unchecked.

If we go a bit farther, we see we have a way to put text into a region of the website on one specific page here. Wow, sounds like a highly simplified version of what blocks can do ripped of all the flexibility (even input format selection).

Having mission as a region would allow us cool things like:

1. We can have a mission statement displayed on more then the front page (e.g also on the company team page).
2. We can have the mission statement only displayed somewhere else, but not on the front page (eg. only on the company team page).
3. We can set whatever input format we want so we can even display complex maps for example.
4. We can put more then one block into that region, so dynamic data can be output there via module defined blocks.

This all sounds too good so obviously there are some small drawbacks as well. Discuss in the issue queue: http://drupal.org/node/428800

Even more blocks, even more regions?

If you look at the site and theme settings, a few remaining items pop into your face, which will need attention once we have the above covered:

1. The footer message. This should just be one block among the others in the footer. No reason to make it special whatsoever.
2. Special search feature of themes. This is just a search block themed differently. Sites using this most often not use the regular search block provided by search module. As shown in Mark's and Leisa's video on themes, having a search setting on themes, while search module is not enabled, so you cannot even enable it is disconcerting. If the theme has a special place for the search block, it can expose a search region, where people can put their search block, and that would be themed specially in that region. All block visibility and other settings would apply to this one nicely and it would only ever show up once search module is enabled. Plus it would allow to put alternate search boxes into that region. Blocks exposed by ApacheSolr or any other search module.
3. Special main and secondary menu display of themes. Again, these are *already blocks*. Themes can just theme them differently when they are in their designated regions. Again, less theme settings, more visibility control, being able to swap menus in sections of the sites via other menu blocks, and so on.

I hope I managed to find some people who agree that special settings in site settings and themes should finally go and regions and blocks should take over the stage. They are already well developed and have all the features we need to implement the custom stuff we remove, but at the same time allow for amazingly more. Please help on the above three improvements and then we can move on to even more goodness.

Ps. Many people suggested that relying more on blocks is not good now that blocks module is optional in Drupal 7. Things like Panels are supposed to be able to take over the UI and set the layout for the page in more versatile ways, hence blocks module became optional. I believe that this does not mean that we should keep custom one-off settings around and broken theme settings alive. Also, Panels exposes all the blocks for the page layout setup, so people can just as well use them to set up their page.

I was initially a bit surprised seeing Mark and Leisa running a physical suggestion box in Washington DC for the Drupal 7 user experience rework. After all, we had IRC channels and twitter for the session rooms to discuss presentations, forums and groups to get input and all kinds of nice digital tools to discuss ideas. However, using paper probably made for a good way to actually drive people to the table, get them pull a piece from the stack and write down their suggestion. This allowed Mark and Leisa to engage them in a conversation, get a feel of what they think, and resulted in a better outcome compared to just using all these nifty digital tools.

I've had a very similar experience with the drupal.org redesing on paper. Initially, I had this idea to set up a website with an image annotation tool and get people discuss the wireframes using that. Drupal had a stable module called fotonotes, which mapped the library originally used to build out the Flickr feature to Drupal, but I liked the concept of the image annotate module better. This later one was based on jQuery UI, but had some flaws. So I contacted the author and sent in fixes and test results. As the project page says:

Compared to Fotonotes (another module for placing notes on images), this module uses the latest jQuery (shipped with Drupal 6) and the state of the art jQuery UI module, while Fotonotes is dependent on an old (last updated in 2006) custom JavaScript library.

After all my work put into making this work, I realized we might as well have a better way to bootstrap our work. We were just heading into Drupalcamp Germany in Cologne, the Drupal.org upgrade sprint in Cambridge MA and the Drupal.org redesign sprint in Paris in succession. All these events could use materials to look at and discuss with the drupal.org redesign. I figured that having the wireframes on screen does not allow for all the flexibility that we need.

So I ended up printing out all the pages of the redesign from Mark on my home printer and went on a "world tour" with them. Using the printouts turned out to have a fantastic effect on our productivity, since we could use them in an amazing number of ways:

• In Cologne, we used the printouts to define what kind of major feature areas we need and delegated research to some people. Having been able to see multiple pages at once helped us identify patterns much more easily compared to just staring at pages one by one on screen.
• In Cambridge, we looked at the pages to identify the initial feature set for our Solr rollout and used to target project module improvements so they are implemented with the target features in mind.
• In Paris, the pages were used by designers to discuss remaining tasks, they were used to note problems with missing comment styling elements for example. People picked up pages and run with them to implement landing pages and design elements. We even scored a coffee stain on one of the pages, showing people actually made the mockups of their own.
• Finally (so far), in Washington DC, we were able to sit down with Mark Boulton and discuss all the notes the themers and feature implementors made and got annotations on some of the pages from Mark.

The printed pages were better then just looking at the digital versions, since we could code on our laptops while looking at the printouts, compare different pages, sit around pages and discuss and have all this goodness at our fingertips.

How can the notes on paper get fed into our process? Well, through the sprints, people working on features were there in person, so they could see and absorb all the notes. Since we are more open now with tasks better defined and broken down for a bigger team of contributors, it became important to make note of the diversions we are going to take from the design. Therefore I made scans of the pages we discussed and documented decisions on the redesign implementors group. There were also finer grained themer discussions, which were rolled into the themer TODO list.

The spotlight time for paper in the drupal.org redesign might be over with issue queues and wiki pages taking on, but it was nevertheless a fun time using these printouts so far.

Unfortunately I've arrived late enough in Washington DC for Drupalcon to not be able to go to the Presenting You! Workshop by Emma Jane Hogbin. While I've been on stage in the past 20 years from presenting poems through singing in musicals to doing actual tech presentations, I feel I have some ways to go to improve my stage skills in terms of presentations: both slides and delivery. To that effect, I did manage to go to her presentation with the same title which was put on sometime mid-Drupalcon. One of her points which warranted this blog post was: start now to prepare for the next Drupalcon!

She recalled being singled out for sending in the first proposals for Drupalcon DC and therefore "cheating" on the voting system to get the longest time under voting. However, she points out that the underlying mechanics of Drupalcons are well known. We know a Drupalcon is always coming up (this time in Paris early September). You might have presentation ideas already. So why not start mapping out your message, building your outline and proposal already? As soon as the call for papers will be out, you can post your session and enjoy your well prepared presenter experience.

What happens, if the exact time for Paris turns out to be unsuitable for you? What if the plane ticket prices will go over the roof? Well, you will still be able to find local Drupalcamps and other types of small conferences where you can spread your message. You can even target both presenting at your local events first and then go to show your content off at Drupalcon with even greater confidence. So getting your act together sooner then later might get you even more fame.

Need advice for planning and laying out your slides? I've had the chance to actually sample in real life and consequently buy the Presentation Zen book from Garr Reynolds back when I was in Cambridge MA to work on the Drupal.org upgrade. After reading it, I decided to make the jump and try this "simplified" slide style, and refrain from overwhelming my audience with too much information. Overloading my slides with information was a mistake I believe I made many times before.

Eventually I've driven the Module development kickstart presentation we prepared and delivered with Peter Wolanin and my portion of the Multilingual Drupal panel with the zen approach in mind for Drupalcon Washington DC. With the development slides, there were lots of source code examples to show, so it was hard to apply these principles, however, with my intro to Drupal core multilanguage, I could quickly skim through a huge amount of knowledge with just summarizing the most important details with impressive slides.

Comparing that to the Do It With Drupal slides I had on the same topic (albeit with a significantly bigger scope), my newer slides have a lot less in themselves, but in turn direct the audience to what I have to tell. As Garr points out, a good slideshow should leave the audience with a desire to learn more. The best strategy to achieve that seems to show off the cool stuff and leave off the details for further exploration. While this might sound unfair at first, realistically, telling everything possible to your audience is not gonna work anyway. The reason you have a presentation is to fire up people and not to educate them with all the details you have under your sleeves.

Garr makes the point that if your slides include all the information you are gonna tell (and you gonna tell a lot), then why would you be there at all? If you treat your slides as if they are the handouts for the conference then you are not required in person. People can just read the printout and move on. To have a great presentation you need to engage your audience, you need to make them focus on you and your message. (And after the event, you can still publish your slides with presenter notes included, so people joining in later can still understand some or all of your points).

These are all just tiny samples of what Garr has to tell, and even these points he presents better, so I'd suggest making the jump, getting the book now and starting to prepare for your next presentation focusing more on your audience instead of your topic. See you in Paris!

I've had the luck again to join Jose A. Reyero and present about the multilanguage features of Drupal and its contributions at Drupalcon DC last week. I've had a presentation on the topic at Drupalcon Szeged last August, and we had a session on the topic at Drupalcon Boston last March with Jose. So looking back it almost felt like we are going to repeat ourselves.

What made this time special however is that we have a huge amount of experience gathered from users of the modules and Drupal core itself, and we see our strengths, real use cases and problems better. Previous sessions covered the concepts, but this time we had the fantastic Roger Lopez join us as third panelist, who talked about the Drupal 6 based multilanguage platform used to host Britney Spears', Pink's and other Sony stars' sites already. There was a nice Drupal.org front page post on their solutions and contributions while we were in DC. It is well worth a read!

So the panel ended up with me talking about Drupal core and some broader issues, Jose talking about Drupal 7 plans and i18n features and Roger talking about solving some of the tasks they have faced on Drupal 6 with core, the well known contributed modules and some custom development. He also called for involvement in some of the unresolved issues in his presentation. Finally we took some great questions and wrapped up.

I believe this was our best Drupal multilanguage talk so far, but unfortunately it was not videotaped. So all we can share with you are our slides in presentation order. Enjoy!

• Gábor Hojtsy: Drupal core multilanguage (3.7MB PDF)
• Jose A. Reyero: Multilingual Drupal (1.4 MB PDF)
• Roger Lopez: Multilingual Drupal in the wild (1.5 MB PDF)

When I was looking for topics to present at Drupalcon DC, I quickly realized I have not seen a Drupal module development presentation in the style I'd have liked to, so I should better try and deliver it myself. While playing with the idea, Peter Wolanin expressed his deep interest to join, especially since he shared the same views relating to what we should cover.

We designed our presentation to be complimentary to other presenatations, like the Gentle intro to Drupal Code which nicely explains high level concepts, but does not show the depth of what people can do, or the fun Pants.module session way back from Drupalcon Brussels, which shows a bit too much of what Drupal can do without explaining what people should not eventually do.

Interestingly, our session started off with why people should not write modules. After all, there are more then 4400 projects on Drupal.org, on which you can base your sites. If someone else maintains your code, it gets bugfixes and improvements while you sleep, you are on vacation or you sit at a presentation. However far these precooked modules get you, you will always find missing items which need custom development. Then and only then should you think about writing modules.

Therefore we focused our session around the alter hooks, modifying existing menus, form layouts, submission workflows, and so on. We did include an example of a complete module with SQL code and all, but quickly jumped to talking about why you should not do this at home. We might have picked a bit over-the-top examples for those not familiar with PHP, but the basic idea was to show off what you can achieve with a few lines of simple code, and then let people read the resources (books, cheat sheets, articles) with that in mind.

All-in-all, I think your module development should enter this era, if you did not focus already on this approach. Get your general improvements to the modules in question and use the alter, nodeapi, user, etc. hooks to modify behavior whenever you need to add, remove or modify capabilities for your own needs. Less code to manage for you, better for the community that you find the bugs in the common modules, easier the upgrade path when it comes to move one version ahead.

Peter was quick to post our slides while in DC with our speaker notes included and the sample module we compiled to contain all our examples. The sample code is a single installable Drupal 6 module with all our examples implemented. Happy coding!

A couple weeks ago, Dries posted a call for sponsors for efforts to upgrade the Drupal.org site with its existing functionality and design to Drupal 6 and then start work on the redesign, new features and theme implementation. We are on the first phase at the moment, and sitting at the boardroom of One Laptop Per Child in Cambridge, Massachusetts. We are getting to second day's close, and already achieved an impressive amount of progress. Here are some of the most exciting items.