Lessons from 3 Years of Running a Tutorial Blog

When I first started Code it Pretty, I searched for a guide to running an all-tutorial blog. I found generic advice about how to write a good tutorial, but nothing about the day-to-day experience of running a tutorial blog — the type of blog that's going to get an avalanche of questions, most of which really need answers.

Over the 3 years since I started, I realized why I couldn't find that guide; there is no one true way to run an all-tutorial blog. The process that works for me is very personal and came from a lot of trial and error.

But, that doesn't mean that there's nothing to be said about how it's done. Though this is not — and can't be — the definitive "tutorial blog handbook" I was looking for, I'm sharing some lessons I've learned and strategies I've developed to keep my blog going strong without stressing myself out.

Inbox Zero Ain't Happening

When I put a tutorial out into the world, I know I'm going to get questions. In fact, I hope I do — if I don't, nobody's reading!

At the beginning, I tried to answer every comment and email. It wasn't possible to keep that up over time, so I came up with limits and policies to help me manage all the questions I get without getting seriously overwhelmed.

Set limits. I set firm limits for myself about when I respond to questions. I have a set window of time for answering questions on weekdays. After that time is over, I stop reading/answering questions for the day. On the weekends, I don't answer questions at all. That boundary is a big help in keeping me from burning out.

I try to answer as many questions in my tutorials' comment threads as I can, but sometimes I just can't keep up. When I'm too busy, I'll skip over some comments without beating myself up over it. Vague comments (like "this doesn't work for me" with no other details), and questions from people who clearly haven't read the entire tutorial are just begging to get skipped, so they're the first ones I'll let slide.

Create policies and make them known. I have one set-in-stone policy about how I answer tutorial questions — I only answer them in the comment thread for the tutorial. That way, when another reader has the same question, my answer is right there on the same page as the tutorial.

I'm super up-front about this policy. It's on my Ask page twice. The Ask page is the only place I list my email address, so if a reader is emailing me, they've definitely had the chance to read my policy.

