You can read more about all of these great organizations and causes, as well as a number of others, within the Good Deeds section of our website. Likewise, if you have an opportunity to which we can contribute in 2013, please let us know.

From Mudbug Media and New Orleans, thank you for a wonderful 2012, and happy New Year!

This year, our card began as a collaborative effort among the entire design team and one member from each department at Mudbug. This mega Mudbug team of designers and department representatives brainstormed together to come up with a holiday card idea. Scott, our president, suggested along with other department representatives that the card be something practical, something the recipient would find useful. With this goal in mind, we set out to develop a holiday card that was not only beautiful and full of holiday cheer, but also useful enough to not get thrown away at the end of the season with the rest of the holiday decorations and cards. We wanted recipients to remember Mudbug Media and keep us on their desk all year round.

At this point in the holiday card development, the design team had several awesomely creative ideas gathered from our brainstorming session. With all these ideas at hand, it was the task of our holiday design team to sift through and dig out the very best, and in the end, sometimes the simplest solution is what’s most fitting.

This is why our beautiful 2012 holiday card consists of a catchy holiday jingle, an illustration of our funky New Orleans atmosphere, and a calendar to keep track of the next year to come. The outside of the card shows the New Orleans cityscape with the Mudbug building wrapped up in a big holiday bow, while the inside reveals our office space with our famous red couch and our fabulous view. All of this is accompanied by our very own custom holiday jingle and a 2013 calendar.

This year’s holiday card design team consisted of Design and Web Development Manager Theresa Fischbach leading the way in management and overall holiday card design strategy, and our two newest designers, Katie Hedrick and Katie Gernhauser. The Katies, under the lead of Theresa, designed and developed both the inside and outside of the card, illustrating and putting together both the calendar and poem to form this delightfully versatile holiday card that doubles as a year round calendar and mini piece of art work.

Wishing you a very Merry Mudbug Holiday Season, from our office to yours…

Happy Holidays and a Happy New Year !

Pinterest has become the third largest , as well as one of the fastest growing, social media websites. After launching in March 2010, Pinterest was slow to gain traction. But, after summer 2011, traffic grew rapidly from approximately 5 million visitors a week at the beginning of October 2011 to over 21 .5 million weekly visitors by the end of January 2012. Not only has total traffic on Pinterest increased, but it has also become a excellent referral source, as Inc.com saw last year when Pinterest drove as much or more traffic to their site than Facebook.

What and How to Pin

At its core, Pinterest is a visual social network that brands can use to promote their visual content. Most brands already have great visual content they can use to build their Pinterest boards, such as the images on their website, or from advertisements and brochures.

When pinning images to your Pinterest boards, there are several tricks you can use to increase both the possibility of your image appearing in search results, and the number of re-pins and link clicks back to your website:

• Use Hashtags - Similar to Twitter, Pinterest uses hashtags to identify and categorize images.
• Gift Labeling – For users using Pinterest as a shopping guide, one of the most popular sections is the Gift section. By adding a $ before the price in the image description, your pin will appear within this section.
• Linking - While a pinned image will automatically link back to its source, don’t forget to also add a link back to the specific page of your website within the pin description.
• Create Pinboards Based on Customer Personas - By separating images that are relevant to each type of customer, it will be easier for followers to find the images that interest them.
• Pin Strong Images – Use enticing colorful images in blog articles that can be pinned and direct traffic back to your blog.
• Infographics and Data Charts - Infographics are often very visually appealing and offer a lot of information to followers as well, increasing the possibility of being repined. (When pinning infographics don’t forget to include a brief description of what the data in the graphic represents.)

No matter what, it is important to post relevant images for your niche that will increase brand identity and credibility. Focus on trying to be a resource for customers and avoid over-the-top self-promotion.

Growing a Following on Pinterest

Follow other pinners that are interested in the same topics or pin topics related to your industry. As with all forms of social media, consistency is key; by pinning everyday (or on a regular schedule) follower numbers are more likely to increase. In addition, by pinning on a regular basis you will be able to maintain your following, because followers know that they can trust you to frequently provide new pins on topics that interest them.

