Patel Strategy

Patel Strategy was founded on the belief that brands build businesses. Patel Strategy, based in Minneapolis, Minnesota, develops breakthrough web, identity, and print marketing to small and large clients across the country. Since 2003, our mission has been to channel the power of strategic web and print design to businesses and nonprofit organizations. We believe that no one should be barred from success because the power of technology is beyond reach. Let the experts help you correctly promote your organization as it heads into the next generation. Patel Strategy has steadily grown as the authority in graphic marketing with a breadth of communication and design capabilities.

Visit Patel Strategy or learn more about our new brand launch.

Visual Design Includes Text

The actual text in any marketing material is perhaps the most important part of any design. Why? You audience is perusing your site, brochure, or poster not to see pretty graphics or images. Instead they are looking for the actual meat: the content.

Consider a hypothetical poster for an upcoming concert. No doubt the graphic design is important to at least draw the attention of an unsuspecting passerby. But it is the content (i.e. actual words), not the fancy Photoshop design that is most important. When is the event? And where? This information can best be showed through text, not graphics.

A Better Design Mentality

So what’s wrong with our graphic designing? Nothing really, except that we forget to include the actual content is part of the design and not merely some afterthought. Often times designers work long hours to perfect each pixel of the design, but then pay little attention to the actual text, thereby doing injustice to their graphic design work.

Unfortunately the text can speak volumes about the purpose of the marketing material. In fact poor copywrite can erode good graphic design. The final user experience exceeds visual designs. Instead designers should move beyond just shaping pixels and start embracing the content as a foundation of the design.

How often have you designed a marketing collateral for a client that said the text will be provided later or will be added by them? By not incorporating the text in the design right from the beginning of the design process you will undermine the entire work.

This text comes from both the company eliciting the work - from PR departments to executive leaders. But this text also comes from us, the marketing experts. With practical experience in what is necessary to reach a target audience and a breadth of past clients, designers should have honed their content writing skills.

Where does the Content Go?

Better content writing can be easy to encourage but hard to implement in certain designs. But a good graphic designer should be able to integrate properly written text into any design.

For example, a website that is trying to convey a friendly persona should abandon traditional web jargon like “Submit” buttons or traditional headers like “About Us.” A better approach would be to use more conversational language that mimics this friendly persona. You would never tell your friend, in a friendly setting, to “submit” something? So why do it on your designs?

For the above context, a better solution may be to replace the “About Us” header with “Here’s Our Story.” Notice the apostrophe. When speaking to a friend would you say “here is our story” or more likely “here’s our story?”

The “In your Shoes” Approach to Content Writing

You may have noticed from this example how to implement the perfect tone in your text. Our simple “In your Shoes” Approach to copywriting can help you integrate the right text, including verbiage and tone, in your next marketing design. Our content writing approach follows three simple steps:

1. Find the Shoes
2. Put on the Shoes
3. Start Running

Step 1: Find the Shoes

To start, you must first find your target audience for your marketing collateral. Are you selling cabinets to senior citizens or promoting a club event to young adults? With such varied audiences you must first know exactly who you are trying to reach. You cannot expect to promote your cabinets or event without knowing who to promote it to.

Step 2: Put on the Shoes

After ascertaining your target audience you must find out what they think. You must get into their mindset and think what a typical customer or member would want. This is where you put yourself in your target audience’s shoes and think like they would think. Perhaps you are a young business owner selling cabinets to seniors. It is time for you to think like a senior, not in your traditional mindset as a young business owner.

This step may often require thoughtful thinking or brainstorming to effectively find out what a typical audience member may be like. Step 2 is also important because it helps direct your actual content writing.

Step 3: Start Running!

Finally you can start writing while thinking like your audience would. Remember to continuously pause and reflect how this content would be perceived from the perspective of your target audience.

If you are a graphic designer, or a business owner, it may be time to rethink your design strategy and start integrating content with your pixels. Effective communication is more than just catchy images. Effective communication requires thoughtful use of language and should be reflected in every marketing material you design.

At the site’s home page, facebook.com, what do you see? A login form on the left and simple registration information on the right:

Why do we like this layout? Facebook balances both existing members while also encouraging new signups. Notice that the majority of the page focuses on describing Facebook to new visitors and the simple signup form in the bottom right. But what about existing Facebook users? The login form in the left sidebar takes care of existing members.

Now compare Facebook’s balance with that of LinkedIn, a social network for business professionals:

The homepage, LinkedIn.com, does not include the login form for existing members. Rather, existing members must click through to a separate login page. If you are like us and check your LinkedIn profile daily, this extra click can get very annoying. As a Facebook poweruser, we love the ability to sign in right from Facebook.com without having to click an unnecessary “Login” link first.

Another company that we love is Netflix for delivered movie rentals. But again the homepage, Netflix.com, faces a similar design problem like LinkedIn as existing members must click “Member Sign In” to login:

What’s Going On?

The reasoning behind these companies’ decision to have the sign in form on a separate page while having the new registration form on the homepage is simple: these companies are looking to increase the number of users. Facebook, on the other hand, successfully blends both existing and new members while the other sites featured here are designing their sites mainly for new clients.

