We Are Communication Architects

Building brand awareness through content creation and community engagement.

January 18th, 2013

CSS Clip Property Explained

It wasn’t until recently that I became curious with the Clip property in CSS. It’s not a commonly used property and I think part of the reason may be due to some misunderstanding on how to use it. I must say it’s one of the less intuitive properties to use but not that difficult once you get used to it. So let me try to say something that’s already been said before, but in a way that may reach you differently. For illustration, we’ll use a 500px x 300px image that has overlaying grids of 100px x 100px.

It’s important to note this can only be applied to absolutely positioned elements. The clip property takes a shape declaration. Currently only a rectangle, rect(), is supported and it takes values in the normal order of Top, Right, Bottom, Left. So, for example:

img {clip: rect(20px, 40px, 40px, 20px); position: absolute;}

As you can see, the values are comma separated. Here’s where it gets tricky. When you are specifying the Right and Bottom values, those are actually the distances from the Top and Left of the image as well. And one more hurdle, if you’re not using a clipped area from the top left corner, you will need to use the absolute positioning to ‘pull’ the image back into place. So if you start 20px from the top and left, set your position elements like so:

div {position: relative;}
img {position: absolute; top: -20px; left: -20px; clip: rect(20px, 40px, 40px, 20px);}

Crickets chirping

Where’d you go? Ok, you’re still with me? Barely? Ok, yeah, that’s not intuitive. So let’s think about it in a different way. First figure out how large you want your clipped image to be. Let’s go with 100px wide and 100px tall and isolate Beaker’s nose (8). Now just think about how far from the top and the left you want it to be. You need it to start 100px from the top and 200px from the left. With that in mind you have normal values we’re used to. Right now we’re looking at this:

img {clip: rect(100px, R, B, 200px); position: absolute;}

Since we know that we want the image to be 100 x 100, we just add 100 to the values we already have. After adding dimensions to our div to give it layout and pulling it back into position with Left and Top, we end up with:

img {position: absolute; clip: rect(100px, 300px, 200px, 200px); top: -100px; left: -200px;}
div {position: relative; width: 100%; height: 100px;}

Do you see what happened? We said we want to start 100px from the Top and end (Bottom) 200px from the Top. We said we want to start 200px from the Left and end (Right) 300px from the Left. Make sense? Maybe one more example will help.

This time we want a true rectangle that is 300px wide and 200px tall. We want to start this one 100px from the top and 100px from the left. Knowing our Top and Left values we have this:

img {clip: rect(100px, R, B, 100px); position: absolute;}

Since we want it 200px tall, we add that to our Top offset of 100px to get 300px. Now we have this:

img {clip: rect(100px, R, 300px, 100px); position: absolute;}

Since we want it 300px wide, add that to our Left offset of 100px to get 400px. Now we have this:

img {position: absolute; clip: rect(100px, 400px, 300px, 100px); top: -100px; left: -100px;}
div {position: relative; width: 100%; height: 200px;}

Browser support for it is excellent, and by that I mean IE supports it in the universal form starting with IE8. Even lower versions of IE support it, but without the commas in between numbers.

About the Author
Pete Schiebel is the lead front-end developer for the Platforms team, described by some here as the "front end MacGyver" for how he works to make sure client projects look and function as advertised. Follow him on Twitter @sneakepete.

Filed in CSS, Development

January 14th, 2013

Voce Monday Morning Five: 1/14/13

  • Youtube’s evolution from cute cat videos to Gangnam Style: This says more about the aesthetics of and mass participation in web culture than anything else. As web culture has become more about inclusion (“going viral”) vs. being “first to publish” that obscure piece of content, aesthetics have trended towards that which is most easily consumed by the largest number of people. This is in opposition to earlier, more rough-and-raw aesthetics that might be of much higher cultural value but were too obscure to travel to wider and wider circles.
  • The AP Has Started Selling Its Twitter Feed: While this is, yes, a big deal, there’s little that’s new in form and function here. Companies have for years been experimenting with adding advertising to their social network feeds. What makes this notable is that it’s an news org doing it, but in the days of “native advertising” this doesn’t seem like the kind of thing that seems too far out from the ordinary.
  • Meet the four social networks bigger than Facebook (in some countries): When building global social programs it’s important to take stats like this into account since each country or region seems to have a unique network that people there are using.
  • Whither the Brand Website?: There has clearly been a change in perception as studies done in the earlier days of social media marketing all trumpeted that corporate sites weren’t considered trustworthy. This is all the more reason to structure a program around the hub and spoke model.
  • Brands Experiment With Photo-Messaging Service Snapchat, Facebook Poke: Snapchat seems to be getting more attention in the wake of Facebook launching Poke, which is a direct Snapchat competitor. But the intrusion of advertising and marketing into the service, which is primarily used by teens, is likely to turn that audience off to the tool as a whole.