Other ways to grow your following includes:

• Repinning images that are relevant to your brand from your followers
• Integrating Pinterest into your comprehensive social media strategy-by linking your Pinterest account to your other social media accounts (Twitter, Facebook, Google+, LinkedIn)
• Addition of a Pin It Button or Pinterest Widget to your website

User-Generated Pinboards and Pinterest Contests

An interactive way to grow an engaged following on Pinterest is to use user-generated Pinboards. User-generated pinboards are boards on your brand page that other users can pin images to, allowing select customers and fans to contribute to your page and share their ideas. A great way to utilize user-generated pinboards is to launch a contest in which followers pin something that they either like or is related to your brand. For example, a camera company running a contest in which fans pin a favorite picture taken with the company’s camera, and then the picture with the most re-pins wins a prize.

Pinterest Business Profiles

Last week, Pinterest announced the launching of official business profiles, which look the same as personal Pinterest profiles but require website authentication. In addition, Pinterest now allows businesses and individual users to embed pins and boards on third-party sites to help grow their following. While the features on business profiles do not differ from individual pages, the company stated in an interview, with AdAge, that they do anticipate adding more tools and features to help business grow, measure, and engage with their followers.

Since Katrina, we’ve run a colocated “emergency” server to mirror our office’s file server and replicate the databases from our staging web/application server. However, in August 2012 when Hurricane Isaac set its sights on our city, our offsite server started showing indications of a hardware failure. After migrating the bulk of our servers to cloud servers last year, this was our only remaining colocated server where we were in charge of the hardware.

Instead of trying to fight with a fix, we decided migrating this functionality to cloud was our best option, where we wouldn’t have to worry about future hardware failures.

Moving to a new server on a tight deadline means that we need a way to get our data onto the new server as quickly as possible. Amazon Web Services recently released their new Amazon Import/Export service. Instead of slowly uploading terabytes of data over your network connection to your cloud server, which could take weeks depending on your network speed, you can ship an external hard drive to their data center.

Amazon copies the files on the drive directly to S3 or images the drive to EBS, and then ships the original drive back to you. The end result is that terabytes of data can be pushed to the cloud much faster than going over a network connection. Amazon’s Import/Export service is effectively sneakernet for the cloud, and as the adage goes, “Never underestimate the bandwidth of a station wagon full of tapes hurtling down the highway.”

Preparing the Drive

For our use case, we wanted to be able to access our files directly from our new server hosted on Amazon’s EC2 service, which meant importing to EBS instead of S3. When deciding to do an EBS import, it’s important to remember that this is a literal block-level import of the drive. The underlying file system is going to be copied verbatim, block for block. If you have a 3TB disk with only 1TB of files on it, you’re going to end up with a 3TB image when Amazon imports it.

In our case, our files were coming off of a Mac OS X Server, and we wanted them to end up on a Debian Linux instance on Amazon. This meant that the drive we sent them had to be in our desired Linux-compatible file system, like ext4, instead of the HFS+ that Mac OS X prefers to use. Mac OS X doesn’t have a built-in or great third-party option for writing to an ext4 file system.

To get around this issue, we decided to virtualize a Linux instance from our Mac OS X server using the Vagrant command line tool as a front end to the VirtualBox virtualization software. We mapped our external USB import hard drive to the VM, mounted our source files to the VM as a “Shared Folder” from vagrant, and used rsync to copy from the shared folder to the USB drive.

Once the drive is ready to be shipped, you need to download Amazon’s command line import/export tool (.zip) . Once downloaded, you’ll need to customize the `samples/ebs-import-manifest.txt` to specify your return address, destination region, device information, and an S3 bucket where you want the images to be saved to if your drive is over 1TB. You’ll also need to edit `AWSCredentials.properties` to specify your AWS authentication credentials. Once your files are setup, you need to open Terminal and create the request:

gabe@gabe-work ~/Downloads/importexport-webservice-tool $ java -jar lib/AWSImportExportWebServiceTool-1.0.jar CreateJob Import examples/ebs-import-manifest.txt .Version: 2011-07-05