Since I put that policy in place, the email I get with tutorial questions has decreased significantly. I still get a handful every month, but they get the lowest priority in my inbox (and I don't stress about it). When I get around to answering I send a form letter that gently repeats my policy and points back to the comment thread.

Put together a file of "ready made" responses. Having some form letters and pre-written bits really helps me answer questions faster. At first I kept a Google Docs file of all my pre-written stuff. Now I use TextExpander, a Mac app that lets me type in my saved responses with just a few keystrokes.

Always. Be. Revising.

I think of my tutorials as living documents. I've never written a tutorial that was permanently finished on its first day of publication. I tweak, correct, and revise all the time.

Update your tutorials as soon as you can when something changes. I write about technical stuff, so change is constant — blogging platforms get updated, the tech I write about changes, and my own skills evolve. I make many small revisions throughout my blog every month. Sometimes, I'll completely rewrite and republish an old tutorial to bring it up to date.

If you have to repeat yourself often, figure out why and revise. When I write answers to questions, I pay close attention to when I'm repeating myself. Sometimes, it's unavoidable — I know I'll always have to ask questions that start with "Can you be more specific..." and "Can you link me to where you're using the code...". That's when my pre-written responses file really comes in handy.

But, when I find myself repeating the same exact detail about a tutorial in my answers, I know there's a problem with the tutorial and I need to make a revision. Either something is missing from my instructions, I haven't explained it well enough, or I need to use a visual cue to keep readers from skipping over something important.

Kill Your Darlings

William Faulkner said, "In writing, you must kill all your darlings". I wouldn't go as far as old William there, but sometimes a tutorial I love a whole lot still has to die.

I've deleted posts that I put a ton of time, effort, and care into. In most cases it was because they were about things that don't exist anymore. But, in two particularly painful cases, I simply failed at teaching something complicated, and I couldn't revise my way out of it. It's a bummer to dump hard work, but trying to support obsolete or ridiculously difficult tutorials is worse.

When I do kill a "darling", I redirect the post's URL to another relevant page on my blog so anyone following a link to the old post won't end up on my 404 page. If there's nothing else like the deleted post, I redirect to the home page or my "Tutorials by Topic" page so the reader isn't completely lost.

Background image in title card from (affiliate link) Creative Market

Make Your Blog More Mobile-Friendly Without Redesigning

The mobile web is huge, and it's going to get bigger as people all over the world fall in love with smartphones. Now that so many people are browsing on small screens with data plans, a mobile-friendly blog helps you welcome a larger audience.

Lots of blogs are switching over to responsive or adaptive designs that scale and rearrange themselves depending on the size or type of the screen. But, redesign can be costly and time consuming. And, if you have fixed-placement arrangements with advertisers, you may feel like you're trapped in your current layout.

That doesn't mean there's nothing you can do to make your mobile readers happier!

If a full redesign isn't in the cards for you right now, there are adjustments you can make — ranging from tiny tweaks to more ambitious changes — that let you show your mobile readers some love without starting over from scratch. Today I'll give you some suggestions.

Reduce the Per-Page Post Count

This is by far the easiest tweak I'm going to cover today — it might only take you a few seconds!

Showing fewer posts per page reduces the load time & size of your home page and the index pages (the ones your readers reach using older & newer post links).

If you're on Blogger, you can adjust your posts-per-page under Settings > Posts and Comments > Posts > "Show at most".

On Wordpress, the setting is under Settings > Reading > "Blog pages show at most".

Say No to Popups

Real talk: people hate popup windows and popup overlays, and they hate them even more on mobile devices. Popups block the content, they're hard to dismiss on small screens, and they can slow down the load time. And I mean, come on — they're popups. They're annoying by design.

Mobile readers want to read your posts, but they don't want to struggle with closing a big popup window to do it. Keep your small-screen users in mind and ditch those popups!

Drop the Dropdowns

Or at the very least, test your dropdown menu(s) on mobile devices to see if they actually work. Unless your dropdown navigation was designed with mobile users in mind, it most likely relies on hover/mouseover events to create dropdown link lists. Those effects don't work the same on touchscreens as they do with a mouse.

Many dropdown menu styles that work smoothly on a computer frustrate touchscreen users with awkwardly-timed hover states and disappearing, unclickable links.

If your dropdown menu isn't compatible with mobile devices, consider streamlining your navigation to reduce or eliminate the need for dropdowns. A simple navigation layout is great for readers on any device, not just mobile users.

And, as an added side-benefit, simplified navigation can make it easier for search engines to crawl your blog. Give it some thought!

Limit Widgets & Gadgets

Widgets and gadgets, especially social media embeds and ads, can seriously bloat your blog and make it harder to load on mobile browsers. While you're getting mobile-friendly, take some time to reevaluate your widgets. Are they all earning their place on your blog?

Don't be afraid to experiment with removing widgets — you can always add them back! If you need help figuring out which widgets should get the boot, try out Pingdom's Website Speed Test. You can arrange the Pingdom results to show you which elements are taking the longest to load or have the largest filesize.

Enable an Alternate Mobile Template

You can "fake" a responsive design with an alternate template that only shows itself to readers on handheld devices. These templates let you leave your blog "as is" for computer screens, while radically optimizing the experience for mobile users. Mobile-only templates strip your blog down to its essence, hiding sidebars and most of the design elements. That means some or all of your sidebar ads will be hidden from mobile users.

Blogger has a built-in mobile template, and there are lots of plugin options for Wordpress — I'll show you my favorite!

Blogger's Mobile Template

Blogger's mobile template automatically sets mobile posts-per-page to 4. It also truncates all of your posts to the title, a thumbnail of the first image, and the first few sentences of your posts. If you use AdSense on your blog, up to two AdSense ads will appear — one at the top of your page and one at the bottom. Any other ads that show up in your regular design will not.

Blogger's mobile template is turned on by default, but if you've turned it off, it's easy to turn it back on. Go to Template and click the gear icon below the Mobile template. Set the radio button to "Yes. Show mobile template on mobile devices", then press the orange Save button.

Wordpress Mobile Plugins

For Wordpress users, I recommend WPTouch, a very slick mobile plugin with lots of customization options and features. And, like the Blogger mobile template, it supports AdSense! There's also a premium version with lots of sweet features. Complete installation instructions are available on the plugin page.

If WPTouch doesn't strike your fancy, there are plenty of other options available. WPMU has a great rundown of 8 excellent mobile plugin options.

All About Disclosing Sponsored Posts

When you write a sponsored post, you need to let your readers know that you received compensation or a product in return for the post. It's not just good manners — if you live in the United States, it's the law.

And, no matter where you live in the world, you need to disclose paid links to search engines. If you don't, you risk damaging the search engine ranking of your own blog and your sponsor's website.

There's been a little bit of confusion lately about what exactly you're supposed to do to disclose sponsored posts. Your responsibilities as a blogger are actually quite simple. Here what to do:

Let Your Readers Know When You're Paid to Post

If you receive money or a product from a business or person, and you blog about them, you need to disclose — up front — that money or product was given to you by that company or person.

The easiest and most direct way to do this is to put "Sponsored" or "Ad" in your post title, and a brief description of how you were compensated in the first paragraph. If your post is long and your readers will need to scroll between the disclosure and the link to the sponsor, add another brief disclosure before the link to your sponsor.

I've seen some tutorials that suggest using an image to disclose a sponsored post. While that's an eye-catching way to do it, it's incomplete if you don't include alt text for the image. Images without alt text are not available to readers with visual impairments who use screen readers to browse the web. You need to make sure that all of your audience is notified that your post was sponsored.

BTW, The FTC Guidelines for Sponsored Blog Posts Haven't Changed

In March 2013, the FTC released a new set of guidelines for advertisers, ".com Disclosures: How to Make Effective Disclosures in Digital Advertising", and this made many bloggers think that the guidelines for sponsored blog posts had changed.

Sponsored blog posts and endorsements are still subject to the guidelines in the "Guides Concerning the Use of Testimonials in Advertising", which was released in 2009. If you're already familiar with those guidelines, you're probably already doing everything right.

There is one small new detail in the new document about disclosing sponsored links on social media. All you need to do to disclose those properly is add "Ad:" or "Sponsored:" to the beginning of the social media post. Piece of cake, right?

Identify Paid Links for Search Engines

Search engines penalize websites that don't disclose paid links, and those penalties are applied to the both blog that posts the undisclosed link and the advertiser whose link was not disclosed.

All you need to do to avoid this problem is add the rel="nofollow" attribute to your paid link. Last year I wrote a detailed tutorial on adding nofollow to links, but in a nutshell, you add rel="nofollow" inside your link to your sponsor, like this:

<a href="http://www.sponsor.com" rel="nofollow">My Awesome Sponsor</a>

You can read more about Google's policy on paid links and "link schemes" in the Webmaster Tools knowledge base.

Update - May 29, 2013:

Google's webspam team leader, Matt Cutts, posted a video that goes into more detail about how Google wants you to disclose your "advertorial" content:

What If My Sponsor Doesn't Want Me to Disclose?

Drop them like a hot rock and don't feel sorry about it.

The FTC guidelines are designed to compel advertisers to tell the truth about their products, and let people know when the media they're consuming is an advertisement. The search engine guidelines help prevent sites from getting an unfair advantage in search engine results. If your sponsor won't be honest with your readers and compete fairly, they don't deserve space on your blog.

Add an Icon to Blog Post Titles with CSS

A little icon next to your post title is a cute way to bring the design elements of your theme into your blog posts. And, it's easy to do with a bit of CSS! You'll probably spend more time choosing the perfect icon than you will on adding the CSS to your blog.

Demo

For a live demo, visit codeitpretty.blogspot.com, where I've added a heart icon to each of the post titles.

Who Can Use This Tutorial

If you can add CSS to your blog, you can do this! Blogger, self-hosted Wordpress, and Typepad Unlimited users, you're all set. Wordpress.com users will need the Custom CSS upgrade.

Before You Get Started

You'll need two things to use this tutorial: an icon, and the class name of your post titles. The icon is up to you, but I'll show you how to find your post title class name.

Blogger & Typepad users who use a standard template and haven't made changes to the post title class, your post title classes are:

Blogger: post-title

Typepad: entry-header

Wordpress title classes vary by theme. If you're on Wordpress, or you've made changes to your Blogger or Typepad template classes, here are two ways to find your post title class.

1. Use your browser's developer tools. If you're using Firefox or Chrome, you can use your browser's developer tools to identify your post title class by right-clicking a post title and selecting "Inspect Element" from the menu.
2. Check your blog's source code. Using your browser's "View Source" option, open up your blog's source code. Find a post title within your source, and find its class. The class might be inside your post title's link element, or nearby in the code. It's usually something like post-title, entry-title, headline, etc.

Once you have your icon and you've found your post title's class, you're ready to add your title icon!

Step One: Upload Your Icon

Blogger users, upload the icon to your blog's Picasa Web Album. Wordpress users, upload the image to your media library. Typepad users, upload the image to the File Manager. You can also use Photobucket or another image hosting service if you prefer. Wherever you upload it, copy the direct link to the image. You'll need that soon.

Step Two: Add the CSS

You only need to add this CSS to your template once and the icons will appear on every post title.

In Blogger, go to Template > Customize > Advanced > Add CSS. If you're on Typepad, go to Design > Custom CSS. On Wordpress your custom CSS location will vary. If you're using Jetpack's Custom CSS option, it's under Appearance > Edit CSS.

I'm going to demonstrate this with the class .post-title, since I'm on Blogger. Remember to change it if you blog elsewhere! Here's the basic CSS:

  .post-title {
    background: url(ICON-IMAGE-URL-HERE) no-repeat left transparent;
    padding-left: 15px;
    }

Now that you've seen the CSS, let me break it down for you!

• In the first line, the selector (.post-title in the example) tells the CSS to style all the links with the class post-title. Again, change that if .post-title isn't your class. Don't forget the dot (.) in front of the class name!

The next line has four parts:

1. background: url(ICON-IMAGE-URL-HERE) sets a background image for the selected titles. Replace the text inside the parentheses with the direct link to your icon image.
2. The "no-repeat" value makes it so the image only appears once for each link.
3. "Left" places it to the left of the URL.
4. "Transparent" sets the background color of the link and its associated icon.
• The last line, padding-left: 15px; , creates a bit of room between the icon and the beginning of your post title. You may need to adjust the padding size, 15px is just a starting point.

Variations

Now that you've got the idea, you might want to try one of these variations. Thanks to Joelle and Marina for their prompts in the comments!

These variations work in modern browsers, but aren't compatible with older versions of Internet Explorer. They don't cause any problems in older IE, they just don't show up.

Icon Above Your Title

If you'd like to place your icon above your title, find the class of the div surrounding your post using the class-finding methods described above. Once you've found the class, use this basic CSS:

.post-outer:before {
content: url(YOUR IMAGE URL HERE);
}

I used ".post-outer" because I'm on Blogger. If you're on another platform, you may need to use a different class.

You can also center the icon above your post title if you prefer.

If you'd like to center the icon, the CSS is:

.post-outer:before {
content: url(YOUR IMAGE URL HERE);
display: block;
width: ICON WIDTH IN PX HERE;
margin: 0 auto;
}

Two Icons

If you'd like to add two icons to either side of your title, you can use :before and :after content to place the image. If you use this method, the second icon will be placed at the end of your title's text, like in these examples:

Here's the basic CSS:

.post-title:before,
.post-title:after {
content: url(YOUR IMAGE URL HERE);
}

Remember that I used .post-title because I'm on Blogger. If you're on a different platform, be sure to change the selector if needed.

Keep Your Blog Archive Fresh

Third and final part of the "Get Your Blog Ready for Next Year" series.

Often, your readers' first introduction to you is through one of your oldest posts — you know, the ones in mothballs at the back of your archive. When readers find themselves in your back pages, they should see you at your best, just as they would if they landed on your newest post.

It's easy for the archive to get a little stale over time, but it's not hard to get it tidied up and fresh. Let's get started!

Delete Pointless Comments

Isn't it wonderful when you read a great blog post, then see that it has nothing but thoughtful, useful comments? That's no accident; the author is pruning out the pointless comments with no mercy.

With that in mind, I bet you already know which comments to cut during your year-end sweep. Yes, it's that rude comment that added nothing to the discussion. And yeah, delete that self-promoting-but-not-quite-spam comment from the e-commerce site that's kinda in your niché.

If you don't like it, cut it and don't feel sorry about it. It's your blog, you're in charge of the discussion. How you manage that discussion tells your readers a lot about you.

Remove or Correct Dead Links

Dead links are frustrating for readers, and search engines don't like them, either. So, clean them up for the new year!

There are many online tools for finding broken links in your blog, so I'm just going to recommend one that works for blogs on any platform. If you have fewer than 3,000 pages in your blog you can use brokenlinkcheck.com to find dead links for free (there's a premium version, too, if you have a larger site).

