In the course of setting up this blog, I've learned a lot.  By sharing these lessons here, I hope to chronicle my own progress while providing a useful 'best practices' starting point for others considering web publishing.

---

Typography

This word derives from the Greek 'typos'  (form) and 'graphe' (writing), and it is essentially the study of textual presentation.  When you choose to publish something on the Internet, whether or not you have any formal instruction in typesetting or graphic design, typography is very much your problem.

The font you choose to present your work must be:

1. readable - if your blog is a chore to read, fewer people will do it
2. accessible - readers who desire or require a larger font must be able to scale the text size with ease
3. attractive - your font must mesh visually with the rest of the page and mustn't distract from your content

While the Internet is full of people arguing about the best fonts for blogs (1), most agree that a good web font does not have serifs.  Serifs are small lines added to the edges of symbols, evoking the highly-ornamented styles used by monks as they handwrote books:

Sans serif and serif fonts; serifs highlighted in red

Common examples of sans serif fonts include Arial, Verdana, and Helvetica.  Avoid using uncommon, non-standard fonts - many readers will likely not have these fonts installed, and their web browsers will then replace your desired font with one of the standard fallback fonts above.  Keep it simple and innovate in your content, not your typeface.

Make sure your default font size and line-spacing are large enough.  Your blog is not a newspaper and you're not paying extra to use more space, so place a premium on readability.

Many web publishers appear to agree that font sizes should be declared in units of 'em' instead of pixels ('px'); this recommendation originally arose because old versions of Microsoft Internet Explorer refused to resize text that was sized in px, but this problem has long since been resolved.  The new CSS 3.0 standards introduce a new 'relative em' (em).  You can read hundreds of arguments for sizing in em, rem, or px (2,3,4,5), but at this time in Internet history it probably doesn't matter too much. Just make sure that your fonts are readable.

I use this CSS to style my body text, and the results are reasonable:

body {
font-family: Verdana, Arial, sans-serif;
font-size: 0.9em;
letter-spacing: 0em;
line-height: 1.5em;
margin: 10 0 0 0;
padding: 0;
}

---

Testing

There are a lot of browsers out there (6), but as of 2013 the market share looks something like this (7):

from http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

If you test your website in Chrome, Firefox, Opera, IE, and Safari, you'll have 90%+ of your visitors covered.  It's easy enough to test in Chrome, Firefox, and Opera from any operating system, but Internet Explorer and Safari are only available for certain OSes.

For the highly lazy/efficient, there are web services that purport to display images of how your site appears in different browsers and on various mobile devices.  It's worth a shot: http://browsershots.org/

For speed, consider trying out Google's PageSpeed tool.

---

Favicons

The 'favicon' is that little site icon that appears in the browser tab to the left of the site name.  I use this favicon:

If you're using Blogger, you can add a favicon under 'Layout'.  There are techniques for generating multi-resolution favicons that include transparency and make you breakfast every morning (8), if you're willing to run a few searches and get comfortable in GIMP, ImageMagick, or another graphics design package.

---

Tracking Your Traffic

Feedburner is a free service offered by Google that allows you to track and analyze subscriptions to your blog's Atom/RSS feed (9).  After creating a new account on http://feedburner.google.com, create links on your blog to http://feeds.feedburner.com/YourBlogName (for instance, I use http://feeds.feedburner.com/AndHigherStill).  You can get free feed icons and code snippets at: http://www.feedicons.com/.

If you use Blogger, you can make sure you're seeing all of your subscription traffic by redirecting all of your post feed requests through Feedburner.  Under Settings/Other:
After a few days, Feedburner will start graphing your total number of subscribers and some additional statistics about how they interact with your site.

Google Analytics is a free service for monitoring traffic and user interaction on your blog (10).  By enrolling and installing, you get instant access to information about how long people spend on your blog, what they click on, where they're coming from, and what browser they're using.  You can sign up here: http://www.google.com/analytics/.  If you're a Blogger user, just paste your Analytics Web Property ID into the Google Analytics box under Settings/Other to activate it; if you use something else, you'll have to paste some Javascript code into your site's HTML template.

---

Email Following, 'Like', and '+1'

Instructions for installing Google's '+1' button are available here: https://developers.google.com/+/plugins/+1button/

Instructions for installing Facebook's 'Like' button are available here:
https://developers.facebook.com/docs/reference/plugins/like/

If you have registered your site with Feedburner, it's relatively easy to allow your readers to subscribe to your blog via email.  Log into Feedburner, click on your website's profile, then navigate to Publicize/Email Subscriptions.  It will generate a bit of code you can paste into your site's HTML.  If you're using a Blogger, you can add a pre-built Widget that accomplishes this.

---

Snippet Engineering

When you share posts to your blog on social networking sites like Facebook and Google+, you give the site's sharing tool your URL and it attempts to convert it into a 'snippet' with a picture, title, and description.

Sharing tools do this by reading 'metadata' - tags embedded in your site that relay information about the site itself.  You probably didn't put the metadata in there yourself; most blogging platforms attempt to generate the right tags independently.  Unfortunately, the blogging platform often misunderstands your intentions, and the sharing tools often misunderstand the automatically-generated metadata.

It grabbed a terrible photo and text from the first comment instead of the post itself!  Bad!

Sometimes if you want it done right, you have to do it yourself!

There are many different metadata formats, but Facebook's Open Graph protocol works fine with most social sites (11).  The metadata tags look like this:

<meta property='og:site_name' content='And Higher Still'/>

While most blogging platforms have an option to edit your posts in HTML, this isn't what we need; these tools only allow you to edit the <body> of the document, while these tags need to be placed in the <head>.  To edit the HTML in your Blogger-hosted blog's <head>, go to 'Template', then click the button to 'Edit HTML'.  Click in the template text field and hit ctrl-f to begin a search, then type <head> and hit enter; the <head> opening tag should now be highlighted.  Add your desired metadata tags just below the <head> tag.

I use the following tags to give Facebook some information about my overall site:

<meta property='fb:admins' content='583452465'/>
<meta property='og:site_name' content='And Higher Still'/>
<meta property='og:locale' expr:content='en_US'/>

The 'site_name' and 'locale' tags are pretty straightforward.  The 'fb:admins' tag associates my blog with my Facebook account, using my Facebook Admin ID.  You can find your Admin ID by logging into Facebook and viewing one of your photos; the number you want directly follows 'pb.' in the URL.

To add metadata to individual posts, I also add the following:

<b:if cond='data:blog.url == &quot;http://www.andhigherstill.com/example_url&quot;'>
<meta property='og:type' content='blog'/>
<meta property='og:title' content='And Higher Still | Example Title'/>
<meta property='og:url' content='http://www.andhigherstill.com/example_url'/>
<meta property='og:description' name='description' content='example description'/>
<meta property='og:image' content='http://example_image_url.png'/
</b:if>