Blog Design For Dummies
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:
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:
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.
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.
While many bloggers stick to their platform’s native commenting system, others like to use a third-party commenting system like these:
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.
No blogger likes getting spam messages within their comments (even if they’re sometimes funny to read). These plug-ins help combat spam.
Image Display Plug-ins
Blogs always liven up with great imagery. When you want to showcase multiple images, these plug-ins have you covered.
Quick Gallery (See the following figure.)
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:
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:
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:
Hello Tabs WordPress Widget (See the following figure.)
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.