I hadn't tinkered with my blog design in a while, since I've been paying attention to other things. Since I'm delegating podcast- and writing-related processes, I thought I'd revisit technical delegation too. Before I can delegate, though, I need to know what I want. I listed a bunch of blog improvements I've been meaning to do for a while.

I created a Trello board with the tasks. That way, I can keep track of the tasks as I assign them to people or do the tasks myself.  Trello lets me attach files (upload, Google Drive, or Dropbox), which will be handy for sharing designs.

One of the bigger tasks I was thinking about was making my site more responsive. 10% of my visits come from people using mobile devices, many from iPads and iPhones. On computers, it might be interesting to see how I can tweak my site design to make better use of larger screens.

For narrow widths, I was thinking of moving the sidebar down, trimming the navigation, and maybe making search more convenient.

I'll need to sort out a good single-column layout for mobile devices, anyway. Do I want to keep the same distraction-free layout for larger screens, stay with my two-column layout, or add a third column? Hmm… Three columns might be too much. It might be interesting to test one- or two-columns. I'd like to be able to give people the ability to switch to the other style if they prefer. We'll start with what we have, though.

I'm also interested in improving the navigation and discoverability of the posts in my archive. @madwilliamflint nudged me to logically arrange my posts, and the Organize Series plugin seems to be a good fit. Organize Series lets me define a series and the order of posts within it. It adds links to the series and the previous/next posts, and it also creates an archive page that lists the posts in order. Neat! See the trails I've defined so far.

I spent 4.5 hours last Monday moving my theme from a 960-grid to Zurb Foundation, which did make it surprisingly easy to make the site responsive. I fiddled with some of  the graphics, too. Check out sachachua.com to see what the site looks like now. =) I'm pretty happy with it, although of course there's more to do.

It was great thinking about the things I want to tweak about my blog. Although I'm still thinking about finding someone I can delegate design or development tasks to, having a list of blog tweaks encourages me to tweak the blog myself (which is fun). I had fun setting up the series. I'm looking forward to trying out the other changes – either doing them myself or getting someone to do them.

Thoughts? What would make this site easier to use for you?

Over ten years, my WordPress blog had ballooned to more than 500 categories. Part of it was because Org2Blog makes creating new categories super-easy, so I just piled them on (occasionally mispelling a few). Part of it was because I don’t really know what I’ll write a lot about until I write, so I had categories with one or two posts and then I moved on. Part of it was because I hadn’t decided what I’m going to use categories for and what I’m going to use tags for–yes, even after all those years.

I wanted to revamp my categories so that the Life, Geek, and Visual categories and their corresponding feeds might be useful to people who find my daily posts awesome-but-overwhelming and who would prefer a slice of my blog tailored to their interests. (There are even more categories on my archive page.) This meant organizing the categories into a hierarchy, but first I wanted to cut the number down to something more manageable.

The WordPress interface for managing categories leaves much to be desired when it comes to bulk actions. Fortunately, the Term Management Tools plugin makes it easy to merge categories or convert them to tags using additional Bulk Actions on the standard Categories screen.

I merged a few of the common typos, then converted any category with fewer than 10 posts into a tag. The original version failed silently when converting a category if a tag with the same name already existed, so I patched my version to silently merge the terms.

The Screen Options menu let me change the number displayed on screen to 100 items, which made it much easier for me to weed out most of my categories. Term Management Tools also provides a bulk action for setting a category parent, which was great for quickly reorganizing my categories into a hierachy.

I still had almost 3,000 uncategorized posts. Since I haven’t quite found or written an automatic N-gram text classifier for WordPress posts (if you have one, please share!), I decided to see if I could make a dent in this manually. I started by prioritizing the posts with comments. I assigned categories using the Posts screen, but that took a while and too many mouseclicks. The Categorized plugin automatically unchecks the default category once you select a different one, which saved me one click per post, but it still wasn’t enough. I ended up extracting a list of posts from my database with the following SQL command:

SELECT p.id, p.post_title, p.post_date, p.comment_count FROM wp_posts p 
INNER JOIN wp_term_relationships r ON (p.id=r.object_id AND r.term_taxonomy_id=1) 
WHERE p.post_type='post' AND p.post_status='publish' into outfile '/tmp/published.txt';

and another list of terms and taxonomy IDs:

SELECT t.*, tt.term_taxonomy_id FROM wp_terms t INNER JOIN wp_term_taxonomy tt ON (t.term_id=tt.term_id AND tt.taxonomy='category')
INTO OUTFILE '/tmp/terms.txt';

After a little spreadsheet manipulation involving VLOOKUP-ing the category name that I manually entered for each one, I copied the term taxonomy ID and post IDs into an Emacs buffer and used a keyboard macro to change it into the form:

UPDATE wp_term_relationships SET term_taxonomy_id=? WHERE object_id=? AND term_taxonomy_id=1;

