Yup, it’s that easy!

The Embed Block supports a ton of media services by default – and this list can be expanded, if you’re familiar with WordPress Hooks and PHP.

• blip.tv
• DailyMotion
• Flickr
• FunnyOrDie.com
• Hulu
• Instagram
• Qik
• Photobucket
• PollDaddy
• Revision3
• Scribd
• SlideShare
• SoundCloud
• SmugMug
• Twitter
• Viddler
• Vimeo
• YouTube
• WordPress.tv (only VideoPress-type videos for the time being)

Examples

To embed a TV show or movie from Hulu, you’d enter the link to the episode page in the block options for the Embed Block, i.e. : http://www.hulu.com/watch/486599

A YouTube embed would be similar – just link to the YouTube Video. Note that you do not have to generate a special URL or pull the URL from the iFrame source – nothing fancy here, folks. Just grab the link you’d normally share, and drop it into the Embed Block, i.e. http://www.youtube.com/watch?v=T6DJcgm3wNY

With non-video services like Twitter or SoundCloud, you aren’t embedding video – you’re embedding the media that service collects along with the proper controls to interact with that media. So a single Tweet includes controls to reply, retweet, etc, and a SlideShare presentation has controls to page through the presentation, and a SoundCloud link will let you play the audio.

So what are you waiting for? Start using the Embed Block to create more interesting and dynamic layouts!

1. Spice Up Your Blog’s Homepage

You don’t have to be running an online magazine to take advantage of a magazine-style layout.  If your site has been established for a little while, you probably have loads of great content – show it off! A Content Block with excerpts from your latest posts – or even your latest post in full – is great. But what about all the rest of that space? Instead of filling your homepage with the same widgets your visitors will see as they dive deeper into your blog, spice it up and drop another couple of Content Blocks on the page. You can set each of these to Custom Query mode and pull in content from a specific author (if you have more than one author on your blog) or a specific category. Now, don’t just leave it as a plain list of posts with Title, Meta & Excerpt; we can really make this area pop by using the Display Options to hide the Excerpt and the Meta and display just the title and the Featured Image, or the Title, Featured Image and Byline (for a multi-author blog).

2. Make Your 404 Error Page Useful

It’s a fact of websites: We all have broken links. But your 404 page doesn’t need to be a dead end for your users! You have the ability to customize the layout for your 404 Error page in the Headway Visual Editor; so edit it and add another Content Block to show posts from a category, an author, or just the latest 5 posts from your site. Show them in full, show them in excerpt – whatever you think will be most useful. Play with the layout! Add Block Titles to help organize the content for your visitor, or get cheeky with it. Have fun on your 404 Error page and you’re more likely to get your visitor to read another resource rather than going back to Google to read your competitors  site!

3. Bring Page Excerpts Onto Your Front Page

Use automatically-generated excerpts from your WordPress Pages to tease your audience into reading more by using the Fetch Page option in Custom Query Mode.  If you’d like more control over your excerpts (like the ability to write a custom excerpt) try installing the free Page Excerpts plugin.  If you’d like to include HTML tags or images in your page excerpts, you might want to check out Advanced Excerpt (also free). When you consider the ability to style each of these Content Blocks independently for unique backgrounds, borders, and font styles – you’ve got a fabulous way to draw attention to products, services, or anything else that you need to promote on your homepage – while keeping management of those elements easy to handle in the WordPress admin.

Headway 3.5 will feature multiple wrappers. So not only will your sites and designs be limited to a single fixed wrapper, you’ll actually be able to use fluid wrappers with fluid grid or fixed grid, or a fixed wrapper with a fixed grid.

Remember that betas are only available to our developer license holders. Not a developer license holder? No problem! Sign up or upgrade now, and get in on testing this new release!

Don’t take my word for it though, check out the video below!

This week’s screencast is one that’s been asked about for awhile now. We just haven’t had time to get to it. We’re going to be coving WooCommerce and the Storefront: WooCommerce block by Headway. There’s a lot of information we could go into, and while I didn’t really think you all wanted me to talk on and on for hours about WooCommerce (there’s a lot of things it does!!), I wanted to focus our time on using it with Storefront: WooCommerce block, and with Headway.

The screencast is about 20 minutes in length and covers a fresh install of WordPress, Headway, WooCommerce and Storefront: WooCommerce block. I go over a few of the minor settings I wanted to change in WooCommerce, how to fill your store with test products so you can play with the pages and design your site, and we go over the few uses for the Storefront: WooCommerce block.

Update: The screencast is now here. Sorry about that ya’ll!

If you want comments enabled for posts and pages and you want them to have the same layout, you just need to customize the Single layout in the Headway Visual Editor.   You will edit the options for the content block on the Single layout to always show comments.

Click on the content block options for the Single Layout, then click on Display.  Where it says “Comments Visibility” you will change that to show “Always Show Comments”.  See the screenshot below.

If instead you only wanted comments enabled on pages or if you want the single page layouts and single post layouts to be different, then you would need to customize the Single > Page layout in the Visual Editor using the steps I described above.