Login Form Best Practices

As shown by Facebook, combining both the sign in and registration forms, plus information on the company or site offerings, is easy. Facebook succinctly presents its purpose and allows for quick sign ins or registrations with minimal clicking.

In the future we hope new web applications and even existing ones can make this simple design change and include a sign in form for existing members right on the homepage.

Example 1: Design Tab

When you click the Design tab, you are brought to the page to select a theme. This begs the question: How often do you actually change the theme of your blog? Rarely in most cases. But you probably change the actual PHP and CSS of your existing theme more often with minor tweaks periodically.

Instead of having the Design tab point to the Themes page, you can link it to the Theme Editor to instantly start editing your default theme:

1. Download the menu.php template file from the “wp-admin” folder of your blog
2. In line 25, edit the default link of themes.php to read “theme-editor.php”
3. Save and upload menu.php back to the “wp-admin” folder

That’s all. Now when you click the Design tab you are brought to the Theme Editor. We think that in the future WordPress should use the Theme Editor as the default link for the Design tab.

Example 2: Write

Suppose you write more Pages than Posts. Simply change line 14 in menu.php from “post-new.php” to “page-new.php” and upload.

These are simple WordPress admin hacks that, in the long run, will save you a few clicks.

The calligraphy style creation of serif fonts results in the “foots” on the letters and the sharp angles. All serif fonts have common unique styling in terms of angles, stroke, stress.

Serif Fonts

There are several common serif fonts that can be used in print design and are safe for use on the web. Perhaps the most common serif font is Times. Other widely-used serif fonts include Garamond, Goudy, Palatino, and Baskerville.

Angles and Footers Oh My!

The most recognizable feature of serif fonts are the sharp angled strokes at the ends of the letters, especially the top and bottom. Officially called a serif, these angles are most pronounced at the base of most letters, creating a foot for th letter to stand on.

Depending on the exact serif font used, the angle and size of the serif may differ. More exactly, the precise ending of the serif (for example, a blunt end or a tampered end) will also vary slightly on each serif font.

Stroke Weight

From thick to thin, the stroke of each letter varies. In fact, some parts of a particular letter is thicker or thinner than other parts of the letter. The letter “O” provides a perfect example, regardless of serif font used:

All curved serif letters have this thick/thin stroke weight, technically called a “thick/thin transition.”

Stress

Finally, some serif fonts such as Goudy have angled stress rather than the standard vertical stress. The stress is the line that would connect to thin (or two thick) strokes. In the example above, using the Garamond font, the stress is vertical. But the Goudy font in particular has an angled stress:

Using Serif Fonts

Serif fonts look best when combined (in other words, contrasted) with sans-serif fonts. Sans-serif fonts do not include the angled serif on the ends of the letters.

Serif fonts are most commonly used in formal settings. But since most websites use sans-serif fonts for their body text (like this site), a sprinkling of serif fonts can make a refreshing difference. Serif fonts can and should be used in design to contrast text from the standard sans-serif font. The calligraphy styling will automatically create a warmer, more formal look and instantly draw the attention of the reader.

General Warnings

In almost any setting, sans-serif fonts such as Arial look best for body text since they are easy to read regardless of size or color. However, serif fonts such as Times are best for paragraph headings are larger text. Serif fonts look best when they are large to highlight the angles and stress.

However, in general, serif fonts are more suited for personal or informational purposes. Although serif fonts are elegant and formal, they tend to not look to well when used for more business purposes. For example, businesses usually used standard, straight fonts like Arial as opposed to serif fonts.

This does not mean that serif fonts have no place in business designing. Serif fonts can be used tastefully for the right purpose; for example, a flyer for a formal event should use serif fonts heavily.

Purpose

Graphs are very useful, especially on the web. Considering that the average website visitors spends only a few seconds or a minute on a page, you need to display information that can be viewed quickly. Graphs display information better than a table of data.

Now, that does not mean data tables are useless. In fact, they are also important for people doing research. As a best practice approach, you should make data tables available, but also include an appealing graph. So let’s get started.

The CSS

We will first start with some simple CSS:

    #graphbox {
border: 1px solid #e7e7e7;
padding: 20px 20px;
width: 250px;
margin-right:10px;
float:left;
background: #f8f8f8;
}
#graphbox h2{
color: #666666;
font-family:Arial, sans-serif;
font-size:1.1em;
padding-bottom: 0.3em;
font-weight:bold;
text-align:center;
}
#graphbox p {
color: #888888;
font-family:Arial, sans-serif;
font-size:0.8em;
padding-top: 0.3em;
text-align:left;
}
.graph {
position: relative;
background: #F0EFEF url(images/graphpaper.gif) left;
border: 1px solid #cccccc;
padding: 2px 2px;
}
.graph .orangebar, .greenbar, .bluebar {
text-align: left;
color: #ffffff;
height: 1.8em;
line-height: 1.8em;
font-family:Arial, sans-serif;
display: block;
position: relative;
}
.graph .orangebar {
background: #ff6600;
}
.graph .greenbar {
background: #66CC33;
}
.graph .bluebar {
background: #3399CC;
}
.graph .bar span {
position: absolute; left: 1em;
}

