2010 Social Media Statistics

Posted on Aug 11, 2010 by Rick to General

With all the hub-bub around social media, I thought it was time to put together some social media statistics for 2010. The following social media statistics mostly show a snapshot of the current major players in social media at this time with a little nonsensical commentary from me.

FaceBook Statistics

Facebook continues to be one the fastest growing and largest active social networks. Our facebook social media statistics come courtesy of facebook.

• Over 500 million active users (50% of which sign-in daily) - Wow, that’s a lot. It’s hard to argue against developing a facebook marketing strategy when you think about how many chances you have to be a part of your customers lives on a daily basis. Add some value to their facebook experience and you may be rewarded!
• Over 900 million pages, groups, communities and events – It’s a big pond, how are you differentiating your business?
• Over 150 million active users who access through mobile devices – Is the content that you’re sharing / promoting mobile friendly?

Twitter Stats

Twitter has established itself as the Internet Sensation. Our Twitter social media statistics come courtesy of the Huffington Post.

• Over 100 million REGISTERED users, with about 300k new per day – Another huge network, growing at an amazing rate.
  
• Over 55 million daily tweets – As with facebook, we’re dealing with another huge pond. Maybe it’s time to stop promoting those rinky-dinky blog posts and time to start promoting interesting content…
• 600 million daily search queries – Are you think what I am? When can we get access to see what those search queries are!
• 60% of tweets come from 3rd party applications, 30% come from mobile devices

Foursquare Statistics

Foursquare is not the biggest or baddest social network but we think that foursquare is pretty interesting to watch. As their user-base grows, we may see this network gain influence. Our foursquare statistics come from HitWise.

• About 41% of traffic came from Facebook and Twitter (as users share check-ins) – The human need to share what we are doing and where we are doing continues to litter, errr, populate content on the social web…
• Foursquare announced a record 275,00 check-ins in one day in March – Can’t argue with this stat. There’s a lot of sharing going on Foursquare and with increased incentive, this network may be a strong influencer within the next year. Local business, get in now before it’s cool!

Myspace Statistics

MyWho? MySpace is alive and kicking (sort of). While network is experiencing the most growth, they still tout a pretty impressive user-base.

• 122 million active users – Merely a fraction of facebook but still extremely significant.
• 100 new users every day – About 1/3 of twitter but still pretty strong.
• Spend an average of 2 hours / month on the site
• Fastest growing demo is 18-24 year olds

Depending on its products and services, social networks can provide a good deal of opportunities for businesses. The time and monetary investments can be significant so targeting the right social networks and strategizing for the long-term are key. hopefully these updated 2010 social media statistics will get you started.

Tags: facebook, foursquare, myspace, social media statistics, twitter

NYJTL partners with THAT Agency for new website

Posted on Jul 16, 2010 by Michelle to General

THAT Agency hit the mark with the New York Junior Tennis League’s new website.  In designing and developing the new website (www.nyjtl.org), THAT Agency’s main goal was to make a heavily functional site that was clean and attractive to both children and their parents.

Utilizing web 2.0 standards and a primary color scheme, THAT Agency was able to create a website that is packed with information, while still being fun and inviting.  Backed by a content management system, NYJTL is able to not only control all of the website images and content, but also manage all of their participants, programs and coaches.

Add print ability to fancybox jquery plugin

Posted on Apr 6, 2010 by Rich to General, Web Development

In this post, I will show you how to add a nice print button to the fancybox jquery plugin. Of course like many of the posts I write, the idea came about from one of our clients who wanted to be able to have their users open the lightbox, show the coupon or whatever promotion they are doing and give the user the option to print said promotion.

Click here to view to working demo or go ahead and download the zip file.

To begin, there were a couple of things that we had to do. First, we needed to download the fancybox jQuery plugin. At this point I am assuming you have jQuery javascript file downloaded, if you dont, go get it at jQuery.com

The Breakdown

The javascript required is 3 main pieces. The fancybox plugin, the jquery file and the third piece that handles the printing functionality.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

<script type="text/javascript" src="jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".promo").fancybox();
});
</script>

<script type="text/javascript">
var win=null;
function printIt(printThis)
{
	win = window.open();
	self.focus();
	win.document.open();
	win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');
	win.document.write('body, td { font-family: Verdana; font-size: 10pt;}');
	win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
	win.document.write(printThis);
	win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
	win.document.close();
	win.print();
	win.close();
}
</script>

If you are familiar with the fancybox plugin, this is not too far fetched. basically what I added was the “print” image to the plugin itself as well as added some css too to position the image where I wanted it to appear.