When you run your first broken link scan, your results may be startling. But don't panic, even if you have a lot of dead links. It's rare that a broken link is an urgent emergency. And, you'll probably have a few "false positives".

Give priority to fixing broken links that appear site-wide first. For example, if you discover that a link in your sidebar blogroll is dead, correct that first, then move on to dead links in your posts & static pages. Finally, move on to removing comments with dead links when you have time.

Refresh Your "Greatest Hits"

You probably already know which posts in your archive are the most popular, but if you don't, identify them in Google Analytics (Behavior > Site Content > All Pages) or in your blogging platform's built-in stats. Go back through those gems with an objective eye, and see if you can add a little polish to keep them relevant for the long-haul.

Think about how you'd write your best posts if you were writing them today. Has your writing style changed? Do you use different graphics now, or perhaps a little bit of CSS flair? Think about applying your newest styling to your vintage posts to help bring them into the present.

If you decide to give your older, popular posts a makeover, don't be shy about reintroducing them to your followers! Link to them in your new posts, and re-share them through social media. Followers who've seen it before won't hold it against you, and it gives your new followers a good reason to dig into your archives and see more of what makes you great.

What To Do With Obsolete Posts

Sometimes, a post is just not relevant anymore. Maybe it's a sponsored post from a defunct company, or a giveaway that closed two years ago. Or, maybe it just doesn't fit the theme of your blog anymore — that's common if you've been blogging for years and the focus of your blog has shifted over time.

