The Client

A long-standing silenceIT customer, Beaulieu Financial Solutions Inc. (BPFS) provides insurance and financial planning services to clients in the National Capital region. BPFS key differentiators include the depth of its professional expertise, and the caring, long-term relationships it forms with its customers.

When BPFS approached us they had a single-page, business card website. They wanted us to help them rebrand, create an e-marketing strategy that would generate new sales leads and develop a more sophisticated web presence. The Goal of the new identity and site was to attract new business and to better serve its existing customer base.

The Result

We met with BPFS to get a high level understanding of the challenging financial industry. It was immediately apparent that BPFS not only had a wide range of knowledge but that each client was important to them. To rebrand and create a new site we would need to reflect their positive attitude in a site that was flexible enough to support the depth of their bilingual content.

The site design has a personal touch with vivid colours and large personal photos of the individuals who attend to each client base. The custom design takes advantage of a wide range of site enhancing features such as image sliders, a sophisticated bilingual quoting system and automated content that displays seasonally relevant information.

The end result is a one of a kind website that balances the fine line of robust and easily attainable financial content while avoiding a dry and stodgy appearance that is so common amongst the financial industry

The client

Bank & Vogue have been in the recycled goods industry around the world for the past 15 years.  Used Clothes Drive (UCD) is a new service and site produced for Bank & Vogue to help raise funds for  schools, churches, sporting or community groups.

UCD helps organizations to run successful clothing and mixed goods drive for their fundraising events. Through the UCD program Bank & Vogue provide a trailer, free of service and train volunteers on maximizing the load and weight of the trailer so that they get the best possible value from the donated goods. Ultimately Bank & Vogue pay the charity organization for their collection based on weight.

For this new initiative Bank & Vogue required a new identity and a web presence.

The Result

After researching many charitable organizations silenceIT proposed a graphical logo and a site that would promote the new service in a clean and intuitive manner.

silenceIT presented a minimalist site design by modifying an existing CMS template to fit within the limited project budget. The site highlights a blog section for past and future donation events as well as an event registration form that lets schools, churches and other organizations schedule their own events with UCD. With the help of the Used Clothing Drive site your fundraiser event has never been easier.

Let’s say you’ve got an application running in the timezone America/Toronto. Let’s say you want to know what a certain time will be in another time zone, Europe/London. One way to do this would be to swap the active time zone PHP is using and use strtotime(), but this could lead to odd behaviours depending on how PHP (and its host server) is running.

There’s a much easier and simpler way to do this in PHP 5.2: the DateTime class.

Here’s a quick run-down: The constructor accepts two parameters, a time string (interpreted like strtotime() would) and a DateTimeZone object which in turn accepts a parameter of a timezone string. You can then query the object for the date in a particular format. For example:

$dt = new DateTime('yesterday', new DateTimeZone('Europe/London'));
echo $dt->format('Y-m-d H:i:s');

Assuming the current date is the 14th of June, this would give me a response of 2011-06-13 00:00:00. To preserve the time I could instead use:

$dt = new DateTime('-1 day', new DateTimeZone('Europe/London'));
echo $dt->format('Y-m-d H:i:s');

At 12:28 on the same day, this would net me a response of 2011-06-13 17:28:37, correctly shifting the time ahead five hours.

Be careful in the usage of this object: A Unix timestamp is always UTC. Furthermore, using an absolute time in the constructor can lead to unexpected results:

$dt = new DateTime('20:00', new DateTimeZone('Europe/London'));
echo $dt->format('Y-m-d H:i:s');

One may expect the time to be shifted ahead; Instead, I get the response 2011-06-14 20:00:00. Why? Because I specified that exact time, so it assumed I wanted that time in that time zone, and not the current time shifted to that time zone. The correct way to do this would be to set the time, then change the time zone, like so:

$dt = new DateTime('20:00');
$dt->setTimezone(new DateTimeZone('Europe/London'));
echo $dt->format('Y-m-d H:i:s');

And voilà, the response is 2011-06-15 01:00:00.

If PHP complains about not trusting the server’s time zone, you can also set your time zone with the second parameter as I did in the first example, and then change it like the example right above:

$dt = new DateTime('20:00', new DateTimeZone('America/Toronto'));
$dt->setTimezone(new DateTimeZone('Europe/London'));
echo $dt->format('Y-m-d H:i:s');

Once again this will correctly return 2011-06-15 01:00:00. Remember, any string valid for strtotime() can be passed as the first parameter in the constructor.

Here is a quick step-by-step walk through on how to set up your Google Adwords campaign.

Logging into Google AdWords

1. You can create a Gmail account or use your existing email address (but first you will need to create a Google Account).

Creating a new Campaign