1. You may or may not have a static homepage. It’s customized if you do, yay!

2. You have a blog index, which may or may not be the front page of your site. Either way, it’s customized and the content block is set to show excerpts and thumbnails, because it’s prettier and more functional that way.

3. Your single layouts aren’t customized.

4. When you look at a post on your site, the featured image appears with the title, and you already inserted your featured image full-size at the top of the post or partway down, and you want the thumbnail gone!

Never fear, Headway community. We have multiple ways to solve your problem.

Just Customize the Single Layout

You can Clone your Blog Index to you Single Layout by clicking Edit on Single (or Single -> Post), choosing the Blog Index as the Clone.

From there, you simply need to edit the content block to hide the featured images. So open the Content Block options, un-mirror it, and then go to Featured Images and uncheck “Display”.

Voila!

Use CSS to Hide it Instead

If you’d rather not clone the layout if you don’t have to, you could simply add a line of custom CSS that will hide the thumbnails from sight entirely.

.single a.post-thumbnail {display:none;}

Just drop the above code into your Live CSS editor and your thumbnails will disappear on the single blog posts.

VIEW the DEMO

PROBLEM: Your navigation is one of the most important parts of your website. It’s how your visitors get from the homepage to other parts of your site! But once they scroll down to read your content, they can’t see the navigation anymore – and darn it, you want them to see it all the time!

SOLUTION: A sticky navigation bar. You see them all the time (not a Headway site), but how to implement? No worries; it’s actually pretty easy!

Step 1: Set up a WordPress & Headway site with a navigation bar.

Yeah that’s as easy as it sounds. If your site is already completed or in progress, you probably have a navigation bar. If you don’t, go ahead and add a navigation block now.

Step 2: Add a little jQuery Magic

This jQuery script is pretty well commented, but here’s the gist of it:

1. Hi webpage! Are you being displayed on a mobile device? If you are, we won’t make the navigation sticky because dang, a sticky nav on a mobile device takes up too much room. Oh, you aren’t? Fabulous.
2. Oh, the window is scrolling! That’s my cue. I’m looking for the .block-type-navigation class. You got one? You do? Fabulous! I’d like to add  a class to it, please. Thanks!
3. Whoops, you scrolled back up the top. Let’s remove that class, huh? Thanks!

Basically once you scroll down, we are sticking the navigation to the top of the page & making it super obvious to the user that Hey! You! Can! Navigate! There’s more to see!

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
 //STICKY NAV
 var isMobile = {
 Android: function() {
 return navigator.userAgent.match(/Android/i) ? true : false;
 },
 BlackBerry: function() {
 return navigator.userAgent.match(/BlackBerry/i) ? true : false;
 },
 iOS: function() {
 return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
 },
 Windows: function() {
 return navigator.userAgent.match(/IEMobile/i) ? true : false;
 },
 any: function() {
 return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
 }
 };
//Calculate the height of <header>
 //Use outerHeight() instead of height() if have padding
 var aboveHeight = $('.top-row').outerHeight();

 //when scroll
 $(window).scroll(function(){

 //if scrolled down more than the header’s height but this isn't mobile
 if ($(window).scrollTop() > aboveHeight && !isMobile.any()){

 // if yes, add “fixed” class to the <nav>
 // add padding top to the #content 
 // (value is same as the height of the nav)
 $('.block-type-navigation').addClass('fixed').css('top','0').next()
 .css('padding-top','42px');

 } else {

 // when scroll up or less than aboveHeight,
 // remove the “fixed” class, and the padding-top
 $('.block-type-navigation').removeClass('fixed').next()
 .css('padding-top','0');
 }
 });
});
</script>

A Note on Loading jQuery

This code goes straight into the Header Scripts area of Headway -> Options. The first line ensures that jQuery is being loaded. If you are using a child theme & can load the script via the wp_enqueue function, that’s the preference and you can skip that line!

You could also skip the first script line in the code above (and start at the second < script >
tag), and put this line of code in the Footer Scripts area instead to load jQuery more cleanly. This will prevent jQuery from being loaded twice (and could fix any potential errors).

<?php
wp_enqueue_script('jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js', false, false, true);
?>

Two Additional Notes!

Multiple Navigation Blocks: As written, it is going to affect *all* of your navigation blocks. SO if you have two of them on a page, it’s going to look for both! If you want only one of the navigation bars to be affected however, that’s no problem. Just add a custom class to your navigation block (open up the Block Options for the navigation block, and add something in the Config -> Custom Classes input). Then you’ll replace .block-type-navigation with .[yourClassGoesHere]. So if you gave your block a class of stickyNav, your jQuery code would read something like: $(‘.stickyNav’).addClass(‘fixed’).css(‘top’,’0′).next() instead of $(‘.block-type-navigation’).addClass(‘fixed’).css(‘top’,’0′).next(). Remember, there are two places this gets changed in the script!

