Cheat Sheet

Blog Design For Dummies

From Blog Design For Dummies by Melissa Culbertson

You have a blog . . . now, make the design look spectacular and work great! When you learn the ins and outs of blog design, you can create a blog design that illustrates your voice and encourages visitors to read your content. Before you know it, you’ll have a really awesome blog design that you can be proud of.

How to Start a Blog Design

Good designers have a method to the madness. It’s much harder to design without thinking through your blog’s topics, your voice, your blogging goals, and more. Jot down your responses to the following prompts to lay the foundation for a powerful blog design that fits you to a T.

  • What’s your blog about?

  • What do you want your blog to be known for?

  • List two to five blogging goals.

  • Describe a few characteristics about your audience.

  • Why do you write on your blog?

  • Write down adjectives that describe the tone of your recent blog posts.

Look at the answers to these then work these qualities into your blog’s look and feel and to help determine placement of certain design elements, links, and calls to action.

Words to Know for Blog Design

As you sift through the options for your blog design, especially requirements for behind-the-scenes tools that support your design’s look and feel, the following list can be a handy guide to terms you may not know.

anchor text: A clickable word or phrase that’s hyperlinked to a web page.

alt attribute: The text in this attribute displays when a visitor can’t see an image. The reason may be a slow Internet connection or a visitor with a vision impairment may use a browser that reads the content in the alt attribute aloud.

blog theme: A collection of files that work together to produce the functionality and design of your blog, without changing the basic blogging software.

blog framework: A theme that serves as the base for your blog design. From that foundation, you can then build your own custom design with a child theme.

CSS: Stands for Cascading Style Sheet. CSS is a set of commands that let you customize the look and feel of your blog design by styling the display of various elements on your blog, from the font color to a space around an image.

HTML: Stands for Hypertext Markup Language. By “marking up” text within an HTML document, you instruct a Web browser to display that text on a website in a certain way. This could be anything from turning text into a hyperlink to displaying an image.

meta description: Short paragraph that search engines use to describe your entire blog, a page, or a blog post.

PHP: Stands for PHP: Hypertext Preprocessor. A commonly used scripting language that many blogging platforms are build on. PHP is critical to keeping all the parts of your blog working together.

plug-in: A piece of software that give additional functionality to a larger software application like WordPress.

navigation design: Design centered around how visitors move through your blog.

permalink: A URL that points to a specific blog post or page, rather than the home page.

RSS: Stands for Really Simple Syndication or Rich Site Summary. An RSS feed is a way to deliver content to a subscriber without that subscriber actually visiting your blog.

search engine optimization (SEO): The process of increasing a website’s visibility in a search engine’s unpaid search results.

widget: Little applications that you can add to your blog header, sidebar, or footer. Some blogging platforms, such as WordPress.org and WordPress.com, come with built-in widgets.

vector image: An illustration comprised of lines and points.

A Checklist for Creating Your Blog Design

Designing a blog requires some care and attention. As you work through designing your blog, follow this checklist to ensure you don’t miss any major design elements.

  • Understand core design principles.

  • Create goals with which to align your design.

  • Build a style guide as you work through your design.

  • Gather design ideas through research, brainstorming, and your blog analytics.

  • Determine the fonts for your blog design.

  • Decide which colors to use and how many.

  • Select on a blog layout type and blog theme for the shell of your design.

  • Create a blog header.

  • Design a blog background or select a background color.

  • Add relevant content to a blog footer.

  • Work search engine optimization into your blog design.

  • Ensure your blog is mobile-friendly.

  • Create a navigation menu.

  • Determine what goes into your sidebar and design graphics if needed.

  • Decide how to work design into your blog posts.

  • Add navigational elements, like ways to explore new and old content.

  • Incorporate design and images into your blog pages.

Install Plugins to Add Features to Your Blog

Plug-ins enhance your blog’s design, navigation, and functionality. Here, you find a list of plug-ins to help you start adding features to your blog design, all gathered in one spot and organized by application for easy access.

All these plug-ins work for WordPress.org blogs. If you aren’t on WordPress.org, look for an asterisk (*) to denote the plug-ins that can be used on other platforms as well.