An obsolete post does your blog and its readers no good. So, what should you do with it? Let's figure it out!

First, go through your archives and identify irrelevant posts. There's no exact science for rooting them out — you'll know them when you see them. After you've compiled a list of pointless posts, take a look a their stats, either in Google Analytics or in your blog's built-in stats.

Popular, But Irrelevant

If an obsolete posts is still getting a lot of views, consider rewriting it to bring it up to date, or link your readers to more up-to-date content at the very top of the post.

Unpopular and Irrelevant

Posts that are unpopular with readers and unloved by you are good candidates for deletion. If you use Blogger or self-hosted Wordpress, you can redirect the URL of a deleted post to another, more relevant post or page in your blog (see the Resources at the end of this post for more info).

I know the idea of deleting a post can strike fear in the hearts of bloggers. But, don't be afraid to delete something that is doing no one any good. The few visits your worst posts get may bump up your pageviews a little, but they're not going to help you grow. Focus your attention on creating new, great posts, and you'll quickly recover from any traffic loss that may come from trimming away a post that's truly dead.

Resources

• If you use self-hosted Wordpress, you can use the Broken Link Checker plugin to find and repair broken links.
• Blogger users can use the new custom redirects feature to redirect links from deleted posts to another post or page.
• Self-hosted Wordpress users can use the Redirection plugin for URL redirects. It's also handy for identifying dead links, so it's a two-fer!

The "Get Your Blog Ready For Next Year" Series

This is the final post in a three-part series. Need to catch up? Here are parts one & two:

• Back Up Your Blog
• Improve Your Navigation

Lemon photo CC-BY-SA Sean Neakums

Back Up Your Blog

Part One of the "Get Your Blog Ready for Next Year" series.

I know it's not exciting or glamorous, but backing up your blog is essential to your blog's health. Think of it as good blogging hygiene! Now that we're coming up on a new year, it's a great time to back up your blog files and plan to make it a regular habit.

Why You Should Back Up Your Blog

One simple reason: if you have a backup of your blog, it's much easier to get back to blogging business in case of a calamity. Blogs can get hacked, templates can get mangled... stuff happens. And a backup takes a lot of the pain out of the recovery process when it does.

You may never experience one of those blog-disrupting events. I hope you don't, they're no fun. But, it's better to have something you don't need than need something you don't have. And, it's so easy to back up, you really have no excuse not to!

Where to Store Your Backup Files

Let's talk about where you're going to put those backup files before we talk about how to get them. If you have your storage plan in place before you download the files, you're more likely to stick to it.

Naturally, you should keep a copy of your backup files handy on your computer. But, you should also keep another copy somewhere safe. A spare will save your blog if your backup files are corrupted or accidentally deleted (or if your computer meets an untimely end).

Here are three places you can stash your backup files "in the cloud", so you can be sure that your files will live on — even if you upend an entire latte onto your laptop.

• Dropbox: Dropbox is my favorite cloud service. I find the interface intuitive and I love the desktop & mobile apps. Dropbox starts you out with 2GB of free space.
• Google Drive: Formerly known as Google Docs. If you've got a Google account, you already have a Drive account with 5GB of free storage space.
• Amazon Cloud Drive: If you're an Amazon addict like me, you already have an Amazon Cloud Drive account with 5GB of free storage space. If you need extra space, a paid Cloud Drive account costs less than Dropbox or Google Drive's expanded storage options.

How To Back Up Your Blog (By Platform)

Now that you know where you're going to put your backup files, you're ready to get started with your back up! Here's how to do it on the major blogging platforms.

Blogger

There are three easy steps to completely back up your Blogger blog.

1. First, download your template by going to "Template" and clicking the "Backup/Restore" button in the upper right. Save the resulting file.
2. Next, go to "Settings" > "Other", and select "Export Blog" under the "Blog Tools" menu. Save the export file. It includes all of your blog posts and comments.
3. Finally, back up the Picasa album containing your blog's photos. Links to them are included in the .xml export file you downloaded in step 2, but this guarantees that you'll have your photos no matter what.

Self-Hosted Wordpress

The official instructions for backing up self-hosted Wordpress are in the Wordpress codex. But, as with all things Wordpress, there's a plugin for that! Lisa from Elembee has a quick tutorial on using a plugin for your backup in her post Blogkeeping: Backing Up Your Blog.

Wordpress.com

If you have a Wordpress.com blog, you can use the Export feature to save a copy of your content. You don't need to save a copy of your template if you use Wordpress.com.

Typepad

Typepad backups are not quite as streamlined as other blogging services. You can back up your posts using the built-in Export feature. If you have a Typepad Basic template, you don't need to back up the template; Typepad Advanced users should copy and paste their templates into .txt files — there's no direct download option.

Now, here's where it gets weird: there's no easy way to back up your photos. Typepad actually suggests visiting each page of your blog and copying the photos as a means of backing up (pardon me while I LOL to death). If you blog on Typepad and have a folder of photos from your blog on your computer, save a copy of that to a cloud service so you've got them safe, but keep in mind it could be time-consuming to restore them to your blog.

Tumblr

Unfortunately, Tumblr blogs are the hardest to back up. There is an official Tumblr backup tool, but it's a desktop application that only works on Mac. Also, it doesn't save submitted posts or any of your posts' notes. There is a web-based, third-party tool called Tumblelog Backup Tool, but it's not officially supported by Tumblr.

You're All Backed Up!

Not so hard, right? Now that you've done it, schedule your next backup session. I back up everything every three months, and back up my template separately anytime I make a template change. A similar schedule will suit most other bloggers fine, too.

What's Next?

Move on to part two of the "Get Your Blog Ready for Next Year" series: Improve Your Navigation.

Acorn photo CC-BY Edd Prince

Get Your Blog Ready for Next Year - A 3 Part Series

For my last tutorial series of the year, I'm bringing you low-effort, high-reward blogkeeping activities to help you get your blog ready for the new year. Nothing too complicated — you can squeeze most of these tasks into your downtime between dashing through the snow & decking the halls!

The Complete Series

