With the newest updates to Bootstrap, I wanted to update everything — but what I had, while functional, was brittle and hard to optimize. The solution? Re-work and re-implement the good; replace the bad, and the slow, and the broken.

Of the five tweaks, tips, and plugins I described earlier, I kept the dynamic layout and infinite scrolling, and still do adblock detection and present a large ad only to search engine visitors. On the other hand, I integrated related post functionality into my theme (instead of using plugins), and switched to a simpler caching plugin.

So enter the new, improved in propria persona:

• it now uses the Roots theme, which leverages Twitter Bootstrap 2.0 and HTML5 Boilerplate to bake-in lots of goodness — including easy tab creation, progress bars, responsive layouts, and much more;
• the similar look is now more heavily influenced by the Solarized color scheme, and with the Readibility tool;
• many plugins have been rewritten and incorporated into he theme itself, including a related posts flyout, social media sharing buttons (fixed at the side), caption slideouts, search-engine optimizations, and more;
• much of the “heavier” functionality only loads on demand — full social media buttons only appear on rollover, for example, and hidden images only load when scrolled to;
• as in the old design, the home page uses jQuery Masonry and Infinite Scroll — but these are integrated, not included via WordPress plugins;
• jQuery is loaded from Google’s CDN;
• CSS is auto-minimized and combined thanks to LESS;
• a combination of CloudFlare and Varnish provides caching, with help from Quick Cache (much less complex than W3 Total Cache — which I still recommend).

Compare the old look…

…with the new one. It continues to use Masonry and Infinite Scroll, but shifts to a Solarized color scheme for easier reading.

Like it? Hate it? Let me know what you think!

• Endless scrolling and dynamic layout
• nRelate Popular Posts, Related Posts, and Flyout
• W3 Total Cache
• Ads for search visitors only
• Ad block detection
• Bonus: CloudFlare

Some of these are easy—just install a plugin—while some require more advanced knowledge to implement—but all of them will supercharge your WordPress installation.

5. Endless scrolling and dynamic layout

This is a relatively advanced tweak to implement in full.

My blog’s main page automatically arranges itself to fit the visitor’s browser width using jQuery Masonry:

Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Masonry isn’t a WordPress plugin. Instead, I included it by editing my template directly, focusing on the template page (in my case, home.php, since I use Theme Hybrid as a base).

Along with Masonry, I wanted “endless scrolling,” first made famous on many Tumblr blogs, but also a core part of Pinterest. There is a WordPress plugin for this—but I wanted to do it directly—so I edited my theme file directly.

You’ll have to customize this for your own site, but here’s a few useful notes:

1. I use WP-PageNavi to show better paging for all my pages, so that’s what I needed to target with the infinite scroll JavaScript (div.wp-pagenavi).
2. Each block—title, snippet, and thumbnail—is wrapped in the CSS class I call brick, so that Masonry can easily find them.

4. nRelate Popular Posts, Related Posts, and Flyout

This is a simple plugin addition.

These three plugins from nRelate are simple, yet flexible, ways to add popular and related posts to each post, along with a New York Times-style “flyout” that appears to show a related post as you move down the page.

3. W3 Total Cache

This is a simple plugin addition, though it allows complex caching arrangements.

The more you tweak your site, the more you absolutely need to make sure to cache your site. What is caching? Basically, the plugin creates a server-side static HTML (non-PHP) version of your site, then serves that to most visitors instead of generating a dynamic version for every visitor.

There are a number of plugins to do this, but this is my favorite because it’s so full-featured.

2. Ads for search visitors only

This is a moderately complex tweak that requires JavaScript experience.

I only show advertisements in order to pay my hosting costs, not to make a profit. I also blog in a difficult-to-monetize niche—i.e., not about products! Since only those who visit my site ever seem to click on my ads, why not show those ads only to those arriving via search?

Put this at the top of your page somewhere, like your header:

<script type='text/javascript'>
// identify search engine visitors (thanks to scratch99.com for the idea)
var ref = document.referrer;
var se = new Array('/search?', 'search.', '/search/', '.yahoo.', 'google.com/url');
var se_visitor = false;
for (var i = 0; i <= se.length-1; i++) {
  if (ref.indexOf(se[i])!== -1) {
    var expiry = new Date ();
    expiry.setTime(expiry.getTime() + 3600000);
    document.cookie = "se_visitor=1; expires=" + expiry + "; path=/; domain=inpropriapersona.com";
    se_visitor = true;
  }
}
var result = document.cookie.match ( '(^|;) ?se_visitor=([^;]*)(;|$)' );
</script>

Now you have a global JavaScript variable called se_visitor (and a cookie, too, if you want to look for repeat visitors). So when you get to the spot in your page where you want to show an ad, use document.write() to put in the Google AdSense code (or replace with your favorite ad system—don’t forget to replace the Xs below):

<script type='text/javascript'>
if ( se_visitor == true) {
  var adsenseString = '<script type="text/javascript"><! — \n';
  adsenseString += 'google_ad_client = "ca-pub-XXXXX";\n';
  adsenseString += 'google_ad_slot = "XXXXXXX";\n';
  adsenseString += 'google_ad_width = XXX;\n';
  adsenseString += 'google_ad_height = XXX;\n';
  adsenseString += '// — >\n';
  adsenseString += '<\/script>\n';
  adsenseString += "<script type=\"text/javascript\"\n";
  adsenseString += "src=\"http://pagead2.googlesyndication.com/pagead/show_ads.js\">\n";
  adsenseString += "<\/script>\n";

  document.write(adsenseString);
}
</script>

Now only those who visit you via a search engine will see your ads. Since these are generally the only people who click on most ads, you’re click-through rates will go up—and you’ll avoid annoying your other visitors.

(Hat tip to scratch99.com, which also explains how to use the cookie aspect of this approach to remember those who visit via search.)

1. AdBlock detection

This, too, is moderately complex, and requires JavaScript experience.

As I noted, I do show a limited number of ads. I also personally happen to use ad blocking myself, primarily because of the abuse my eyes would otherwise suffer.

I don’t want to be so hypocritical that I push away others who use an ad blocker, by why show those visitors a block space? I replace my bottom ad (which I show to everyone, not just search visitors) with a prominent Flattr buttom, along with additional social media buttons—and encourage visitors to support me through these means instead.

To do this, I created a JavaScript file called advertisement.js. In it, I put the following code:

document.write('<div id="ad-tester" style="display:none;">an advertisement</div>');

Then in the body of my site, I put this (leveraging jQuery, though you can use another approach):