FULL HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Print with Fancybox</title>
<link rel="stylesheet" media="all" type="text/css" href="fancybox.css" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".promo").fancybox();
});
</script>
</head>
<body>
<a class='promo' href="img/thatagency-full.jpg"><img src="img/thatagency-tile.jpg" alt="THAT Agency - West Palm Beach" border="0" /></a>
<script type="text/javascript">
var win=null;
function printIt(printThis)
{
	win = window.open();
	self.focus();
	win.document.open();
	win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');
	win.document.write('body, td { font-family: Verdana; font-size: 10pt;}');
	win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
	win.document.write(printThis);
	win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
	win.document.close();
	win.print();
	win.close();
}
</script>
</body>
</html>

Click here to view to working demo or go ahead and download the zip file.

Tags: jQuery, jQuery examples, jQuery tutorial

5 fundamentals of color correction

Posted on Mar 10, 2010 by Neil to General

When it comes to advertising and design, your works impact is directly linked to the quality of your images. Digital photography has brought professional level imagery to the masses. However, mega-pixels don’t necessarily equate to quality. If your levels are off, it wont matter how high res your file is. To insure your photos look their best it’s important to take a few simple steps to unlock their potential.

First off open your image using Photoshop or a similar image editing application.

1.Curves
Take a look at the image – does its general color appear to be in balance? If so you can move onto the next step otherwise the first step is to balance your color. Easiest way to do this is to use auto curves. Under Image>Adjustments>Curves> Find Auto curves. This easy tool automatically balances out your image – most of the time. In some cases the tool produces unexpected results which are obvious. in this case simply chose undo. If the image still needs color adjustment the next option is to manually adjust the color using curves. digital photos shot with pocket cameras tend to be heavy towards the red channel – esp ones shot at night. Under the curves menu select the red channel and go the center of the curved line tool and drag the curve slightly upwards – doing this will reduce the amount of intensity for the red channel which will reduce the redness in your image.

Tip: In any image find a neutral grey area. You can easily identify problems by sampling color from grey areas. Any neutral grey should have an even value – ie: Red 150, Green 150, Blue 150…..if you see Red 200, Green 150, Blue 150 – simply pull back your red channel untill its balanced. Doing so unlocks detail and turns a bad image into a usable one.

2. Levels
Next how does the images brightness look? Is it to dark? Using Image>Adjustments>Levels> you can easily adjust either the highlight regions , mid-tones or shadow areas by sliding the levels adjusters from side to side. enable the preview check box so you can see how the changes will affect your image. Use levels sparingly – its a powerful tool that can dramatically improve an image but if taken too far will compromise its quality.

3. Brightness/ Contrast
We’ve just covered brightness using levels. However there is also a tool called brightness / contrast. This may sound misleading, but I wouldnt use the brightness tool to adjust brightness – use the levels instead. Its way more precise. The contrast slider on the other hand is critical. Using this key tool add between 3-8 points of contrast to make your image pop. Adding contrast almost always makes your image look better – just don’t add to much or you will lose detail in the highlight and shadow areas.

4. Sharpness
Sharpness enhances the crispness of an image. it can take an image that may be very slightly out of focus appear crisp. However it can not make an image that is completely out of focus appear in focus. When used correctly sharpness greatly enhances the quality of an image. Additionally, when you take a large image that has a perfect amount of sharpness and reduce it down for web use – it always will require an additional UnsharpMask adjustment to look its best. Like any image adjustments its key to use the right amount – always preview your adjustment to insure you haven’t used too much. the best tool to use to adjust sharpness is UnsharpMask mask located here: Filter>Sharpen>UnsharpMask

5. Saturation
This step is not always necessary but it can come in handy if you have an image that needs to “pop” off the page. You can crank up its color saturation by using Image>Adjustments>Hue/Saturation. Dont use the hue slider on top – this tool is unpredictable and should be avoided unless your going for very dramatic effects. However the saturation tool is a great way to add a bit of color to what may be a lackluster image. What it does is increase the intensity of whatever colors are already in the image. Again the key here is moderation so use it wisely, or your image will appear enhanced. I recommend bumping it up by 5-10 points. This will make the image come to life without looking fake.

There you go. These 5 simple steps can unlock the quality of what may have otherwise been an unusable image.

Tags: curves, fireworks, mega-pixels, photoshop, saturation

Add a custom watermark using batch command.

Posted on Feb 19, 2010 by Neil to General

Have you ever needed to add a copyright, photo credit or logo to multiple images on a site? If the answer is yes – heres a solution that covers not only basic text credits but can also incorporate type effects , image adjustments, re-scaling, renaming and or resizing to multiple images with a single pre-saved command. (For this entry we used Fireworks but Photoshop is equally capable)