Taller Navigations Blocks: By default this script is set for a navigation block that is around 42px high. If your navigation block is taller/shorter and this isn’t behaving the way you expect it to, change the line that says “ .css(‘padding-top’,’42px’);” — you’ll change 42 for the height of your navigation block.

Step 3: Add a Little Custom CSS Magic

Finally we need just a teeny little bit of CSS to make this look fabulous & for it to stick! In Design Mode, open up the Live CSS Editor and drop in this code:

.fixed {
     position:fixed !important;
      left: 0;
      text-align: center;
}
.fixed .block-content {
      display: inline-block;
      text-align: left;
      width: 940px; /* This should be the width of your grid!!! */
      float:none;
}

The only part of this you’ll need to change is the width — that should be equal to the width of your grid.

Step 4: You’re done!

Aside from lording it over your friends that you just created a sticky nav … you’re all set! Post your site in the comments so we can see how great your site looks!

I often build WordPress sites for clients using the Headway framework, and one common task across all sites is adding my credit to the footer. Luckily, this is incredibly simple to do!  You can take two different approaches:

Use the Custom Copyright Input Field

Click to Enlarge Screenshot

Open up the block options for the footer block, and you’ll see a box for a Custom Copyright. This input will accept plain text and HTML, so you can code up your own little copyright for your client with your credit included.

For example:

Copyright © 2013 My Client. 
Site Designed by <a href="http://mysite.com">My Company</a>. All Rights Reserved.

Drop a Text Block Below your Footer

You could also opt to use the normal footer & show your client’s copyright there – then put a Text Block below that footer and use the provided WYSIWYG to enter your link, credit, whatever!

Click to view or download the full-size image.

This is a follow up to my recently published “Anatomy of a Blog Post”. If you’ve already seen that piece, don’t worry, there is plenty of “new” here.

I’ve tried to focus on “best” practices. I have also included additional insights to help address “why” in specific instances. How you ultimately construct your blog posts will be based on specific needs and goals of your site, but hopefully this diagram and explanation will go a long way in helping you get there.

In my estimation the primary goal of a blog post is to instill confidence in your site and the best way to gain that confidence is through great content. That said there are many “anatomical” elements such as design, form and positioning that can also go a long way towards building trust as well.

1) Site/Business Name: This is as you would think: the name of your site. Make this easy to read – you do not want to introduce any confusion to your readers at the very top of your site. A logo or other image of some kind can help. A confusing logo can hurt.

2) Main Navigation: I like to place the “Blog” at the very end of the main navigation, particularly for sites with a static homepage. The reason I like to place the blog at the end is because I want it to be as visually present as possible, particularly since the blog is the most dynamic portion of a website, and through a blog, a site owner has multiple opportunities to convey a wide variety of mission-critical ideas.

3) Secondary Navigation: The secondary navigation is something I’ve been featuring more in my sites in part because WordPress has done a great job in allowing site owners a easy way to create “custom menus.” Secondary navigation is great because it affords you a nice opportunity to break up your site taxonomy. I’ve found that placing critical services in the main navigation and then placing information based items such as “about” and “contact” in the secondary navigation is a great way to make it easy for different people to quickly find different areas that are relevant to them.

4) Main Contact Area: This particular piece of digital real-estate is critical, as typically your header is site wide (the same header for the entire site.) Many sites like to include their social media accounts here, and again, depending on the business that can be a great idea; but other times less is more, so for many businesses a phone number and nothing else is the most effective use of this space.

5) Blog Post Area (Body): From the blog post body area, a site owner has many options and opportunities to really make an impression.

From a visual standpoint, the design should help reinforce your brand. From an organizational standpoint, the overall display, and how you place various elements, should serve to further increase the confidence that your readers have in you. You also have an opportunity to potentially influence outcomes based on how you organize your blog posts body area.

Suddenly, things like color scheme, font size and character spacing really start to take on a level of added urgency.

It is also critical to keep in mind that many of your blog post visitors are entering your site directly through your posts so making sure that everything is pretty easy to find is important. If you are going to break what is considered a typical convention with your posts you’d better make sure you have a great reason for doing so, particularly as your visitors have certain expectations based on reading many other blog posts on many other websites.

Also other factors to consider are the length of your paragraphs, how you break up your post (for lack of a better word we’ll call it “chunking”) and also additional visual hints you provide for your readers to better help them digest your post.

6) Blog Post Title: As a new visitor enters this page, they are going to be doing a few things immediately. After reading the name of your site (The Site Title), the next thing they are going to read is the title of your post to see if they even want to stay.

If you don’t do a good job with your title the likelihood of a visitor staying to read your post goes way down. This decision happens very quickly so it is critical that you spend enough time crafting really compelling titles for your posts.

It is also important to provide some visual contrast for your title so that it is easy to find.

7) Meta Information: There are so many ways to go with “meta information” that range from what to include to how to style. I like to view the meta information as a series of clues that a site owner can offer a reader to help further convince the reader that this is the post for them.

I like to start with the date, as it provides your readers with a clear signal that you are active and present. Particularly for new posts, there is something nice about letting your visitors have a “hot off the presses” appreciation for very recent posts. Of course for sites that blog very infrequently, I’d recommend not including the date.