1. Click the “Campaigns” Tab
2. Click “New Campaign” and enter in the settings for your new campaign
   • Campaign Name
   • Locations and Languages – Here you can tailor the campaign to country, province or city. For example if you want the campaigns to only run in Ontario, select “Province: Ontario”
   • Networks and Devices – Devices will let you choose whether or not you want both mobile and desktop/laptop or just one type of device. Networks allow you to choose between Search and Display Network. Display Network is a list of directories that your ad would appear on, for example, kijiji.ca
   • Bidding and Budget – you can choose between manual and automatic bidding (automatic bidding is probably the best option if this is the first time setting up a Google AdWords Campaign) and enter in the total amount of money you would like to spend per day for this particular campaign (you can have multiple campaigns running simultaneously).
   • Ad extensions – allows you to set location (even more specific than the first opportunity to set the location for the campaign), multiple links to your ad or a phone number.
   • Advanced Settings – allows you to specify when your ads will be displayed. For example, if you are running a breakfast special, you ‘d want your ad to run between 5 am and 10 am and not at 1pm. This will help with spending your campaign money at times that will provide the best results.
3. Click the Save Button

Create Ad Group

An ad is most successful when the keywords appear within the ad, so it’s best to create multiple ad groups that only contain one or two ads. If you sell custom socks, but also sell custom headbands, you would want to create an ad group for custom socks and then an ad group for custom headbands as the keywords for each ad would be quite different.

1. Name your Ad Group – if the ad group only has one ad, simply title the ad group the same as the headline of the ad.
2. Choose which type of ad you’d like to create (this blog post only deals with text ads)
3. Create your Ad
   • Headline – maximum 25 characters (including spaces)
   • Description line 1 and 2 – maximum 35 characters (including spaces)
   • Display URL – this is a vanity URL and doesn’t have to be the exact link and is only 36 character limit. An example of a display URL is: www.sallysbakery.com/WeddingCakes
   • Destination URL – this is the actual URL. For the previous example, the actual URL is: www.sallysbakery.com/our-wedding-cakes-page1. This URL is too long for the display URL so the display URL is used.
4. Add Keywords – keep the keywords to a minimum as it will help narrow down your target audience.

Initially it is a good idea to review and modify your campaigns progress on a daily basis. By making small changes to your text you can hone your message and increase your adds efficiency. If monitored and managed properly your AdWords campaign can result in new leads, increased site traffic and ultimately sales.

Integrating your forms with a live chat systems can be a great way for your customers to talk with one of your representatives when they need help the most.

We had a little quote form made in Contact Form 7 and one of the possible selections was to “Discuss your Quote with a Representative”. Only thing left to do was to find and connect a live chat system to that form selection. Finding a good WordPress  chat for online customer support is hard and I tried at least a few dozen plugins until I discovered LiveAdmin.

LiveAdmin is an easy to use live chat software designed for online customer relations. It has its own WordPress plugin (we didn’t use, but is useful), and clear instructions on how to install and use it.

LiveAdmin Setup

If you are looking for basic chat features you could use LiveAdmin Lite  (we used this version and if you want to test it first, you can sign up and LiveAdmin will give you a 30 day free trial user).

Getting and setting up LiveAdmin Lite:

1. Download the LiveAdmin Lite.

2. After you unzip the file, you can move the folder to a location that will be easy to remember. I treated it is a plugin and put it in my Plugins folder.

3. Type LiveAdmin folder location in the url ex:www.yoursite.com/wp-content/plugins/liveadmin/ . This will launch LiveAdmin control panel.

4. If this is your first time launching LiveAdmin you will need to create a new user and provide your data base information. LiveAdmin will need that information to access the data base and store its own data. Just follow the instructions.

5. After you are done installing LiveAdmin, you will need to make it work on your site. Press Configuration and it will open a new tab that has all the configurations you will need to setup you live chat (or at least most them). Press Installation Guide. Copy the step 1 code and paste it in your header.

6. Step 2 has the code that will be replaced by a clickable status image. Better to put this in a separate div – just so you can access it later.

<div class="chat_image"><span id='liveadmin'></span></div>

Place the code somewhere on your site to test if the chat is working. A suggestion for a good place would be a text widget on a sidebar.

If you look at the source of your agent image, you will see that the tag has an onclick command

onclick="Live_xxxxxx_Admin.StartChatPanel();

Keep this in mind because we will need it later.

Once you get the chat to work, you can change the LiveAdmin agent image. You can do that by pressing Configuration->Chat Panel->Status Image Theme->press on the Custom Image and put a full link for your online and offline agent images.

When the chat is working,  we moveto the Contact Form 7 quote form. While in the Chat Panel window you change the settings for the chat skin, waiting time, ring, and many other features. When you have finished setting up LiveAdmin chat to your liking we can move to the integration of our Contact Form 7 quote form.

Contact Form 7 Quote Form

To begin, lets create a basic quote form where we can provide initial questions that will help you provide a quick quote.  Usually if a form is quick to complete people are more likely to fill it out.  Once the user selects Chat with a Representative and submits the form, a LiveAdmin chat window will pop up. The online agent can quickly access his email, retrieve the information of the person he is about to chat with and provide him with a quick quote.