…..

JOB CREATED

JobId:    GXWUJ
JobType: Import

Shipping instructions saved to /Users/gabe/Downloads/importexport-webservice-tool/./
shipping-instructions-GXWUJ.pdf

SHIPPING INSTRUCTIONS:

1. Open the Shipping Instructions file with a PDF reader.
2. Print out the Shipping Instructions which includes the AWS Shipping address and Signature barcode.            3. Follow the directions in the PDF file, which includes cutting out and securely attaching the Signature barcode to your device.

*IMPORTANT* - Failure to attach the Signature barcode to your device will prevent AWS from loading your data. This barcode can only be used with 1 device.
***************************************
* Warning Message *
****************************************
The maximum EBS volume size is 1TB. Sending a device larger than the maximum EBS volume will result in a raw disk image in your log bucket as opposed to a snapshot. The raw disk image can be copied onto multiple striped volumes.

This command generated a .pdf file in the current directory with the shipping information and a barcode to be taped to the drive. This is not a shipping label; drives sent to Amazon are mailed out with your own preferred shipping carrier and method to get the drive to them. Amazon does cover the return shipping through UPS ground. Curiously, even though we were importing to Amazon’s us-east data center, we were still shipping the drives to Seattle.

You can also list out all the jobs you have:

gabe@gabe-work ~/Downloads/importexport-webservice-tool $ java -jar lib/AWSImportExportWebServiceTool-1.0.jar ListJobs Version: 2011-07-05 JOBID CREATED TIME GXWUJ Mon Sep 24 12:30:22 CDT 2012 ListJobs returned 1 jobs.

or manically monitor your job until you see that Amazon has received the drive and loaded your data:

gabe@gabe-work ~/Downloads/importexport-webservice-tool $ java -jar lib/AWSImportExportWebServiceTool-1.0.jar GetStatus 5US8WVersion: 2011-07-05

…

JOB FOUND

JobId:                                               GXWUJ
CreationDate:                                 Mon Sep 24 12:30:22 CDT 2012
JobType:                                          Import
LocationCode:                                Returned
LocationMessage:                          Your device has been returned.
ProgressCode:                                Complete
ProgressMessage:                          The data load completed
ErrorCount:                                     0
LogBucket:                                       s3.import.example.com
LogKey:                                            import-log-GXWUJ
Carrier:                                             UPS
TrackingNumber:                           1Z1E12341234123412

To retrieve shipping instructions, the SIGNATURE file, or Signature barcode, please use the GetShipInfo operation.

Mounting the Import to the Server

Once Amazon has finished your import, it’s time to get it loaded onto your server. There’s a few things that make this tricky:

1. EBS volumes can be a maximum size of 1TB
2. If the drive you sent Amazon was larger than 1TB, it will be saved as a series of 1TB image files on the S3 bucket you specified in your manifest file when creating the import job

I found Amazon’s documentation a little incomplete when it came to these steps, but I received great answers and fast turn around from Andrew when I emailed them for more details.

To achieve EBS volumes larger than 1TB, you will need to create and attach multiple 1TB EBS volumes from the EC2 web console. You’ll then need to use software RAID on your EC2 instance to join them into one drive. Although using software RAID against network devices may cause you some initial doubt, doing so with EBS is a fairly common technique. It’s often used for database instances for both increased performance when striped across multiple volumes, and to work around EBS’s occasional flakiness with redundancy gained by RAID10.

In this example, I have my EBS devices mounted as sdm, sdn, and sdo. In this case, we’re only doing a RAID0 instead of a RAID10, because the extra availability is not worth doubling our costs for this server.

root@emergency:~# mdadm –create /dev/md0 -l 0 -n 3 –chunk=256 /dev/xvd[m-o]
mdadm: Defaulting to version 1.2 metadata
mdadm: array /dev/md0 started.
root@emergency:~# cat /proc/mdstat
Personalities : [linear] [multipath] [raid0] [raid1] [raid6] [raid5] [raid4] [raid10]
md0 : active raid0 xvdo[2] xvdn[1] xvdm[0]
3221224704 blocks super 1.2 256k chunks