“By Author” is another nice meta element. Your readers probably don’t know the writers of your site, but the simple act of including a name says that a post is written by a human rather than a corporate or business “entity.” Being human goes a long way and this little crumb of humanity helps.

The number of comments is probably the biggest signal you can provide regarding the popularity of a particular post. If people are commenting on a post, a visual proof of the number of comments can provide a strong indication to visitors that they too might want to continue reading to the end. Also, often when there are enough comments it offers up an additional incentive to new readers to stick around so that they too can benefit from the wisdom of your audience.

8) Social Share Bar: Another strong signal to “incentivize” your visitors is to include a direct callout to how often a particular post has been shared inside of various social media outlets.

In addition it is important to really consider the placement – you want to make it easy for your visitors to share, and also, by going full width on the social share bar it also increases the likelihood the your visitors mouse will pass over this section of your site – again – you want to make it easy for your visitors to share your content should they choose to do so, but being in the right place at the right time helps too!

9) Beginning of Post: Here it is critical that you hook your readers early. They have not yet fully committed to reading your post at this stage so it is important to quickly assure your readers that they have come to the right place, and that whatever you outline in your title is what this post is really about.

10) Image: It is critical to appreciate that the images, particularly those “above the fold” are going to be among, if not the most prominent elements of your post. A great image goes a long way. And so does a great caption. Again, as we are still early in the post you still need to assure your readers that they are at the right page so the image (and caption) carry a great deal of weight.

Also, consider the alignment of your images. Some images look better on the left and others on the right. I tend to place most of my first images to the right mainly because I try to make it as easy as possibly for readers to start reading.

Another big consideration with regard to images is that they stick out like a sore thumb – and that is a good thing in this case! Especially early in your posts, the images (and the captions) will be among the first things viewed so make the most of this opportunity.

In the case of this particular image in our sample, the guy is actually facing towards the area we want readers to concentrate on – the body of your post – in essence his line of sight is directing your readers to where you’d like them to go.

11) Sub-Headlines: Sub-Headlines throughout your post is another great way to provide some nice contrast, to contribute to the overall flow of your post and also to offer up another very quick way for readers to “cheat” ahead.

When considering your headlines within your post give some real consideration to font sizes, font colors and even padding. You’ll want to create very clear visual breaks that can enhance the overall reading experience.

12) Easy Visual Skims: Within the body of your post take advantage of bullets, numbers and even quotes to offer up additional visual diversity. These techniques also enhance the overall readability of your posts.

In some instances it might even make sense to consider offering up even more contrast through different font colors, font sizes and even italics.

Writing for online is not the same as more traditional writing so offering up some nice visual breaks is a great way to keep the eye of your visitor engaged (reading long paragraphs online can be hard for many readers) while also building on the “chunking” idea mentioned above.

13) Bottom of Post: Up until know the bulk of the hard work has been done by you. Assuming you’ve done a great job with your post, you probably want your readers to do something. To share. To subscribe. To comment. Maybe even to purchase. The truly interactive part of blogging begins here.

As you can see from the diagram, this also happens to be a bit of a traffic jam area in terms of our “ask” of the reader. It’s important that you find the right balance here – if you offer up too many choices you do run the risk of overwhelming your reader in which case they might opt to simply walk away.

14) Call to Action: This is completely optional, but there are times where it might help to ask a specific question of your readers in order to try and generate some additional dialogue. A simple invitation to comment with a “what do you think” or “please share your own stories below” can work wonders.

15) Author Bio: If you are running a single author blog this is probably not necessary, but for multi-author blogs it does add a great deal to the overall experience.

16) Subscribe Bar: This is where you provide your readers with a very easy opportunity to subscribe to your newsletter. More on why this is important in section #23 below.

The placement is also important to note – at this stage in the reader’s journey you have likely provided them with a captivating blog post so they are very primed to take another step in the relationship. Also note that again, this is a full width bar, so if your reader has any intention of continuing on with the post their eyes have to pass over this bar – by going full width you are essentially forcing your readers to make a decision.

Also as this is the first “ask” you are making of your readers following the end of your post it is important that you utilize this space wisely. So the first “ask” could be other elements such as a promotion, or even an ad for a third party product.

17) Social Share Bar (Again!): At this stage, unlike at the top of the post where the social share bar is also a signal for new readers, at the bottom of the post the social share bar is really an opportunity for your readers to share this post now that they are most qualified to share it – after they’ve read it.

Again, we are utilizing a full-width approach here. That is not to say this is the only way to go, particularly as I know that persistent vertical bars are pretty popular now. Whatever you think will work best. But in today’s world, as a blog owner it is critical that your offer up easy ways for your readers to share your posts and also that you feature more prominently whatever social networks are most relevant to your particular audience.

18) Most Recent Posts: Provide your readers with easy access to the most recent posts your blog has published. You’ve done such a great job that perhaps they want to read more and engage a little deeper.

