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:
- readable - if your blog is a chore to read, fewer people will do it
- accessible - readers who desire or require a larger font must be able to scale the text size with ease
- attractive - your font must mesh visually with the rest of the page and mustn't distract from your content
Sans serif and serif fonts; serifs highlighted in red |
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 |
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:
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'
Installing social media buttons is just a matter of customizing a code snippet and pasting it into your site's HTML.
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'/>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.
<meta property='og:site_name' content='And Higher Still'/>
<meta property='og:locale' expr:content='en_US'/>
To add metadata to individual posts, I also add the following:
<b:if cond='data:blog.url == "http://www.andhigherstill.com/example_url"'>
<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>
The first line specifies that the tags that follow should only be added to the post with the URL 'http://www.andhigherstill.com/example_url'. The 'type', 'title', and 'url' tags are pretty straightforward. The 'description' tag holds the text that will be displayed underneath the title in the snippet, and the 'image' tag specifies which image to use in the snippet.
If you're working in Wordpress instead of Blogger, just use the Open Graph Metabox plugin to set the metadata tags.
You can view what the share tool sees and debug your metadata tags with the Facebook Debugger (12) and the Google Structured Data Testing Tool (13).
Twitter is getting in on the Open Graph action with the introduction of 'Cards', which display snippet-like previews when you tweet a URL.
First, complete the steps for snippet engineering above. Then, add the following metadata to your site's <head> to prepare it to use Twitter Cards:
NOTE: This site no longer uses affiliate marketing. Here's why.
You can earn money for directing customers to Amazon products by signing up for the Amazon Affiliate Program. Affiliate payments start at 4% of the value of the products that a customer buys after clicking through your product link, even if the products they buy are different from the products you link to. It doesn't get much easier than that.
To gain access to affiliate links for banks, credit cards, and all manner of other goods and services, sign up for a publisher's affiliate accounts at FlexOffers.com and LinkOffers.com.
NOTE: This site no longer uses advertisements. Here's why.
You can activate Adsense for Blogger by navigating to the 'Earnings' tab in the Blogger management interface and clicking 'Sing up for AdSense'.
By default, the Blogger version of Adsense will stick a big, ugly 'Text/Rich Media' ad right at the top of your sidebar and interspersed within your posts themselves. If you want to make maximum dollars and you don't care that this instantly tells all of your readers that you're a huge sellout, don't change anything.
If you'd prefer to avoid that, do the following:
Is your website slow to load and respond? There are a variety of web tools that can help you figure out what's slowing things down. Just enter your URL and hit 'submit' or 'run' or 'analyze' or whatever:
"Pingdom Website Speed Test"
http://tools.pingdom.com/fpt/
"WebSiteOptimization.com"
http://www.websiteoptimization.com/services/analyze/
"Internet Marketing Ninjas Page Speed Tool"
http://www.internetmarketingninjas.com/pagespeed/
For advanced (harder-to-use) fanciness, check out the FireBug extension for Firefox:
http://getfirebug.com/
https://addons.mozilla.org/en-US/firefox/addon/firebug/
Coming soon! (Once I get it working...)
(1) Choosing your font - http://www.problogger.net/archives/2006/09/26/which-font-is-best-for-blogging/
(2) Sizing your fonts - http://css-tricks.com/why-ems/
(3) Sizing your fonts - http://snook.ca/archives/html_and_css/font-size-with-rem
(4) Sizing your fonts - http://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-in-my-css
(5) Sizing your fonts - http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/
(6) Wikipedia: web browsers http://en.wikipedia.org/wiki/List_of_web_browsers
(7) Wikipedia: web browser usage - http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
(8) Creating a fancy favicon: http://www.netmagazine.com/features/create-perfect-favicon
(9) Google's RSS subscription monitoring service, Feedburner: http://feedburner.google.com/
(10) Google Analytics - http://www.google.com/analytics/
(11) Wikipedia: Open Graph Protocol - http://en.wikipedia.org/wiki/Facebook_Platform#Open_Graph_protocol
(12) Facebook Debugger - https://developers.facebook.com/tools/debug
(13) Google Structured Data Testing Tool - http://www.google.com/webmasters/tools/richsnippets
(14) Twitter Card signup - https://dev.twitter.com/docs/cards/validation/validator
For each new post that you create, you'll have to go into the Template HTML editor and add another chunk of metadata. Tedious: yes. Worth it: yes!
With our metadata in place: much better. |
If you're working in Wordpress instead of Blogger, just use the Open Graph Metabox plugin to set the metadata tags.
You can view what the share tool sees and debug your metadata tags with the Facebook Debugger (12) and the Google Structured Data Testing Tool (13).
Twitter Cards
Twitter is getting in on the Open Graph action with the introduction of 'Cards', which display snippet-like previews when you tweet a URL.
First, complete the steps for snippet engineering above. Then, add the following metadata to your site's <head> to prepare it to use Twitter Cards:
<meta name="twitter:card" content="summary"/>Validate your page's metadata and apply to use Twitter Cards here (14).
<meta name="twitter:site" content="@your_site_twitter_handle"/>
<meta name="twitter:creator" content="@your_personal_twitter_handle"/>
Affiliate Marketing
NOTE: This site no longer uses affiliate marketing. Here's why.
You can earn money for directing customers to Amazon products by signing up for the Amazon Affiliate Program. Affiliate payments start at 4% of the value of the products that a customer buys after clicking through your product link, even if the products they buy are different from the products you link to. It doesn't get much easier than that.
To gain access to affiliate links for banks, credit cards, and all manner of other goods and services, sign up for a publisher's affiliate accounts at FlexOffers.com and LinkOffers.com.
Adsense Advertisements by Google
NOTE: This site no longer uses advertisements. Here's why.
You can activate Adsense for Blogger by navigating to the 'Earnings' tab in the Blogger management interface and clicking 'Sing up for AdSense'.
By default, the Blogger version of Adsense will stick a big, ugly 'Text/Rich Media' ad right at the top of your sidebar and interspersed within your posts themselves. If you want to make maximum dollars and you don't care that this instantly tells all of your readers that you're a huge sellout, don't change anything.
If you'd prefer to avoid that, do the following:
- Go to the 'Earnings' tab and select 'No' for 'Show ads on blog'
- Go to the Adsense management interface at https://www.google.com/adsense/
- Navigate to the 'My Ads' tab and locate your site's entry
- Click on 'Edit ad type' and change to 'Text Ads Only'
- Click on 'Get code' and copy the provided code
- On the 'Layout' tab in the Blogger management interface
- Click 'Add a Gadget' and select 'HTML/Javascript' and paste in the code
- Position the gadget somewhere more reasonable, like the bottom of your sidebar
- Refresh your page and make sure that the ad is displaying correctly
Website Speed Testing
Is your website slow to load and respond? There are a variety of web tools that can help you figure out what's slowing things down. Just enter your URL and hit 'submit' or 'run' or 'analyze' or whatever:
"Pingdom Website Speed Test"
http://tools.pingdom.com/fpt/
"WebSiteOptimization.com"
http://www.websiteoptimization.com/services/analyze/
"Internet Marketing Ninjas Page Speed Tool"
http://www.internetmarketingninjas.com/pagespeed/
For advanced (harder-to-use) fanciness, check out the FireBug extension for Firefox:
http://getfirebug.com/
https://addons.mozilla.org/en-US/firefox/addon/firebug/
Google Custom Search
Coming soon! (Once I get it working...)
(1) Choosing your font - http://www.problogger.net/archives/2006/09/26/which-font-is-best-for-blogging/
(2) Sizing your fonts - http://css-tricks.com/why-ems/
(3) Sizing your fonts - http://snook.ca/archives/html_and_css/font-size-with-rem
(4) Sizing your fonts - http://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-in-my-css
(5) Sizing your fonts - http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/
(6) Wikipedia: web browsers http://en.wikipedia.org/wiki/List_of_web_browsers
(7) Wikipedia: web browser usage - http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
(8) Creating a fancy favicon: http://www.netmagazine.com/features/create-perfect-favicon
(9) Google's RSS subscription monitoring service, Feedburner: http://feedburner.google.com/
(10) Google Analytics - http://www.google.com/analytics/
(11) Wikipedia: Open Graph Protocol - http://en.wikipedia.org/wiki/Facebook_Platform#Open_Graph_protocol
(12) Facebook Debugger - https://developers.facebook.com/tools/debug
(13) Google Structured Data Testing Tool - http://www.google.com/webmasters/tools/richsnippets
(14) Twitter Card signup - https://dev.twitter.com/docs/cards/validation/validator