Now we need to get our data from S3 onto our EBS RAID. After importing, we have the following files in our S3 bucket:

• image-GXWUJ-0000.bin (1TB)
• image-GXWUJ-0001.bin (1TB)
• image-GXWUJ-0002.bin (746GB)
• import-log-GXWUJ

Amazon has a special tool for this purpose called S3-cat. I couldn’t find a reference to this tool on Amazon’s website, but their support was helpful enough to send us a download link at https://s3.amazonaws.com/awsimportexport/S3-cat.tar.gz

Download and untar this file onto your server. You’ll need to edit the `AwsCredentials.properties` and create a manifest file listing the S3 bucket and path to your .bin files:

root@emergency:~# cat sample_manifest
root@emergency:~# s3.import.example.com/image-GXWUJ-0000.bin
root@emergency:~# s3.import.example.com/image-GXWUJ-0001.bin
root@emergency:~# s3.import.example.com/image-GXWUJ-0002.bin
root@emergency:~# java -jar S3-cat.jar –credentials AwsCredentials.properties — manifest sample_manifest –output-file /dev/md0 –log-file s3cat.log –download

I’d recommend doing this in a screen session in case you lose your ssh connection to your server, but otherwise you can also replace the `–download` with `–resume` to pick up where you left off. The command will give you an update once per second about the progress. Our import of 3TB took about 12 hours and maintained a steady 65MB/s write speed with a 3-drive RAID0 — pretty respectable for such an operation.

Progress: 15.998%          447.1 GB of 2.7 TB           65.1 MB/s           0d 10h 15m 19s to go
Progress: 15.999%          447.1 GB of 2.7 TB           65.1 MB/s           0d 10h 15m 19s to go
Progress: 16.02%            447.2 GB of 2.7 TB           65.1 MB/s           0d 10h 15m 18s to go

Epilogue

Keep in mind that this service is not instant; expect it to take a day or two to just write your data to your external hard drive, the time it takes to ship the drive to Amazon’s data center, half day to a day it takes for Amazon to read all the data off of the drive and put it on S3, and the extra half day to stream the data from S3 onto your RAID of EBS volumes. However, this is still significantly better than dealing with the bottleneck of your office’s upstream bandwidth, which would have resulted in a multi-week affair that would have interfered with everyone’s day to day bandwidth needs.

In the end, our office lucked out, and survived the Isaac without a loss of power or network services. However, if disaster did strike, it was comforting to be able to get our data offsite and up so quickly. Amazon’s email support was fast and detailed. We’d absolutely recommend this service for anyone looking to load a large amount of the data to the cloud quickly.

Client: Dr. Kruse, Twin Cities Orthopedics

Industry: Healthcare

URL: http://jaykrusemd.com/

Campaign Type: Search Engine Optimization

Board-certified orthopedic surgeon Dr. Jay Kruse is the primary surgeon at Twin Cities Orthopedics, a Minneapolis and Twin Cities-based orthopedic and sports medicine clinic, specializing in joint replacement, hip surgery, knee surgery, minimally invasive surgery, and sports medicine.

Goals and Objectives

To leverage Dr. Kruse’s existing website as a lead generating tool by increasing the practice’s likelihood of being found by in-need patients who will ‘most benefit’ from the treatment and care options offered by Dr. Kruse.

Over two quarters, Mudbug Media implemented a search engine optimization strategy. The strategy was evaluated, and updated as needed, at the end of each 90-day period. Mudbug Media focused on:

• Increasing total search engine traffic
• Increasing the number of non-branded procedure-related search terms that drive search traffic
• Improving search rankings for target key terms including the geographic modifier “Minneapolis, MN”
• Increasing the percentage of new organic search visits to jaykrusemd.com

Measurement

Using Google Analytics and log file-based analytics programs, Mudbug Media identified the following metrics as key performance indicators:

• Organic Search Engine Traffic
• Search Engine Rankings for Target Key Terms
• Traffic Driven by Non-Branded Search Terms
• Percent of New Visits from Search Engines
• Number of Search Terms Driving Organic Search Engine Traffic

Strategy and Execution

Based on a comprehensive interview with Dr. Kruse about the goals for the Twin Cities Orthopedic website, as well as an in-depth review of the search traffic and rankings of Dr. Kruse’s website using Google Webmaster Tools and Analytics, the SEO team at Mudbug Media determined a set of ten target search terms at which SEO strategy would focus.

The execution of the defined optimization strategy centered around the implementation of structural improvements to the website’s HTML, creation of unique and targeted SEO content, internal and external link building, and reputation management. To drive additional in-need patients to Dr. Kruse’s website, the Paid Search team at Mudbug Media developed and executed a targeted pay-per-click campaign during the second quarter of SEO implementation.

Results

• At the end of the second quarter, jaykrusemd.com ranked in Google search results for 9 of the 10 targeted search terms, after previously not ranking for any of the targeted terms at the start of the project
• Dr. Kruse’s website was appearing on the first page of Google search results for 4 of the 10 targeted search terms see figure 1
  
• Organic Search engine visits increased from 17 to 138 (more than 8 fold) see figure 2
• During the second quarter, organic search results brought in a higher percentage of new visits, with 75.91% of search engine visits being new potential patients, compared to the percentage of new search visits to jaykrusemd.com during the first quarter (43.90%) see figure 3, 4, & 5
• During the second quarter, search traffic accounted for 52.77% of total site traffic, an increase of more than 30% see figures 6 & 7
• The number of organic search terms driving traffic to Dr. Kruse’s website increased from 38 to 82
• The Paid Search campaign increased traffic to Dr. Kruse’s site by 34.24%
• Non-branded search traffic increased, with 22 more non-branded search terms (searches that did not include the practice or physician’s name) driving visitors to jaykrusemd.com
• Non-branded organic search traffic visits increased from 15 to 58 visits

Figure 1: Search Engine Rankings for Target Key Terms Results

Back to results »

Figure 2: Organic Search Engine Traffic

Back to results »

Figure 3: Percent of New Visits from Search Engines

Back to results »

Figure 4: Pre-SEO New Search Visits; New Search Visits is 43.90% of Total Site Traffic

Back to results »

Figure 5: Post-SEO New Search Visits; New Search Visits is 75.91% of Total Site Traffic

Back to results »

Figure 6: Pre-SEO  Search Traffic Distribution; Search Traffic is 20.00% of Total Site Traffic

Back to results »

Figure 7: Post-SEO  Search Traffic Distribution; Search Traffic is 52.77% of Total Site Traffic

Back to results »

Below are recaps of just a few of the great presentations from the most recent Social Media Week.

Social media & Mobile: Is Your Social Media Strategy Mobile-Ready? – Social Media Week Chicago

As two-thirds of traffic on Facebook and Twitter currently comes from mobile devices, mobile is the most powerful social media tool, and it is only going to get more powerful. However, a mobile-ready social media strategy isn’t solely about social media platforms, it is also about the call-to-action within messaging (tweets & Facebook posts).

If you are using social media to drive people to your website, you should assume that a large amount of your followers or fans will be viewing your social media messaging on their mobile devices. A recent Google study reported that 61% of mobile users are more likely to leave a non-mobile friendly website before completing the call-to-action, than a mobile-friendly website. If you don’t have a mobile-friendly website for followers to access when clicking a link posted to Facebook or Twitter, you will most likely lose customer engagement.

Having a mobile-ready social media strategy means having consistent engagement with users across all channels: full and mobile website, social media, and traditional media.

Raves and Reviews: How Consumer Feedback Can Make or Break Your Business – Social Media Week Chicago

Online reviews can have a large impact on a potential customer’s decision on becoming a patron of a business. During the presentation, Laurie Foster, the National Dealer Training Manager at Cars.com, focused on how to manage online reputations by:

• Monitoring online feedback and reviews
• Leveraging consumer generated content
• Learning from negative comments and promoting positive reviews
• Understanding and responding to consumer reviews