19) Comment Form: There is a wide array of comment options available that can add nice features to the pre-installed WordPress commenting system and there is even a wide array of alternate commenting systems available.

Some commenting systems integrate very nicely with social networks, others offer site owners a greater degree of options, and yet others are literal extensions of social networks (Facebook comments.)

A few big consideration are ease of use (both your readers and your own), ability to moderate and portability (meaning that if you change your mind and implement a new commenting system down the road will you be able to keep your existing comments on your site.) Another big consideration is the ability for a commenting system to allow your readers to “follow” a conversation so that they will receive notifications in the event of any new comments.

No easy answers here. I will say though that most readers expect that comments will be listed in the order they were posted. In addition to meeting reader expectations, having your comments listed on your site in the order that they were posted will provide for a much easier reading experience to those wanting to see how the dialogue evolves.

20) Threaded Comments: In addition to offering up a way for your readers to comment on your posts it is also important to consider how others can respond to comments.

What makes threaded comments so great is that it allows the commenter of a post to get really invested in it – not only are they so interested in the post that they went so far as to comment, but now they are also invited to become an active participant in the ongoing nature of the post as a result of being engaged with others that have also commented. For a site owner this is a home run as you have now delivered a “comment worthy” post and you have also exposed your readers to some additional great ideas as a result of your amazing audience.

21) Sidebar: A few items to consider with your blog sidebar include the location (left or right), and the addition of a background color. As the sidebar is persistent (meaning that the sidebar is present both on your main blog page and your single posts), I’m of the belief that placing the sidebar on the right provides a better reading experience. But as we are about to explore, a sidebar provides some critical opportunities for your site to develop an enhanced relationship with a reader, so placing the sidebar on the left might be worth the potential downside of alienating some readers.

The color scheme for your sidebar is also another big consideration. A few elements to explore are the background of the entire sidebar, borders for the sidebar, borders for sidebar elements, font size, font weight (in this example the headlines bolder) and font color (in this example the font color lighter than the font color in the body).

The goal with your sidebar is to provide added value, and to offer up visual aides to help your blog visitors make good reading decisions that will give them a great experience and ultimately encourage them to take an action (to comment, to share, to subscribe, to download, to buy or even to contact you.)

Also, as you are going to see, within your sidebar you are trying to provide an additional experience – so you will want to explore different options in terms of the order of elements and what elements to include. One piece of advice – avoid the temptations of over-burdening your sidebar with too many content items. Doing so will likely encourage a complete lack of action, whereas if you limit what is happening on your sidebar, you are making it that much easier for your visitors to make a decision.

22) You Are Here!: Create a very short introduction box explaining to the visitor what your site is all about. Again – very short. Right now I’m not seeing a great deal of this on blogs but I think that is about to change.

As you get active with blogging you will begin to see that more and more visitors are starting to enter your site through either your blog posts or your blog page. These visitors are quite likely not familiar with your site, and found these pages through a variety of options including through social media referrals or search engines, so it helps to “introduce yourself.”

The reasoning behind this strategy is to very quickly “pre-qualify” your readers, and also to very quickly provide your readers with some additional context about your site. You want to further qualify readers who are browsing versus readers that might be interested in a longer relationship (i.e. potential leads.)

Readers of any stripe are great and your blog should provide value to ALL your readers, but it is okay to let people know exactly what you do. This strategy has a particular impact on how readers view your blog and also how they view the additional elements of your sidebar. You want interested readers to know exactly what you do, as they are likely to be even more interested in having a relationship with you.

23) Subscribe: On many blogs you will see the request/offer to subscribe feature very prominently, and sometimes often. The reasoning is that, unlike other opportunities for further engagement, your newsletter list is something that you as a site owner actually own. Therefore the need to capture opt-in requests is critical; it is through these lists that you can then begin to regularly contact your fan base (and let them know about events, subsequent blog posts and other related developments.)

With so much at stake, it is clear why the newsletter subscribe box is usually found “above the fold” (and in this sample scenario we also included an opportunity to subscribe to the newsletter at the conclusion of the post.) If you are going to get serious about your online newsletter efforts, take some time and do your homework – there is a ton of information out there so make the most of it!

24) Popular Posts: In this space where you might want to include either “Popular Posts” or “Recent Posts.”Some sites even offer up a “hand selected” version showcasing the site owner’s favorite posts. In any event the benefit for this is to make it easy for people to scan and see “what you are all about” and also to find other great articles you have written.

Also note in this example the change of color on the text of the posts (they are links so they are blue) and the additional contrast by making the color of the comments red. Again – you want to provide your readers with clear signals about relevancy.

25) Critical Ask: This single box might be the most important piece of your entire blog. It might be so important that your entire site hinges on it. That said, if you have a desire to see it “convert,” it is important that you do everything you can to convince your readers that your “ask” is worthy of their time, and in this scenario that starts with an amazing blog that delivers tremendous value. So by the time you make your “Ask” you have already started off on a great foot with your readers.