Heres how:

1. First create a document that matches the target size of the documents you plan to process.

2. Use this as a canvas to create and place your watermark, photo credit, or logo. Feel free to adjust the placement and appearance using transparency or any type of image effects needed. In the next few steps you will be laying this file on top of any images you wish to watermark so keep that in mind.

3. Save the doc using transparent background png name it template.png.

4 .Open a sample file you wish to apply the watermark to.

5. Now chose import file and import template.png to your canvas. Then save the file using any name you wish.

6. Go to history and select the steps you just made (import and save).

7. Export these steps as a command (name it whatever you like – for example: watermark.js). This will export a .js file including whatever steps you took which will be reused later.

8. Now your ready to batch process as many images as needed.

9. Under file pull down to batch process – keep in mind you don’t need to open any files – its all done using the finder from this point.

10. Chose batch and add all the files you wish to process. You can add files from multiple folders and multiple locations.

11. Click next step and scroll down to commands – you should see the command you created and named at the bottom of the list. (note: you can also apply any of the pre-made commands to your batch process at this time)

12. Complete the steps by selecting your settings and press the batch button to start the process.

13. Go get some coffee while your computer goes through the list of files and completes the task for you.

When working on large scale projects the time savings of batch process can be significant. The downside is getting your commands right is tedious and can produce unexpected results – so it pays to experiment untill you get it right. The plus side is once you have your  test file to where you want it – batch process will rip through as many files as you can throw at it.

Try batch processing next time you need to resize, rename or apply effects to a large amt of images – you’ll be surprised how much time it saves.

Embed Video Content in Acrobat

Posted on Feb 8, 2010 by Neil to General

Adobe Acrobat is a document format with the ability to display contents uniformly across all platforms. Acrobat’s ease of use and page up/down functionality is flawless  - making Adobe Acrobat the defacto format for sharing digital documents.

For most users Acrobat is limited to text and images. Although Acrobat has had the ability to embed video for quite some time – only advanced users with scripting knowledge were able to utilize the feature. In Adobe’s latest release, Acrobat can embed video content with a simple menu item click. This exciting new feature allows acrobat documents to hold multimedia content – further extending Adobes lead in the document sharing world.

Embedding Video into your PDF doc (be sure you have Acrobat 9 PRO) :

1. First, click on the “Tools” menu item in the menu bar at the top of the screen.

2. In this menu click “Advanced Editing.”

3. Now click “Movie Tool.”

4. Using the Movie Tool draw a rough outline of the box in which the video will appear on your page.

5. Once you have drawn your box, you’ll be prompted to browse for the  location of the video you want to insert into the PDF file. Locate the video on your hard drive.

6. Name and save your .pdf document.

7. Thats it – the video should be embedded into your .pdf.

Always be sure to test the .pdf prior to sending out and also be aware of your file size. Embedding video is now simpler than ever;  however if you embed a massive video- your recipients may not be able to download the file.

for more information on how to embed video using Acrobat visit:
http://www.adobe.com

Tags: acroabt, Flash, pdf, video

Rounded Corners Using Photoshop

Posted on Jan 21, 2010 by Neil to General

Using rounded corners in photoshop is a breeze with the new rounded corner tool. Before the rounded corner tool the only way to round images was to use either vector paths imported from illustrator or make a rounded selection path from artwork imported from other applications. The problem with this technique was that it left little room for minor adjustments since the rounded corner image or shape had to be created in a different application. To get it right you would need to import the image into illustrator, adjust the rounded corner shape to the right size then bring that shape back into photoshop. This complicated things and made customization a pain.

In photoshop CS the tool pallette now includes a shape tool. Select this tool and hold down…..a series of shape options including the Ellipse, Polygon, Line, custom shape and the rounded Rectangle Tool. Each of the shape tool options has its own set of properties you can customize.

heres a simple walkthrough of how you can add rounded corners to an image:

- First open an image file

- Now add a new layer in the layers panel

- On this layer using the shape tool draw a Rounded rectangle. Notice that once this tool is selected and the layer is active you can adjust the radius of the corner…..

- Using the Magic Wand or Direct Selection Tool select the rounded shape

- Choose the select drop down and save your selection

- Now in the layers panel chose your image and cut it from the canvas onto your clipboard

- Load the selection shape using select>load selection.

- You should now see a dotted “marquee” outline of your shape / saved path.