This list represents only a tiny fraction of the plug-ins available. You can find more plug-ins within WordPress, on sites like CodeCanyon, or by using a search engine.

Search engine optimization plug-ins

Optimizing your blog and individual blog posts for search engines can boost traffic to your site. These plug-ins make it easy to optimize your site and your blog posts:

All-in-One SEO Pack

SEO Ultimate

WordPress SEO by Yoast

Out of these three, only Yoast offers the ability to create an XML Sitemap (a directory of pages that you want search engines to find). If you use an SEO plug-in without this functionality, or if you don’t need these SEO plug-ins due to your theme’s built-in SEO settings, then you can use the following plug-in to create an XML Sitemap:

Google XML Sitemaps

Popular posts and related posts plug-ins

Good blog navigation design propels visitors deeper into your blog by serving up links to more content. These plug-ins let you highlight your most popular posts or posts that are similar to the post the visitor is currently reading.

LinkWithin

nRelate Most Popular and nRelate Related Content (Click Log In to sign up and get started)

WordPress Popular Posts

Settings options for the nRelate Related Content plugin.
Settings options for the nRelate Related Content plugin.

Social Sharing Plug-ins

When your blog visitors like your content, they want to share it within social networks like Facebook or Twitter. These plug-ins add functionality to your blog posts and pages so visitors can easily do so, spreading your content to new audiences.

AddThis

Digg Digg

Shareaholic

ShareThis

Simple Social

Commenting Plug-ins

While many bloggers stick to their platform’s native commenting system, others like to use a third-party commenting system like these:

Disqus

IntenseDebate

Livefyre

In addition, you can use this plug-in to e-mail a commenter when someone (either you or another commenter) has replied to their comment.

Comment Reply Notification

Spam-Fighting Plug-ins

No blogger likes getting spam messages within their comments (even if they’re sometimes funny to read). These plug-ins help combat spam.

Akismet

Growmap Anti Spambot Plugin

WP Ban

Image Display Plug-ins

Blogs always liven up with great imagery. When you want to showcase multiple images, these plug-ins have you covered.

Catablog

Fancy Gallery

NextGEN Gallery

PhotoMosaic

Quick Gallery (See the following figure.)

The Quick Gallery plugin works with multiple blog platforms
The Quick Gallery plugin works with multiple blog platforms

TouchCarousel

Image-Finding Plug-ins

Nearly all your blog posts should have at least one image to pull the reader into your content. If you’re struggling to find the right image, these plug-ins help you find images without even leaving WordPress:

PhotoDropper

Zemanta

Flickr Photo Post

Contact Form Plug-ins

When you need to create a form, whether for readers to contact you or to gather information, you have many plug-in options to chose from:

Contact Form 7

Fast Secure Contact Form

Kontactr

Gravity Forms

Wufoo

Tabbed Box Plugins

Tabbed boxes are a space-saving way to present information in your sidebar. These plug-ins make creating a tabbed box easy:

Easy Tab WordPress Widget

Hello Tabs WordPress Widget (See the following figure.)

Tabber Widget

Demo of the Hello Tabs WordPress Widget
Demo of the Hello Tabs WordPress Widget

Miscellaneous Plugins

These are the plug-ins I mention in the book, but that don’t fit into any of the other categories.

Custom Author Byline: Lets you add a byline for guest writers or contributors who don’t have access to log into your blog.

Genesis Widgetized Footer: If you use the WordPress.org Genesis Framework, this plug-in allows you to use widgets in your footer.

FT Signature Manager: Gives authors on your blog the ability to set up a signature that displays at the bottom of their posts.

WordPress.com Jetpack: Gives a WordPress.org blog powerful features that are already built into Wordpress.com such as search engine optimization features, contact forms, and the ability to publish a blog post from any e-mail client.

WP Post Signature: Allows you to add a signature at the end of every blog post.

WPtouch: If your blog theme doesn’t have a responsive design (so that the layout adjusts depending on the size of the visitor’s screen), then this plug-in makes your blog easier to view on a mobile device.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com