New Drupalcon session: Make administration sexy!

To share my discoveries regarding making Drupal administration quicker, easier and sexier, I've added a session for Spring Drupalcon called "Make administration sexy! (a session on usability and your love life)". In the session, I will be making lightning demonstrations of several modules that help administrators get things done easier and faster. Following the demonstrations, I'll distill some usability principles from the modules which seem to work best, which will hopefully better prepare attendees to leverage projects with different constraints to achieve similar results. If a session on improving client productivity and reducing administrator stress interests you, please consider voting for my session on the Drupalcon web site.

Tying in how usability principles apply to one's love life will be the hook to help users remember these principles. For example, to improve usability you first need to understand what the user wants (they want Italian food, not Thai), help them get it fast and easily (you make the restaurant reservations), and you need to make the result worth the effort of the work to complete it (rock your conversation skills so that dinner isn't a drag).

Making Drupal administration simpler, quicker and sexier, has been one of my major goals of the last year. In moving clients over to Drupal, we were presented with some basic navigation and conceptual issues which clients found challenging. As a result, I've put together several modules to improve Drupal usability for administrators, including Navigate, Super Nav and Ajax Table, and have learned about leveraging many modules that help make administration more enjoyable and smooth.


Navigate - A new Drupal module to ease Admin navigation woes

Whirlwind tour of the Navigate module:

A couple of days ago I released a new Drupal module called Navigate. Navigate is basically the second version Super Nav, which I put together so that I could move my clients over Drupal with a less painful acclimation period. Drupal is awesome in so, so many ways, but as has been repeated over and over - it's just not set up for site administrators to find what they need and get there fast.

There have been some relatively simple modules put out there to help tackle this problem, and they work surprisingly well, like the ever-popular Admin Menu, and Teleport. DHTML menus helps reduce page reloads while navigating through sub-menus. All very cool stuff that shows us just how it doesn't take that much work to layer some additional tools onto Drupal's fantastic infrastructure to address some of the usability issues there.

Navigate is a multi-purpose, customizable navigation tool that hides nicely if some of your admins decide they don't like it. The video above demonstrates some of the major features, like re-usable widgets, ajax-search, favorites, and collapsible menus. In a matter of seconds, you can build your own navigation widget set to get around Drupal the way that works best for you. Re-sorting widgets, adding new widgets and deleting widgets are all done via drag-and-drop with ajax, so no page reloads are needed.

I've put together what I hope is a decent widget API so that module contributors can easily hook some of their features into Navigate widgets. API documentation will be forthcoming.