There are a few key points about the styling. First, the width of the entire graph is set by the graphbox div; in this case 250px. This outer box has 20px paddings on all sides, so the actual graph (the colors) are only 210px wide (250px - 20px from left - 20px from right). Adjusting this graphbox width will adjust the width of the colored graphs. Also, the graphbox div in this case uses a light gray background to help the graph standout from the white page. The graphbox div has left floating so that the main page text can wrap around the graph like an image. We used left float because the left side of your main page text is straight as opposed to a jagged edge on the right site (unless you have justified text alignment).

For the graph title, Heading 2 styling is used. The footnote at the bottom of the graph is simply the paragraph styling. This is a great place to put your source.

Our graph here has three colors, orange, green, and blue. Each bar graph has some common styling as shown:

.graph .orangebar, .greenbar, .bluebar {
text-align: left;
color: #ffffff;
height: 1.8em;
line-height: 1.8em;
font-family:Arial, sans-serif;
display: block;
position: relative;
}

The only styling that is unique is the background color for each, which encompasses the next part of the CSS. Finally, the span styling is what actually is used to display the width of each colored bars in percentage terms.

You will also need the graph paper background and upload it so that the path matches the CSS. The graphpaper.gif image:

The HTML

Take a look at the following HTML, which creates the graph directly below.

<div id="graphbox">
<h2>Student Grades</h2>
<div class="graph"><strong class="orangebar" style="width: 55%;">Steve: 55%</strong></div>
<div class="graph"><strong class="greenbar" style="width: 90%;">Linda: 90%</strong></div>
<div class="graph"><strong class="bluebar" style="width: 75%;">Bill: 75%</strong></div>
<div class="graph"><strong class="orangebar" style="width: 32%;">Jill: 32%</strong></div>
<div class="graph"><strong class="greenbar" style="width: 98%;">Jose: 98%</strong></div>
<div class="graph"><strong class="greenbar" style="width: 85%;">George: 85%</strong></div>
Green: Exceptional. Blue: Marginal. Orange: Needs Improvement.</div>

And the outputted graph:

You can easily modify the colors by simply changing the background colors in the CSS and the class names in the HTML. Also notice that the graph floats to the left. Depending on the amount of data to display, you may want to have the graph width equal 100% the width of your main content div. But in this case we wanted a simple graph that can stand next to body text.

While this graph is not dynamic (this would require PHP scripts and database calls, or XML data), it is perfect for static data and is much better than using a table to display data.

It is no doubt that the WordPress developers have taken into consideration these alternative uses of WordPress as each release is even easier to adapt to unique needs. Here are some unique uses of WordPress, many of which may be practical for you or at least help you admire the power of WordPress.

Blogging

Of course, WordPress was originally designed for as a blogging platform. No more needs to be said.

Tumblelog

While Chryp and Tumblr are the original and leading tumblelogs, WordPress can also be used to express your ideas, status, and share information informally thanks in part to several themes and plugins like Radical Behavior’s QuickPost. QuickPost allows you to bookmark your WordPress and rapidly at new posts.

Twitter Site

You can also use WordPress in place of Twitter, with less limitations and ultimate customization. The Prologue theme adapts WordPress to a Twitter-like site.

Content Management System

WordPress is becoming more and more common as a Content Management System (CMS). With its built in features of static pages, plus many CMS-type plugins and features like ecommerce and calendars make WordPress a simple CMS. While it is perhaps not the best option for more complex sites, WordPress works in most cases. Nevertheless, virtually any custom feature can be created to work within WordPress as it is open-source and well documented.

Photoblog

WordPress as a photoblog makes sense since it is essentially the same ideas as a regular blog platform. A photoblog is where the photos, not text, take the main attention. Photoblogs are useful for hobbyists and photographers.

By using custom fields and WordPress’s built in upload feature, you can easily setup a photoblog. To get started, there are many photoblog themes available including Monotone and Nishita. For more on photoblogs, visit WordPress Photoblog, an entire site dedicated to photoblogs.

Ecommerce

WordPress as an ecommerce solution is more limited, but nevertheless important. Though limited, WordPress as an ecommerce is much less bloated than other solutions. The best resource to setting up WordPress as an ecommerce gateway is Instinct’s free WordPress ecommerce plugin. This plugin adds all the necessary parts of an ecommerce site including images, shopping carts, and payment gateways.

However, it will still be some time before WordPress overtakes the leaders in ecommerce such as osCommerce.

News/Magazine

Probably one of our most favorite uses of WordPress is as a news or magazine site with hundreds or thousands of articles and images. All the content must be displayed cleverly. Fortunately, several free and premium themes are available, including Darren Hoyt’s Mimbo, Brian Gardner’s Revolution, or our very own, soon-to-be-released NewsPress theme.

Contacts Manager

Another creative way of using WordPress is to manage your contacts. The best option as a contact manager is Design Intelliction’s WP-Contact Manager, which makes use of custom fields and password protects the entire blog so only registered users can view the contacts.

