The hottest trend these days in web design is Content Strategy. It has a certain buzz to it like how search engine optimization (SEO) was like in years past. But what role does it play in our web projects. I’ll try to uncover how Content Strategy combines SEO and copywriting techniques and why web designers should practice it.

What Exactly Is Content Strategy?

Whats so important about Content Strategy? Effectively, Content Strategy is the planning, management and delivery of a website’s content formats such as text, images, videos and anything else you put on a it. It is closely related to SEO and copywriting.

How SEO and Copywriting Play Into Content Strategy

SEO is the art of designing a structured page meaning clean HTML markup that can be easily interpreted by search engines but filled with content that is helpful to people. A single web page is not very useful but a combination of pages that relate to each other so people using search engines can find a site based on keywords provided within each page and topic to help generate topical authority for a site.

By planning ahead what topics will be on the site, what headlines will be written and the supporting text and images prepared it’ll make our lives as web designers much easier.

Copywriting relates to SEO because effective writing highlights the topic, the web pages intention and is able to attract search engines algorithms and peoples’ search terms. With our content strategy plan, we have the blue print to stay focused on these topics.

Implementing SEO and Copywriting Techniques

By planning and organizing your content first such as declaring your marketing message, business purpose or goals; you’ll create pieces of content that help support the website. Each section of text will support a topic and these category topics will support the main topical theme of your site or micro-site. Other supporting contents are images with proper tags, internal links to pages so information and navigation has a good flow and well written copy to attract people and search engines’ attention.

As web designers, we should know and understand a combination of skills so we can create better sites that are both aesthetically pleasing and functional as well as being able to educate our clients. We already know basics to SEO and how to effectively write copy content for websites. We can create and prepare graphic images and photos. Most likely you have a blog and write to it regularly on your website as well.

Incorporating these skills together and planning a client’s or your own content for the web is how content strategy becomes part of the design process. Its a control mechanism to ensure that no task is left behind so we can minimize delays on our web design projects.

Further Reading On Content Strategy

Discipline On Content Strategy – From A List Apart, this article describes the discipline of practicing Content Strategy and why as web designers we should incorporate it into our design process. There are several other great articles on this subject at A List Apart and I recommend you reading them.

Content Strategy: The Philosophy of Data – From Boxes and Arrows offers how Content Strategy is not just about text but all data that pertains to a site. It is a great article to learn more about this topic.

Content Strategy For The Web Professional – From Lucid Plot gives a great summary for Content Strategy and how we should, as web professionals, practice this discipline and use them in our projects.

As I delve deeper into the design process I finding watching art and design film documentaries to be very helpful. Rather than just read books, magazines and blogs on web design, web development, graphic design, content strategy, etc; I needed to give myself a break.

Its a visual treat to watch art and design film documentaries because they are easy to process, short in length and offer good narratives. I draw inspiration from all the films for my own web projects listed below as they are great references to art and design. I highly recommend you to watch these films and hopefully they’ll inspire your next web project.

Exit Through The Gift Shop

Great art documentary film on the background of street art. At first I thought this film documents the history of graffiti. Instead, it let me discover a fascinating world to art and design in pop culture through street art.

It has a good story narrative besides just documenting street art. There is a sense of irony after watching this film because its similar to the state of web design. What makes you an artist and what is art?

Same can be said about web design. If you have the tools to create a website, does that make you a web designer?

This is definitely a must watch documentary film about street art. I think it’ll inspire you to yearn to learn more and getting better at your craft.

Art & Copy

Documentary on the greatest marketing advertisement campaigns and the clever masterminds behind them. Art & Copy is one of the coolest documentaries for me personally. It has a nostalgic feel thanks to showcasing the great advertisements of my generation such as the “Got Milk” campaign, or Nike’s “Just Do It’ slogan and Apple Macintosh 1984 Super Bowl ad.

Credit goes to the agencies responsible for creating these viral marketing campaigns. The combination of creating clever messages and the use of powerful graphic designs produced memorable advertisements. Even more inspiring is that these campaigns took place prior to all the technology hoopla available to us now such as using social networking, YouTube videos and mobile technology.

I strongly recommend Art & Copy because it will give you a nice background in advertisement marketing and it’ll definitely give you a few ideas to work with for your next online marketing and graphic design project.