• Back Up Your Blog: How and where to back up your blog template and its content.
• Improve Your Navigation: Simple strategies for making your blog's many navigation avenues (not just your top navigation!) more reader-friendly — and, incidentally, search-engine-friendly.
• Keep Your Archive Fresh: How to keep your older content as fresh & relevant as the day you posted it (and refresh posts that have gone a little stale).

This will be the last new tutorial series on Code it Pretty until after the new year! After this, I'm taking a "long winter's nap" to rest my brain. I've got big things planned for the New Year, and I can't wait to share it all with you!

I want to thank each and every one of my readers for their feedback and encouragement throughout 2012, Code it Pretty's debut year. My favorite thing about this blog is that every day, I get to meet a cool new blogger. I seriously have the nicest readers in the world, and I'm so happy to have met you!

Holly photo CC-BY Albert Straub

Practical HTML for Bloggers - Further Reading

Now that you've finished Practical HTML for Bloggers, you're ready to move on to more comprehensive tutorials in HTML and CSS.

There are thousands of tutorials and books on HTML & CSS for beginners, and it can be mind-boggling just trying to figure out which ones to read. So, I'm going to narrow it down to four rock-solid, comprehensive resources that will help you go further into web development. No fluff, just the good stuff!

Web Resources

A Beginner's Guide to HTML & CSS: this tutorial series by developer Shay Howe covers the basics of HTML and CSS in a clean, easy-to-read format.

Mozilla Developer Network: The MDN's "Learning" section organizes the best HTML, CSS, and JavaScript tutorials from across the web in one place. These well-curated resources are all up-to-date and user-friendly.

Books

Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics: by Jennifer Niederst Robbins. This excellent book is now in its 4th edition. I've read the 2nd, 3rd, and 4th, and seriously, this book just keeps getting better. The author presents HTML/CSS and elementary JavaScript in such a clear, understandable way. And, the information on web graphics is incredibly useful for anyone working on the web. So much of what I know came from this book. I can't recommend it highly enough.

HTML and CSS: Design and Build Websites: by Jon Duckett. This is probably the prettiest technical book in the world right now. Its layout is absolutely beautiful and very appealing to visual learners. And, it's not just pretty, it's well-written and comprehensive; after you finish with this book you'll be able to create great-looking static webpages from scratch.

Thank You!

If you've followed along with this series I want to thank you for your time and your feedback, and wish you the best of luck with your blog! Keep in touch :)

Title cards for this series designed by the lovely & talented Jenna from Little Bit Heart.

Practical HTML for Bloggers Starts Soon!

Remember that secret project I dropped hints about back in May? I'm finally ready to announce it!

Next Thursday, October 11, 2012, I'll begin posting my newest tutorial series:

Practical HTML for Bloggers

So what do I mean by "Practical HTML"?

I've found that I learn new things faster when I can apply that new knowledge to something practical, right away. Most HTML tutorials for beginners start you out at the very beginning, with nothing but a blank page. But, a blogger doesn't work on a blank page; most of the structure of your blog is already there thanks to your blogging platform/CMS.

So, in this series, I'll teach you about the HTML elements you can use within your blog posts to improve the quality and clarity of your posts. After each tutorial, you'll be able to use a new HTML element in your next blog post with confidence and aplomb! And, once you finish the series, you'll be ready to move on to more comprehensive tutorials if you're so inclined ;)

You may be wondering why, exactly, I'm teaching you to use HTML in your blog posts. Aren't you getting along just fine with your rich text editor? Here are three reasons why the HTML knowledge you gain from this series will improve the quality of your blog.

1) HTML Clarifies Your Writing for Readers (and search engines)

HTML is very similar to punctuation, in that it provides a structure for your writing that makes it easier for your readers to understand. Honestly, I'd argue that HTML is easier to learn — and way less quirky— than actual punctuation!

On the web, your readers are both human and non-human. When you take advantage of the elements of HTML to format your post, it's easier for your human readers to read, skim, and digest the information in it. And, you also make it easier for search engines to understand the structure of your post and determine how relevant your post is to keyword searches.

2) HTML Gives You More Control

Using HTML elements in your blog posts will give you much more control over how your posts look, both on your blog and when the posts are consumed in other formats such as RSS feeds, "read later" services like Instapaper, or with your readers' own custom stylesheets.

That control extends to the style of your posts, too. When you use HTML elements in your posts, you gain the option to style your posts with CSS. If you've ever noticed blogs with cool pull quotes or custom fonts in the body of a post, they're using CSS, enabled by the use of HTML elements.

3) HTML Improves Accessibility

HTML elements like headings, paragraphs, and lists improve the accessibility of your blog for visitors with disabilities by simplifying navigation within the post and enabling skimming with screen readers and other assistive technologies.

Don't think you have any people with disabilities in your audience? That's a common misconception, especially among bloggers with highly visual content. I recommend you check out this post from web accessibility expert Katie Cunningham: So, You Don't Have Any Disabled Users?

I'll expand on these three reasons throughout the series, and give you even more reasons to love HTML as we progress. I can't wait to get started!

Your Homework This Week

Ready to get started? I've got one super-quick assignment for you this week so you'll be ready to jump right in next Thursday.

Your Assignment: Find out how to write and edit HTML posts on your blogging platform. Hint: for most platforms, you can switch over to HTML view with one click.

Title cards for this series designed by the absolutely wonderful Jenna from Little Bit Heart. She is the best.

You Don't Need to Move to Wordpress

I love Wordpress. Self-hosted Wordpress is astonishingly powerful: you can use it to build a blog, an e-commerce site, or a full-blown media empire. I have the deepest respect for the developers and community that surround Wordpress. And, some of the world's most popular and engaging websites are powered by Wordpress.

But, I don't think self-hosted Wordpress is right for every blogger.

Actually, I'm just going to come out and say it: I don't think it's right for most bloggers.

For every mega-blog that has evolved into a media hub requiring all the trimmings of Wordpress, there are thousands of smaller blogs run by individuals, either as a hobby or as a career. These casual and indie bloggers don't need the heavy-duty features — and the equally heavy-duty headaches — of a Wordpress blog.

But that's not what you hear in the the blogging world, is it? I know that moving to Wordpress is seen as a required step in the process of "making it" as a blogger. But every blogger should very carefully weigh the pros & cons (and costs) of moving to self-hosted Wordpress before making the switch. A premature switch can cost you your blog. Seriously.