But consider that by using some password protection and custom fields, Design Intelliction was able to create a contacts manager. Using similar thinking, WordPress could also be used to manage inventory or basically anything else that needs managing.

Job Board

Though not free, you can tailor WordPress to suit as a job board via the JobPress template. JobPress makes use of the fact that by default WordPress displays the most recent posts, or in this case jobs. But JobPress also allows regular users to post a job after paying via PayPal, just like a real job board. However, you can also use JobberBase, a completely different open-source solution that is just as user friendly.

Classifieds

From the JobPress team, you can also use WordPress as a classifieds site with ClassiPress, another premium theme. Again, this theme makes use of WordPress’s most basic functions with some added twists.

Review Site

Finally, WordPress can even be used as a review site, with product/service descriptions and subsequent user comments and rankings. The WP Review Site theme and plugin set customizes WordPress to serve as a powerful review site.

The possibilities with WordPress are endless. We expect to highlight even more uses of WordPress as  creative developers continue to tweak the basic codes for their needs.

As its name suggests, ResumePress is a theme specifically designed for personal virtual resumes. With the advent of technology and the affordability of hosting, more and more business professionals are registering their own domain name, such as www.johndoe.com, and using it to market themselves across the country and world.

The Design

Internally, ResumePress makes heavy use of Custom Fields, making it easy to update. The only setup that is needed is to create Categories for:

• Objective
• Education
• Experiences
• Skills
• Interests
• References

Then, each category must be matched to its ID in the index.php file. The index.php file displays a certain number of posts from each category under its heading, such as Skills or Education.

To add content, just create new posts and categorize them accordingly. We have limited the number of posts that are displayed in each category because only the most recent items should be displayed. As you add new experiences, for example, older ones get removed from the homepage to save space (just like a real resume).

The sidebar.php will also require some manual updating (i.e. contact information).

On the outside, ResumePress uses a conservative, professional look with browns and grays. The theme focuses more the text and contents and less on the design, just like a real resume.

Free WordPress Theme

ResumePress is free! And since we used the open-source WordPress, everything is free except for your hosting. We will be offering further, personalized customization on a per-hour basis. We can also install both WordPress and the ResumePress template. Please contact Impress Lab for more details.

Demo

You can view a demo of ResumePress v. 1.0 at:

http://impresslab.com/themes/resumepress/

Download ResumePress

Please note that we are still working on the finishing touches. However, you can download the beta version. In the next release we will be including further documentation on customization and usage. Download the beta version below:

ResumePress

Assuming you already have a domain name, such as www.smithplumbing.com, you can create your own email branded for your company. How often have you seen a small, local business that uses a free email account at AOL or Yahoo!? Instead, you can use email at your domain name for free with the same features you are used to.

Google Apps

Nearly every hosting company includes a certain number of email addresses with your domain name purchase. But do not use the hosting-provided email services as they often limit the amount of inbox space, the number of email addresses, and use confusing and bloated webmail interfaces.

The best option would be to use the free Google Apps solution. The best part is that it uses the same interface used by Gmail users in which your emails are grouped as a conversation (your replies are all attached together).

Google Apps has two editions, Standard and Premier. For most purposes you can use the free Standard version. You can always upgrade later should you need additional space or features. Google Apps Standard version includes several useful features unmatched by your hosting provider:

• Custom-branded Gmail with about 8GB of storage per account
• Unlimited email addresses (joe@domainname.com, jane@domainname.com, etc.)
• IMAP to use an external email client such as Microsoft Outlook (what we use)

Setting up your domain name to work with Google Apps is easy as following some simple online prompts.

Benefits of using Google Apps

Once you have setup up Gmail and Google Apps for your domain name, you can start using their simple and powerful features. While you may or may not need all their free features, the Gmail function is perhaps most important.

Now you will have a custom email address, without having to use a free email provider. Each time you email a customer you essentially are building your brand as your company name is in each email.

You can start building brand recognition; every time a customer receives an email from you they are reminded of your company, not some other company like AOL.

Obama has used his marketing strength to clinch the Democratic nomination, secure over $40 million in donations, and is now campaigning against Republican John McCain.

Logo Branding

The Obama campaign’s signature marketing strategy rests in its conceptual circle “O” logo. Of course, the logo incorporates the O in Obama (twice), with rays of hope in a vast red field.

Conveying the Message

But a logo has to be more than just an image. It has to be leveraged such that it becomes synonymous with the organization’s, or campaign’s, overall strategy and mission. Considering that the Obama camp’s mission is for change in policy and realigning our hopes with our future, the logo perfectly conveys this message.

The field symbolizes future as it fades into the sunrise; we assume the sun is rising because a sunrise personifies hope and future prosperity, cornerstones of the Obama mission. By using the logo in nearly all his campaing material in print literature, online, and in television advertisements, Obama has made his logo the most recognizable image of his campaign such that it can now even stand alone. A well defined logo should be able to stand with out text or contextual clues and be instantly recognizable by at least the target audience. With strong recognition, the campaign logo is now used in everything Obama:

Campaign Slogan

In tandem with his cleaver logo, the Obama campaign has heavily used his “Change you can Believe In” slogan dominantly. In fact, the campaign has taken a unique Slogan Marketin Strategy approach. In many cases, Obama uses his slogan in place of where his name is traditionally used.

For example, on his speech podiums notice that the sign reads “Change you can Believe In,” not “Barack Obama 2008.” This contrasts with John McCain’s traditional strategy of using his name. Hillary Clinton also used her name during the primaries.This same marketing strategy exists on his personal plane. Where’s McCain’s plane brands his name (his logo) on the tail wing, Obama only uses the “O” logo on the tail and the words “Change we can Believe In” inscribed on the sides. Nowhere does it say “Barack Obama.”

Pros and Cons of Slogan Marketing Strategy

By using the Slogan Marketing Strategy, Obama can showcase his driving mission rather than his name. As in any political campaign, the candidate’s mission is the most important message when it is time to vote. Obama followers and even opponents remember his mission the most.

However, Obama’s strategy has already come under criticism because it relies too much on his slogan. Some marketing experts state that the Barack Obama name is becoming lost in his Slogan Marketing Strategy approach. When November 4th comes, some may not remember his name (remember, there are no slogans or logos on the official ballots).

Print Literature

The political campaign’s marketing powers carry over into its print material. As mentioned, the logo is well defined in all his collateral material. Consider the campaign’s branding on his Blueprint for Change document outlining his values and goals for America:

The campaign’s official sky blue and dark blue colors are also used heavily in print literature to create a cohesive marketing strategy.

Online Marketing

Perhaps the true beauty of the campaign’s marketing strategy is their leverage of the most popular social networks and tools to reach the farthest corners of the country. From online videos on the Barack Obama website and even YouTube, to a Facebook profile, to Digg, the campaign exists in nearly every important online medium.

Young Voters

Consider, for example, the campaign’s use of Facebook. Facebook is a social network used mostly by teenagers and young adults, considered the driving force in the Democratic strategy. By advertising on Facebook and creating a Facebook profile with important updates, Obama can connect to young voters directly. In fact, the political campaign first announced the decision to make Senator Joe Biden Obama’s running mate via SMS text messages and his Facebook profile. Obama is also using YouTube, another popular site for younger adults, to market his videos for free.

The Obama Website

The official campaign website further showcases marketing cohesiveness and creativeness. With the “O” logo displayed throughout the website from the favicon in the browser address bar to even the site icons, the campaign cares its offline marketing strategy online.

Notice the interactivity of the website. The Obama campaign has raised millions of dollars online by requesting donations. Furthermore, all campaign videos and print literature are available on the site as well. Finally, the Obama ecommerce Store features a wide variety of products all with the same signature branding.

Website Graphics

Perhaps the best exhibit of the marketing creativeness are the graphics used mostly online. With elegantly designed website banners that almost always use the logo in imaginative ways, the banners further convey Obama’s missions while drawing the attention of site visitors. For example, a recent banner on the site about his energy policy used the logo as the tree:

While the true effectiveness of the Obama marketing strategy has yet to be determined, one must still admire the cohesive branding strategy used by the campaign. The Obama campaign, at the very least, is a working model of perfectly cooreographed marketing strategy that transends traditional mediums as it rewrites campaign history.

You may have heard of the term “Web 2.0.” This refers to these social sites where there are now interactive environments. By leveraging these social sites, you can advertise to niche markets often for free. Make use of these websites and create an online presence for your business or organization. Not only will you see more website traffic to your site from these online social hangouts, but you will also build quality back-links to your company website and therefore increase your search results rankings.

Social Bookmarking

Social bookmark sites allow you to save links on your website in your profile. Other users of the bookmarking site can then view your bookmarks, and often, if they like the content, they can vote the link “up” in popularity.

1. Digg: Perhaps the leader in social bookmarking, Digg highlights the net’s most popular websites via user popularity votes. With categories like business, design, and entertainment, you can easliy find a niche to bookmark pages or articles on your site for others.
2. StumbleUpon: As its name suggests, you can share your bookmarks (with a browser toolbar if you prefer) and other users may, ideally, “stumble” onto your bookmarks.
3. Reddit: Recently read something online? Bookmark articles and resources to drive more traffic your site. The most links you have on Reddit, the larger your fan base and presence.
4. Technorati: The authority in blogging, every blog should be certified by Technorati. By verifying the ownership of your company’s blog, you can get valuable statistics and increase the authority of your blog.
5. Del.icio.us: Bookmark your site and articles on Del.icio.us with tags and start sharing the links to other social users.
6. Ning: You can even create your own social bookmarking network on Ning and start sharing and discussing with people you chose, such as colleagues and business partners.
7. YouTube: A unique way to grab attention to your business is via video sharing sites such as YouTube. Create an advertisment for your business and upload it to YouTube to give customers a visual idea of your business services or products.
8. Vimeo: Upload commercials and product display videos in high quality to Vimeo for free.

Professional Networking