For users of Super Nav, this is a bit of a different beast, and much more tame. Super Nav used a frameset to separate navigation from the theme, which kept the Super Nav issue queue bustling with problems. I tried my best to bend framesets to my will (and it's surprising what you can do with javascript in that respect), but the release of Navigate marks the end of an era for me. While I once thought that bringing framesets back out from their slow decline over the years might help tackle navigation issues, I now I have a more seasoned, practical view.

My hope is that the Drupal community will enjoy this new contribution, and that it does some part in demonstrating a possible solution for integrating administrative tools with otherwise user-based theming.


Quirky jQuery - Setting the 'value' attribute in HTML

in

This one stumped the guys over at the jQuery IRC channel:

When you use the jquery to set an element's value attribute, you can do the following:

$(this).attr('value', 'newvalue');

or this:

$(this).val('value');

For most attributes, this will change the actual html. To test it out, you can use Firebug and watch the value change, or print out the new output by doing something like:

alert($(this).parent().html());

For the 'value' attribute, however, the html doesn't actually change. And that little quirk cost me a few hours in research to try to find a work-around. What I was trying to do was cache a bock of html in a database, but I wanted to retain the value of the text inputs if they changed. Since the 'value' attribute didn't actually change in the html, I got stuck. Here's what I did to work around it:

  1. Whenever the text changed in the text input, I would create a hidden input with the new value. When the text changed again, the hidden input would be deleted and then added back in. I tried doing this with just the text input (i.e., deleting it, manually adding the value in, and re-outputting it), but when you do that you lose any event bindings. When I went to cache the html, it would look like this:
    <input type="text" name="changing_input" value="Old value" />
    <input type="hidden" rel="changing_input" value="Newly typed value" />
     

  2. Since this is what will be pulled from the database, next I need to trigger a switch to replace out the old value of the text input with the value in the hidden input. That's easy enough with jQuery, since we have a 'rel' attribute to link them.

Personally, I think this is an ugly work-around. Even changing the 'value' attribute with straight javascript didn't seem to work. So, this is really a javascript quirk I'd love to find a better way around.


Grokking Drupal dates and time zones

in

I've run into a surprising amount of trouble trying to get time zones working properly in Drupal via the Date module. For instance, the date in the database might not align with the displayed date in the node, and when I go to edit the date in CCK, it displays yet another date. It's gotten so bad that I've had nightmares where calendars are bludgeoning me with timestamps, complaining that I just don't understand them, why don't I understand...

So I finally decided to dig a little deeper, and it's actually some simple stuff that I can summarize in a few bullet points:

  1. The date module saves dates in UTC, which stands for Coordinated Universal Time. So, regardless of your server, location or personal preference, when a date CCK field stores the date, it will offset it to match UTC. That means that if you and I make a post at the same time, even if we're in different time zones the date in the database will be the same for both of us.
  2. The CCK date field widget and it's output on a node might show two different things if you don't set the time zone setting in the CCK field. I set mine to match my site's so that I only have one variable to change later.
  3. Depending on what you need to do, you might need to explicitly set your time zone in PHP. For example, in order to get the date() function to output the time in my set time zone, I had to use date_default_timezone_set('America/Boise'). I might be missing something here, or need to update the date module, but this works for now.


Does Amazon.com consider me a Prophet? The problem with character limits and my name

I was checking the status of a package on Amazon.com and noticed something funny in their greeting. I've had this problem before with Caller ID, but it's difficult to record. New mothers and fathers, when naming your child please consider what a shortened version of their name might spell in display devices with a display that requires shortening longer words. Mine isn't so bad:


Question about how to layout MySpace

I recently received this e-mail from one of our readers:

I read the CSS information on how to personalize your myspace page. My question is How can you save the layout so I can post it on my website so anyone can use it? Like all those websites that offer free layout. What programs can you use to create these layouts? Are there any tutorials that show me step by step instructions?

I've been told by some that the MySpace css layout tutorials on our site are some of the best out there, though I still think they leave a lot to be desired.

Getting started with your layout of a MySpace page

One way to get started designing a MySpace css layout is to do the following:

  1. Visit a profile page.
  2. Download the MySpace layout by saving the page. In Internet Explorer 7, this means clicking "Page" and then "Save as", and selecting "Webpage, complete" as the type to save. In Firefox, click file, then "Save page as", and save as Webpage, complete.
  3. Open the MySpace profile page html file by visiting where you downloaded the files and double-clicking the .htm or .html page. At this point, you should see an identical page in your browser.
  4. Now, you can start playing with the css of the layout by right-clicking on the .htm or .html page you just opened, select "Open with" and select "Notepad". This will open up the HTML in a text editor.
  5. MySpace allows you edit the CSS, but not the HTML, so you'll need to use some CSS trickery to edit the layout. One good place to learn CSS is w3schools.com.
  6. To add CSS to the MySpace layout page, add the following to your page:
     <style>
        /* This is a comment. Enter style below this, but before </style> */
        .example-style {
          background-color:red;
        }
      </style>

The difference between 'id' and 'class' in a MySpace Layout

To specify what parts of the page get what CSS styles, MySpace uses either the 'class' or 'id' attributes. To override the 'class' of an element, take the following MySpace profile page code:

<TR class=userProfileURL>

To change how this displays, you would add this to the style section of your css page:

.userProfielURL {
  background-color:black;
}

Notice that you use a period in front of the style when it is used in a 'class' attribute.

For an id attribute, as in the following:

<DIV id=tkn_leaderboard></DIV>

You would use:

#tkn_leaderboard {
  background-color:black;
}