First Name*[text* first-name]
Last Name*[text* last-name]
Email*[email* email]
Telephone*[text* telephone]
Please Choose Insurance Preference*
[checkbox preference "Auto" "Home" "Life" "Business"]
Message
[textarea  message 87x5 class:long_text]
Please Choose Contact Preference*
[radio preference2 "Chat with a Representative to get a Quick Quote Now" "Call me within the next 4 hours" "Email me within the next business day"]
Enter [captchac captcha-759] Here
[captchar captcha-759]  [submit "Submit Quote"]

Here comes the tricky part. We will need to create a script that will check if Chat with a Representative is selected to activate the LiveAdmin chat only after Submit is pressed. In a situation like this I usually add the script to the form as it prevents it from loading on every page, and it is easier to manage.

The script bellow will check if Chat with a Representative is selected and then once the form is submitted it will run the onclick action that we mentioned earlier.  Please note that your form class might be different.

<script language="javascript" type="text/javascript">
jQuery("input[name='preference2']").change(function(){
if (jQuery("input[name='preference2']:checked").val() == 'Chat with a Representative to get a Quick Quote Now')
{
jQuery('.wpcf7-form').submit(function() {
Live_xxxxxx_Admin.StartChatPanel();
});
} });
</script>

Note: Be carefull with the script in Contact Form 7 as it is very picky and can change things without warning.

Also note that StartChatPanel(); doesn’t work unless <span id=’liveadmin’></span> is present on the same page.

If you want to start the chat on submit without having the agent image in the sidebar, just add display none to chat_image class.

If you want to have a more refined control, like activating the chat only if the form submission was successful (right now it just needs the Chat with a Representative selected and Submit clicked for the chat window to open – regardless if the form went through or not), you will need to add the StartChatPanel(); command in ContactForm 7 controler.php file.  You could probably do something like this:

 echo '<script language="javascript" type="text/javascript">$(document).ready(function() {  Live_xxxxxx_Admin.StartChatPanel(); });</script>';

See How to Integrate Contact Form 7 with MailChimp for exact line location.

If all works correctly, a chat window should pop up on form submission. Hope this helps with your LiveAdmin and Contact Form 7 integration. Please let us know if this tutorial was helpful, or if you have any notes and comments.

Google Analytics shows you who has visited your site, how they found it and what they are viewing once they reach your website. With the useful information gathered using Google Analytics, you can then improve your website to increase the number of visitors, encourage interactions and even make more money on the web.

Adding Google Analytics to your website is fairly simple to do as long as you have access to your website code.

1. You can log into Google Analytics with your existing email or by creating a gmail account. If you use your existing email you will need to create a Google Account.
2. Once you have your Gmail account or your Google Account set up, log into Google Analytics and add your website by clicking the “Add new account” link.
3. Next click the “Sign Up” button and enter in the URL, the account name (this can be the name of your company), the time zone and country.
4. When you click continue you will be provided with a bit of code that needs to be added to the footer of your website. This code must appear on every page of your website in order to receive accurate data of the type of traffic, what pages are being viewed, etc.
5. Once you add the code to your website it can take up to 24 hrs to have your website verified by Google and the results are about a day behind. The status section will let you know if it’s been verified or if still cannot get stats for your website.

If you plan on sharing your Google Analytics results with others, but don’t want to give them the log in information to your account, you can link theirs up by clicking the “Edit” link under the website profiles section.

Click the “Add User” link, add the new email account and click “Save changes”.

Gowganda Lake Lodge is a beautiful four season resort located on the north shore of Gowganda Lake in the heart of northern Ontario’s amazing wilderness. The lodge offers a variety of activities including fishing, hunting, water sports and ATV adventures.

When Gowganda Lake Lodge first called us we were struck by two things. First was how incredibly beautiful their location was and secondly how the current site was not doing it justice. The team at Gowganda have a great product but it just wasn’t getting the treatment it deserved.

The Result

Looking through their photo collection we knew that the location was going to be a key selling feature and we needed to put those images front and center. silenceIT used a visually stimulating modified CMS template to highlight the amazing scenic views that can be experienced when visiting Gowganda Lake Lodge and the use of rustic wood panels in the background accents the images and bring a cottage-like atmosphere to the site.

With the use of photos found in the picture gallery and throughout the website  featuring past satisfied cottagers, hunters, fishers and other customers, the end result is a site that reflects that great feeling you get when you look at your vacation pictures. Rain or shine, you’ll never regret the time you spend with friends and family at Gowganda Lake Lodge.

Integrating a contact form with a WordPress website into your MailChimp account can be a great step towards creating and increasing your subscribers list.

In my previous post I focused on the integration of Contact Form 7; which is a form generator plugin for WordPress, and MailChimp; a great email marketing service that I am liking more and more . This post will cover the addition of mutlipe fields to your Contact From 7, which you can then pass to you MailChimp list.

in Contact Form 7

Let start by adding the required fields to your Contact Form 7 form.

The additional fields I will add and pass on are: Last Name, Phone Number and City.