One thing that I really struck me from the presentation was the discussion about how consumers view online reviews of businesses, and what can influence their decision to trust a review. When reading online reviews, consumers often place a lot of value on the percentage of negative and positive reviews. If all the reviews are positive, consumers will often not fully trust the reviews. In comparison, if all but one review is negative, and that one positive review is five-stars and includes nothing but praise, consumers will often view that one positive review as false and most likely written by the company to improve ratings. Consumers often prefer a natural mix of positive and negative reviews, as they are more likely to trust the reviews.

Is Viral Really Viral? A YouTube Campaign Case Study – Social Media Week Los Angeles

During this event, Simon Jones, the SVP of marketing at the advertising agency Alphabird, dicussed how to integrate social video into a marketing strategy and engage a quality targeted audience. The presentation focused on the three components of a viral video:

• Content – A video that creates an emotional reaction for viewers.
• Contact – Creating awareness of the content for an initial audience, by making sure that the content is discoverable.
• Context  - How viewers become aware of the video, who is watching, and why they chose to watch or share the video.

One thing that I found interesting was the focus on using a multi-channel strategy to distribute the video, and the importance of creating specific messaging and calls-to-action for each delivery channel.

Keynote: Erik Qualman, “Socialnomics” – Social Media Week Chicago

Are you failing fast? Are you failing forward? Are you planning better?

These are questions that Erik Qualman, author of the popular books Socialnomics and Digital Leader, posed to his audience at Social Media Week Chicago. During his presentation, he discussed the importance of “going back to the basics”, remembering that the key components of social media are:

1. Listen
2. Interact
3. React
4. Sell

He discussed why social media is not meant to be limited to one department or one role, instead it takes on many different roles including sales, PR, marketing, and customer service.

The presentation also focused around the importance of responding to both positive and negative mentions on social media. Many companies react only to negative mentions or feedback; but, he explains that reactions to positive mentions are just as important. Don’t be scared of negative comments; instead, view to them as opportunities to turn your customer’s negative experience into a positive one. As Erik Qualman calls it, focus on being “Flawsome”: through your flaws, show your awesomeness.

If you are interested in watching replays of these presentations, or any of other videos from Social Media Week, head over to LiveSteam for a full list of archived presentations.

For a recap of the first bi-annual Social Media Week of the year, which took place this past February, check out Social Media Week 2012: A Global Platform.

What is CSS3 Keyframe Animation?

Keyframe Animation is a technique of animating that transitions objects smoothly between two states (i.e. keyframes). CSS3 Keyframe Animation uses CSS code to enable a browser to natively animate without having to enable a proprietary third-party plug-in like Flash. Modern browsers have the ability to hardware accelerate much of the rendering process, and because CSS3 Keyframe Animations are rendered by the browser instead of Flash, much of the visual heavy lifting can be passed off to the much more efficient video card. CSS3 Keyframe Animations are currently the only way to view animations on mobile devices; modern mobile devices do not officially support Flash. Like many new CSS3 features, CSS3 Animation works in modern browsers but is not supported in older browsers such as IE9 or lower.

Because animations should be used sparingly and as a progressive enhancement, the use of CSS3 Keyframe Animation can be promoted. Just make sure that your layout or navigation still work without animation, in case a visitor has an older browser which doesn’t support the feature.

Below is a step-by-step example of how to use and implement CSS3 Keyframe Animations. Animation can be a great way to add a finishing touch to a design, but it is always important to provide a fall back for users on outdated browsers. By using graceful degradation, the act of planning for newer code to degrade gracefully in older browsers, one may think of animation as a visual reward for users who are using modern browsers.

Let’s get to work!

Today we will be creating a simple keyframe animation of a blinking cat. I created a static mockup of a cat to use as our guide when web enabling. For more information on the purpose of a mockup, please visit my previous blog on Why Good Design Takes Time »

Preparing the Image