Notice that this style starts with a '#' instead of a period.

Testing the MySpace layout

To test out what you've done, first save the file in Notepad by clicking "File' and then 'Save'. Then, refresh the page in the browser you have the page open in. You should see the changes you've made.

Layout MySpace's css styles with Firebug

The Firefox browser has a great tool for finding out what css styles are being used on a page. After installing Firefox, download the Firebug extension. Once it is installed, open the MySpace Layout again in Firefox (right-click, select 'open with', and select Firefox). Click CTL+ALT+L to open Firebug. It should display towards the bottom of the browser screen. Then select 'Inspect' and hover over different areas of the page. On one side of the Firebug window, it will show you what HTML is there, and on the other side it will tell you what CSS is being used on the MySpace page, and what the name of the css styles are. You can click on an element, copy the CSS code from Firebug, and paste it into your stylesheet. Once it's there, you can mess with the style all you want.

Sharing your MySpace layouts

There are tons of sites out there that host layouts MySpace users can use. If you want to share your layout, you just need to copy the everything from the beginning to the end of your style tags, with the tags included. Then, to add it to your web page, you can use a textarea to allow people to copy it:

<textarea>
  <style>
    /* Your styles here */
  </style>
</textarea>

Which will look like this:

Programs to create MySpace layouts

In regards to your question about programs that allow you to create MySpace layouts, I don't know of any that cater directly to layouts MySpace users can use. However, you can use an editor like Dreamweaver for more powerful CSS layout editing.

I hope that helps!

Wired Magazine de-emphasizes emphasis


When my wife bought me a year's subscription to Wired magazine for my birthday, remembering the number of really cool geeky articles I'd read over the years in Borders I got excited about the having the articles coming to me for a change. I didn't realize that I'd be getting design lessons, too.

When I was looking at the October issue of Wired, I noticed that italics, known in HTML as em (for emphasis), were being used for worlds one would typically de-emphasize. And I think it kind of works. They also use capitals for all the other words, which helps even more.

There's no real lesson here, just a bending of the rules that I thought was pretty interesting.

Adding image corners with the Drupal Module Photoframe

Below is a question submitted to our contact form about where to put the styles added with the Drupal module we put together called Photoframe:

Hello, I have just installed the Photoframe module on my Drupal site. I have completed the installation successfully and everything seems to be working. My question is about the adding the Class to content. How do I do this? There are no drop down boxes to select the class when I am creating new content and don't see any other spot to do it. I am kinda new to this but understand the basics to administrating a drupal site (installing modules, creating content, just the basics). Please help me figure out how to do this as I think your module will be a great one once I get it working.

If you happen to be in Firefox, you can look at the HTML for the above quote and see the following:

<div class="photoframe-quote quote-quote">
Hello, I have just installed the Photoframe module on my Drupal site...
</div>

And that's it, really. Just add the class to an element, in this case a div, and Photoframe will wrap the frame around the content once the page is loaded.

It's fun having a blog with PageRank! (some search engine results)

Here's a couple of Google searches based on keywords used in my blog entries. While the results may change, here's a sample of what we have now:


drupal evangelism
- #1
idaho drupal - #1
clickheat - #9
java downtown boise - #2

It's just a feel-good moment to see all the work you've put into your site coming some some kind (however useless) fruition. The important question, though, is how much traffic have these rankings bought me? None at all as far as my Google Analytics account tells me.

Being on top of the SERPs for non-competitive keywords is like running an ant farm. The sense of power it gives you is somewhat illusory