<div>
<div>Your Name (required)<br />[text* your-name]</div>
<div>Your Last Name (required)<br />[text* your-last-name]</div>
<div>Your Phone<br/>[text your-phone]</div>
<div>Your City<br/>[text your-city]</div>
<div>Your Email (required)<br />[email* your-email]</div>
<div>Your Message<br />[textarea your-message]</div>
<div>Subscribe to our Newsletter [checkbox subscribe default:1 "yes"]</div>
<div>[captchac captcha-865 size:l] [captchar captcha-865]</div>
 <div></div>
<div>[submit "Contact Us"]</div>
</div>

in MailChimp

Assuming you have completed the steps in my last post and your form has been completed, you can make a few changes to your MailChimp contact list settings.

1. Login into your account.
2. Select your list –> press settings –> press List Fields and *|MERGE|* Tags. On this page you can add more fields/tables to your list.
3. Press add a field, name it, and change the tag label name.
4. Select the field type – preferebly text.

Note: Contact Form 7 doesn’t seem to treat phone numbers or dates as digits but instead converts them to a string. Mailchimp however expects a numeric value in it’s ‘phone’ field and as a result will not display any of the (string) content you are attempting to pass to it. Fortunately there is an easy fix. When you create the field in MailChimp be sure to select the field type as “text”. Now MailChimp will know what to expect and your form will work.

In the end we should have something like this ( probably different order ):

Controler.php Part

Now, that we have a form that has those variables and a MailChimp list that is ready to accept them, we need to integrate them.

We will do that in the controler.js file. Follow the previous tutorial on How to Integrate WordPress Contact Form 7 with MailChimp and change/add the $mergeVars.

$mergeVars = array('FNAME'=>$_POST['your-name'],
 'LNAME'=>$_POST['your-last-name'],
 'PHONE'=>$_POST['your-phone'],
 'CITY'=>$_POST['your-city']);

Now when you submit the form; those variables will be past to MailChimp. Send a few tests to yourself and see if it works.

Hope this helps with adding more fields to your MailChimp list. Please let us know if this tutorial was helpful, or if you have any notes and comments.

Blog App

If you have a company blog, why not share it on Facebook where you can reach an entirely new audience than those that visit your website. There are few ways that you can promote your blog post on Facebook. The first way is to copy and paste a link of blog post and write a little status update each time you write a blog post.

The second way is to install Twitterfeed app that will grab all future blog posts from your website’s blog. This will just add them to your wall and will appear within all types of wall posts. Twitterfeed is quite simple to use. Create an account, install the application on Facebook (or Twitter) and all you need is access to your RSS feed. Twitterfeed will just create a post using the first few characters and doesn’t really provide an interesting post.

The more extensive option for displaying your blog posts on your Facebook business page is to install an app like NetworkedBlogs. NetworkedBlogs will give you an option to have a custom tab on your page providing a designated area for all of your blog posts. The set up isn’t as simple as Twitterfeed since you need to add your blog to their database before you can create a tab, but it does help promote your blog at the same time since others can grab your blog and add it to their page.

“Like” App

Not sure if you would consider this an app, but it is quite useful to have on your Facebook business page if you want to increase the total number of “Likes”. If people can gain access to all of your Facebook content just by clicking the video links, photos or even custom tabs without having to “Like” your business page, then it’s difficult to give them a reason to have your business page associated with their name.

North Social has an app called “Fan Offer” where if you install this application on your Facebook Business Page, once someone likes your page, they get a special offer or coupon. This encourages those to “Like” your page and to reward them with something for doing so. Depending on your industry, this could be a coupon for a free cookie from your bakery or it could be exclusive access to a report that your company developed.

Newsletter Sign-Up

This type of app is useful if you have a newsletter that you send out and you want to build your list or if you are just starting out and want to start creating a list knowing that in the future you will be using direct email marketing. Your company may already have an account with an email marketing service so make sure that the application you add to your page is the same as the existing email marketing service.

MailChimp and Constant Contact are just some of the few newsletter apps that you can add to your Facebook business page. The set up varies with each service, but in the end can help promote and grow your direct email marketing campaigns.

Website Grader

Website Grader is a free SEO tool by HubSpot that allows you to enter in the URL you want to get graded and it will create a report for you. There are various sections that they use to give a score out of 100 points for your website. If you feel like your content isn’t necessarily reaching your target audience, there is one section that lets you know what readability level your site is at.  It also helps identify any missing ALT text for images and whether a blog or Twitter feed can be found.

If your website does not have a blog or Twitter account connected, this can lower your score. The score isn’t really as important as any errors that are listed.

Google Webmaster Tools

This is somewhat of a basic rundown of how your website is doing and does require a Google account. Once you have verified your website with Google, you can use Google Webmaster Tools to help identify any issues your website might be having. Some data that you can find when using Webmaster Tools is if your sitemap has been successfully submitted, links directed toward your site (backlinking is very important in SEO strategies), and what types of search queries people are using to find your website.

Submit Express