Business is all about networking. Stay in contact, and build networks, with easy to use networking sites.

1. LinkedIn: Stay in contact with classmates, partners, and other business professionals in the “Facebook for business.”
2. Facebook: The most popular social network today, Facebook started just for college students but now allows anyone to create profiles, pages (for your business or product) and groups. You can even advertise on the site and reach a young audience.
3. Ecademy: Ecademy helps connect business people through its online network, blog and message boards.
4. Xing: Manage your business contacts and network with over 6 million business professionals worldwide.
5. Care2: Care2 is the largest network for leaders who are making a difference in the world with noble causes. Showcase your organization’s community efforts online.
6. Gather: Network with those around you and share ideas, photos, and information with a simple interface unlike many other social networks.
7. Plaxo: Update your contact information online and sync with your PDA or mail client effortlessly.
8. NetParty: Connect with younger business professionals at social events in the nation’s largest cities. The site takes a unique approach to builidng contacts through social dinning and club events.

Niche Social Sites

Target your efforts to niche markets for more direct marketing. You’ll find people just like you who may become your clients or partners.

1. Mixx: With user-created groups and categories, you can bookmark your articles and resources to specific targets and reach the most interested readers.
2. HubSpot: Share news with marketing business professionals.
3. Small Business Brief: Share information with up-and-coming business professionals and entrepreneurs while driving these intelligent contacts to your site.
4. Jumpup Intuit: Share advise and tips with small business owners and entrepreneurs in a lively community.

Information Portals

Showcase your knowledge on information portals and build quality back-links and website traffic while highlighting your business’ expertise on specific topics.

1. Wikipedia: Create your own business information page to highlight your history and operations. Also provide more content on existing pages and show off your expertise.
2. WikiHow: Create a tutorial or how-to guide and display your business talents and expertise.
3. Yahoo! Answers: Answer questions from Yahoo! users and provide links to your site for more information, gaining quality back-links with minimal effort.
4. 43 Things: Share and discuss your organization’s goals and generate interest in your business.
5. Wetpaint: Organize photos and information with your own wiki, or edible page.

Using Custom Fields, you can designate these ‘fields’ (i.e. ISBN_Number, Author_Name, and Publishing_City) in your Write Post screen under Custom Fields.

To better illustrate, consider the book blog that needs fields for the aforementioned information.

1. Create Custom Field Keys

To start, open a new Write Post page in your WordPress backend. Scroll down to Custom Fields in the left column.

A Custom Field includes two parts: the Key and its corresponding Value. The Key is basically the part that is consistent among all blog posts, whereas the Value is unique. For our example the Keys would be:

ISBN_Number

Author_Name

Publishing_City

To create our first Custom Field, enter “ISBN_Number” in the Key field. In the Value field, enter “123-456-292x” (make believe ISBN number). Click “Add Custom Field when done.

You can do this for all Author_Name and Publishing City as well. For this example, we use:

ISBN_Number: 123-456-292x

Author_Name: John Richards

Publishing_City: New York City, NY

You can add these Custom Fields to all your blog posts.

2. Add Custom Fields in WordPress Template

Now that your blog posts have Custom Fields assigned, you need to place PHP code in your WordPress templates to actually display the Custom Fields. Must often, you will need to edit your “single.php” template as this displays the actual blog posts where we will place the Custom Fields.

The Custom Fields should be placed within your WordPress post Loop. In your single.php template, find The Loop. You will most likely see the following code somewhere that actually displays the blog post content:

<?php the_content(‘<p>Read the rest of this entry.;</p>’); ?>

Each Custom Field can be displayed with the following code, replacing “custom_key” with the Key (i.e. ISBN_Number, Author_Name, and Publishing_City).

<?php $custom_key = get_post_meta($post->ID, ‘custom_key’, true); ?>

<p><b>Key Name:</b> <?php echo $custom_key; ?></p>

To illustrate, consider the code for ISBN_Number:

<?php $ISBN_Number = get_post_meta($post->ID, ‘ISBN_Number’, true); ?>

<p><b>ISBN Number:</b> <?php echo $ISBN_Number; ?></p>

This will display the ISBN Number when the blog post is viewed:

ISBN Number: 123-456-292x (or whatever Value you specified for that exact blog post)

Suppose you want to display the three Custom Fields immediately before the post content:

<h2><?php the_title() ?></h2> /* Blog Post Title */

<?php $ISBN_Number = get_post_meta($post->ID, ‘ISBN_Number’, true); ?>
<p><b>ISBN Number:</b> <?php echo $ISBN_Number; ?></p>

<?php $Author_Name = get_post_meta($post->ID, ‘Author_Name’, true); ?>
<p><b>Author Name:</b> <?php echo $Author_Name; ?></p>

<?php $Publishing_City = get_post_meta($post->ID, ‘Publishing_City’, true); ?>
<p><b>Publishing City:</b> <?php echo $Publishing_City; ?></p>

<?php the_content(‘<p>Read the rest of this entry &raquo;</p>’); ?> /* Blog Post Content */

To learn more about Custom Fields, visit the WordPress documentation on Custom Fields, or post comments for additional help.