And I know for many of you the inclination is to include that “Facebook” box right there, and for some sites that is a great idea, but for many sites the success or failure has nothing to do with your Facebook audience (or for that matter any other social stream) so you want to make sure you make wise and economic use of this area of your blog.

26) Trust Factors: This is a great opportunity to further validate your “Critical Ask” either through testimonials, or to showcase specific accreditations to further bolster your “expert” positioning.

If you want to utilize this area to “sell” products – either yours or third party products – that is great; just make sure that the products are top shelf, and also that the products you are promoting in some way further bolsters the entire “story” of your site. Showcasing amazing products can also go a long way in helping in to reinforce your value as a trusted source.

27) Footer: There are a number of factors to consider with your footer, but as this element is usually a site wide element there is real value in “getting it right.”

A few form factors to consider are color scheme, font sizes and font weights. In this example there is a darker background and also the Main Navigation elements use two different colors (blue and orange) to offer up even more contrast. The footer body text is white.

By the time a reader has made it to your footer, assuming they are still actively engaged, they likely are starting to get into the “learn more” mode so do your best to address this quickly and concisely.

28) Footer Headlines: In this example we are not trying to rehash their entire site experience. Instead the goal is to provide readers with easy access to some of what we think might be their “common” questions. Again, the color contrast allows the reader to make a quick decision – is the reader at the right place or does the reader need to keep looking?

29) Request for Action/Contact Info: In some instances you might have something really special that you want to call out, such as a white paper or an exclusive offer. This is another nice opportunity to offer up the access to this piece, but even more so to continue to position yourself as a field matter expert.

This is also a good opportunity to provide your contact information one last time.

30) Social Follow: Links to your various social media channels. Again though we are in the footer, so likely the intent of your readers is less about “follow” and more focused on trying to learn more about you. By now you’ve provided them with an amazing experience so it’s important to continue to build on that with some well realized social media efforts.

Guest Author Bio: Through his company Gadarian Digital, David Gadarian works with businesses to help realize more value from their online marketing and communications effort with a results driven approach motivated by your bottom line. David has applied his skills across a wide array of businesses all with very unique practice areas and approaches and his company is a listed Nimble Solutions Provider.

David’s just released first book Better Business Blogging empowers businesses to realize a business blogging framework focused on best practices tailored to your business story and strengths.

Click the image above to download the full-size version!

In putting this diagram together I’ve tried to focus on “best” practices.  In addition I have included some further insights to help address “why” in specific instances. How you ultimately construct your blog will be based on specific needs and goals of your site, but hopefully this diagram will go a long way in helping you get there.

I also have a very simple rule that I want to share with you – “Form” is wonderful and I do believe that websites should aspire to be beautiful, but “Function” is critical -meaning that your first obligation is to make sure that your visitors can easily read and digest your content.  .

While this piece is focused on the “anatomy of a blog,” I have also included header and footer elements as I do think they can add tremendously to how you might approach the construction of your blog.  If you wanted to take things further and create custom headers and footers for specific pages, Headway does offer an easy path to doing so.

1)    Site/Business Name:  This is as you would think: the name of your site.  A logo or other image of some kind can help, particularly if you are looking to establish a specific tone that you will then use your blog design to further highlight.

2)    Main Navigation:  I like to place the “Blog” at the very end of the main navigation, particularly for sites with a static homepage.  The reason I like to place the blog at the end is because I want it to be as visually present as possible, particularly since the blog is the most dynamic portion of a website, and through a blog, a site owner has multiple opportunities to convey a wide variety of mission-critical ideas.

3)    Secondary Navigation:  The secondary navigation is something I’ve been featuring more in my sites in part because WordPress has done a great job in allowing site owners a very way to create “custom menus.”  Secondary navigation is great because it affords you a nice opportunity to break up your site taxonomy.  I’ve found that placing critical services in the main navigation and then placing information based items such as “about” and “contact” in the secondary navigation is a great way to make it easy for different people to quickly find different areas that are relevant to them.

4)    Main Contact Area:  This particular piece of digital real-estate is critical, as typically your header is site wide (the same header for the entire site.)  Many sites like to include their social media accounts here, and again, depending on the business that can be a great idea; but other times less is more, so for many businesses a phone number and nothing else is the most effective use of this space.

5)    Blog Body Area:  From the blog body area, a site owner has many options and opportunities to really make an impression.

From a visual standpoint, the design of your blog should help reinforce your brand.  From an organizational standpoint, the overall display of your blog, and how you place various elements, should serve to further increase the confidence that your readers have in you.

Suddenly, things like color scheme, font size and character spacing really start to take on a level of added urgency.  You’ll also want to give some thought to how many posts you want to include on each blog post.  Typically the standard is 10 posts, but of late many sites are adopting an “endless scrolling” approach.

6)    Blog Post Titles:  As a new visitor enters your blog page, they are going to be doing a few things immediately.  First, they are going to be scanning your blog to see if they even want to stay.  Then, they are going to determine what they want to read.  Your Blog Post Titles have a huge impact on this.

You should offer up a nice visual contrast to provide adequate clues to your readers in terms of these are the “really big subjects” on this page.  Also, it is critical that you write eye-catching headlines to encourage people to click through.