Helvetica

The origins of Helvetica, the world’s most popular and widely used font. Hate it or love it, it is here and many swear its perfection. I am amazed there is enough material to fill a film documenting just one single typeface. And even more amazed on how entertaining the movie was for me.

As a web designer, its important to learn more about typography and the type design process including knowing the difference between font and typeface. Unlike designers that specialize in print, web designers deal with what is on the screen.

However, print design has been around much longer and there is much to be learned for a web designer from it. A web designer should incorporate the knowledge, usages and design processes taken from print designers.

Helvetica is a great movie to learn more about typography, graphic design and global visual culture.

Objectified

Every day things we use and usually take for granted all went through a design process. Simple things like household items from fruit peelers to laptops. Objectified is an interesting film documentary about the design of things.

The subjects discussed in Objectified relate to web design because we can incorporate the though processes to how to improve user experience and creating better user interfaces for sites. To cut out the garbage and unnecessary elements in our web designs. To not over design and losing focus of the purpose of the site.

Milton Glaser: Inform and Delight

Into the mind and history of great designer, Milton Glaser. If you don’t know, this man is responsible for the iconic “I ♥ NY” and Bob Dylan album cover. You’ll draw inspiration from one the greatest minds in graphic design for over forty years.

As a web designer, we’re still uncertain on how the web and Internet will continue to evolve. However, great design is timeless. And creativity should not be restricted.

It makes me want to sign up and spend my summer learning from him. And to visit New York because it is such an awesome city with so much to discover.

Between The Folds

Amazing origami documentary that will introduce you to the amazing world of folding paper into any object imaginable. It is crazy to see some of the origami designs and art pieces created.

A lesson to be learned from this film documentary is that web design starts with an open canvas like a piece of plain paper. With your ideas, you can take that canvas to great heights. But you will need to thoroughly plan, practice and continue to learn and be inspired like these origami artists.

Bonus Documentary Film: Botany of Desire

Botany of Desire is a film documenting plants and nature. It specifically shows how nature copes with re-designing itself to continue evolving so humans will interact with it.

Design and nature is conflicted. What is designed cannot be natural right? Well, in nature both can happen. This really isn’t an art and design documentary but I enjoyed watching it.

You draw clues from how nature deals with seducing humans to act. Like our graphic designs, web designs or marketing messages; we want it to interact and offer a memorable experience for our viewers and users.

Like plants dealing with re-inventing itself, as web designers we need to evolve and continue to add new skills to our repertoire so we can display them in our projects.

Take The Lessons Learned and Employ Them

After watching all these film documentaries, each one offers a lesson for me to help further my skills in design. It’s a nice break from reading or coding or composing.

I enjoyed these films so much I decided to write a post to share. I highly recommend you watching these, in no particular order but just to watch and enjoy. If your a designer in any field, you’ll definitely enjoy these art and design film documentaries.

If you have any other film documentary recommendations, I’d love to hear from you. Hopefully, they’ll inspire you to do better work and create more creative web projects.

As I update the DesignRJC site, I run into a query issue for my Custom Post Types in WordPress 3.1 where the previous_posts_link() and next_posts_link() are not displaying properly. If you’ve been working with custom post types in WordPress 3.1 and have this issue, hopefully this will help resolve it.

Researching The Issues With previous_posts_link() And next_posts_link

Basically, the previous_posts_link() and next_posts_link() functions allow you to display the next set of posts being queried. In this case, it is a custom post type of portfolio items I created for DesignRJC to display projects, client work and concepts. You can read more on using the these functions on the WordPress Codex here and here.

Its maddening when something so simple as using a built-in WordPress function does not work properly and I had several hunches to try and debug.

At first, I thought it was the theme.  Currently testing the capabilities of building out a child-theme using Justin Tadlock’s Prototype Theme. Unfortunately, not being an exclusive member of their support forums doesn’t get me much help.  Still not 100% sold on child-themes and relying on a framework but it definitely has its positives.

Began double-checking the custom post type registration functions to make sure the re-write slug name for portfolio post type is different than the page template name used.

Everything checked out okay on that end as well.

I then study the query itself within the page template.  The query I use for the portfolio post type is:

<?php
    $paged = ( get_query_var( 'paged' ) ) ? get_query_var('paged') : 1;
    $args = array( 'post_type' => 'portfolio', 'posts_per_page' => 2, 'paged' => $paged );
    $loop = new WP_Query( $args );
    while( $loop->have_posts() ) : $loop->the_post();
?>

From reading other people’s experiences, it seems that my query is correct because of creating the variable $paged = ( get_query_var( ‘paged’ )) ? get_query_var( ‘paged’ ) : 1; line of code. This didn’t resolve my problem.

Solution For Fixing previous_posts_link() And next_posts_link() Properly For Custom Post Types

I came across another solution for displaying next_posts_link() and previous_posts_link() functions correctly.  It required the use of a second parameter of $max_number_pages. In short, it passes the total number of pages to be paginated within this custom query. This solved my issues and here is the snippet of the code I used:

<?php previous_posts_link('« Previous', $loop->max_num_pages); ?>
<?php next_posts_link('More »', $loop->max_num_pages); ?>

Notice in both functions, the second parameter is used.  By default, it is set to zero to display all pages.  Pagination for custom post types require extra finesse.

Where it is $loop->max_num_pages, $loop is the original query variable object from above and by using max_num_pages, I pass the total number of pages to be paginated into the second variable from the query.

Very helpful hint and fix to working with WordPress custom post types. Credit goes to WPCanyon for coming up with this solution.

As a creative person, you will often see a photo that is pretty interesting  to begin with.  By making a few minor adjustments you are able to fix any flaw or add details.  Photoshop is a great tool in preparing images or for editing web graphics.  It is also a fun tool for an exercise like this.

A good example is this photo of this lady sitting at the pool; when turned 90 degrees, it appears that she’s sitting on a ledge and there is a wall of water.  It is fun a to take a cool photo like this and make it even better.

The original photo, shown below, has some background distractions that take away the “wall of water” sensation.

Original Photo Before Photoshop Image Editing

After Editing in Photoshop

Everything was done in Photoshop CS4 using masks, patch tool and healing brush as well as rotating a layer to make the lady’s head look as if she’s not struggling to keep still in water.

Here’s a side by side comparison.  What do you think?

When it comes to design, it is normal to quickly develop mock up websites or sample web graphics for clients.  We often use dummy text  or placeholder content known as “lorem ipsum”.  Lorem ipsum are the first two words typically used for any dummy text that is auto generated.  It is a sample text that is used to mimic content without any meaning.  It provides a natural flow of characters grouped together to mimic the flow of real content giving clients an idea of how a block of text will look in a given space, content box, web browser screen or web page.

How To Generate Your Lorem Ipsum

Rather than doing a search for dummy text or lorem ipsum and then copying and pasting it every time it is needed; there are definitely faster and more efficient ways.  Several ways of quickly generating lorem ipsum dummy text are widely available on the internet either as a website application, a browser add-on extension or software plug-in.

This old-school way involved  avoiding repeat visits to your dummy text website by creating a new text document and saving the generic lorem ipsum paragraph.  Have it on your desktop to be  handy so you can use it at any time for your copy and paste action.  However, this is an inefficient way.

If your looking for quickly generating while working in a browser, you can head on over to this website, the lorem ipsum generator site.   It provides several options so you are able to generate based on number of paragraphs, words, bytes or lists.  Not bad as its pretty customizable but how custom does it need to be since it is only dummy text used for a mock up website design or web graphic.

Better yet, if you are using Google’s browser, you can use this lorem ipsum Chrome extension to quickly access your placeholder content anytime.

If your working in Photoshop, you can download an extension plug-in that generates placeholder text.  This plug-in adds an additional panel that helps generate a “lorem ipsum” paragraph.  This is useful especially when designing the look and feel of a website theme without any content.   The plug-in can be found at the Lorem Ipsum Photoshop CS4 Extension, and it is easily integrated and installed.

Now, many text editors like TextMate, Note++ or my current favorite IDE (internal development environment) Coda allows you to save snippets of code and quickly access them via a set command text.  For example:  In Coda, I have it set so when I type “lorem”+ tab button, it automatically generates a paragraph of placeholder text.

The options are endless and if you really want, you can even do a system wide setting such as using an application like TextExpander.

How to Properly Use Dummy Placeholder Content