I've seen self-hosted Wordpress blogs get completely destroyed in hacking waves — and by "completely destroyed", I mean bye-bye blog, all your content is gone. Countless others have suffered lengthy downtime and a costly recovery after getting hacked. And that doesn't even cover those that have simply floundered after an ill-timed jump to Wordpress, getting stuck with an unwieldy theme and no budget or support to get things back into working order.

If you're considering a move to Wordpress, I want you to go into it with full knowledge of the pitfalls you may encounter.

So let's talk about them.

The Wordpress Cons

You already know about the "pros" of self-hosted Wordpress. So let me fill you in on the cons no one wants to talk about. They're multifacted, but they boil down to two main categories: security and cost.

Security

Here's what you have to do to secure your blog on Blogger, Typepad, Tumblr, Wordpress.com, or Squarespace: Use a strong password and never share it with anyone. Some platforms even offer two-step verification to help you keep your login safe.

That's all you need to do; the rest is managed by the blogging platforms themselves.

Here's what you need to do to secure your self-hosted Wordpress blog:

• Select a web host with rigorous security precautions in place to protect your blog from server vulnerabilities.
• Select a secure theme. If you're using a free, third-party theme, be sure to check for pre-installed malware before installing the theme on your site.
• Update Wordpress, your theme, and every plugin you use as soon as each update becomes available (and cross your fingers that nothing breaks after the update).
• Familiarize yourself with the components of your theme and your plugins, and keep up with Wordpress security news to make sure that none of the features of your blog have fallen victim to the latest hacking wave.

And that's just the highlights: you can read more from the official Wordpress codex.

Now, these issues are not impossible to manage. If you don't mind getting your hands dirty in the backend of your blog, security setup and maintenance is actually a fun challenge and a learning experience. If you're not technically-inclined, you can get all of these issues dealt with by hosting your blog with a managed Wordpress host (WPEngine and Pagely are two great options for managed Wordpress hosting). Or, you can invest in a relationship with a developer who can manage your Wordpress installation on your behalf.

But that brings me to the next item in the "Wordpress cons" column: the cost.

Cost

Yes, the Wordpress.org software is free, but using it will cost you more money or time (or both) than other blogging platforms. There is no way to run a successful, secure Wordpress blog without investing in managed hosting, forming a relationship with a developer you trust, or becoming an entry-level developer yourself.

Managed hosting for Wordpress automates the security and maintenance of a Wordpress blog and keeps you safe from questionable themes/plugins and database hacks. It is, of course, not free: the average managed hosting plan starts at about $25 a month for a small blog. Larger blogs and websites can expect to pay anywhere from $50 - $250/month depending on size and features required.

Good developers that speak your language (both literally and figuratively) don't come cheap. However, a good developer will make your blogging life sweet & serene. They're worth every penny, their weight in gold, and every other financial cliché I can throw at them.

Learning it yourself is rarely free — you can learn from the codex and the official forums, but to go in-depth into security topics and theme design you're better off paying for lessons or books on the subject. And then there's that intangible cost of time. If you're losing time you could use to create great content for your blog, you're hurting your blog.

Of course, the security and peace of mind these investments provide is worth it, but it all costs significantly more than running your blog on Blogger, Typepad, Squarespace, Wordpress.com, or Tumblr.

Do This Before You Switch

If those cons haven't deterred you: good! You're very well prepared for the realities of moving to self-hosted Wordpress. But before you make the jump, let's do a few quick exercises to determine if you really need to invest the time and money it takes to make the switch.

Current Blog Features Inventory

1. Write down a list of the features of your current blog platform. Pro tip: If you're on a blog platform that has a built-in mobile template, don't forget to add that to the list of features even if you don't personally visit your blog on a mobile device — it might be the format of choice for a big chunk of your readers.
2. Compare that list with the core features of Wordpress. Look into what it will take to add all of those features to Wordpress (themes, plugins, etc).
3. Estimate the time and cost of moving your blog to Wordpress with all of its current features intact.

Now that you've done an apples to apples comparison between your current platform and Wordpress, let's move on to your dream features.

Feature Wishlist

1. Write down your dream features for your blog.
2. Confirm that those features really aren't available on your current blog platform. You may be surprised!
3. Find out how you'd implement those same features on Wordpress, and make an estimate of the realistic cost (in time or money) to add them to your blog.

If self-hosted Wordpress is still the winner after you've done those exercises and considered all the costs and challenges, go to it! You have my blessing.

If Wordpress isn't the right choice for you, but you're still feeling like you're stuck in your current blog platform, I've got something to show you:

Hugely Successful Blogs on "Starter" Platforms

These popular and authoritative blogs are all on "starter" blogging platforms — and nobody cares. Consider the success of these blogs when you're worried that your platform is holding you back.

Kendi Everyday: This wildly popular everyday fashion blog is beautiful on Blogger.

Seth Godin's Blog: Mr. Godin rocks a default Typepad template, and he gets about a thousand retweets per post.

CarScoops: This automotive blog gets millions of readers every month. It's on Blogger.

Strobist: Yet another eminent blog that very openly runs on Blogger. Heck, they haven't even hidden the navbar. If your concerned that a "starter" blog design will scare off sponsors, check out their ad rates. Clearly, advertisers can deal with the plain design. They want to be associated with the blog's stellar content.

What I hope you'll see from these examples is that blog success doesn't have much to do with what platform you're on. Great, unique content wins every time. You can build an amazing, engaging blog anywhere. If you're happy where you are, stay there, and keep doing what makes your blog great.

Post image by the fabulous Cris Stone

How to Make Big Blog Changes in Small Steps

There comes a time in online life when you realize you have to make a massive, time-consuming change. The kind no plugin or template change can automate. Maybe you've made a change to your blog post format, and you want to make your archive match your new posts. Or, you need to add a new color chart to each of the items in your Etsy shop. Whatever the reason, you've got a big task on your hands. Figuring out where to begin, and the next steps to take once you've started, can be a complex task all on its own. So let me help!

Today, I'm going to give you a step-by-step plan of action for organizing a big change to your online presence, combining technical tools and traditional task-tackling methods.