7)    Meta Information:  There are so many ways to go with “meta information” that range from what to include to how to style.  I like to view the meta information as a series of clues that a site owner can offer a reader to help further convince the reader that this is the post for them.

I like to start with the date, as it provides your readers with a clear signal that you are active and present.  Of course for sites that blog very infrequently, I’d recommend not including the date.

“By Author” is another nice meta element.  Your readers probably don’t know the writers of your site, but the simple act of including a name says that a post is written by a human rather than a corporate or business “entity.”  Being human goes a long way and this little crumb of humanity helps.

The number of comments is probably the biggest signal you can provide regarding the popularity of a particular post.  If people are commenting on a post, a visual proof is a very strong indication to visitors on your blog that they too might want to click on that particular post.  In the “blog anatomy diagram” you might have noticed that the second post has “25 comments,” which in this case would be a compelling reason for a reader to click through, if only to see what all the excitement is about.  Also, with comments you do have some interesting options should you want to take thing a bit further.

8)    Social Validations.  Another strong signal to “incentivize” your blog page visitors is to include on your main blog page a direct callout to how often a particular post has been shared, inside of various social media outlets.

Again, in our example, the second post has seen considerably more activity on Twitter, Google+ and Facebook, which would be a very compelling additional signal (along with a relevant title and also a high number of comments) that this is a good post to read.

9)    Excerpt Text:  The Excerpt is “a condensed version of your blog post.” In WordPress there is a default amount of text that will be included (which you can customize.)  WordPress offers up a number of ways to manage your excerpts.  Headway also offers up some nice options for customizing your excerpts.

I have found that a nice way is to approach excerpts is to set up a default approach that you are happy with and then to, as needed, use the excerpt field that is available when you create a new post in WordPress when you want to include more text.

I’ve also seen some sites include the full version of their most recent post directly on their blog page, but my feeling is that if your readers are on your blog page they are likely there to see a great deal of potential content in a short amount of time. Therefore, I tend to direct my clients to opt for brevity rather than having visitors do some additional scrolling to get past the first post – so generally I recommend not including full posts on your blog.

10) Images:  This is another area that is open to a wide array of approaches.  Many sites will go for a very linear and organized look and will include a featured image that will align in exactly the same place for each excerpt.  For some sites that have enough visual breadth that can be a great approach.

In the sample I’ve put together, instead of the featured image approach, I’ve offered up a variety of image placed in a different positions for each post.  This can be accomplished by taking advantage of the custom “excerpt” field that is available when you create (or edit) a post.  Just a quick heads up for all the WordPress users – I have yet to be able to figure out how to include a caption in my images with custom excerpts – I’m sure it’s possible, just that it seems to not work when I’ve tried to do it in the past.

While I don’t have any “science” to back this up, I believe that by breaking up the visual images, both in terms of size and placement, you are also encouraging your blog readers’ eyes to move around more, which hopefully means they are even on a subconscious level paying a little more attention to your site.

Also, the simple truth is that some images look better aligned left, while others really fit better aligned right.

11) Read More. This seems pretty straight forward, but it’s actually an important opportunity to add some visual spice to your blog page.  A blog page usually consists of 10 excerpts, so in this case we are looking at 10 “read more” buttons. Yet another item that is very easy to customize in Headway.

12) Older Posts (also newer posts if you are not on the front page of your blog): Again, this is pretty self explanatory in terms of function.  I recommend using a different color (or shade) than your “Read More” buttons in order to avoid any confusion on the part of the reader.

The confusion factor is critical here, so I’d like to point it out.  At this point in a reader’s journey they have either not seen anything they like, they have already read all the posts they are interested in on this blog page (which means they now want to see some more), or they are interested in learning more about your site. This means we want to make sure they head to either the header or, seeing as how they have already scrolled down this far, we make their life easier by including what we think are the important “about us” items in our footer (more on the footer shortly).It is critical that no matter where a reader is in their journey we take great care not to confuse them – for example, not using color contrast between “older posts” and the “read more” buttons. When we introduce confusion on a site, we are also chipping away at the trust our readers have in us.

13) Sidebar: A few items to consider with your blog sidebar include the location (left or right), and the addition of a background color.  As the sidebar is persistent (meaning that the sidebar is present both on your main blog page and your single posts), I’m of the belief that placing the sidebar on the right provides a better reading experience.  But as we are about to explore, a sidebar provides some critical opportunities for your site to develop an enhanced relationship with a reader, so placing the sidebar on the left might be worth the potential downside of alienating some readers.

The color scheme for your sidebar is also another big consideration.  A few elements to explore are the background of the entire sidebar, borders for the sidebar, borders for sidebar elements, font size, font weight (in this example the headlines bolder) and font color (in this example the font color lighter than the font color in the body).

The goal with your sidebar is to provide added value, and to offer up visual aides to help your blog visitors make good reading decisions that will give them a great experience and ultimately encourage them to take an action (to comment, to share, to subscribe, to download, to buy or even to contact you.)