Ad blockers will not load advertisement.js, and thus no element named ad-tester will ever be created. It’s then easy to check for this using jQuery:

 if( jQuery('#ad-tester').length != 0 ) { // Ads are allowed } else { // No ads } 

I then use jQuery’s replaceWith to put in my alternate “support me” statement instead of the advertisement.

(Hat tip to Erikswan.net for this method.)

Bonus: CloudFlare

This is easy.

I always have to recommend the (free for basic use) CloudFlare service, which provides content acceleration and more. It’s a bit like Amazon’s CloudFront or Akamai’s service, but accessible to any blogger. There’s even a WordPress plugin!

"Ask For Young's Aerated Waters" by Flickr user ninastoessinger. CC BY-SA 2.0.

After running a (horribly unscientific) poll on my law & technology blog for several months, I discovered that less than 15% of people voting found any of the Google-served advertisements to be relevant (not unwanted… irrelevant).

This is a problem.

Google has always claimed their ads are contextual and targeted to the content of your pages. This may once have been true — and may even be true for some people’s sites — but it isn’t true for me. Ads I serve to search-engine visitors are the best targeted, while those that rely solely on page content are the worst. I suspect Google’s increased “personalization” of ads are only going to make this worse, from the perspective of relevance to my content.

I’ve experimented with other services, such as Infolinks and Kontera, but the vast majority of the double-underlines show up under single words with ads that are only marginally related to my page’s content. So, for example, “offer” and “credit” will link to credit-card offers. Even if “law” is underlined, it tends to link to sites on the law of attraction.

I don’t run ads to make a profit. I run ads to pay for hosting, and I ideally want to run ads that provide some value to my visitors. So this is particularly vexing to me, but I think it’s a problem — at the very least — for any site not primarily focused on “monetization.” I don’t want ads to dominate or distract, I want them to add value for everyone. (Crazy, I know.)

To try to address this, I focus Google ads mostly to search-engine visitors, and not others (though I’m always experimenting, of course, if only to keep up with trends). I’ve used services like Linkworth, which at least lets me approve ads manually. I could choose to sell all my own ads directly — but I’m simply too small and too uninterested in marketing — for this to be worthwhile. I’ve found AdBrite and similar services are equally irrelevant to my visitors. Pay-for-posts — even somewhat relevant posts — make no sense for a blog like mine, even if they might be fine for a commercialized blog.

Has anyone else experienced the problem of irrelevance? Any potential solutions? Or are well-targeted, contextual ads simply impossible to achieve?

As such, despite having no problems with my previous host (Laughing Squid, which I still recommend), I decided to switch to a Virtual Private Server (VPS) so that I could have more flexibility and control over my server environment. I selected VM Storm based on a review of  “low-end” VPS providers (since this is my personal tinkering platform I don’t need to pay extra for a high-end name). I then added Nginx as my Web server, Varnish as a front-end cache, WordPress for blogging, and W3TC as a WordPress performance enhancer.

The Virtual Private Server

Remember that with a basic VPS, no one administers the system for you (unless you pay extra, of course). You need to make your own size estimates, then install and configure your Web server and everything else (the OS itself was installed by the provider). This, of course, is exactly what I was looking for, since I wanted to experiment.

While I probably could have made it work with an even more compact environment, I went with 512 MB of memory to give me some breathing room. I decided on Ubuntu 11.10 Server because I’m familiar and comfortable with Ubuntu, and because there are lots of online Ubuntu resources and help available.

The Web Server

I’m most familiar with Apache, a free, open-source, incredibly flexible and powerful Web server. But since I was interested in experimenting, I decided to try an alternative: Nginx(“engine x”), a fast and compact HTTP server that now powers sites like WordPress.comand CloudFlare. It’s known for its resource efficiency and speed, so it’s a perfect choice for smaller VPS setups (and it too is open source and free).

(Note: I thought about Lighttpd, another fast and compact Web server, but Nginx proved be easier for me to get going the way I liked.)

The Front-End Cache

Nginx is fast, but I wanted more. So I put Varnish in front of Nginx. What’s Varnish?

Varnish Cache is an open source, state of the art web application accelerator. You install it on your web server and it makes your website fly.

Basically, it’s a server-side caching proxy. It listens for HTTP requests, serves them really fast if they’re in its cache already, or forwards the request to Nginx if they’re not. Want to survive a Slashdotting? Use Varnish. (And then add CloudFlare for good measure!)

The Database

I went with MySQL (of course). It works. I added phpMyAdmin to help administer it, and put that behind Nginx running SSL with a self-signed certificate. I could have bought an SSL cert, but what’s the point? I know who I am, and no one else needs SSL access to my install anyway. (I’m not selling stuff through my site.)

The Software

While I could have experimented with other solutions for blogging, I wanted to stick withWordPress. It’s flexible, extensible, and nice to work with. It isn’t always the fastest or most optimized thing out there, but that’s what Nginx and Varnish are for!

WordPress was really designed for a LAMP environment: Linux, Apache, MySQL, and PHP. So replacing Apache with Nginx had the potential to create some challenges–which it did! But fortunately, Nginx is an increasingly popular choice, and one of the most powerful WordPress plugins out there (W3TC–W3 Total Cache) has added support for it, which made everything easier.

W3 Total Cache

W3TC is more than a cache. It bills itself as a “performance framework,” and although I often prefer the Unix “small-tool” philosophy, W3TC really shines. To be honest, it’s options for performance enhancements encouraged me to think about using a VPS in the first place, just so I could play with them. It handles disk and database or object caching (using memcache or PHP APC), content-delivery networks (like Amazon CloudFront), and even Varnish cache purging.

Resources and How-To Guides

• WordPress on Nginx (nginx.org)
• Supercharge WordPress (openlogic.com)
• How to build the ultimate Ubuntu/Lighttpd/PHP/MySQL server, and keep it running(nanotux.com)
• Sample Varnish config for WordPress (github.com)

Image by Jeffrey Keefer via Flickr

There are many (non-exclusive) reasons to blog: money, fame, narcissism, SEO, product placement and advertising, journaling, self-discovery, passion… The specific reasons for blogging are as varied as bloggers themselves, and arguments about whether one should be blogging at all are equally diverse, especially since so many bloggers give up in frustration because their audience is so small. But a small audience is only a problem for certain kinds of blogging, of course, most especially blogging for dollars (or euros, shekels, or pounds).

As someone who does not blog to earn money (I like to pay my hosting fees, but that’s only because I’m a poor grad student), I thought I’d run through how and why I blog, and why I find it a critical part of my “real” work of academic research and writing. (If you are looking for how to make money blogging, there are better sources out there.)

Why I Blog

I blog primarily for three reasons, in increasing order of importance: (1) to give me a visible presence on the Internet for my (potential) colleagues and students to see my work;  (2) to get feedback, not all of it visible on my blog; (3) to capture interesting and potentially fruitful Internet finds (i.e., as part of my research — which is mostly online anyway these days); and (4) as a rough-draft medium that I can draw on when eventually need to actually produce a piece of writing.

(Oh yes, and because I enjoy it.)

Like many personal bloggers, I sometimes use my blog to capture interesting finds. More often, I try to integrate this with my primary purpose, and turn my research immediately into writing by creating short articles about my finds. That way I have ready-made rough-draft material to work from when I go to write. For those who may primarily focus on this purpose, a so-called “tumblelog” like Tumblr or Posterous (both of which I use from time to time) may be the ideal blogging service.

Making myself visible on the Internet may be a form of vanity, but it’s increasingly important to “brand” oneself today. I want colleagues, students, employers, etc. to be able to find me and get insight into my professional persona easily, and I want them to see what I produce. It also helps connect me to various larger communities, including academics, other bloggers, lawyers, and so on. It’s a networking tool that doesn’t need to be awkward or self-aggrandizing.

Feedback is useful, though comments may or may not be. Sometimes this comes in the form of blog comments, sometime in terms of email, and more often it gives me a medium in which to share my drafts with “real-life” colleagues. The more readers you have, of course, the more feedback you might potentially get — but that isn’t my primary purpose, so I don’t care so much about raw numbers of visitors.

How I Blog

My most important reason for blogging (use as a rough-draft medium) has developed into the primary driver of my methodology. So, while I do sometimes simply capture the barest details about new publications or interesting articles, more often I use other tools for that purpose: Google Reader or TBUZZ to Twitter to Delicious via Packrati.us and Pinboard, or Read It Later or Instapaper.

I’ve realized, though, that simply capturing lots of small amounts of information in the blog medium is less useful for me than writing fewer, longer write-ups. Spending more time on each potential source, writing up a more detailed and in-depth analysis or reflection provides me with effective, highly useful material when I need to write an article later.

Image by krisnelson via Flickr

This kind of writing is in-between the quick summaries or reactions of Twitter or a tumblelog, but less detailed, analytic, or proof-read than a true article. These are more like the “reflection” assignments I give my undergraduates, and are intended not so much for consumption by others as they are to capture analytic ideas and details that may help me later. The focus is not on perfection, which makes writing them easier, but I do try to have an audience beyond myself in mind, which vastly increases their reusability.

What does this look like? Try posts like the following — none are perfect, but they’ve all proved useful later:

• Judge Noble Hand hints at the move from property to people
• An argument for the “Inviolability of Telegraphic Correspondence”
• Smallpox inoculation and quarantine in colonial America

Obviously, this approach is not right for everyone, but for anyone who needs to produce written work (that doesn’t need to be secret!), it’s wonderful, practical, and (relatively) easy.

Conclusion

So there you go. I blog mostly so I don’t have to stare at a blank page later, and to a lesser extent so that I can be found online. (Also I like tech.) If you do decide to blog, I highly recommend you think about the why and the how for yourself.

Related articles

• 10 Reasons for a Law Student to Blog (inpropriapersona.com)
• Friday Question: Why do you blog? (worldmomsblog.com)
• Writing For Blogs – Style, Strategy, Voice: Webinar recording now available (kevin.lexblog.com)

1. Lijit

Quickly leverage custom Google searches for your site, along with enhanced results displays and search tracking information to help see what your visitors want. Allows for searching not just your blogs content, but also other data you generate on the Internet (your Twitter feed, Delicious bookmarks, and so on) Available for multiple blog platforms.

Lijit’s technology platform provides valuable information about reader behavior and intent. Use our site search and content discovery tools to build your community, expand your brand, and make more money.

2. Zemanta

Easily add related images and links to your blog postings. Available for multiple blog platforms, either as a plugin for your blogging software or for your browser. Zemanta’s site says that:

Zemanta is a tool that looks over your shoulder while you blog and gives you tips and advice, suggests related content and pictures and makes sure your posts get promoted as they deserve to be. We at Zemanta are thinking hard to help make blogging easier for you. We’re engineering better creative tools to help you get the most out of your blogging time.

3. LinkWithin

Add thumbnail images and links to related material within your site, all automatically. Works across many different varities of blogging software.

LinkWithin is a blog widget that appears under each post, linking to related stories from your blog archive. We retrieve and index all stories from your blog archive, not just recent stories, making them accessible to new or casual readers of your blog who would not otherwise encounter them.

4. Outbrain

Outbrain suggests related posts both on your site and off, and does the same for other bloggers. As a result, you benefit your visitors by showing related material from across the Web, and gain new visitors from other sites who see your posts on other blogs. It works via a simple cut and paste of Javascript, so it works on many different kinds of blog.

Our content syndication program, Outloud, exposes your most valuable content to the most qualified audience across thousands of sites. Site owners get to offer their readers great recommendations, readers get to discover interesting new articles, and Outloud customers get to grow their audience.

Image by BenSpark via Flickr

5. IntenseDebate, Disqus, or Echo

Image by evo_terra via Flickr

All three of these tools do related things: shift your comments to the cloud, with a corresponding increasing in social networking potential, extra features, and general utility. There may be nothing really wrong with your built-in commenting system, but hosting your comments elsewhere can give your visitors a much more sophisticated commenting experience. All of them have plugins for a variety of blogging platforms.

That said, here are six of my current favorites:

Around this date in the past… – Widget Edition
By Joan Junyent Tarrida
This little plugin gives you a widget that shows posts from, well, around this date in the past. It’s quite useful to help “bubble up” articles you’ve written previously and that may otherwise be lost in the past.

AutoThumb
By Mathias Geat
AutoThumb incorporates phpThumb into your site in a simple, yet powerful, fashion. It automatically pipes images through phpThumb, resizing them based on the attributes you apply to the img tag. These smaller images are then delivered to browsers, as well as being cached for future redelivery. (The original images can be hosted locally or remotely.)

Free CDN
By Phoenixheart
Free CDN automatically rewrites the URLs in your site (images and more, depending on what you select in the options) so that they are delivered to your visitors via CoralCDN. CoralCDN is a free content-delivery service that, while not necessarily speeding up delivery of content, does reduce the bandwidth and load required by your server. This makes it ideal for limited hosting providers or for hosting your blog at home.

fw-post-image
By Myriam Faulkner
This simple little plugin builds on the thumbnail feature included with WordPress 2.9. Once you have this plugin installed, if you do not explicitly set a thumbnail, WordPress will scan the images you put into your posts and use the first one it finds as the thumbnail (note: it favors local images over remote ones, but supports both).

Simple Facebook Connect
By Otto
This plugin adds a series of smaller plugins, that let you add Facebook Connect features to your blog. Most useful, I think, is the support it adds for visitors to login to your comment system using their Facebook identities.

WP Smush.it
By Dialect
WP Smush.it takes advantage of Yahoo’s Smush.it service to automatically reduce image file sizes and improve performance when you upload images into WordPress.

The future of reading blurs reading and writing. The future of reading is the networking of readers, writers, content, comments, and metadata, all in one continuous-on mash.

via The iPad is the future of the past of books.

Extending this thought into the realm of the university, Jim Milles questions scholars’ desire for Weinberger’s vision of the future:

Apart from a small subset of blogger/scholars, that doesn’t seem to be happening at all.  Perhaps it’s due to the training that most law faculty receive now–not just the J.D., but the long, perfection-oriented dissertation process–but in my experience, law professors and other sociolegal scholars are extremely reluctant (if not phobic) about releasing to the public anything other than a fully fleshed-out article.

via The Future of Reading, or Do Scholars Really Want “Social Scholarship”? « Buffalo Wings and Toasted Ravioli.

As a budding scholar of law and history, I second Milles’ observations. There are, as he points out, some bloggers who discuss their scholarship and work online, in an open fashion, but by far the vast majority of scholars I know and work with do not do this. Some in-progress scholarship makes it into SSRN in a draft form. Even more makes it online once it is actually published, although most of it remains behind subscription walls and is inaccessible except to other scholars (or dedicated readers who seek it out). But neither SSRN nor online journals encourage or facilitate the back-and-forth sharing of Weinberger’s vision of the future of reading as social.

The relatively few scholars who post to blogs or other online systems that might facilitate “social scholarship” tend to post material of a more informal sort, including initial reactions to current events or hot topics of current discussion. Very few blog posts develop research or concepts in detail, and even fewer do so in a fashion that does not react to something current.

In a sense, the social scholarship that does exist tends to be more like a cocktail party than a colloquium or even a conference presentation.

Personally, this tends to be how I blog as well. The material I put online via my blog sometimes informs my larger research projects, but mostly I am focused on snippets of thoughts, initial reactions, and concepts I wish to capture for later.

Partly this may be due to the form of blogging, or of reading online: shorter tends to work better, and hot and trending topics tend to attract more broad interest. (The down side of “crowd sourcing“?)

I like to more fully develop, research, and think about my scholarship before I share it, and when I do share it, I tend to have a different, more specialized audience in mind. My online writing tends to consist of more assertions and fewer citations; my scholarship is the opposite.

Is this just a “natural” consequence of different mediums? Would scholars be better off publishing in a more “social” (technologically social, that is) fashion? Is one way better than the other? And if social reading is the future  —  or should be the future  —  is the iPad a step in the wrong direction?

Reflecting on Avvo‘s Internet marketing conference for lawyers, Kevin O’Keefe of LexBlog writes:

I started on the Internet at AOL. I answered people’s injury, medical malpractice, and worker’s comp questions. The more questions I answered, the more work our firm got and the more successful we became. The more I listened to others and the more engaged I became, the more I enjoyed myself and the more people who contacted me to help them.

I discovered that Internet marketing was not all about me. It was about what I, as a lawyer, could do to help other people. Rather than buying cheesy yellow page ads and running expensive TV ads, I could get good legal work by helping people.

via For lawyers is the world really all about Google rankings? : Real Lawyers Have Blogs.

The lesson that good connections with people  —  arising from providing good quality content on a blog, helpful commentary in forums, useful information and replies on Twitter, to name just three examples  —  is the core of effective marketing is often lost.

You might call this “un-marketing” or “non-marketing” to distinguish it from frantic SEO, blaring billboards, or extravagant banner ad purchases. It’s deceptively simple: go out and help people, and clients will find you.

Taking this kind of approach does not mean foregoing an online presence. How can you put yourself out there and be helpful if you don’t join Twitter, don’t blog, and don’t contribute to forums? And once you start seeking out people to help, how can they and others find you later if you aren’t on LinkedIn or don’t have your own Web site?

Whatever you call it, the core message is to be helpful and do good, and the clients and customers will seek you out in return.

As a do-gooder, SEO, ad buys, and similar strategies should be done to be helpful. That is, such strategies should make it easier for people to find you, and for you to be helpful in return. They are secondary strategies, not primary ones.

For a do-gooder, primary strategies involve getting out there and providing utility to others: answering questions, being a resource, advocating positions you believe in, sharing your experiences and knowledge.

Doing good and being helpful isn’t a new marketing strategy. It’s just an old way of showing the world your worth, updated for new mediums. It takes Google’s “don’t be evil” and goes one better: go do good, and the clients will come (just don’t forget to make it easy for them!). It takes “add value” and takes it further: go be helpful!

Has this kind approach worked for you? Have better ideas? Think it’s crazy? Let me know in the comments.