Flux, Part 3: The Plugins and Touchups

Work continued on Flux, my new site design, this past week. There were two main issues I wanted to resolve: extending WordPress and applying some design fixes to common HTML elements like unordered lists. 

WordPress Plugins

Three new plugins are now installed:

  1. Code Auto Escape. WordPress has a nasty habit of not rendering code correctly. Sure, you can try to use HTML entities, but that’s only a bandaid. WordPress gladly converts the HTML entity into the display character. 

    However, if you make revisions to the post, WordPress does not revert back to the HTML entity. This feature is only slightly annoying as I like to, you know, post about Web standards technologies. 

    Thankfully there is the Code Auto Escape plugin. This is a simply awesome plugin from Priyadi Iman Nurcahyo. Using HTML elements like code and pre, WordPress handles the formatting of coding with making a mess of my post. 

    After I installed the plugin, I spent a good while getting this (outdated) post displaying code properly. That felt really good. 

  2. Google Sitemaps. An XML-based sitemap allows Google’s crawlers know of pages within your site that might be new or generated by dynamic content. Odds are Google’s spiders are already aware of your site’s pages, but feeding your own sitemap is a nice added bonus to make sure everything is covered. 

    Arne Brachhold created the Google Sitemap Generator that makes all that messy XML for you — automatically–everytime you add a post or page through WordPress. Set it and forget it.

  3. Subscribe to Comments. Ever post a comment and wish you could be notified when the discussion continues? That’s the way I feel when debating whether Starbuck is the the last of the Final Five (she’s not), whether the Doctor is the last of the Time Lords (he’s not) or whether Snape is friend or a foe (he’s neither). 

    The Subscribe to Comments plug-in does that. There’s even an option to allow readers to subscribe to a post without commenting themselves. However, I feel this isn’t very fair. If you want keep up with the conversation, at the very least, I ask that you throw in your two cents for the privilege.

If anyone has any WordPress plugin recommendations, please let me know via the comments. 

Design Touchups

Some miscellaneous design touchups that happened on the site:

  • Bullet Icons. I have nine bullet icons ready to go for nesting unodered lists.

    I’m not saying I’m going to present you, dear reader, with an unordered list that’s nested nine times. I’m just saying I’m prepared. You can see the first three bullet icons on this post where the lists only go down three levels.

  • Ordered Lists. Nothing too fancy, but I turned the numbering back on as Yahoo!‘s Reset CSS got rid of them altogether. It’s amazing finding what you took for granted after it’s gone.

That’s about it for the design update this week. 

Flux, Part 2: The First Couple of Days After

After pulling the switch on the design, the general reaction to the design has been positive. Which is really good since I was worried that it might be too purple. At least, I’m out of my “green period”, Porter, right?

Just to document the changes and in case anyone’s interested, here are are a few things I’ve fixed and/or learned about as I’ve been working on the Flux design for the last couple of days:

  • For all that is right in the world, be sure to reset the display of your pages before you start working on production. In talking with Richard Rutter before his Web Typography Sucks panel, we talked briefly about how Web designers have to work within a browser’s pre-defined style sheet and how you don’t get that with print design. (InDesign never opens up and says, “right, let me have a go at your design.”) So, after researching Tantek’s and Yahoo!‘s reseting of CSS, I went with Yahoo!‘s after most of the production work on the template was done. Big mistake, amigo. I’ve been playing bug catcher ever since in hopes I catch most of them and don’t have to do the whole production over.
  • You can really get carried away with floats. Personally, I love shackling elements and probably will be sticking with that method for most of my production work from now on.
  • Positioning elements led me realize that Internet Explorer 6 for Windows does not like nesting two absolutely positioned elements inside a relative positioned element. I got a little arrogant in thinking I could pull this off and not get burned by IE6. Apparently, IE6 blows through the nested absolutely positioned element and sticks with the parent’s elements positioned values. This caused me to do the following…
  • Rework how I display the header for the site. Now when you resize the fonts in your browser, the text in the header moves upward while the text in the rest of the page pushes downward. This is a cool trick Doug Bowman did on Adaptive Path’s site many moons ago and I’ve been itching to incorporate the tecnique into a site ever since.
  • Firebug is outstanding. I had a rogue CSS rule causing 18 pixels of pure madness at the bottom of every paragraph. Took me a while to find it through my traditional means, so I broke out the big guns and nuked the problem in under 120 seconds. Yeah, my workflow just improved.
  • Most of the other changes were backend: Putting what little content I have into PHP includes, wrapping content chunks with DIVs and some minor icon reworking. Mostly, I’m trying to make sense of WordPress’s structure.

The next items on my to do list involve mainly more spring cleaning on the templates. I need to get those cleared before I input the additional content. However, I do have one question I can’t seem to solve to my satisfaction:

Does any one know how to include Gravatar’s into your comments? 

Gravatar lists documentation for a WordPress 1.2 plugin, but I’m running a more advanced version. Any chance the old plugin works for the current version of WordPress? 

I’d like to know if it does so I know how much time I should invest in incorporating the icons into the site design.

Everything In Flux

When I design for for my own personal site, I am excited. I love the freedom that such an assignment provides as I head down one path for a personal identity and then another.

In this design process, I reach the usual point. The point where I become bored with the design and design never sees the light of day again.

That’s one of the reasons why I flipped the switch for the new design. I needed to get the site design out there before I lulled myself into sleep about the design. By rushing out earlier than I would have normally, I settle (or trick) myself into owning this design. Since it’s out in the open, I feel more of a need to finish it up and show how cool this design can be rather than letting it collect dust on some hard drive or DVD‑R.

So, there are going to be some bumps along the way as I wrap up the site design. I need to finish assembling some content and salt and pepper the final design to taste.

In the meantime, let me know how you design for yourself? Do you have a hard time designing for yourself as do I?

WP Plugin for HTML Code

I’m fairly certain there is a simple fix for a problem I’m having with WordPress, but I haven’t been able to find it yet. 

I want to do some more CSS and XHTML examples in my blog, however, I believe Word Press doesn’t convert the brackets and other special entities correctly when I hit the Publish button. 

Therefore my code posts I’ve written have a negative impact in the presentation and sometimes the content, as it appears to go missing from time to time.

Anyone have any plugins or suggestions for modifying WordPress to resolve this issue?