We’ve shared several locations on the internet to find lorem ipsum text but let’s not go overboard slapping dummy text all over your designs now.  So when does one use placeholder content?  Here are some general rules to follow:

• Use dummy text when the client has not provided any content
• Before using lorem ipsum for headings in your designs; it is better to establish your style guidelines
• Placeholder content should be used in wire frames, not visual themed designs (hopefully you already have some established content)

How Do You Use Lorem Ipsum In Your Design Work?

How and where do you get your dummy text?  Do you also use some sort of plugin for your programs?

It’s here.  Finally here.  I’ve been waiting for God of War 3 since they announced it back when the Playstatioin 3 was launched.  From teaser art pieces all the way to the E3 demos and trailers; I knew this game was going to be epic.

I needed my fix of Kratos.

As Epic as it Gets

To sum up, God of War 3 is a video gaming masterpiece and pure adrenaline to play.  It continues the tradition of the original series in its delivery of fluid game play.  The visual spectacles and grand scale of it all just completely immerses you.  If you have never played one of the God of War games yet, I highly suggest it.

The background story is that you control Kratos, a spartan warrior, who has made a deal with the Gods to have omnipotent power.  The setting is in ancient times of Greek mythology with characters like Zeus, Poseidon, Athena, Pandora, Hercules, etc.  The environment is detailed and graphically stunning as each game scene can be considered high quality desktop background.

In terms of scale and how ambitious the game is, the excitement starts right at the beginning.  The pace is say full throttle the entire way I would say.  Each level as the story progresses is like an entire game where you face a grand boss fight one after another.  There is some platforming and puzzles involved, but I would say the focus on God of War 3 has been to replicate all the excitement you experienced in the previous two games and holding that excitement level all the way through.  Good job, Team Santa Monica!

The Goods

• Intense battles with fluid game play mechanics expected from the God of War series.
• Diverse weaponry from the diverse Blades of Exile to three new weapons, Hercules Cestus, Claws of Hades and the Nemesis Whip.  You are able to upgrade each weapon to unlock new combos and more damage.  There is also ability to swap weapons on the fly to get some intense combos during combat.
• Boss fights are insane.  Not the difficulty on Normal mode but it does take awhile to get their patter down.  It is the delivery of these Boss fights that make it memorable because at times, these Boss fights are the level itself.
• Graphics and audio totally grabs you into the game especially if you play in 1080p HD.  Minor slowdown during movie scene transition but its negligible.
• Unlockables keeps you wanting to repeat the game and adds to the replay value.  From trophies for bragging rights to the Challenge of Olympus.  There are also video documentaries on the game creation.  Good bonus content.

The Bads

Can’t really pick on too many wrongs with the game except for a few items.

• There will be several instances when you use the Wings of Icarus to fly and the level becomes like a mini game where you control Kratos through a tunnel in a superman viewpoint.  You have to dodge falling rocks or fly through small holes.  I found these levels frustrating because you are not able to attack or defend but rely only on dodging.  This is fine but when you get hit, you set yourself to take multiple hit damages.  You die rather quickly if you aren’t able to navigate through.
• Camera angles cannot be controlled so there are instances where you are extremely far from the action or at angle where you do not know there is a gaping hole awaiting for you to fall and die.
• Game setting is mostly darker than what I’d like; so you might need to turn up the brightness a bit because it makes navigating through the platform levels more easier.  Combine that with the camera angles mentioned above; its an issue for me.
• The game should have ran 1080p natively without toggling settings in the PS3.  Sony needs to fix the upscale issue because it is a hassle to de-select 720p and 1080i to force upscale for games and then reselect them when I pop in a game that does not support 1080p.  Its both game developers and Sony’s job to fix this.

Overall, this game is bad ass!  Yes, some may say it is too gruesome and the treatment of women in the game is a bit over extreme.  But its a fun game to play and great experience.  The story wraps up at the end but I just get the feeling we might see Kratos again, perhaps, a prequel?

Kratos as a spartan without the power of the gods but still kicking ass on mortals.  What a concept.

I miss the days actually excited to go to my mailbox and see the famous Netflix envelopes.  I would already know what movie is arriving and that is the reason I chose Netflix over Blockbuster.