Filed in Marketing, Media, Publishing Programs

January 11th, 2013

Voce’s 2013 CES Media Dinner

For the sixth year in a row we hosted the Voce CES Media Dinner, a gathering of Voce clients, employees and the top tech journalists in the industry. Away from the flowing currents of people filing the halls of the Las Vegas Convention Center, the annual media dinner is an opportunity to slow down from the day’s activity and spend time conversing with peers and catching up with friends.

Each year the Voce CES Media dinner seems to grow, with familiar faces and first time attendees filling the upstairs dining room in the Canaletto with tech banter, war stories from past CES trips, laughter and stories of the occasional CES celebrity sighting.

This year we were lucky to spend the evening with clients from PlayStation, SanDisk, HP, Sony Entertainment Network and over 30 tech journalists from publications such as The Wall Street Journal, Boston Globe, CNET, Associated Press and others. There are a lot of bars, restaurants and people in Las Vegas for people to spend their time in and with and it’s an honor to be able to host this event each year with such a great turnout comprised of the best people in the tech industry.

It’s a little early and probably a faux pas to begin discussing next year’s CES while the current one is still going, so let’s just say it was a great show, another wonderful year for the Voce CES Media dinner, and we’ll look forward to seeing you again next January in the desert.

Filed in Voce Clients, Voce Culture

January 2nd, 2013

The Continued Evolution of Media Platforms

So this is the place I should be making some sort of predictions about what’s to come in 2013, right? I should be pontificating on how this will be the year of engagement, or the year near field communications sends promoted Facebook posts straight to your Google Glass headset or some such, is that the thing? Because in all honesty I’m always aghast at attempts to do so since there’s almost never a year – heck, almost never a week – where the endpoint is so drastically different than what was foreseen at the start.

By way of example let’s look at Instagram. No, this isn’t more faux outrage over a small (and not that big a deal unless you purposely read it looking for opportunities to get your outrage on) change to the terms of service there. Instead it’s about Instagram embracing the web.

Earlier this year Instagram, which had heretofore been almost exclusively based on mobile platforms, gave photographers sharing their pics there a web presence they could link to and on which their fans could Like photos and leave comments. In and of itself that was a big change to Instagram’s public identity and the way people could interact with photos and others.

But then it made another interesting step when they launched an aggregator page for New Years Eve photos, marking what I believe to be the first time Instagram has taken to collecting photos published on their service and created a destination for them. Meaning a service that was purely mobile just a year ago is now driving people to a web page on purpose.

Anyone see that coming? Cause I don’t remember seeing “Instagram starts to sever its sole reliance on mobile” on any lists a year ago.

(Bonus points to anyone who saw this launch and thought “Huh, that seems more like something Twitter would do than anything Facebook has ever done” and then chuckled to themselves at random times while getting odd looks from family members.)

And the fact that it came out of the blue means the only prediction that’s ever safe to make is that things will change. Some people may be bored with the state of the tech industry (something that I think has more to do with the press’ reliance on covering funding, patents and the like than any real lack of innovation) but the reality is things are always in flux. There are always changes happening and very few of them can be seen coming down the road. In other words, if you’re bored it’s because you’re not paying attention.

2013 will have lots of such changes happening. As professional communicators it’s not our job to see the future happening, though we obviously can make intelligent predictions as we put together client programs. It is our job to watch what’s happening and make any necessary adjustments based on what has or hasn’t changed. So good luck with your predictions but make sure that the guidance being given or taken isn’t based on predictions but on the ever-changing reality in front of you.

About the Author
Chris Thilk works on the Client Services team, part of Voce Connect, developing and executing social media strategy. You can follow him at @christhilk on Twitter.

Filed in Programming

December 4th, 2012

Not Getting Enough Support for Social? Go Straight to the Execs

It’s almost 2013, and let’s be honest, most people – even executives – now understand that this thing called “social” does have value. But that does not necessarily translate into even a basic knowledge of what social is or why it is so important, and it certainly doesn’t always translate into adequate support or funding to put social on par with more traditional marketing efforts.