Also, as you are going to see, within your sidebar you are trying to provide an additional experience – so you will want to explore different options in terms of the order of elements and what elements to include.  One piece of advice – avoid the temptations of over-burdening your sidebar with too many content items. Doing so will likely encourage a complete lack of action, whereas if you limit what is happening on your sidebar, you are making it that much easier for your visitors to make a decision.

14)  You Are Here!:  Create a very short introduction box explaining to the visitor what your site is all about.  Again – very short.

As you get active with blogging you will begin to see that more and more visitors are starting to enter your site through either your blog posts or your blog page.  These visitors are quite likely not familiar with your site, and found these pages through a variety of options including through social media referrals or search engines, so it helps to “introduce yourself.”

The reasoning behind this strategy is to very quickly “pre-qualify” your readers, and also to very quickly provide your readers with some additional context about your site.  You want to further qualify readers who are browsing versus readers that might be interested in a longer relationship (i.e. potential leads.)

Readers of any stripe are great and your blog should provide value to ALL your readers, but it is okay to let people know exactly what you do.  This strategy has a particular impact on how readers view your blog and also how they view the additional elements of your sidebar.  You want interested readers to know exactly what you do, as they are likely to be even more interested in having a relationship with you.

15)  Subscribe: On many blogs you will see the request/offer to subscribe feature very prominently, and sometimes often.  The reasoning is that, unlike other opportunities for further engagement, your newsletter list is something that you as a site owner actually own.  Therefore the need to capture opt-in requests is critical; it is through these lists that you can then begin to regularly contact your fan base (and let them know about events, subsequent blog posts and other related developments.)

With so much at stake, it is clear why the newsletter subscribe box is usually found “above the fold”.  If you are going to get serious about your online newsletter efforts, take some time and do your homework – there is a ton of information out there so make the most of it!

16) Popular Posts:  In this space where you might want to include either “Popular Posts” or “Recent Posts.”Some sites even offer up a “hand selected” version showcasing the site owners favorite posts.  In any event the benefit for this is to make it easy for people to scan and see “what you are all about” and also to find other great articles you have written.

Also note in this example the change of color on the text of the posts (they are links so they are blue) and the additional contrast by making the color of the comments red.  Again – you want to provide your readers with clear signals about relevancy.  

17) Critical Ask.  This single box might be the most important piece of your entire blog.  It might be so important that your entire site hinges on it.  That said, if you have a desire to see it “convert,” it is important that you do everything you can to convince your readers that your “ask” is worthy of their time, and in this scenario that starts with an amazing blog that delivers tremendous value.  So by the time you make your “Ask” you have already started off on a great foot with your readers.

And I know for many of you the inclination is to include that “Facebook” box right there, and for some sites that is a great idea, but for many sites the success or failure has nothing to do with your Facebook audience (or for that matter any other social stream) so you want to make sure you make wise and economic use of this area of your blog.

18) Trust Factors.  This is a great opportunity to further validate your “Critical Ask” either through testimonials, or to showcase specific accreditations to further bolster your “expert” positioning.

If you want to utilize this area to “sell” products – either yours or third party products –  that is great; just make sure that the products are top shelf, and also that in some way the products you are providing access to in some way further bolsters the entire “story” of your site.  Showcasing amazing products can also go a long way in helping in to reinforce your value as a trusted source.

19) Footer.  There are a number of factors to consider with your footer, but as this element is usually a site wide element there is real value in “getting it right.”

A few form factors to consider are color scheme, font sizes and font weights.  In this example there is a darker background and also the Main Navigation elements use two different colors (blue and orange) to offer up even more contrast.  The footer body text is white.

By the time a reader has made it to your footer, assuming they are still actively engaged, they likely are starting to get into the “learn more” mode so do your best to address this quickly and concisely.

20) Footer Headlines.  In this example we are not trying to rehash their entire site experience.  Instead the goal is to provide readers with easy access to some of what we think might be their “common” questions.   Again, the color contrast allows the reader to make a quick decision – is the reader at the right place or does the reader need to keep looking?

21)  Request for Action/Contact Info.  In some instances you might have something really special that you want to call out, such as a white paper or an exclusive offer.  This is another nice opportunity to offer up the access to this piece, but even more so to continue to position yourself as a field matter expert.

This is also a good opportunity to provide your contact information one last time.

22) Social Follow.  Links to your various social media channels.  Again though we are in the footer, so likely the intent of your readers is less about “follow” and more focused on trying to learn more about you.  By now you’ve provided them with an amazing experience so it’s important to continue to build on that with some well realized social media efforts.

Guest Author Bio: Through his company Gadarian Digital, David Gadarian works with businesses to help realize more value from their online marketing and communications effort with a results driven approach motivated by your bottom line. David has applied his skills across a wide array of businesses all with very unique practice areas and approaches and his company is a listed Nimble Solutions Provider.

David’s just released first book Better Business Blogging empowers businesses to realize a business blogging framework focused on best practices tailored to your business story and strengths.