Unfortunately, these days, the movies arriving in the Netflix envelope is not exactly on my top ten list of movies.  Movies in my top ten are usually new releases in Blu-ray format.

That’s why I pay that extra $1 or $2 to get Blu-ray.  It is such disappointment now because either Netflix has a short supply of actual discs available to ship out or they are holding back on new releases.

My top 10 list (its more like top 20 movies) I would like to see that are new release and in Blu-ray have been sitting in my queue since last year with a “Long Wait” status.  Even the “Short Wait” status movies are not arriving as quickly as before.

Decision to Downgrade

So I made the decision, to not cancel Netflix but to downgrade my account from the 3 disc to the most basic single disc with unlimited streaming for $9.99 a month.

The reason?  I’m not getting the 3 movies I actually want and most of the time I am just streaming.  Netflix has been so focused on changing its business platform from DVD/Blu-ray rental to streaming content.

It’s nice but content selection is still sparse.  I do hope they will either provide better service for their disc service where the queue wait time is shorter or have a more complete selection of streaming movies and television shows.

At this point, I’m not quite ready to cancel Netflix but if once I’m done watching most shows or movies; there’s not point.  Especially if some of the shows are available at Hulu, YouTube or network television sites.

I love reading Smashing Magazine as it is extremely helpful for an aspiring graphic designer slash web developer.  When they were advertising the release of their book Smashing Book, I pre-ordered right away.  I had great hopes and they sure delivered a book chock full of ideas, concepts and smashing content.

The Good

As always from the writers, content is key.  This book touches upon most topics that are relevant for any designer focused on the web as its medium.  The topics range from taking full advantage of CSS for layouts to typography options as well as color theory.  It covers on the fundamentals of user interface design and usability concerns that may not be something we may care as much as typical graphic artists.

Besides the graphical topics it covers, the book also covers the operations and business aspects that one may neglect.  From learning pieces of good coding for optimizing SEO to optimizing performance on websites.  There is also references to utilizing the free analytical tools to track metrics and conversion rates.  Finally, it teaches you to be aware of marketing and branding.

Another highlight subject is the insight Q&A from the authors.  This definitely provided ample rations of food for thinking.  It ends with a story of the Smashing Magazine.

Its a good amount of tips and insights that you may not gain from another book.  In addition, there are the references for you to further develop and learn on the topics the books chapters touches on.

The Bad

I can’t really fault any of the content in the book.  After all, its written by some of the leading minds in this industry.  However, I would have expected the book itself to be much better constructed.

The book is smaller than what I’d like.  I mean, the content is colorful full of graphics, screen shots and examples, it just begs to be done in a proper format like a coffee  table book.

The binding of the book, as others have reviewed, is horribly constructed as you have to be extremely careful when reading or else the pages may come apart.  Add to the problem is that the page layouts are tight where padding is minimal for the amount of content crammed in.  It makes reading the content much more difficult without opening the book up.

There is definitely some errata as well in terms of spelling and reference.  Particularly of note, in the chapter on usability, they reference a website that is clearly of the Korean language but state it as Chinese.  Small error but being international; they need to recognize this.  Korean and Chinese writing is completely different.

Finally, this book took way too long to arrive.  I pre-ordered in August and hoped it would have arrived in October.  It did get to me until December, in time for Christmas.  But had I known, I could have probably picked up all the content in the book from other resources already.

Looking Forward to the Next Installment

I am fairly critical but I do look forward to the next installment from Smashing Magazine.  I hope Smashing Book Vol. 2 will be even better; from content to presentation to construction.  It’s been three months since I’ve received the book and just about the same amount of time since I’ve read through.  I guess, like their shipment problems, it just took me awhile to get to actually putting up my thoughts on book.

***I hear the book binding issue has been resolved, unfortunately, my book has not been fixed.  Perhaps they can send me a electronic .pdf version so I can actually use this wonderful book as a reference manual.***

Default WordPress allows you to display recent posts and recent comments through a widget.  However, as I develop my own theme, I want to be able to customize as much as possible without using a widget in my sidebar at all.

The problem is, displaying recent posts and recent comments is not as simple as just using a WordPress template tag found in WordPress Codex.  Instead, you will need to get creative and create a bit of custom code to grab the data from the database.

There are definitely some common code snippets used for WordPress but I found the ability to control and display recent posts and recent comments to be what I need most.