where 1 was the term_taxonomy_id corresponding to Uncategorized.

Since I was on a roll, I decided to categorize everything from 2007 onwards, which is farther back than my manual index goes. That got me through about a thousand items before I decided it was enough filing for one day. As of the time of writing, there were 6512 posts on my blog. 4,536 posts (70%) belong to various categories, while 1,976 are still uncategorized.

I hope this work pays off! =) I expect that it will make my blog a little easier to browse.

If you use Google Analytics to get some insight into how people use your webpages, be sure to check out Content > In-Page Analytics. It gives you an idea of what people click on, and that can influence your design decisions.

The posts on my blog homepage change roughly every week, so I used the drop-down in the top right to change the reporting date. Here’s what the overall stats look like for the main page of my blog:

Let’s look at the breakdown throughout the page:

It looks like I should spend some time improving my About page, since a lot of people go to it.

Some blogs recommend removing the Recent Comments widget from the sidebar because people don’t find it useful. I find it handy for seeing what people are talking about, though, and it seems that other people do too. (21% of clicks to see older comments!) I switched to using the Better WordPress Recent Comments plugin in order to show comment previews. There’s a slight delay because I’m using the external Disqus commenting system which still needs to synchronize with WordPress, but I like it overall.

Some blogs recommend manually selecting Top Posts & Pages instead of leaving it up to the computer. This one is automatically selected based on recent views, which is great because it comes up with recommendations I wouldn’t have remembered or thought about (like that Drupal one!). I should make a Resources page, though.

I include links to blog posts in my weekly reviews. This is surprisingly useful for both personal memory-jogging and for helping other people jump to things quickly.

I have a hard time getting the hang of “Next page” and “Previous page” navigation on blogs. (Am I going forward or backward in time?) I changed my theme to make it easier to figure out which direction you’re going in, and I have these paging links at the beginning (near a table of contents) and at the end of the page.

This is all the way near the bottom of the page.  It has the same numbers as the ones up top, so I think Google Analytics might be getting confused about the links because they go to the same place.  (Same with the Older Posts link.) I can probably disambiguate the links by changing the tracking code.

So, TODOs for me: spruce up my About page, figure out where to add a Resources page, look into asynchronous tracking, and see if there’s a way I can set up WordPress to experiment with different layouts…

Check out Google’s In-Page Analytics if you have it on your site!

Note: Got an error while trying to use In-Page Analytics? Make sure you’re properly calling the Google Analytics code on the site. I use a Wordpress plugin to make sure that my visits aren’t tracked when I’m logged in (no sense in throwing off the stats with obsessive refreshing! ), so I needed to log out of my site before checking In-Page Analytics.

For the longest time, I’d been meaning to make my website look more hand-written and to take advantage of Google Web Fonts to make my site feel slightly different. After some design-related nudging from Matt Tanguay, I finally got around to it. Here’s how! =)

For comparison, here’s the “before” picture:

After (I tweaked the links, too):

If you’re already comfortable with HTML and CSS, it turns out to be pretty easy to make a hand-drawn website with highlights that appear when you hover over links. Here’s how!

Step 1: Draw the header image.

It can be more efficient to have one medium-sized image instead of lots of little images, and it’s easier to work with one image instead of many small ones. You’ll use CSS to split this up into rectangular regions later, so keep that in mind when designing your image and try to avoid overlaps.

I drew the main image using Autodesk Sketchbook Pro, but you can use any image-drawing program. You can even draw it on paper and then scan it in.

(I didn’t end up using the Random Page! button, but that’s okay. =) )

Step 2: Add highlights.

I added another layer below my main layer and highlighted whatever I wanted to highlight, making sure things were separated by enough whitespace so that the highlights didn’t overlap into another link’s rectangle. If you’re doing this on paper, you can highlight on paper as well.

You’ll notice that everything is highlighted in this image. No worries! We’ll display just the appropriate part later.

Step 3: Set guidelines.

Setting guidelines using a photo editing tool like the GIMP will make it easier for you to select consistent rectangles. Here, you can see how I’ve set up my guidelines to make it easy to select a rectangle containing the “Home” link. You can use the rectangle selection tool to get the position and size, which you can find in the Tool Options window.

Step 4: Write your HTML and add IDs/classes to it.

Code your HTML so that the text makes sense, and then use CSS to replace the text with images and to lay things out for your intended design.

I added IDs and classes to my links to make it easier to replace the links with images later on.

<ul class="links" style="margin-bottom: 0">
<li><a id="home" class="replace home-design" href="/">Home</a></li>
...
</ul>

Step 5: Replace the text with your images using CSS.

There are a number of CSS text->image replacement tutorials out there. The general idea is to use text-indent to hide the text, and then use background, background-position, width, and height to display the right portion of your image.

This is where the guidelines from Step 3 come in handy. Simply make the position negative and use that as the background position, then use the size as the width and height.