- With the dotted “marquee” path still showing chose Edit > paste Into. This will p[aste your image inside the selection shape creating a mask.

- There you go - you should now see your image masked by the shape of your saved path with rounded corners.

- Use the layers panel at any time to make minor adjustments, add shadows, glows or whatever you chose. You can also scale or fine tune the masked image untill its positioned perfectly.

- Export the file as a transparent background png to maintain your transparent background. this way you can overlay the file onto other images or designs seemlessly.

In photoshop theres so many tools and techniques - the possibilities are endless. A good approach is keep an open mind when photoshopping, since many paths can take you to the same goal. Dont be affraid of the tools. Drag layers around reorganize them adjust their transparency. experiment with the tools provided. Often your best designs will reveal themselves to you as a result of a layer interacting with another layer in a particular way that looks good. You may see things that improve the design or detract from it. If you like the way something looks duplicate it onto its own layer. You can then turn that layer on and off or toggle between the two and compare. Doing this allows your designs to evolve in ways that often exceed your initial expectations. With tools like Motion Blur or Zoom Blur combined with all the different layering possibilities...... there are no limits to what you can create using photoshop.

Here is the canvas with tools like layers, Selections, and Rounded Rectangle Shown.

try this site for more inspiration and maneuvers - http://psd.tutsplus.com/

How to purchase / register a domain name

Posted on Jan 13, 2010 by Michelle to General

As a website design, development and marketing company, when a client first comes to us to request more information on creating a website for them, one of the first questions we ask is: Do you already own a domain?

While seemingly an innocent question, from our agency point of view, I have come to realize that the sheer terror this arises in some of our clients, requires a straight forward step-by-step guide to complete this task.

The domain name’s goal:
The domain name itself has one main goal. The main goal of a domain name is to give the public an idea of what information they might see when they land on your site.  Some examples of this are: WebDesign.org, Hotels.com, SEO.com, etc.  When performing a search within Google, if these sites were to appear within the results, based on their domain name, you would have a fairly good idea as to what you could find on their site.

Now that we have the domain name’s goal clarified…Ready to begin?  Grab yourself a cup of coffee, sit back, deep breath and now we can get started…

For the sake of simplicity, I am going to setup a senario for you, and reference it throughout this how to.

Senario:
Tina is a small business owner.  She has a friendship bracelet store in Key West, FL.  Tina has decided to expand her market reach, by venturing online.  She wants a website to feature pictures of her friendship bracelets, show her store’s location and allow her customers to purchase her friendship bracelets online.

Step 1: Research Domain Name Options

The best place to start your domain name research is with your companies brand name, or variations of that.  Start by making a list of your companies brand name and variations of. 

NOTE: it may be helpful to include addons such as LLC, INC, etc.

Tina’s Brand Name List:

1. Tina’s Friendship Bracelets
2. Tina’s Friendship Bracelets, Inc.

Once you have a list of brand name domain name options, start making a list of services/products your company offers, company location and any other relative terms you may come up with.

Tina’s Description List:

1. Friendship Bracelets
2. Friendship Braceletso Store
3. Key West
4. Florida
5. Key West, FL

Step 2: Check Domain Name Availability

The next step is to check the domain name availability.  Utilizing a few different websites, you can do this quickly and with little effort. Register.com is one of my personal favorites.

In a best case senario, your brand name is available and you can move right along to step 3; however sometimes that is not the case.  If you are not that lucky as to have your brand name available, you can utilize these sites to type in different variations of the two lists you have made.

Tina’s Example Variation List:

1. www.friendshipbracelets.com – taken
2. www.tinasfriendshipbracelets.com – available
3. www.tinasfriendshipbraceletsinc.com – available
4. www.friendshipbraceletskeywest.com – available
5. www.keywestfriendshipbracelets.com – available
6. www.friendshipbraceletsflorida.com – available
7. www.floridafriendshipbracelets.com – available
8. www.friendshipbraceletsstore.com – available
9. www.friendshipbraceletsstorekeywest.com – available
10. www.keywestfriendshipbraceletsstore.com – available
11. www.friendshipbraceletsstoreflorida.com – available
12. www.floridafriendshipbraceletsstore.com – available

Step 3: Purchase / Register Domain Name

Once you have determined if your domain name is available, you can now move forward and actually purchase it!  A common mis-conception is that you need to purchase a domain through your ISP; however it is just a mis-conception.  There are many sites that will let you purchase your domain.  Some examples are: www.register.com, www.godaddy.com, www.networksolutions.com, etc.  So, my advice here is to shop around.  Different sites will have different costs.  Additionally, another great option is to purchase your domain when you sign up for your hosting account (how to on this to follow), because they will sometimes add on one domain for free when you sign up for hosting.  Most all of these sites have a simple step-by-step process walking you through the purchase of your new domain.  They usually run something like this:

1. Enter domain
2. Enter contact information
3. Purchase domain

That’s it…you’re done!

Advantages of actionscript tweening vs timeline tweening

Posted on Jan 11, 2010 by Neil to General

So what is a tween? As defined by wikipedia:

“Inbetweening or tweening is the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image. Inbetweens are the drawings between the keyframes which help to create the illusion of motion. Inbetweening is a key process in all types of animation, including computer animation.”

In adobe flash, an easy way to tween is using the timeline. place an object on your stage add a keyframe then dupicate the keyframe, drag it across the timeline to the required location then select the two keyframes. now in the properties panel with both keyframes selected add a motion or shape tween. At this point the two keyframes are grouped and you can move the object in the first keyframe to one location then move the object in the next keyframe to another location. You can even change its color, rotate , scale, etc. since the two keyframes are tweened when you publish the movie you will see the object move in the whichever way you have defined. The tweening creates all the frames between the two keyframes.

At this point you can chose to make this animation its own movie clip then assign that clip to play when you hit a button or you can use the movie clip to add transitions to your flash presentation.

However using the timeline to tween has many limitations.

More advanced users use actionscript to create movement on the stage. Actionscript allows you to use math to create advanced forms of tweening with properties such as easing, elasticity, bouncing, and more precise color control. Additionally, actionscript tweening allows for sequencing of movements, delays, and even callbacks which tell the movie to execute the next action only after the previous event has taken place.

The best part of using actionscript is that it is non linear. Meaning that its timeline independent. With a timeline tween, once you define its movement it cant really change. You can tell it to stop then go again but its still linear. If the animation was done using actionscript I can at any point tell it to do something else. For example I could make a button that on press tells the logo to turn black and rotate 360 degrees while increasing to 250% of its original size.  I can cause this action at anypoint during the previous animation and it will affect the animation seemlessly. In other words midway through an animation i can tell it to start doing something else and it will smoothly change its course and begin its new set of instructions. you cant do that with timeline tweening.

Using actionscript to create tweens also has its own limitations. For one thing its much harder to do. For basic tasks such as fading imgs or moving type its a good idea to stick with basic timeline tweens. In fact most animators use a combination of timeline and actionscript tweens. Since timeline animation is quite visual it can be a good starting point to make things look nice -then more advanced interactivity can be added using actionscript.

for more information on tweening and actionscript visit adobe.com

Tags: actionscript, THAT agency, timeline, tween

The future of web.

Posted on Dec 31, 2009 by Neil to General

Back in 1995 when I first hooked up to the internet things were different. Going online involved an annoying dial in period where your modem made its connection. Once online you could “surf ” the web for design ideas, news items, books, etc. However the content available was limited and it was hard to find quality material. Often your experience left you with little accomplished and much time wasted. This early stage of internet was at some poin labeled internet 1.0 – where the web was just starting to take shape.

Today, the internet and web design have gone to a whole new level. There are agencies THAT specialize strictly in social networking and/or search engine optimization. Most sites are updated in real time and with a few keystrokes into a google search field you will surely find pages of links holding your searched information. Without question the most significant advancement with the internet is the explosive growth of blogging and social networking. These new technologies take internet content to a whole new level allowing individuals connect with people of similar interests and share their personal or professional lives in real time. Posting information in the form of videos, photo albums and memos to certain friends, groups, or even to selected groups based on relevance. now the Internet is not only a resource full of information that can help you find answers, its progressed into an advanced form of global communication. This current phase of Internet use is commonly referred to as web 2.0.

So what does the future hold and when can we expect to be running web 3.0? Its hard to clearly define when that turning point will actually take place but surely its underway and perhaps we are in many ways already into web 3.0. The next phase of the web could be one that takes the existing ability of global communication to the next level. This phase could be marked by web applications able to do seemingly intelligent things. For example applications could extract relevant solutions or options based on your browsing history. The search engines may eventually take into consideration your income level and only post results that reflect that. It would be as if the computer anticipates your needs based on your viewing or buying habits. Without being a living entity a computer improves your web experience through using what could be described as artificial intelligence. Imagine the possibilities? voice recognition? Having a conversation with your digital assistant while getting ready for work? What if your digital assistant detected some stress through voice recognition? “Perhaps you had taken it to far the night before? Let me play some soothing norwegian death metal for you to help get you going this morning…”

What sounded like science fiction 20 years ago is now just around the corner.

Tags: norwegian death metal, SEO, web design