These rankings illustrate a point which I end up drilling into clients about to hire an SEO firm to pop their site up to the top of search engine result pages. It's relatively easy to get bumped to the top for search terms that aren't highly competitive. I mean, my home page only has a PageRank of 5, and there's tons of higher PageRank-ed sites out there that could flood the search engine result pages for any non-competitive keyword if they bothered adding an article or two about it. For better or worse, there's not a lot of competition for the 'idaho drupal' keyword. It sounds like a good solid keyword, and I might assume that there must be web site owners clamoring to get the kind of status you receive when you stand atop a SERP for 'idaho drupal.' But such is obviously not the case.

Firefox built-in spell check rocks for blogging!

The title pretty much says it all. Firefox has a built-in spell check now that will underline misspelled words in any textarea. No additional extensions required! This is sweet, after years of having to install third-party spell checkers, none of which worked quite as smoothly as I or my clients would have liked.

When a word is misspelled, it will underline it with a red squiggly line. Then you can right-click on the word and it will offer some correctly-spelled words to replace it with. You can even add words to your dictionary (like 'textarea', which comes up as a misspelling).

The spell check can be a little irritating when you're using some HTML in your code, because it doesn't recognize most of the tags as real words. But, it's a small price to pay for a chronically bad speller.

Hey, I'm just a prototype (the offical blog mission statement)

During the life of this blog (a whopping 2 weeks at this juncture), the subject matter has been all over the place. I've got a few posts on web analytics, a couple on Drupal-related topics, some in-house corporate announcement-type posts, a cafe review and reflections on a good movie I saw recently.

What the heck? Everyone knows that in order for a blog to make it out there in a world where everyone's competing for eyeballs, you have to be topical and focused. Otherwise you risk losing the attention of your readers, who might not be all that interested in a how good the cherry pie scones are at Big City Coffee.

I have my reasons. I think they're good ones. Do you?

I have blogging clients: Our clients rely on us to be experts in the field of web design and development. Some of our expertise comes straight form our experience, and some of it we glean vicariously through observing other web-based business models in action. Because I've been very busy over the last couple of years with paid work, and blogging takes a good chunk of time if you're being consistent, a Chris Shattuck / Implied By Design blog has just never been that plausible. However, maintaining a blog is probably the best way to understand the stages in a blog's development and promotional cycles. Most of my clients are going to start out with subject matter all over the place, so that's what I'm doing. I'm curious to see how one is 'guided' into a more narrow focus. Is it forced by lack of audience participation? Does it come naturally over time as you articulate your interests? Do you start to develop a synergy with your audience based on what they are interested in? Do you have to force yourself into one when you realize you have too much to say about everything in general?

I want more traffic: Who doesn't? We get 500-800 unique visitors a day to the Implied By Design web site, which is all right for a web design business web site (based on our Alexa ratings), but I want more, MORE! Traffic, while it doesn't necessarily translate directly into higher conversions, at least gives you the opportunity to test stuff out. A huge chunk of my traffic comes from a few good MySpace layout articles I posted a year or so ago. The folks coming to those pages rarely contact me for design work, but a get a trickle of income from the advertisements on those pages. I suspect I could make more if I hooked up with some good affiliates, and because I have the traffic, I can test that theory out pretty quick. With a lack of a particular focus, I can start drawing some random, unfocused traffic in, which I can tap into later for experimentation. The cafe review I posted is getting more views faster than most of the other posts I've made, and this might lead me to reveal a niche of some kind I or a spin-off company might be able to fill.

I want more PageRank: In addition to getting PageRank from incoming links, you get PageRank from internal links, too. The more pages you have, the more PageRank. The higher the PageRank, the higher your placement in the SERPs. The more diverse my focus, the more I have to say, which means more pages, which means more PageRank.