The first thing that I do when animating an image using CSS3 Keyframe Animation is to separate out the parts of the image that will be static from the parts that will be animated. For this example I have exported the image of the head and ears as a transparent png. We will create the eyes through CSS shapes and will add the nose as a transparent png.

Creating the Eyes and Adding the Nose

I created a div around the image with a class of .cat and will use this as my reference container to position the eyes and nose. I then created two divs with the classes of, respectively, .left-eye and .right-eye. I also added the image for the nose and gave it a class of .nose.

Below is the CSS for the cat on the left. I used “border-radius” to turn the default square divs for the left and right eyes into circles; the CSS3 property transform with the value of scale turned the circles into ovals to match the mockup. This is achieved by using an uneven scaling, a 1 to 1.6 ratio, to scale the circles to create the oval of the eyes. The eyes and the nose are positioned into place using absolute positioning. Below is the css used to achieve this effect:

Using Keyframe Animation to Animate the Eyes

Now that the eyes and nose are created and positioned into place, we are ready to animate the eyes. I begin by creating styles depicting the different animation properties I would like to apply to the cat’s eyes. This code can be seen below. One of these properties is called “animation-name”. Keyframe animations need to have unique names that can be associated between the object being animated and the keyframe animation code. In this case I named the animation “blink”. After an animation-name has been decided, you may chose its duration – the length of time for the animation. Through experiment with different lengths of time, I have determined that 6 seconds was the amount of time needed for the desired effect. The “timing-function” describes the rate at which the animation is carried out. The timing-function is set to linear; this means that it will animate smoothly from start to finish without any acceleration or deceleration at the start and finish of the animation. The default timing-function is linear; you can choose from many different timing functions such as ease-in/ease-out, or define your own using the "cubic-bezier" value, so I recommend you play with theses options to see which one works best for your project. I then set the animation to delay for 2 seconds so that the blinking doesn’t start immediately when the page is loaded. The last thing I did was set the animation-iteration-count to infinite so that my cat would never stop blinking.

After the animation information has been set up, it’s time to define the different keyframes of the keyframe animation. Individual Keyframes can be placed at different percentages throughout the length of the animation from 0-100%. The length of the animation, or animation-duration, is determined by the code listed above. In this example this keyframe animation is called “blink” and will last for 6 seconds with a two second initial delay and will repeat infinitely.

The blinking animation is achieved through scaling the eye from its oval shape to a flat line by compressing the oval vertically. The eye is then returned to its full size creating the illusion of blinking. This action takes up 5% of the keyframe animation’s time. The other 95% of the time is spent with its eyes open and the eyes are kept at its original 1 to 1.6 ratio (the height is 1.6 times larger than the width).

When the animation loops, the cycle repeats and the cat appears to blink. For the first 2% of the animation the cat’s eyes are skewed to 0% of its original height, giving the illusion of closing its eyes. From 2%-4% of the animation the eyes remain closed. At 4%-5% of the animation the eyes re-open by skewing the now flat shapes back to ovals. I have reached these percentages from experimenting with different amounts of time allocated to each movement until I have achieved a smooth and believable transition for the shape of the eyes; I also recommend that you experiment with these percentages to customize this example for your unique project.

Let’s Review

We have successfully created a CSS3 Keyframe Animation that gracefully degrades for browsers that do not support the animation. Older browsers that do not support CSS3 Keyframe Animation will view a static image of a cat and their usability will not be affected. Don’t forget that while modern browsers do support these techniques, they still require the use of prefixes such as -webkit for Safari and Chrome or -moz for Firefox.

These techniques can be applied as more than just fun Easter eggs, but to enrich your visitor’s browsing experience. By adding animations and transitions to hovers, it can help smooth the transition between different states to show that the website is responding to the visitor’s actions. It’s easy to go overboard with animations, so we should remember that less is sometimes more. Adding animations to a website will greatly affect the visual balance of the design because the animation will naturally draw the visitor’s attention. Make sure to account for this when designing to maintain the hierarchy—the order in which visitors read content on a page—of your website. By maintaining your hierarchy, you will ensure a rich environment that your visitors will be sure to enjoy discovering.