Submit Express has both free and paid services available. One free tool that I like is the Meta Tag Analyzer. This checks your website for the status of your meta tags (keyword, title and description) and lets you know if things needs to be improved to help with your website’s position on search results. Each search engine has their own algorithm for search results so make sure your meta tags are properly done.

With the Federal election just around the corner and social media playing an increasing role in campaign strategies, we felt that there was a vast amount of information within Twitter relating to the upcoming election on May 2nd that has yet to be tapped into, sorted and filtered in a meaningful way. Thus, polichat was created on April 1st, 2011 by silenceIT.

The first release of polichat.ca consisted of breaking down each political party’s list of candidates and gathering their past tweets and compiling it into a database. From there, we were able to provide an overall tweet count for that party, the top tweeters and the top hashtags for each party in the last 24 hours. To give it a visual impact we created a word cloud.

Since then we have included a search phrase and search candidate option and the ability to click on an individual hashtag to see real-time* posts using that particular hashtag. Certain hashtags, #elxn41 #cdnpoli #election41 #fed2011 #election2011, have been omitted due to the fact that these hashtags are being used by all candidates and are not necessarily related to any particular issue surrounding the election or campaign strategies. These 5 hashtags are used more for the sake of drawing attention to their tweets rather than to address a specific concern or issue.

Polichat has a second page titled PoliDebate entirely dedicated to following tweets that revolve around the Canadian debate held on April 12 2011. This page collects the total number of tweets using the  #db8 or #db841 hashtags. Along with the actual tweets, the page displays the top tweeters and the top hashtags that were included in each tweet As well as the most popular tweets based on the number of retweets.

Throughout the campaign, polichat.ca will be releasing new information such as 7 day and 30 day time frames. For all upcoming news regarding polichat.ca, follow us on twitter @polichat_news.

*There is a 2 minute delay of data displayed on polichat.ca

Here are 4 simple ways to add personality to your Facebook page making it stand out amongst the rest of the very similar looking business pages.

Profile Photo

You can easily add personality to your company’s Facebook page by creating a unique profile photo. Yes, you should use your company’s logo, but try doing something fun with it! This is one of the first things that people see on your page. Here is an example that one of our designers made that could be used on the silenceIT’s Facebook Page.

Use Various Types of Posts

Depending on how creative you are, you can use text, videos or photos to help bring personality to your Facebook page. If you are creative with words, then perhaps a witty blog post or status update is a great way to add personality. Perhaps you and your co-workers decided to dress up in some of your fantastic secondhand clothing and hold your own fashion show. A video would work 10 times better than writing about it.

Unless you know which type of wall posts your fans like to receive, experiment and see which ones work better. Even if you know that your fans like photos as posts instead of text status updates, it’s always good to have a bit of variety as it keeps things fresh and interesting.

Facebook Applications

Using applications can definitely help add some life to your somewhat plain Facebook page. The Facebook App Directory has a ton of applications available for use. There are quite a few that are directed towards those who use Facebook for personal use, but they do have a business section for apps that you can browse through.

As mentioned before, if you are creative with words, you can use the NetworkedBlogs App to collect all of your blog posts that you write on your own website. This will also allow you to create a separate tab on your Page specifically for your blog. Or if you have weekly presentations at your office, why not use SlideShare to post them to your Facebook Page?

These are just a couple of examples where using a Facebook App on your page can help it become more functional as well as separate your Facebook page from your competitors.

Custom Tabs

As mentioned previously, having custom tabs can help make your Facebook page a bit more like a website. Now that Facebook has introduced the use of iframes, you can create individual tabs that resemble your website creating a nice unison between your website and Facebook page. It’s also a fantastic way to make a great first impression. Pepsi has a welcome tab with a large glass of refreshing Pepsi that you see first instead of their Facebook wall.

Kraft Foods has a welcome tab, but they also have a custom tab called “Outstandwich” where you can browse through their recipes for sandwiches. Once you click on a sandwich you’d like to make, it takes you to their website. This is a neat way to encourage those who like Kraft foods to find a recipe that uses Kraft ingredients and head to the grocery store and buying their product.

To use PoliVote simply log into Facebook and add the PoliVote application to your profile. Once the application is installed you can click on it to cast your vote and view the poll results.

Results are broken into four groups :

1. your friend results (no names are given)
2. your riding results (automatically applied to your riding  based on your Facebook user profile)
3. popular vote
4. seats per party

To add to it’s complexity we incorporated the option to change your vote as the election progressed as well as the option to anonymously state why you are voting for a particular party.

Once an individual has voted, a notification would appear on their Facebook wall letting their friends and family know that they used PoliVote to voice their opinion.

With that said, here are 5 easy tips to help you increase your Twitter following.

Use Hashtags

It is amazing how the use of hashtags can help your tweets become more popular and in the end drawing attention to your Twitter account. If you do a search for “cupcakes” on Twitter and then do another search for “#cupcakes” you get two completely different search results as you can see in the images below:

With or without the hashtags you get results with the word “cupcakes”, but in my opinion, if I was a business owner, I would want to appear in the search results using “#cupcakes” as they seem to be a bit more professional.