There are a host of ways to try to change the mindset at a company, but one of the most successful ones can be to go straight to the top: educate the executives and secure their personal sponsorship of social media programs. Yes, plenty of organizations have successfully managed to advance social from the bottom up, but this post is focused on seven tips for gradually converting executives into social media champions.

  1. Have a Plan – First, make sure that you have a coherent plan and strategy in place. Your plan should show that this is not a fly-by-night idea, that you’ve already been making progress, that you’ve got others on board, and that a lot more can be accomplished if the executives throw their weight behind it. You of course should already have a full social strategy if you’re doing your job right, but you’ll want to tailor it and narrow it down to a few key points for when you get in front of an exec.
  2. Get in Their Face – Sometimes the most challenging step is simply getting in front of the execs. While it’s unlikely you’ll have a chance to present your full social strategy directly to the leadership team (if you do, see tips 5 and 6), think about other ways to get in front of them. Stop them in the hallways if you see them or speak up and ask a question at an All Hands meeting. Consider setting up posters near where execs congregate to spotlight social, or install TVs showing a feed of customer complaints on social.
  3. Make Friends – As you’re looking to get in front of execs, look to others to help as well. If it’s going to fall on you exclusively, you’re in for a much larger challenge. Arm teams, friends, colleagues, and anyone else you know who may have contact with execs with a few key data points and an elevator speech. Think about setting up an intern/exec buddy system to pair social-savvy interns with the executives who you’re trying to teach social to. And of course make friends with the executives’ EAs.
  4. Start With One – If you can get the ear of even one executive, use it to the fullest extent. Try to figure out a particularly suitable “gateway drug” to get that individual involved in social so they can develop an understanding firsthand. If they’re good on camera, start a video blog. If they’re known for brief, value-packed comments, start them up on Twitter. Then focus on promoting their activity to drive up their stats and play to their ego, which in turn can convert them into an evangelist for all things social. Note, however, that some execs can require extensive coaching or start focusing on the wrong stats (follower count, etc), so don’t expect it to be an easy process. But it can often be a contagious one; if one exec dives in, the rest won’t want to be left behind.
  5. Showcase Successes – If you have any sort of social media program, chances are you’ve been able to achieve some level of success with or without the desired level of executive sponsorship. Use those existing successes – whether metrics or anecdotes – to build momentum for your social program. Create succinct case studies in a format that will resonate with executives and start sharing them up your own chain of command and with anyone else who will listen. If you get those around you excited about what you’re achieving on social, that enthusiasm and those success stories will gradually make their way up to executives.
  6. Demonstrate Value – As you develop these case studies, focus on the value that they drive for the company. Rather than spotlighting the number of new Facebook fans in the past month, point to examples – even anecdotal examples – of social media impacting corporate priorities or especially the bottom line. Ideally you should be able to point to social referrals as part of your website’s conversion measurements, but even that only accounts for some of the social ROI. Talk to the other teams, especially the sales teams, to find out if they have stories to share, and don’t be afraid to use anecdotes to demonstrate value.
  7. Go Grassroots – Finally, never underestimate the impact of a grassroots campaign. Train employees across the board on social – especially in-person training where you can give them rewards, stickers, or some sort of schwag that can spark others to ask them where they got it. Leverage those already involved on social (whether personally or professionally) across the organization to help contribute to and amplify success stories. Get as many folks excited and involved on social as possible, and you’ll soon start to see that enthusiasm spread quickly across – and up – the organization.

There are certainly challenges with going straight to the execs, not the least of which that it’s often difficult to get in front of them. Just as important, though, it is often (though certainly not always) difficult for execs that have a very limited understanding of social to truly “get it” without repeated coaching and patience. It’s a process, a gradual process, but hopefully these tips can help make it a more successful one.

Filed in Social Media

December 3rd, 2012

Voce Monday Morning Five: 12/3/12

Filed in Marketing, Media, Microblogging, Publishing Programs

November 26th, 2012

Introducing Lift Search for WordPress

I’m excited to announce the release of a WordPress plugin our team developed to help better the search experience of WordPress-based sites — Lift Search for WordPress.

What is Lift?

Lift is a plugin for WordPress that leverages the search index power of Amazon CloudSearch to improve your WordPress-powered site’s search.

Why create Lift?

If you’re familiar with implementing WordPress as a content platform, you may also be familiar with how out of the box WordPress search doesn’t always fit the needs. I can say that for us, we solved search in a case-by-case way. Sometimes it was using out of the box WordPress search. Sometimes we’d use Sphinx. Other times, Solr or Google Custom Search. Each had their plusses and minuses, but I was never happy with the fact that we never really came to the table with what we felt was a best-case solution.