I want to share: I've only been blogging for a couple of weeks now, but there have been some pleasant side-effects to the blogging experience. First, blogging forces you to articulate yourself to an audience. It's kind of a less stressful form of public speaking. Even if no one is reading it, someone might eventually, and you better not sound like a flake when they do. Also, if you're sharing something you've learned only after investing a significant amount of time, there is the potential that you might actually save someone (or lots of people) time and headache, so you get to tap into the philanthropist in you. By expanding my focus to include virtually any subject, I can share things like how to purchase rechargeable batteries (an upcoming post), in which I can summarize knowledge that would take much longer to glean going the traditional Google-search route.

I want to test the effects of personality: When people read my blog, will they be more or less inclined to hire me or my company to design their web site? I have no idea, and I haven't quite figured out how I will measure this effect, but I feel like it's important to get my feelers into what effect personality can have on deciding to hire a company. Our strategy for the last couple of years has been to avoid personality, to be completely professional, and somewhat sterile, on the premise that, like entering a doctor's office, you might feel more comfortable with something with less character and more standardization. In the field of web design, this is most definitely always an illusion because, unlike doctors, we developers don't have an across-the-board code of ethics, standards or practices. It's still a bit hodge-podge out there. So far, the number of requests for proposals we get have stayed consistent, implying at this early stage that maybe the blog has no effect at all. With a varying topic test, I can let my personality come through a little more. Sometimes it's hard to squeeze in the same kind of commentary in a SEO-software review as you could in a reflection on an awesome meal you just had.

Build it and they will... oh my gosh, I can't say it!

Probably the most highly used heading of all time in regards to web development articles is a negative variation on the "Build it and they will come" Field of Dreams reference, for the obvious reason that that kind of strategy doesn't work unless you've got ghosts really talking you up in the netherworld. I plan to do much more investigation on to how to promote a blog site once you have one up and running, because unless you have a site with some decent PageRank already (which, lucky for me, I do), no one will ever see it. And so far, I don't think the kind of traffic my blog is attracting many repeat visitors (witness the lack of comments), so it will be a fun exercise to figure out how to get the word out to potential regulars. I suspect going down that route will force me to narrow my official focus a little more. Who wants to read about Anything and Everything? This kind of research will definitely pay of for clients and readers who have their own fledging blogs.

Movie Review - A Guide to Recognizing Your Saints

in

My wife and I tend to prefer watching movies to television, which means that unlike television, where you have a few channels to choose from and aren't too invested in any particular show, a movie can either make your night or force you into a 2-hour loop of doubt and uncertainty (do you turn it off now? Will it get better? Is it better just to watch it to the end so you can, with complete confidence, warn all unsuspecting souls never to ever rent this movie ever?). Unfortunately, we've been cursed with a string of the latter. This has the effect of setting your expectations lower and lower, so if you're blessed with a movie that breaks the chain, it's a brighter experience by sheer contrast.

"A Guide to Recognizing Your Saints" broke the chain. The movie was autobiographical, and not only did the main character write the story, but he also directed it. The result was a very powerful, emotional journey through vignettes in his childhood, with flashes to his future, adult self. It feels real and genuine in it's dark, un-Hollywoody rendering.

After reading A Million Little Pieces and experiencing the resulting disappointment in the discovery that most of the book was in fact false, I can't help but wonder how much of this movie was true to life, and what might have been overly-romanticized. In the end, I don't know if it matters too much to me, because I only found out about the autobiographical nature of the film after we were done watching it, and as a purely fictional piece it has a lot of strength.

One thing I really liked about the movie's style were a few times when the characters voices were over-dubbed while they were having conversations, but without any background noise, and with calm, collected voices. It was as if the voice you heard was what the character would really be saying if they didn't have to contend with all the social forces and noise around them. I've never really seen that before, and it lent those moments a kind of genuineness that they couldn't have had otherwise. I guess it also hearkens to what it might feel like to be reading the book the movie was based off of. Books have a way of getting across emotion that movies can't, maybe because there always has to be movement in movies; noise, shifts, cuts. When you read, it's just you and the book.

If you watch the movie, I think the 20-minute-or-so documentary in the special features, "Making Saints", is worth the watch, too.

Syndicate content
Implied By Design Logo