Essential Guidelines for Featured Content in Web Design
As the mountain of digital content grows, all websites are looking for capabilities that help them to provide dynamic and even personalized online experiences of their visitors. Commercially-oriented sites need these capabilities so they can merchandise and monetize content, products, and services more effectively. If you surf the web for any length of time, you’ll eventually notice that a very popular and very useful tool that many websites use is a featured content. This is useful in a variety of ways. Churches like to use it to attractively display their upcoming events, businesses like to use it to showcase their latest products, bloggers can highlight their latest or most popular posts that matches the interests of the visitors, and artists can showcase their latest work.
Today I researched a few integration options that I thought would interest other bloggers. One thing that I found that many bloggers are interested in integrating into their site is the Featured Content option. Today I will introduce guidance about featured content areas in web design and how to implement in your WordPress machine.
Before we talk a lot about feature content, there are several basic approaches, guidelines and goals that we need to know and consider when we’re working with these feature on our site/blog. Also, I will discuss the trick on WordPress engine that will display only articles that match with specific tags that will appear in featured content areas. Last but not least, some examples and plugins that will help you more effective for these areas will complement this post sections.
You may be interested in the following related articles as well.
Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.
Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.
Brief Description About Featured Content
Featured Content is a content spotlighting capability that helps websites/blogs adapt and personalize their web experiences based on the interests and intent of their visitors. From online web publishers, e-commerce sites, even personal portfolio, Featured Content helps ensure site visitors are presented with the right content at the right time, encouraging action, improving loyalty and increasing efficiency for site/blog visitors.
In web design, featured content generally is a main content area (panels, if you will), which displaying different unique content. There are generally a set number of panels; there are links which act as navigation to quickly jump toward any particular panel. These links can be anything (text hyperlink, thumbnail, etc) and link to a unique hash value URL (each panel has a different URL).
So yes, you could say these feature in wider definitions, most designer when talking about Featured Content are mainly using the term to present the right content to the right people at the right time.
What is the Purpose?
I’m absolutely sure that you want to know where exactly you will go, as well as objectives of these featured areas on your site/blog. We’ve seen lately, that a lot of sites out there that use this feature as “sweeteners areas” as well as complementary features on their sites. Without regardless the purpose of this features, there are a few of them become successful to reach the goal of this feature, but some are not. Fortunately, many people tend to assume that this featured area is very effective if we have a good placement area in our site/blog. It is important to define the purpose of these featured content areas as one of the first step before we display it on our site/blog. So, what exactly is the purpose of this featured content areas?
01. Visitors Should Know!
We cannot deny that this is the most fundamental purpose of why we and many people out there using this feature. Generally, if this is our initial goal, then this feature would be very well suited placed at the bottom of the main navigation menu or at the very top of our articles on homepage.
02. Content Spotlighting
More and more, Web site visitors find that search feature is the fastest way to sift through the vast amount of content on a site to find what is relevant to them. Featured Content empowers sites/blogs to engage in a virtual dialog with visitors as they search and navigate the site. A site that using Featured Content, effectively “listens” to visitors activities such as searches and clicks, to displays contextually-relevant content that matches the interests of the visitors.
What articles you want to display in this feature? You can use this feature to highlight articles that contain special meaning such as “An Interview with Chris Spooner from Spoongraphics”, or unique title copywriting for example “15 Killer for WordPress Hacks That Are Extremely Useful”, or you can even use it for promo to increase user activities on your site such as “Comment to Win: 5000 Business Cards from NextDayFlyers!”. Try Collaborate with what you want to display on this feature and make several criteria in this section, and don’t forget to compare it one by one with the level of user’s interests.
03. Encourage User’s Interests.
What would you do if you get a recommendation? Make sure to know more deeply and you may think, what is that? Is that good? What if many people out there have a good response about it, would you take it? Of course, why not. Just like these featured content areas, it will recommend to your visitors about the articles that have more value to read more. Please make sure that the articles should have more value and remember that is important to make your criteria. It will help you to keep visitor’s mind that reading these pages is not wasting time.
04. Navigation – Make it Easy to Get Around.
I think this points associated with the 2 points above, with the assumption that visitors does not need to browse our webpage one by one just to get another articles that have more value and quality. This problem can be solved by 2 things, first use the search box based on the specialization of each visitors, and the second is use featured content areas as we have discussed in number 2 and number 3 is based on fresh recommendations and relevant content that matches the interests of your visitors.
What Should i Consider Before Use it?
If you already to know about the purpose, so what should you consider before use this featured areas in your site blog? The following points may be a reference for those of you who want to use this feature.
Consider Your Purpose
If you’ve met one of the points I’ve mentioned above, it means you are ready to have this feature on your blog / website. Define your goal’s from this feature, because I’m sure you do not want to make users feel confused about the recommendation that you offer on your homepage.
Consider Complexity of the Value that you have on Your Site
You have this value, starting from the number of categories till the articles? If you have it, you are ready to develop these areas. Let’s look at some great sites that have the complexity of value such as Yahoo, Mashable, InstantShift, Hongkiat, Tutorial9, Naldz Graphics, 10Steps.SG, and others. They’re easy to put what they need, what they want to do with this feature and what they don’t.
Consider Materials that have Potentially
Does your site is one of the blog design communities out there? So, articles that you could consider to be displayed on this feature are design, WordPress, or tutorials. Obviously with some criteria such as special, unique, etc that I’ve mentioned in number 2 on the purpose section.
Getting Bored with design structure of your site/blog can make users unimpressive. Refresh and styling your site/blog with these features to increase more users interest on your site/blog. You could consider this one too – Only if you want. Therefore, I do not put it into the things that needs to be considered – because Featured Areas gives your site a professional appearance, and once you have created 3 or 4 posts under this area you will see the benefits of it.
I Don’t Know How Should Featured Areas Look Like?
No need to confuse about how this featured content areas should be seen on your blog or website. Clearly, this should be affordable by the visitor’s eyes when they come to your website. There are various trends that web designers use to get attention from visitors. Here is some example websites with featured layout :
Branded07
Two24Studios
Tutorial9
InstantShift
Hongkiat
10Steps.SG
NaldzGraphics
Yahoo!
Apple
Mashable
Leigh Taylor
You can see other examples are much more in these pages by Function Devise.
How to Display Featured Content (Tags Based)
One of the reasons WordPress is so popular is because of flexibility. Every designers, developers, and bloggers have plenty of options. In this section we’ll look at a simple tutorial for displaying featured content in WordPress-based site and all you have to do is just put your fingers on.
You can display featured content in your WordPress with whatever method you want. I prefer with tags based filtering on each articles. then combining with jQuery for fade-in effects. With this trick, only articles that match with specific tags will appear in my featured content, and this is makes me more flexible to determine articles and from which categories are worthy for these featured. Here is simple code for filtering your tags then you can simply paste this code to display in your home or your sidebar.
< ?php
// Number of featured entries to be shown
$featposts = 3;
// Tags to be shown, separate with comma such as "featured, design" and
// you can change this tag(s) with what you want
$tag_to_be_shown = "featured";
$GLOBALS[feat_tags_array] = explode(',', $tag_to_be_shown);
foreach ($GLOBALS[feat_tags_array] as $tags){
$clean_tags[] = trim($tags);
}
$new_tags = implode(',',$clean_tags);
$saved = $ks29so_query; query_posts('tag=' . $new_tags . '&showposts=' . $featposts);
if (have_posts()) : $count = 0;
?>
<div class="featured">
<ul>
< ?php while (have_posts()) : the_post(); $GLOBALS['shownposts'][$count] = $post->ID; $count++; ?>
<li>
<a href="%3C?php%20the_permalink%28%29%20?%3E" title="< ?php the_title(); ?>">< ?php the_title(); ?></a>< ?php the_excerpt(); ?>
</li>
< ?php endwhile; ?>
</ul>
</div>
< ?php endif; $ks29so_query = $saved; ?>
You can change the number of featured articles from the code above, and also you can select the tags where you can call articles from many categories on your site/blog. Well, it’s done and styling with what you want. Try to adding thumbnails for each articles and give some effect like fade-in or slide with jQuery, it can make more catchy for your visitor!
Need more references to display featured content on your site..? Here are another resources tutorials and techniques to display these feature that I’ve found on the net. Try to combine with what we’ve done with the simple WordPress trick above using the following tutorials below.
Featured Content Slider Using jQuery UI
This tutorial will show you how to add sexy featured content slide-show to your WordPress site using jQuery UI library.
Slick Auto-Playing Featured Content Slider
Based on Coda slider JQuery Plugin. Simple Easy and beautiful.
Easy Image with Content Slider
Easy image with content slider enables images to slide with nice appearance based one JavaScript and CSS. This tutorial will show you how to add easy image slider to your WordPress blog with simple instructions.
Is there any WordPress Plugins that I can Use?
Yes, of course. I’ve found that using plugin to assign the status of “Announcement” to the posts I want to feature is the easiest way to go. Announcement posts will always stay on top of the rest of your posts, but you can easily turn “Announcement” off, and the post will return to its rightful place among the rest of your posts. I’ll encourage you to play around with it to discover them for yourself!, and here is plugins that can provide added functionality that will bring new possibilities to displaying featured content in your WordPress machine.
Featured Content Gallery
Featured Content Gallery is the first plugin released for displaying sliding feature article in your WordPress blog. It creates an automated sliding gallery with latest featured articles added to your site. It is based on one sliding gallery with two arrows in the sides that allows visitors to rotate between different featured posts.
J Post Slider
J- post- slider plugin designed to show feature post in fancy appearance in j-qurey box. Sliding images with Excerpted text to overlay it in many different positions, Mouse-over stop the animation.
A powerful back-end where you can change the slider setting, colors, opacity, rotating time etc.
Featured Content Slider For WordPress
WP Featured Content Slider Similar to simple featured post as previously explained above. However, it has a nice java-script slide-show/slider for WordPress. It can be integrated anywhere on your Blog/Website.
Based on calling specific post (excerpts) from the selected category, adding post image thumbs beside it in a way that looks very nice.
Featured Articles Plugin for WordPress (With Moo Tools)
Featured Article Plugin With Moo tools is designed to give WordPress special appearance with sliding-show and navigation between featured articles.
This plugin is different from the others as it contains dot like navigation where you can select specific post instead of clicking next and previous.
It features a powerful Admin back-end where you can control the following ;
- Number of featured articles to display.
- The order in which they will appear.
- The plugin Always calls the first image from the Featured post if there.
Dynamic Content Gallery
It’s an excellent alternative to Featured Content Gallery. This plugin creates a dynamic gallery of images for latest and/or featured Posts or Pages using either the JonDesign SmoothGallery script for mootools, or the Galleryview script for jQuery. Additionally, default images can be displayed in the event that the necessary custom fields have not been created. A Dashboard Settings page gives access to a comprehensive range of options for populating the gallery and configuring its look and behaviour.
Where the Tips?
Have fun with this article? Now I’m going to share some of important tips for featured content. Not only for graphic design blogs, but also for web design & photography blogs. There are some important things that i learned a lot from being a graphic design blogger since months ago. I hope that this tips will help you.
- Affordable by the visitor’s eyes – This point give us a reason, why featured content is always on top in a design structure.
- Keep it consistent – The navigation system should be in the same place on every page and have the same format. Visitors will get confused and frustrated if links appear and disappear unpredictably.
- High Quality Images – Always provide high quality images to raise your credibility and also it can make your featured areas look nice.
- Learn From Other Graphic Design Blogs – Sometimes they have some articles that can drive traffic to their blog from featured content. Watch carefully how they choose potentially of the content for visitors and how they decorate and design their featured content areas.
- Between a short text, image or both – You have to choose what elements you want to display in featured content areas, like Tutorial9 (just image) or you want it look like Mashable (both). It will help you before you can start designing your featured content.
- Unique and different – Give more attention for this point, try to research from many sites out there while designing your featured content areas and be careful with background images and colors. Make sure you have a good reason to deviate from the successful dark text on a light background model.
- Don’t save the best for last – Place your most important content on this features. Think of a newspaper: the top story is always prominently displayed above the fold. Check your page display at in a number of different screen resolutions to make sure that your most important content is visible when the page loads.
Conclusions!
Now, we know what is the purpose of these featured, what should we consider before shown on a site/blog and also some examples, tutorials, tips and WordPress plugin that can help you to deal with featured content. So, how big the role of these feature on your site/blog?
Remember that you’re the designer and developer, so of course you effortlessly use the navigation system, loves the content, and understand the value proposition. But now it’s time to get visitors feedback about this post – Please feel free to leave your comment if one of you had experience from this features. I think, share would be very good for everyone.
Image Credits
- With Purpose | Stuart Lee
- Chess | Alexander Salmov
- Okay, you caught me | Rachel Johnson
- Glamour Patrol | Aleksandr Slyadnev
- Explaining the Paper | Mark Härtl
Excellent post. Great tutorials up there as well. I’d just like to say that although featured content can be important and almost crucial for a lot of webpages, it’s not necessary for all. I find that I see a lot of websites where I don’t really understand why there’s a featured content section at all, rather it seems like it was put there just because it’s become a big trend. If you’re going to feature something, I’d like to feel like there was a reason it was featured once I read it.
Very good post!!! :-) Thanks InstantShift.
@matt and @adone thx for sharing with us
Great advice, really wonderful post that will be a very valuable resource in the future.
ncie article and thanks for sharing :D
the 10steps.sg and hongkiat heading is swaped !!
@sriganesh– Thanks for the heads-up… Post updated.
great tips, thank you.
Interesting article and nice round-up of sliders. Thanks.
What a ravishing and mind boggling knowledge has been shared.
great…
i think great produk have to similar with the great design+great option in choosing or implementing the technology..
This is certainly one in-depth article – lots of useful tips. Keeping the ultimate purpose or goal in mind when creating areas of featured content is especially important to retain focus.
@chris:
thx chris, and sure you have to keep on your mind that it is important about goal’s of this featured. focus and listen to your visitors for what they want is the key. enjoy..!!
Nice article. Very informative. Thanks for posting this one! This is really useful.
this post is really helpful to make my blog more user friendly.
thanks for sharing
…. a fantastic article showing us essential guidelines for featured content…. and more !! Thanks Deepak for the share and “instantShift” for spotlighting these very essential guidelines for creating a truly amazing blogsite !! :)
It is very heartening to stumble across blog entries which still have value on the Internet these days. Really interesting write-up chock full of useful pointers. Thanks for sharing and please keep up the good work!
Nice Tips.
thanks for all the comments guys/gals. I always appreciate your feed back
This is the longest and most interesting article about web design, because I’ve read in a long time. All information in their daily work, as a web designer, not hard to fruition, they must only keep always in mind. The best print and stick to the screen. I thank for the successful collection and invaluable tips. I will recommend the article!
This is a great article and set of resources. Thanks for sharing.
very good article and thanks for sharing :D
Thanks for the good Article.Is very good and helpful.
Greetings-Campiino
– fantastict tips,
– great article and very helpful
Thanks a lot – Good Work
Article.Is very good and helpful.
Greetings-Campiino