We liked what we saw with Amazon CloudSearch, but there were not any WordPress plugins that could easily integrate indexing and search. That’s where Lift comes in.

Lift is a search product that’s the result of our team’s combined experience with a wide range of large-scale WordPress projects. We’re releasing that back to the community to hopefully help those feeling the same pains we did.

Why use Lift?

We are huge believers in the power of this plugin. We have created this for those who have outgrown the capabilities of built-in WordPress search and would like to retain control over things like indexing and results presentation. If you’re looking at options for search, take a look through Lift’s website as well as the documentation

A few things to note:

  • Lift relies on Amazon’s CloudSearch service for true content indexing rather than wildcard database queries.
  • Lift does not rely on any services to run server-side and can be leveraged on any web host.
  • Lift is built with flexibility in mind as we needed this to work for a variety of projects across a variety of interfaces. Its beauty is in its simplicity.

We hope this can be helpful for others in the community. If you have thoughts, we’d love to hear them!

About the Author
Nick Gernert leads the Platform Services team that's part of Voce Connect and oversees all web development efforts as well as making sure all those efforts are strategically sound. He is on Twitter as @nickgernert.

Filed in Voce Platform Services, WordPress

November 19th, 2012

Voce Monday Morning Five: 11/19/12

  • New Tools for Business in the Pinterest Community: Businesses have, to date, operated on Pinterest with a blind eye from the company, which technically forbid such operations. This makes business profiles official and could open the floodgates to more adoption, though what the benefits are with this new business-type profile remain murky outside the promise to hear about new features and developments early.
  • Online viewers start leaving if video doesn’t play in 2 seconds, says study: Performance matters, and small improvements in how well your platforms deliver your content can have big impacts. As always, it comes down to the user experience and meeting their expectations. This goes for how a site is designed, how many (if any) ads you put in their wary and more. But when it comes to video make sure the player being used is as easy to view as possible or risk low viewership.
  • Social Customers’ Great Expectations: 83% Want a Response Within a Day:  This is in slight disagreement with a previous study showing the number of people looking for social support online was small, but the conclusion – that responding rapidly, genuinely and correctly – remains the same.
  • Halflife by Topic: A very good look at how long readers engage with a click that’s been shared on a social network and how the lifespan does or doesn’t differ by topic. Individual results will vary but this is likely a good benchmark to use as client expectations are set.
  • Retweeting Without Reading? Yeah, It’s Happening: Retweets are often held up as a big, important metric in determining the success of a publishing program. But as this study shows that’s not all that accurate, or at least doesn’t have a significant impact on the bottom line, assuming the bottom line is getting people to read the linked-to material.

Filed in Microblogging, Publishing Programs, Social Networks, Video

October 29th, 2012

Voce Monday Morning Five: 10/29/12

Put together while hoping all East Coast Vocians/clients/partners and everyone else stay safe this week.

  • Twitter Users Who Mention Top Brands Have An Increasingly Amplified Voice: Consumer behavior around brands online continues to shift. The drop in tweets with a link is most interesting since, as the report suggests, it means there are more actual conversations going on as opposed to just “This is cool (link)” updates.
  • Blog Frequency Produces Real Traffic, Lead Gen Results: This simply reinforces the existing advice that the more you increase your digital footprint – the more connection points you create for people to latch on to – the better. There’s a line, of course, at which it becomes too much but few companies running their own publishing programs run into that problem.
  • On Twitter Brand Retweets Are Up but Original Posts Are Down: This is mixed good news for brand marketers since it shows that people are increasingly more likely to amplify a brand-approved message than they are to say something original. But on the downside it shows that more and more passive behavior is taking over, something that could mean declines in the number of people taking a desired call to action like clicking through.
  • Why the “Want” Button Doesn’t Work for Social Commerce: It’s not as simple as just presenting a pretty picture for people, you have to move them. Interestingly this moving of “both levers” seems to be what Facebook’s Collections testing seems to be about achieving.
  • Content – 2013 B2B Content Marketing Benchmarks, Budgets, and Trends: The study shows that the bigger the B2B company the more tactics are in use, which shouldn’t be surprising but which also underlines the idea that it may not be a lack of interest in a content strategy restricting its usage, it may just be a lack of resources.

Filed in Blogging, Microblogging, Publishing Programs

October 22nd, 2012

Voce Monday Morning Five: 10/22/12

Filed in Marketing, Media, Publishing Programs, Social Networks

Voce Photo Stream