.home-design { background: url(images/design.png) 0 0 no-repeat; }
.replace { white-space: nowrap; overflow: hidden; text-indent: 100%; }
#home { width: 96px; height: 40px; background-position: -81px -105px; display: inline-block }
.header .links .replace:hover { background: url(images/design-highlighted.png) 0 0 no-repeat; }

Tada!

Still have questions? Please comment below – I’d be happy to explain more!

I’ve been thinking about how to make it easier for people who want to keep in touch but who don’t want to be overwhelmed by my daily posting schedule. Instead of trying to come up with the Best Way on my own, I asked what people wanted. Out of 26 votes (as of the time I wrote this), ten people wanted weekly newsletters and three people wanted monthly newsletters. That probably means that even more people would like those less frequent update options, so I decided to spend some time figuring out a good way to offer that.

Since I already do weekly and monthly reviews, the easiest way would be to make those reviews available in a separate feed that people can subscribe to over RSS or e-mail. I’ve been using Feedburner as a way of making my feeds more browser-friendly and as a way to handle e-mail subscriptions. Although I’d been concerned about the long-term longevity of my feeds in case Feedburner shuts down, it turns out that you can set up your own domain name by following the instructions under My Account > MyBrand.

I set up my feeds to use feeds.sachachua.com instead of feeds.feedburner.com. That means that if Feedburner goes away, I just need to change my DNS record to point to my own server and write my own redirect rules. I wish I’d done this earlier! Anyway, if you subscribed to http://feeds.feedburner.com/sachac , please switch to using http://feeds.sachachua.com/sachac instead.

With the new feed URLs in place, I created Feedburner feeds for my weekly and monthly reviews. Category feeds are built-in, so all I needed to do was tell Feedburner to handle https://sachachua.com/blog/category/weekly and https://sachachua.com/blog/category/monthly . I customized each feed to include a short message pointing to the other feeds (Optimize > BrowserFriendly), change the URL, and enable e-mail subscriptions (Publicize > Email Subscriptions).

Then I modified my WordPress theme to include links to the new feeds. To make the feeds available from the feed icon in many browsers’ address bars, I added the following code to my <head>…</head>:

<link rel="alternate" 
  type="application/rss+xml" 
  title="Feed (~daily)" 
  href="http://feeds.sachachua.com/sachac" />
<link rel="alternate" 
  type="application/rss+xml" 
  title="Weekly reviews" 
  href="http://feeds.sachachua.com/sachac-weekly" />
<link rel="alternate" 
  type="application/rss+xml" 
  title="Monthly reviews" 
  href="http://feeds.sachachua.com/sachac-monthly" />

Result:

I also added links to the feeds in my sidebar using the Appearance > Widgets > Text widget.

Now, people should be able to easily subscribe to whichever frequency they want. =)

On another note: I was surprised and delighted to find that many people wanted daily updates. Thank you! I’ll try to make my headlines useful so that you can guess right away if you would be interested in something, and we’ll see if I can write weekly review headlines with keywords as well.

If you blog a lot, I hope you find this tip handy!

I’ve been posting practically every day for the past 3.5 years, and I write about a variety of topics. I’ve been thinking of ways to make it easier for people to keep in touch without E-mail newsletters seem to be a Thing. Right now, the e-mail subscription form on my blog is the default provided by WordPress, so people get daily updates (which is probably a bit much). I’ve been thinking of making it easier to subscribe to weekly or monthly updates. Would you find something like that useful? I’d really appreciate it if you could answer this poll!

[poll id=”1″]

(Don’t see the poll? Try viewing this post on my website.)

Aside: I was curious about just how long I’ve been keeping up with this ~1 post a day thing, so I graphed my blog posting history. It turns out that I’ve been pretty consistent, although there were days when I didn’t have anything new posted. I schedule my blog posts using Editorial Calendar and I sometimes send people sneak previews of upcoming posts using the Share a Draft plugin. This lets me smooth out the spikiness of my writing habit into a more predictable publishing schedule.

To generate this graph, I extracted the timestamps of all my published posts with the following SQL query:

SELECT UNIX_TIMESTAMP(post_date) FROM wp_posts WHERE post_type='post' AND post_status='publish' 
INTO OUTFILE '/tmp/timestamps.txt';

… and then I graphed it with cal-heatmap, removed in-between labels in GIMP, and used Autodesk Sketchbook Pro to hand-write new labels. =)

From Wireframe to WordPress Theme in 10 Minutes – Sam Xu

WordPress for a Large Site – Brandon Hill

Mobile Apps in WordPress Version 2.0 – Trevor Mills

If you like this, check out the sketchnotes from Day 1 of WordCamp Developers Toronto 2012, or see my other sketchnotes! Search Twitter for #wcto to see what people have been saying about WordCamp Toronto, or check out the conference site for more updates and slide decks.