First: Fix the Future Before You Fix the Past

(Feel free to use as the title of your next self help book. I'll just take a 10% commission.)

This may seem like an obvious step. But, sometimes a big change can be so daunting that you end up avoiding it, permanently. If you've been putting off an important change because fixing your old posts is going to be such a chore, take this step first: make a promise to yourself that you'll add your new feature to all your future posts. That way, at the very least, every new post will be a step forward. They won't land on the "someday when I have time" pile, which will just keep growing if you keep putting it off.

Not so hard, right? Step one, done!

Next: Find Where Changes are Needed Most

After you've put processes in place to fix the future, let's move on to the past.

I'm going to cover three different ways to find where to make your first changes. Your initial instinct might be to work through your archive from your latest posts to the very first in reverse-chronological order. That's certainly one way to do it, but with a little bit of research you can prioritize your changes for the best immediate results.

Using Your Site Analytics

Ready to find the most important posts to fix first? Use your site's analytics to find your top 20 posts from the last six months.

Many blogging and e-commerce platforms have built-in analytics that give you information on your most popular content. For this example, I'm going to show you how to find it in Google Analytics, since anyone can use it, and it works the same on any website.

First, go to the "Standard Reporting" tab and set your date range to show the past 6 months. Then, go to Content > Site Content > Pages.

When you've reached the Pages list, set the Primary Dimension to Page Title.

You'll now see your top ten pages. You can page through to see your top 20, or change the "show rows" dropdown menu at the bottom of the page to see more results on the page.

Using Google's Webmaster Tools

With Webmaster Tools you can find your most-linked content. Often there is overlap with your most viewed content, but you'd be surprised by how much these two sets of pages can differ, so it's worth a look! You can also use Webmaster Tools info in place of analytics data if for some reason you don't have analytics set up on your site.

After you sign up for Webmaster Tools and verify your site, Google will begin to gather information for you. It can take a few days for the data to appear, so be patient! Once the data is available, go to "Traffic" > "Links to your site" and click the "More" link beneath "Your most linked content". This will take you to a listing of the top 25 most-linked pages on your site. Number one is probably your home page, but the rest are usually posts.

Using the Calendar

This is a very low-tech way to find the next posts to fix, and you may not even need the calendar if you happen to know what season it is. (If you don't, go to whatseasonisit.com. Or go outside.)

If you have seasonal content, fix the posts that apply to the current and upcoming seasons next. For example, if you know your vegan barbecue recipes get a lot of attention in the summer, fix those posts in the spring so they're ready for the next big wave of visitors.

Finally: Finishing the Job

Once you've freshened up your most important and popular posts and fixed up your content for the upcoming season, you may still have a lot of tidying up to do. If you break it up into manageable chunks, you'll be finished in no time!

Prioritizing the Rest

You can use the same methods you used to find your highest priority content to continue working through your posts. You can choose to go through posts in order of popularity based on your analytics. Or, if your content is heavily seasonal, it may make more sense to continue working through the seasonal cycles. If neither of those ideas really apply to your site, you can start from your latest post and work your way back through your archives. That way, visitors who page through your site chronologically have a consistent experience, at least on the first batch of pages they see.

Scheduling Changes

Scheduling is such a personal thing, but I do have a few suggestions for how to squeeze changes into your regular blogging schedule.

Schedule a "fix day". Maybe once or twice a week, maybe once or twice a month, but somewhere on your calendar, give yourself a day when you'll dedicate your blogging time to fixing your old posts. This is an especially good way to take on high-priority changes, like SEO improvements or error corrections. If you make an appointment to do it, you're less likely to forget it or blow it off.

Use your "idle" blogging time. You know that time you spend refreshing the page, waiting for a reply to your wittiest tweet at your favorite mega-blogger? Or that time you spend staring at Real Time Analytics, thinking, "I should probably be doing something useful right now..."? While you linger, open up your blog in a new tab and start fixing old posts. You can probably knock out two or three between the time you tweet and the time you get retweeted ;)

Bringing in Help

If you have a truly gigantic task ahead of you and you don't know when you'll find the time to make the changes, odds are good that it's because you have a long-running, popular blog. And a popular blog usually has an active and devoted following. If you can't realistically balance making your changes with your blogging schedule, ask your community for help! Blog tune-ups like this are perfect tasks for interns or freelancers. You'll need to be careful about who you trust, of course, but you don't need me to tell you that ;)

Do you have a big blog renovation project on the horizon? Got any task-tackling tips to share? Let me know in the comments!

Fonts in the title card: Raleway, Fredericka the Great, and Emily One from the Google Web Fonts library

The Font Combinator - Find Beautiful Web Fonts

I love Google Web Fonts. They're free, they're stylish, and they're easy to use on any website. There's one thing lacking from the web fonts interface though — it's not easy to preview how different fonts look together. That's where developer Chip Cullen's web app, The Font Combinator, comes in!

The Font Combinator is so easy to use it barely needs a tutorial, but I want to give you a rundown of its features so you can use it to its fullest right away.

To start using the Font Combinator, go to www.font-combinator.com.

At the top of the page you'll find a sample article with a headline, subhead, and two paragraphs. At the bottom of the page you'll find simple controls for changing the font, the font size, the line height, the color of the text, and the color of the background.

The Font Combinator includes all of the Google Web Fonts, plus the traditional "web safe" system fonts like Arial, Helvetica, and Times New Roman. So handy for setting fallback fonts! The combinator automatically updates when a new font is added to the Google fonts collection, so it's always up to date.

Here's an example of the Font Combinator in action: I've selected three fonts for this demo. The headline is Syncopate, the subhead is Rammetto One, and the body text is in good ol' Georgia. I've also played around with the colors using the Combinator's built-in color picker.

Did you notice that I changed what the text says, too? Yet another cool feature! You can delete the default headings and paragraphs and replace them with your own.

You can hide portions of the demo text if you're not going to use all of the elements in your design. So, for example, if you're not planning to use a subhead and just want to test a headline and a paragraph font, you can easily hide the subhead by clicking the "hide" button. If you want it to come back, click the "show" button.

Here's another useful detail: if you resize your browser window, the combinator resizes along with it. This way you can test how your fonts will look in different sections of your site or in different viewports, and adjust your sizing (or font choices) accordingly.