Manually Tweet about your blog posts

There are a ton of feed apps that you can use to grab all of our blog posts and tweet them for you on Twitter. There isn’t anything wrong with using a blog feed to help you tweet about your blog posts, but if you write your own tweets about your post, you can write something that’s a bit more exciting.

Tweet generated from feed app

Custom tweet for blog post

As you can see, the tweet that is generated from the feed app isn’t very interesting, but the tweet on the right has a stronger call-to-action to get your followers to click on the link. Also, by taking the time to quickly write your own tweet, you can add in hashtags. So, if anyone is searching for “#CSS”, the custom tweet will appear and the one generated from the feed won’t.

Experiment with the times that you tweet

Depending on your target audience on Twitter, tweeting during the day might not necessarily be the best time to get your promotion, blog post, or any other types of tweets to your audience. Most work places block social media sites like Twitter on their computers and unless your audience has their Twitter account set up to send notifications to their phones, your message that you sent at 10 am will be lost by the time they check their Twitter account at 5pm.

Take the time to experiment with the times that you send out your tweets. If you are a bakery, sending your tweets at 4 am might be the best time to reach your audience before they head to work when they are thinking about breakfast or are running late. If this is the case, don’t worry, you don’t have to wake up  early just to send your tweets. Applications like HootSuite will let you schedule tweets so you can sleep in. (I’ve written a blog post about the HootSuite application if you want to know more about this great application.)

Use existing articles/resources for content

This tip is related to the second tip about writing your own blog post tweets. Using existing content to use for your Twitter account is great when you may have a crazy busy day when you cannot find time to think of something catchy or interesting to tweet about. You can use past blog posts, videos you’ve created or anything really as content. Grab an interesting sentence from a blog post you wrote last week and tweet the link.

Retweet relevant content

This is one of the easiest thing that you can do to stay active on Twitter. This also helps show your followers that you are aware of current events that can effect your business. For example, if there is an article stating that vegan cupcakes are healthy, and you make vegan cupcakes, retweet that link.

As a designer, it can sometimes be difficult to find the perfect photo without breaking the budget or bank on a specific project so I’ve compiled a small list of stock photo websites where you can find what you are looking for and in your price point. These sites range from free to a monthly subscription and can have all sorts of restrictions on how you use the photo.

The cost of each photo also depends on what kind of resolution you require. If you are just using the photo on a website then the resolution only needs to be 72 dpi. If you are using the photo for a print document then you need at least a resolution of 300 dpi.

stock.xchng

stock.xchng is a free stock photo website. The selection is not as great as the sites that charge for their photos, but if you are on a tight budget, or just having some fun in Photoshop this is a very useful site. This site requires that you create an account.

All photos are free, but some photos do have restrictions like notifying the photographer that you are using their picture on your website or any print material you are working on. Others have the standard restrictions which basically gives you permission to use their photo for free without having to contact them or give them credit.

Their search is fairly simple compared to the three sites listed below and it can get a bit frustrating when you are searching for “tree” and you get a result of a leaf picture. However, when this does happen I just remind myself that it is a free site.

Getty Images

Getty Images is the most expensive out of the four sites that are

mentioned in this post and requires that you create an account. For royalty-free images, the smallest size (2.60 x 3.89 in. – 72 dpi) costs $5 and the largest size (11.38 x 17.06 in. – 300 dpi) costs $370.

Now, with that said, you can find some amazing photos on this site and if it fits into your budget then there is no reason to worry about the price. You can also find illustration/vector images as well as photography, music and videos.

Getty Images has a lightbox option and this is great if you need to see what a series of photos will look like together and whether or not the composition and colour of each photo works.

Photo Xpress

Photo Xpress, in my opinion, has the most flexibility when it comes to prices. They have a one time fee for each photo or a daily/monthly subscription. All prices on the website are in US dollars and the average price per photo is $10. Although it sounds more expensive than Getty Images, that $10 can get you a pretty large file. An example of this is a photo of a tree. The size is 15″ x 11.3″ @ 300 dpi but only costs you $10. A size this large on other sites like Getty Images or iStockPhoto could cost you from $30 to $300 dollars. The only downside to this pricing is if you are looking for a small image then you are paying more for an image that you could find at istockphoto or Getty Images. This site requires that you create an account to purchase photos.

A neat search feature that some designers will really appreciate is the option to only search for vertical or horizontal pictures. Sometimes a layout that you are working with will only look good with a horizontal photo and this cuts down on the search time since you don’t have to filter through the vertical images and it also saves you from finding a great photo only to realize that it won’t work with your design layout. Photo Xpress also has a lightbox to sort and organize potential photos you want to use together on a project.

iStockphoto

Out of the four websites listed, iStockphoto is probably the most recognizable as it does provide a nice selection of photos, video, audio, flash and illustration for reasonable prices. iStockphoto does have a few options for pricing, but not nearly as diverse as PhotoXpress. There is a breakdown of what each photo will cost from an xsmall photo only costing 1 credit (credits range from 95 cents to $1.72 depending on how many you purchase at one time) to an xlarge photo costing 15 credits.  The number of credits also depend on the type of file you are purchasing as an illustration can cost as much as 25 credits. This site requires that you create an account to purchase photos.