Purpose of Alert Boxes

Considering that the average website visitor only spends perhaps a minute on each page, alert boxes can quickly grab the reader’s attention to the most important information. In addition, alert boxes help break the flow of several paragraphs of text with a splash of color and cute icons in our examples below.

Creating CSS Alert Boxes

Creating alert boxes are perhaps one of the easiest CSS tricks:

1. CSS Code

You can create seperate paragraph classes in your stylesheet. For example, to create a red message box (perhaps for warnings), use the following code:

Notice that the alert box includes a background image (”images/red.gif”). This will create the icon on the left side. For most cases, we suggest you use FAMFAMFAM’s free Silk Icon set. The icon should be only 16px by 16px as not to distract from the actual text.

You can also create alert boxes with border widths of 2px. Depending on the size of the text, you can go even larger. For general body text such as this, a 1px border is usually best.

2. HTML Code

To display an alert in your web page, use the following code:

This code will create this alert box when viewed:

Of course, replace the red class with the class used in your CSS file. You can also create other combinations with different icons and background/border color schemes. See the next section for other types of common alert boxes.

Types of Alert Boxes

There are several types of alert boxes you may want to create and use throughout your site. In each case, notice that: 1.) the background should be a light, pastel color, 2.) the border color should be darker than the background color, and 3.) the font color must be readable on the background color. The most obvious are red warning boxes, which may use the following color scheme:

Background color: #FB7070  (light red)
Border color: #D43C3C (dark red)
Font color: #FFFFFF (white)

You can also use yellow boxes for general tips or highlights:

Background color: #FFFFCC (light yellow)
Border color: #DDDB54 (dark yellow)
Font color: #000000 (black)

You can also use green boxes for troubleshooting messages:

Background color: #9BCF7B (light green)
Border color: #669933 (dark green)
Font color: #000000 (black)

Actual Examples

Alert Box Suggestions

Alert boxes work best on tutorial pages or for instructions as they provide quick information with attention to the most important details.

With anything in design, use alert boxes in moderation. If you see your entire page colored in red or yellow, you may be using this handy CSS technique a bit too much.

Finally, we recommend that you use colors for the CSS classes (i.e. red, yellow, and green) because it will be much easier to remember them when using the classes in your web pages. For example, consider that you used “.warning” as your CSS class for the red alert boxes. You would have to remember that you used this class name when creating the code in your pages. The color name may be easier to remember. However, you can use classes like “.warning” if you have several red-colored boxes, but with different icons.

The reason for this is from a readability standpoint. If you use the standard underline, the line will be cutting through the descenders of your type in letters like g, y, and p. This is bad practice since you are making it harder to read these letters, especially for serif fonts that are already a bit hard to read. Consider the standard hyperlink style with an underline:

The Solution

We instead recommend that you use the border-bottom style for your hyperlinks:

This style will look like this:

The bottom border does not cut through the descenders of the type.

You can also specify other links for active and visited. Notice that using the border-bottom style for links opens many more color possibilities in addition to the enhanced readability. You can use red or black or green underlines, whatever color fits your site best.

The difference may be subtle, but is more pronounced when the difference between both styles is viewed:

Simple tricks such as this are what help separate good design from great design with a focus on readability. You do not have to use this technique for all hyperlinks, just your main body text which is usually smaller font and harder to read. For example, headers are already easy to read, so using the bottom border technique on hyperlinks will add little value.

October 15, 2008 is Blog Action Day 08

Impress Lab is proud to support Blog Action Day 08, a day to bring awareness to the hardships and scope of poverty. Each year, Blog Action Day strives to make a meaningful difference by encouraging conversation on the Internet about the world’s most pressing issues.

What You can Do

To help, consider joining Blog Action Day at the following URL: http://blogactionday.org/

• Two million new blogs created this year on WordPress.com
• Total page views on the blogs on WordPress.com grew about 6 times from last year, up to about 6.5 million
• About 3 million privately installed versions of WordPress
• 120-160 million global unique visitors monthly

As a proud WordPress developer, Impress Lab applauds Matt and the WordPress team at Automattic. We expect these statistics to continue to climb as more and more developers find out about WordPress’ powers. Driven by thousands of plugins and themes, the popularity of WordPress should only increase.

For this tutorial consider that we want to display only certain information in the sidebar of the theme; we will be editing only the sidebar.php WordPress template file.

Tutorial 1: Display Child Pages only on Pages

A very practical use of conditional formatting is to display child pages in the sidebar. For example, if we want the sidebar to have a section for “More Information,” with links to all child pages, we can use the standard WordPress code to display child pages:

This code will display the More Information header with child pages as a list underneath. Even if there are no child pages below the current page, the More Information header will still be displayed. While you can use the “title_li=” part of the wp_list_pages tag to display the header, you may not be able to style it as if it where a separate heading item.

Either way, let’s suppose we want to display the above information only on pages, not categories or blog posts. This is where conditional formatting comes in. By using an “if” statement, we can display the child pages code above only when we are on a page template (page.php). WordPress will automatically check that it is currently showing a page to the user and display the code in the “if” statement in the sidebar; if the user is not on a page, the code will not display. Conditional formatting requires a very simple “if” statement:

When displayed, “More Information” and the child pages link list will only be displayed when the user is on a page (and using the page.php WordPress template).

Tutorial 2: Displaying Recent Posts only on Blog Posts

Similar to the previous tutorial, you can use conditional formatting to display certain code on the blog posts (i.e. all blog posts that use the single.php WordPress template).

The standard PHP code to display, say, the 5 most recent blog posts ordered by date (default) is:

Now, lets only display the above code when the user is on a blog post (using the single.php template):

The 5 most recent blog posts will now only be displayed in the sidebar as a list when the user is on a current blog post (single.php).

Other Location Tags

In addition to using conditional formatting to display information only on pages (using if ( is_page() ) ), on blog posts (using if ( is_single() ) ), you can also use the following location tags:

• is_category()
• is_search()
• is_home()
• is_page()
• is_single()

Multiple Location Tags

If you want to display certain information on more than one location tag, you can do so with a minor adjustment. For this example, lets assume we want to display the 5 most recent blog posts on both the sidebars for blog posts template (single.php) and on the search results (search.php). In the sidebar, we would use this code:

Notice that we use one “if” statement: the above code tells WordPress that if the users is using single.php or search.php, display the enclosed code.

Sample Sidebar

To further showcase the dynamics of using conditional formatting, and its simplicity, below is a hypothetical sidebar that uses conditional formatting heavily:

Text Size

With the advent of larger monitors and screens (i.e. higher resolution), text and images seem smaller in order to display more content. This has resulted in difficulty in reading some older websites that may not have changed to compensate for the the higher resolution screens.

Small text size can also result from poor typography strategies in general. The average website visitors spends a mire minutes on each page if you are lucky - too much text squished together can be disastrous.

We would recommend that the body text, such as this, is set to at least 12px, using either Arial or Verdana font. Larger text size is much easier to read even if the reader has to scroll more.

Spacing

Online readability can also be enhanced with larger spacings between lines. This body text has more space between lines than the font would normally have using the line-height CSS code:

In addition to line spacing, let your text breath with white space on the sides of the text. Do not place images and other graphical elements directly up to the text if possible. The white space allows the reader to focus more on the text and not overlook it due to neighboring graphics. Take a look at the difference a bit of line spacing makes in readability:

Hierarchy Headings

Break a page of text with headings such as this page. You should have several headings in your stylesheet. A general rule is to reserve your first level heading, H1, for either your website name or, if you have a text logo, for the title of the page. Use H2, H3, and if necessary H4 for subheadings in the body content.

Hierarchy is simple. Larger text calls for more attention than smaller text. This allows the reader to quickly jump to the specific section of interest.

Depending on your site design, you may want to reserve an uppercase, bold heading for your largest heading(s) and use lowercase, normal weight headings for the smaller ones. Either way, remember to break up every few paragraphs with headings. You may also want to vary the fonts used. Generally, only use at most three different fonts. All fonts should be standard fonts, unless a very unique design is needed.

Contrast

We’ve all done it before. We visit a site that uses yellow text on black background. Rather than reading and getting lost in a swarm of bubble bees, we simple close the page as the atrocious typographic color scheme is not worth the strain.

When it comes to text, it is best to keep the colors conservative. Our experience has taught us to just stay with dark on white text, and perhaps for callouts or other styling, white on dark. When we mean white, we mean #FFFFFF; when we mean dark, we do not mean black (#000000) but a dark gray (#333333). The black-on-white or white-on-black may be too much of a contrast for the web; it is more suited for print.

Remember, these are not rules, but guidelines. Each website and need may be slightly different. But traditionally these tips have worked for most of our client projects.

Why WordPress?

WordPress, the world’s leading open source blogging and Content Management System tool, is ideally suited to handle news sites. With blogs for your authors, pages, and media galleries, WordPress is perfect for news and magazine websites.

NewsPress Theme Features

NewsPress, Impress Lab’s revolutionary news theme, can effortlessly handle news websites. With integrated custom fields, media, and clear navigation structures, bundled in a 3-column white layout, NewsPress is an easy solution to showcase breaking news and opinions.

Please stay tuned to the first release of NewsPress.

Please excuse us as we continue to develop this site. Feel free to share your ideas and thoughts.

Blog

Our newest feature is our agency’s blog on the design industry and the Internet. Through our Lab blog, we hope to give you the inside out look into our agency; our ideas, strategies, inspiration, and work. Our blog is open to you as well. Use our ideas, share with us our inspirations, and ask questions.

Scientific Process

We are going to follow a methodical approach to measuring the spam deterrence of each email provider:

1. Create same email address for each provider (for example, jennifer.smith@emailprovider.com for each email provider)
2. Leave settings as default (as most email users do)
3. Place the email address all over the web, in forums, for signups, and in blogs
4. Periodically measure amount of spam in Inbox, Spam/Bulk/Junk folder, and total emails

We will not list the email addresses here to prevent sabotage.

Check back later for the scientific results.