I've spent hours playing with this addictive design tool, and if you're a font fan like me I bet you will, too! Many thanks to Chip Cullen for his hard work on this awesome app.

Installing Google Web Fonts

After you've chosen the perfect font, you're ready to install it! Check out How to Install Google Web Fonts on Your Blog for installation instructions.

Fonts in the title card: Alegreya SC and Pinyon Script, selected with the Font Combinator, of course!
Embellishments: Creative Market

All About Alt Text

In my earlier post about blog images I sung the praises of alt text, but I didn't go into detail about the whats, whys, and hows. This basic piece of HTML is so essential to your blog's health that it deserves its own dedicated tutorial. So today I'll dig in deep and give you the tools to become an alt texting master. Let's get to it!

What is Alt Text?

One quick semantic note: it's "alt text", not an "alt tag". People will still know what you're talking about if you call it an alt tag, but to be correct, say alt text!

Alt text is an attribute you add to an HTML image element to describe the image. If you write your alt text well, you'll help your visitors and search engines get a better understanding of your content.

So what do you write as alt text? It all depends on context.

This awesome photo could be used in many different types of blog posts. In a tutorial on knitting the scarf he's wearing, I'd describe it as "man wearing a striped red and pink scarf". If the kinda threatening pose he's taking with those knitting needles is more relevant to the post, "man poised to attack with knitting needles" makes good alt text. If his near-nudity is more relevant to the post than the other aspects of the photo, I'd go with "man wearing nothing but a pink and red scarf".

If the picture itself is the subject of your blog post, the alt text doesn't need to be very detailed. For example, if my post is an interview with scarf guy about why he posed like a crazy knitting monster, the alt text can be "Joe Blow in a scarf" (I'm pretty sure Joe Blow isn't his name, but you get the point).

Why Should I Use Alt Text?

Two very good reasons:

1) First, and most importantly, it provides information to visitors who cannot see the images on a website, either due to visual impairments or because they have images turned off in their browser. People with visual impairments use screen readers that read the text from a website out loud to them. The screen reader reads the alt text to describe visual elements of websites. Visitors browsing without images will see the alt text in place of the images.

2) Second, alt text provides information about an image to search engines. Without alt text, search engines don't know what they're "looking" at when they encounter a picture. So, your alt text is an opportunity to describe your image to search engines.

This is especially important if your blog posts have lots of images. Providing alt text will help bring visitors to your site since the search engines will have more detailed information about what your blog has to offer. It also greatly improves your chances of showing up in image searches, like Google Image Search or Bing Images.

Now, this does not mean that you should stuff keywords into your alt text. I can't stress this enough: always, always, always consider your human visitors when you write alt text. Visitors with visual impairments will hear all the words in your alt text read aloud, and you need to respect that. You shouldn't describe scarf guy as "knitting needles on sale, best knitting needles, cheap knitting needles, knitting, how to knit a scarf". That's not an accurate description of the photo and it's an insult to anyone who has to listen to that from a screen reader.

How Do I Add Alt Text to My Images?

Some blogging platforms prompt you for alt text when you upload a photo. Just fill in your text in the "alt text" field and you're good to go. Other blogging platforms auto-fill the alt text for you using the image's filename. If your blog uses your filenames, make sure you give the photos good, descriptive names. "DSC483012.jpg" is not a good name.

If your blogging platform doesn't have a built-in method of handling alt text, or you skipped alt text in old posts and want to add it in now, you can manually add it to your images. To do this, go into your posts in HTML view and look for your image elements.

In HTML, an image element (at its absolute minimum) looks something like this:

<img src="images/naked-scarf-guy.jpg">

You add alt text to the element after the closing quotation mark on the image source, like so:

<img src="images/naked-scarf-guy.jpg" alt="man in a scarf wielding knitting needles">

By the way, if your blogging platform doesn't support alt text or makes it hard for you to add it, complain! Alt text is a basic HTML feature and it should be easy for you to use.

How Long Should Alt Text Be?

There's no absolute limit on alt text length, but the general consensus is that you should keep it brief — no longer than a tweet. Remember that your visitors with visual impairments will have the alt text read out loud to them by their screen reader, and you don't want to bore them with pointless details.

One case where it's ok to get wordy with your alt text is when you're presenting an infographic or otherwise visualized data without any accompanying explanation. For example, it makes good sense to put all the steps of a simple flowchart into the alt text if you're not going to spell out the steps in an accompanying paragraph — if your graphic is very complex, though, it's best to provide a written alternative to the image and keep the alt text brief.

Do I Need to Add Alt Text to Every Image?

You should add an alt attribute to every image, but you can (and should) leave the attribute blank on purely decorative images. For example, if you have an image of a pretty squiggly flourish separating sections in your blog's sidebar, your readers with visual impairments don't need to hear anything about it — it's just there to add visual appeal and has no functional or informative purpose. Leaving the alt attribute blank tells a screen reader to ignore the image entirely. To leave the alt attribute blank, just don't put anything in the quotation marks after alt=. Like this:

<img src="images/fancy-squiggle.png" alt="">

Leaving the alt attribute blank also makes sense if adding alt text would be repetitive. For example, if you have a post titled "A Photo of My Dog" with a captioned photo of your dog at the top of the post, and the first sentence of your post says "Check out this cute picture of my dog!", blank alt text spares screen reader users from hearing essentially the same thing four times in a row.

In Summary

Well-written, relevant alt text provides valuable information about your blog to both your human visitors and search engine robots. Keep it brief and to the point, and leave it blank on non-essential decorative images. And remember, it's alt text, not an alt tag ;)

Further Reading:

WebAIM has in-depth information about how to write the right alt text for an image in context.

For even more detail, check out the official guide to HTML5 alt text techniques from the World Wide Web Consortium (W3C). The W3C develops HTML standards, so you know this information comes straight from the top!

The Firefox add-on Fangs shows you what a screen reader would read out loud from your blog. This is a fascinating tool that can help you discover accessibility issues on your site and get a better feel for how readers with visual impairments experience your blog.

Scarf Attack photo by Flickr user TheGiantVermin, used under Creative Commons license.