The search option allows you to only search for a particular type of file, whether that be audio, photography or vector. iStockphoto also has a lightbox that helps you sort and organize your files and can come in handy when you are selecting photos that require client approval before purchasing.

Check it out, you might be surprised with the last minute of the video.

Imagine you are building a contact form (or any other type of form for that matter), and all you want it to do is open a new set of fields when a user selects or clicks something. For example:

Building the Form

Lets start by creating a really basic form in Contact Form 7 (the only reason I am using a table is because they provide more structure without additional styling)

<table cellpadding="0" cellspacing="0" style="border: 0px;" width="100%">
<tr>
<td width="50%"><h4>Please Select Your Drink</h4><br>[radio drink_preference "Coca Cola" "Pepsi Cola"]</td>

<td width="50%"><h4>Please Select Your Dessert</h4><br>[radio desert_preference "Cherry Pie" "Ice Cream"]</td>
</tr>
</table>

Hidden Divs

Now we can insert a few divs with a new set of fields.

<tr>
<td>
<div id="show1" style="display:block;">
<h4>Which One?</h4>
[checkbox drink_requested "Coca-Cola" "Diet Coke" "Coca-Cola Zero"]
</div>
<div id="show2" style="display:block;">
<h4>Which One?</h4>
[checkbox drink_requested "Pepsi" "Pepsi Max" "Pepsi One"]
</div>
</td>
<td>
<div id="show3" style="display:block;">
<h4>Which One?</h4>
[checkbox dessert_requested "Large Slice" "Medium Slice" "Tiny Slice"]
</div>
<div id="show4" style="display:block;">
<h4>Which One?</h4>
[checkbox dessert_requested "Chocolate" "Orange" "Vanilla"]
</div>
</td>
</tr>

After you are done with styling the new fields, you can convert the display:block to none.

Adding the Script

Now it is time to add the script that will make it all work. Lets assume that you already have jQuery loaded in your header (if not you can add the jQuery link with the rest of the script).

We will add a script  that will toggle switch the hidden divs that we created based on user selection.

Add the script after or before the form fields. This way you don’t have to make a custom page just for that form, and as you work on the form you can go back and forth and edit the script.

<script language="javascript" type="text/javascript">
jQuery("input[name='drink_preference']").change(function(){
 if (jQuery("input[name='drink_preference']:checked").val() == 'Coca-Cola')
 {
jQuery("div#show2").hide("slow");
jQuery("div#show1").show("slow");}
 else if (jQuery("input[name='drink_preference']:checked").val() == 'Pepsi')
 {
jQuery("div#show1").hide("slow");
jQuery("div#show2").show("slow");
}  });
jQuery("input[name='dessert_preference']").change(function(){
 if (jQuery("input[name='dessert_preference']:checked").val() == 'Cherry Pie')
 {
jQuery("div#show4").hide("slow");
jQuery("div#show3").show("slow");}
 else if (jQuery("input[name='dessert_preference']:checked").val() == 'Ice Cream')
 {
jQuery("div#show3").hide("slow");
jQuery("div#show4").show("slow");
}  });
</script>

You can create really nice forms using this method.

Hope you enjoyed this tutorial. Please let us know if it was helpful, or if you have any notes and comments.

I went searching online for free photo editing programs and found a large list of programs. I spent some time looking over these programs, but decided that I would give a quick review of Photoshop Express Editor and PhotoFiltre.

Photoshop Express Editor

Photoshop Express Editor is an Adobe product, but is free to use online or you can download onto your computer. Adobe products also include Illustrator and Photoshop, but these programs can be quite expensive if you are just looking for a program to make simple edits to photos.

I like that you can use this program online as some people might just want to edit a photo that they can use as their profile photo on Facebook or any other site that requires a profile photo. You can either upload a photo from your computer or if you have an Adobe account, you can grab a photo from your library. You can only upload JPG files that are less than 16 MB. This isn’t too big of a deal since most photos are saved as JPG from your digital camera.

The navigation on the left-hand side is very easy to understand as they use both an icon as well as the text to let you know what tool does what function. The tools that are available are basic, but allow you to do quite a bit of editing. Some of the tools available are cropping, fix red-eye, you can increase or decrease the saturation of your photo and change the photo to black and white. If you want to add a bit more character to your photos you can use the “Decorate” option and find a bunch of options such as adding text, stickies and even costumes.

Photoshop Express Editor allows you to undo or reset the picture if you feel like you’ve overdone it with the edits or the costumes which makes it that much easier to experiment with your pictures. It is also very easy to save your picture. Simply click on the “Done” button and your photo will be saved.

Check out our quick video tutorial on how to use Photoshop Express Editor to crop or resize your photo.

PhotoFiltre