Displaying Most Recent Posts

There are several ways to display the most recent posts from just using the wp_get_archives tag to query_posts tag which involves using the WordPress loop.  There is a more customized solution that I found from Dino Latoga and its as follows:

<?php
$recentposts = get_posts('numberposts=12&category=4');
	foreach ($recentposts as $post) :
	setup_postdata($post);
?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>

Displaying Most Recent Comments

Also from Dino’s post on commonly used WordPress code snippets is being able to display recent comments.  Unlike displaying most recent posts, it doesn’t necessarily uses any WordPress tags.  Instead, you are actually querying your database to grab the necessary information you want to be displayed.

Here is the code for displaying most recent comments:

<?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,
comment_post_ID, comment_author, comment_date_gmt, comment_approved,
comment_type,comment_author_url,
SUBSTRING(comment_content,1,30) AS com_excerpt
FROM $wpdb->comments
LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
$wpdb->posts.ID)
WHERE comment_approved = '1' AND comment_type = '' AND
post_password = ''
ORDER BY comment_date_gmt DESC
LIMIT 7";
$comments = $wpdb->get_results($sql);
$output = $pre_HTML;
$output .= "\n<ul>";
foreach ($comments as $comment) {
$output .= "\n<li>".strip_tags($comment->comment_author)
.": " . "<a href=\"" . get_permalink($comment->ID) .
"#comment-" . $comment->comment_ID . "\" title=\"on " .
$comment->post_title . "\">" . strip_tags($comment->com_excerpt)
."&hellip;</a></li>";
}
$output .= "\n</ul>";
$output .= $post_HTML;
echo $output;?>

There a tons of custom codes to make your WordPress installation that much more feature and content rich, but these two code snippets have helped me create a better user experience when combined with Tabbed Menu in the sidebar.

It is always nice to add custom features to enhance the user experience.  One of these enhancements is to add the an author’s bio information to an article he or she has written.  This is particularly useful because when reading a good article the user may be inclined to learn more about the author.

A quick snippet of the author’s information can help users relate to the author as well as help the author promote himself or herself.

Using the_author_meta tag to grab information

In WordPress, each registered user can fill out information about themselves in their profile.  This is found in the Dashboard under Users -> Your Profile.  Some of the meta information fields that are available by default are the following:

• Username
• First name
• Last name
• Nickname
• Email
• Website
• AIM
• Yahoo IM
• Jabber / Google Talk
• Biographical Info

By using the_author_meta tag in your single.php, you are able to pull the information regarding the author.  Of course, you will need all the strings that you can use with the_author_meta tag.  Here is a list of all the strings to use the_author_meta tag:

• user_login
• user_pass
• user_nicename
• user_email
• user_url
• user_registered
• user_activation_key
• user_status
• display_name
• nickname
• first_name
• last_name
• description
• jabber
• aim
• yim
• user_level
• user_firstname
• user_lastname
• user_description
• rich_editing
• comment_shortcuts
• admin_color
• plugins_per_page
• plugins_last_view
• ID

Course, you can read more about the_author_meta tag at WordPress Codex.

Sample Code Snippet of Adding Author Bio to the Post

A quick simple sample is to grab the author’s display name, bio information and website.

<div id="author">
<p>Written by: <?php the_author_meta('display_name'); ?></p>
<p>Quick Bio: <?php the_author_meta('user_description'); ?></p>
<p>Website: <a href="<?php the_author_meta('user_url'); ?>"><?php the_author_meta('user_url'); ?></a>
</div>

Adding the code above into your single.php after the loop, you will be able to display the author information.  You will need to style with CSS.

Adding Gravatar to the Author Bio

To further customize the author info, you may want to add an avatar.  Because gravatar is linked to your email and recognized by all WordPress installation, the only tag you need to grab your avatar icon is the following code:

<?php echo get_avatar (get_the_author_email(), '100'); ?>

The code snippet above is just a function.  Basically, you are calling the function get_avatar and the two parameters following is for the author’s email and the second is the size of the avatar.

Other Guides on Adding Author Bio Information

• Add an author’s bio to WordPress posts – Stranger in a Strange Land
• Displaying Author Pic and Bio in Your WordPress – Gabe Diaz