Agile originally began as an approach to software development, but the ideas and practices have been adopted by those with a variety of skill sets, including design and marketing. By using an Agile approach, marketing becomes about being adaptive and responsive. The following are a few of the key components of the Agile approach to marketing:

• Responding to change
• Adaptive approach to marketing
• Focusing on data and measurable results
• Short term goals
• Engagement and transparency, creating open communication with your customers
• Working with others, in a more cohesive work environment

Where Agile Can Be Beneficial

Agile marketing has come into play more frequently in the marketing world of new media: content strategy, analytics, inbound marketing, and social media. Agile marketing encourages collaboration between teams, which is critical with the rise of integrated marketing strategies. Instead of keeping departments and roles separate, design, SEO, social media, analytics, traditional media, etc., become integrated when using the Agile approach.

The ability to easily respond to change, engage with consumers, and quickly adapt to changes can be very beneficial to SEO, PPC, and social media plans due to their constantly changing nature (i.e. algorithm changes or popularity of a new social media platform). In addition, the focus on short-term goals and adaptability of Agile can be beneficial to marketers working on multiple campaigns and/or media channels.

The Agile Marketing Manifesto

This summer, the Agile Marketing Manifesto was created out of SprintZero, a meet-up of a group of Agile marketing practitioners at Mindjet in San Francisco. The manifesto was formed around the ideas presented in several independent Agile Marketing manifestos published over the past few years. Using those documents as a starting point, the community gathered and voted on what they believed to be the seven core values of Agile Marketing:

1. Validated learning over opinions and conventions
2. Customer focused collaboration over silos and hierarchy
3. Adaptive and iterative campaigns over big-bang campaigns
4. The process of customer discovery over static prediction
5. Flexible vs. Rigid Planning
6. Responding to change over following a plan
7. Many small experiments over a few large bets

To start, the New Orleans-based office welcomes back its remote team for a week of fun and productivity. Mudbug is known for its diversity and flexible work environment. Flying in from Washington, DC, Atlanta, New York, Houston, Sacramento and San Diego, the team gathers in New Orleans every quarter of the year, and the office becomes a lively commune where bigger ideas are explored, and key objectives are revisited.

Our president Scott offers his vision:

“I feel that it is vital for our remote employees to meet in person with our New Orleans based group on a regular basis. This interaction will improve our workflow, enhance our interdepartmental training and help all of our team find the solutions to complex issues that our customers need us to solve.”

Let’s not also forget the food and fun! Here’s the Fall Mudbug Con roster:

1) Volunteer Event: White Linen Night (sponsored by Whitney Bank in a community effort to raise funds for the arts in New Orleans)

2) Mudbug Company Lunch: (On the Menu: Nola Smokehouse) The Mudbug team convene to break down quarterly and yearly goals, while also keeping up to speed with the progress of the company’s health and objectives.

3) Department Lunches: The Programming (On the Menu: St. Lawrence Restaurant & Bar), Design + Front-End Development (On the Menu: The American Sector), and MAAS (Marketing, Analytics and Account Strategy, On the Menu: Lüke) departments meet internally to discuss their short and long term goals.

4) Rock-N-Bowl: To break from the busy schedule and office activity, the Mudbug team spends the evening knocking down a few pins, while enjoying live music.

5) Weekly Training (Recess/Study Hall/MAAS Training): Each department meet once a week to train and learn new industry-standard techniques and methodologies, which can then be applied to client projects/deliverables and meet current trends/standards. Designers took a break from the hefty schedule during Mudbug Con Week to get in tune with their fun, creative side. In their Recess, designers constructed letters out of poster paper to create office decor for the newly minted “Creative Suite, ” a spare room converted to usable creative space, great for brainstorming and kickstart meetings.

6) Afternoon Tea: Every other week, to get a nice mental break from work for an hour, the whole company meet to find inspiration and explore ideas over snacks and tea. For Mudbug Con Week, the plan was simple: Paint Party! The office got a facelift with re-painted walls and decor. Everyone donned their old school sweats and splashed new color on the walls.