PhotoFiltre is a free program that you can download onto your computer. The installation is fairly simple, but it does ask you if you want to install the Ask.com toolbar. If you don’t want to install the toolbar, that’s ok. It won’t stop the installation of the program.

PhotoFiltre I find is a bit more complex to use in the beginning. It doesn’t easily explain what each tool does. You basically have to hover over each icon to get a very brief description of what that tool does and the tools that are showing on the toolbar I find they aren’t the tools that you would be using very often if you are just looking for a basic program. It resembles Photoshop a bit more with all of these extra features like the cloning tool, dust reduction and gamma correction. However, with that said, it does have a lot of useful tools found within the top navigation.

Just by spending a bit of time and looking at the drop down menus for “Image”,  “Adjust” and “Filter” you can find great options such as crop, image size, brightness/contrast or for a bit more advanced options you can change the overall colour of the image.

Check out our quick video tutorial on how to use PhotoFiltre to crop or resize your photo.

With WebKit support for CSS Image Masks we can create really neat effects with our text (unfortunately for now it only works with web-kit supported browsers like Safari and Chrome).

As I was looking for ways to work with WebKit Image Masks I found a really cool post by Trent Waltom that gave me  inspiration for this experiment. I decided to change it a little bit and to add a few things of my own. Hopefully soon enough a full CSS Animation support will be introduced across all browsers.

In this example I will be using some code from my last posts: How to use @font-face with Google Web Fonts and CSS Gradients and WebKit Image Masks on Text.

The Ocean Floor

For this experiment I created a basic layered image of an Ocean Floor. Then I saved the layers one by one, this way I could use them later on in my file.

Here are the files that I used:

The Sand

Some Fish

And the Wave

1. Lets start by creating a few divs that will serve as our base.

<div class="text_holder">
 <div id="sand"><h3>OCEAN</h3></div>
 <div id="fish"><h3>OCEAN</h3></div>  
 <div id="waves"><h3>OCEAN</h3></div>
</div>

The Text Holder will be used as a base for the other layers. The Ocean will be used as the mask to knock out the letters.

2. Now we can add our CSS styling to stack them all on top of each other. You can get Google Web Fonts links and the css styles from last week’s post. Please note that I am using Luckiest Guy font.

.text_holder {
 position: relative;
 height: 300px;
}
#sand {
 background-image: url(images/sand.jpg);
 background-repeat: repeat-x;
 height: 300px;
 position: absolute;
 top: 0px;
 width: 100%;
}
#fish {
 background-image: url(images/fish.png);
 background-repeat: repeat-x;
 height: 300px;
 position: absolute;
 top: 0px;
 width: 100%;
}
#waves {
 background-image: url(images/wave.png);
 background-repeat: repeat-x;
 position: absolute;
 top: 0px;
 height: 300px;
 width: 100%;
}
h3 {
 font-family: 'Luckiest Guy', arial, serif;
 font-size: 215px;
 letter-spacing: -6px;
 line-height: 1;
 margin-bottom: 10px;
 text-transform: uppercase;
 padding-top:10px;
 padding-bottom:10px;
 padding-right: 10px;
 padding-left: 10px;
 }

3. Now lets add CSS Image Masks and Animations. Sand doesn’t require an animation so we just add the text image mask style. For fish and wave we will add two separate animations with different timing. By doing so we will create a more natural feel.

#sand {
 background-image: url(images/sand.jpg);
 background-repeat: repeat-x;
 height: 300px;
 position: absolute;
 top: 0px;
 width: 100%;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 }
 #fish {
 background-image: url(images/fish.png);
 background-repeat: repeat-x;
 height: 300px;
 position: absolute;
 top: 0px;
 width: 100%;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 -webkit-animation-name:fish-animation;
 -webkit-animation-duration: 30s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 }
 @-webkit-keyframes fish-animation {
 0% {background-position: 1200px bottom;}
 100% {background-position: left bottom;}
 }
 #waves {
 background-image: url(images/wave.png);
 background-repeat: repeat-x;
 position: absolute;
 bottom: 0px;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 -webkit-animation-name: wave-animation;
 -webkit-animation-duration: 15s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 height: 300px;
 width: 100%;
 }
 @-webkit-keyframes wave-animation {
 0% {background-position: left bottom;}
 100% {background-position: 1200px top;}
 }

The result should look like this (You will see the text mask animation working only in Safari or Chrome):

This is just a small example of what can be done with text masks. To throw a few ideas out there, this technique could be used for a  sunrise, leafs falling, waterfall and snow falling.

Hope you enjoyed this tutorial. Please let us know if it was helpful, or if you have any notes and comments.

->  open -n /Applications/keepassX.app

The “-n” stands for new and this works for several other applications as well.  I also created this quick little video tutorial that demonstrates using the command as well as how to create an automator app that saves you the trouble of opening terminal every time.    I created it really quickly, so its pretty rough. Please let me know what you think, is it too rough? Do I need to polish the videos more for little tips such as this one? Or am I better to just create more videos with that time?