Get in Touch

How can we help?

Whether you are looking to redesign your site or simply refresh your brand, we are here to help!

Prefer to send us an email? hello@imarc.net

Staying Focused on Engineering Tasks

Posted by Jeff Turcotte on September 16, 2013. Tagged: best practices, engineering, open source

Staying focused on engineering tasks, especially large ones, can be difficult. In addition to our regular client work here at iMarc, we’ve continually improved our engineering practices by working on internal projects and libraries. The time spent on internal projects tends to be fractured. It can be tough to ensure that the initial vision of a task is followed through to the end. As iMarc has grown as an organization, we’ve developed some helpful guidelines for keeping the momentum going on our internal projects. Disclaimer: as with any process, there are exceptions to the rule. These are only basic guidelines.

Don't go alone

If you have an idea, it can be helpful to get someone else invested as well. Sure, not everyone will have the resources to help you with the final implementation, but there’s no harm in having someone to bounce ideas off of as you work toward a solution. It can be helpful to have multiple stakeholders, even at a high level, to ensure a project’s success. It encourages everybody involved to work to a standard, and will be a net positive for your team’s communication.

Assign a point person

While working with a team to achieve your goal provides solid benefits, it can’t be allowed to become the wild west. There should be a point person whom has the final say and can manage tasks. Engineers often hold strong opinions—if an agreement can’t be reached, the point person is responsible for making a decision and getting everyone on the same page. Personally, I prefer that no seniority comes into play when assigning a point person. If somebody is passionate about a problem, they are the right person to take the reigns. It also gives anybody a chance to step up and be a leader.

Make a plan

Don’t code right away. I will say it again: Don’t code right away. I think every engineer has been guilty of this at one point or another. You get excited about a solution and with your magnificent wizardry you desire to see something on the screen. All I can say is: STOP NOW. You need to sit down and quietly make a plan. It can be an intricate, detailed document, or simply some scribbly wireframes, but you need to think about the problem. How are things going to work? How does this talk to that? How does the user interact with this piece? Sure, there will be issues that need to be worked out during implementation, but the better the plan is upfront, the more productive you will be when sitting down to code. Be sure to break down any big task into small, manageable pieces that can be handed out à la carte to other engineers.

Don't get distracted by 'the new shiny thing'

There’s always a new framework, library or whatever to play with. If you are halfway through an implementation, think hard before retrofitting some new tool into an existing codebase. In most cases, you’re asking for trouble. Also, what about the task at hand? You’re working toward a goal with a plan and a team, so keep going! Don’t jump off the train. You’ll be happier and more productive in the end. Still, always be aware of the new tools at your disposal, just know that everything becomes legacy. It’s the nature of software, so you shouldn’t fear it. There will always be a chance to use the new shiny thing on your next project.

Document as you code

This will keep you honest and aware of all the pieces in play. Truthfully, there’s nothing worse than skipping documentation, and then having to go back and try to figure out what you (or someone else) were doing. Take the few minutes necessary to write some minimal documentation.

Put in the hours

This may be obvious, but your project isn’t going to write itself! Find a way to commit as much time as possible. You will always have priorities that will need to come first, but try to find a few minutes each day to think and code. If you make a plan with many small tasks, it makes putting in the hours easier. I don’t have extended periods of time every single day to work on internal projects, but If you can even find 15–30 minutes here and there to jump in, get something done, and get out, you’re moving the ball forward. Not to mention that it helps you keep the details fresh in your mind. Coming back to a project after lying dormant for a week or two requires a lot of uptake—it’s best to avoid it.


Best of luck on your own projects!

Keep Your Customers Through Content

Posted by Katie Mack on September 9, 2013. Tagged: content, social media

Today, I was startled by a stat I found in Jeffrey Cohen's "21 Unbelievable B2B Content Marketing Statistics". Right there in the top 5, wedged between gems about the most effective content and how many B2B firms perform content marketing, was this:

Content Marketing Stats

I had to read it again. "Only 25% of B2B Marketers use content marketing for customer retention." How alarming!

The old marketing adage states that it's much easier and less expensive to keep a customer than to bring a new one in the door. Harvard Business Review found that increasing retention by 5% increases profits from 25%–95%. For that reason, it's important for marketers to identify what type(s) of content lend itself for retaining customers, and then make a plan to execute.

4 kinds of content that help retain customers

Here are 4 examples of retention content you can use to engage customers:

Short videos

Short videos are an excellent way to educate current customers. Many of your customers will be visual learners, so seeing instead of just reading will go along way to delivering value. Video you put on YouTube should be 60-90 seconds, but videos on your own site can be longer, at 2 to 3 minutes; according to Cisco's Leslie Drate. And, 84% of IT decision makers forward or share the videos they watch, so make sure it's easy to share.

Blog to educate and inform

Blogging is not just for lead generation. Long-time customers often aren't aware of what you can offer them today. Blogging is a great (and inexpensive) way to keep customers up-to-date on your company's offerings and achievements. This is especially important if your business or offerings have changed over the years.

Be proactive via social media

Social media is a real-time, interactive way to stay in touch and support your existing customers. Actively use it to respond to customer questions, thank customers for positive testimonials, and even address some negative feedback you may have received.

Your customers are choosing to engage with brands on their social channels, whether that be Facebook, Twitter, and/or LinkedIn. Be there for them.

Support content on your website

This is where it all begins – your website! Customers are returning to your site for more information and answers to their questions about your products and services. Make it easy for current customers to navigate FAQs; download help and product guides; and search and access website copy tailored to their needs.

What are your examples of retention content? Ping @imarcllc to share them!

Wide-Angle Composite Photography

Posted by Paul Kelley on September 3, 2013. Tagged: creative

I enjoy photography and love the look of a wide angle shot. The problem for me, and possibly for you too, is that I don’t have a thousand dollars to drop on a sweet wide angle lens. This posed a problem for me when I was planning my trip to Europe this past July. I knew I would be in front of these massive buildings and wouldn’t be able to back up enough to get the whole subject in frame. As you can see below, I can't get it all into my viewfinder.

40mm shot

I entertained the idea of renting a lens, but that can be expensive plus you run the risk of a freak accident damaging a lens that you are now on the hook to fix. There was the possibility of borrowing a lens and, while that certainly took care of the cost factor, the freak accident scenario was now even more treacherous. 

I decided to forget about buying/renting/borrowing and instead I stiched together a bunch of images into one big wide angle photo using a Photoshop feature that I never really play with, Photomerge. 

What you’ll need

  • We’ll start with the obvious, you need your camera. Preferably a DSLR but a point and shoot that can lock your auto exposure should do just fine.
  • A camera card with a lot of free space. Remember each image you want to take will be comprised of a dozen or more so you want to have enough space. Also, a higher write speed is preferable because the wait time between each photo will be shorter.
  • Photoshop. It's what I use, so it's what I know.

Keep in mind

There are a few things to remember when doing this to ensure that your composite image comes out looking its best.

Lock your exposure

Locking your exposure is very important. If you don’t lock it when you meter your first shot, then your camera will try to measure the light that’s in the viewfinder every time you take a photo which will lead to an inconsistent look across all of your photos especially if your subject has a lot of highlights and shadows throughout. If you want the sky to be blue in your image, meter for the sky. If you want your subject and foreground to be vibrant, meter for that.

Use one focal length

If you have a fixed lens, then you have nothing to worry about. But if you don't, make sure you don’t zoom in or out while you’re taking all the images for the large photo.

Overlap each shot

Make sure that you’re overlapping from image to image. If you don’t, then you’ll have gaps in your final photo and that’s not going to give you the results your looking for in the end.

Plant your feet and pivot

Remember that each frame will make up one large image from one focal point. This means you only want to pivot your camera around to take each image as if it’s on a tripod. If you move from left and right or up and down you’ll get weird stretching in your final shot.

Time to make the donuts

Let's get to work. Think about how you want to frame your shot and center the subject in front of you. Positioning your subject off center could provide cool results but let's focus on the little things first and you can experiment later. Remembering what I said about pivoting, take enough images to cover everything you want to have in your final shot. Below are all the frames I used in my shot. I like to start in the middle and make my way around in large circles.

all of my frames

Now that we have all the frames we'll let Photoshop work its mojo. We're looking for Photomerge, it's located under File/Automate.

Photoshop menu

Now all we have to do is select all the images we want to use and check off some settings.

Photomerge tool

When you have everything set, click OK and let Photoshop take it from here. It'll open up the files, place all the frames in the right place and manipulate them so that everything lines up. Depending on how much RAM you have you might want to grab a coffee, sometimes it can take a while. When the process is complete you'll see something like this.

Merged photo

Hopefully your merged image will be very close to your initial vision and will require only minor tweaking. As you can see from my example there's some warping going on so we want to try to fix that and give us a nice straight horizon line.

warped image

Now all you have to do is crop out the jagged edges, and you're pretty much set!

cropping image

final shot

I hope you'll be as happy with your final result as I was with mine. If you're interested in really old European architecture there are plenty of wide-angle composite examples in my flickr set.

Happy Photoging!

The Effectiveness of the Carousel

Posted by Sean Beck on August 23, 2013. Tagged: best practices, strategy, user experience

Most of us are familiar with the carousel, even if we don't know it by name. You may know it as a slideshow or a marquee, but they all have the same functionality. It's generally the first thing a user sees when visiting a site - a big block of rotating content that lies at the top of the homepage. The goal is to show users as much content as possible, while giving them a call to action.

Carousel Examples

These are just a few examples of carousels that iMarc has built for clients. We often include them in sites as they are a common request. But just how effective are these carousels at providing meaningful content and giving a call to action that the users actually take?

Why do we use carousels?

The use of carousels is derived from a need to give multiple pieces of content a center stage on the homepage. Many clients believe it is important to have the most important content lie "above the fold." Generally, this is driven by a need to satisfy multiple departments within a company wanting their content front and center.

From a developer's point of view they are easy to implement due to the abundance of ready-built plug-ins. The combination of ease-of-implementation and the demand from clients makes carousels a very popular tool in the web development industry.

What does the data tell us about carousels?

Unfortunately, most carousels have proven to be less than effective at engaging users. Erik Runyon has some great data reflecting this conclusion.

  • User engagement with the carousel ranged from 1.07% – 9.409%. The high end of the range was an outlier, with the majority of the carousel engagement being in 1-2% range.
  • Within that 1-9% range, the first slide in the carousel was clicked 54.57% – 89.1%.  Subsequent slides had engagement as low as 2.4%. This mean that slides were engaged by as low as .02568% of users. You can see why this could be a problem.
  • On the bright side, it seems randomizing the order of the slides helps with engagement. If the first slide is different everytime a user lands on the page, then the engagement should be spread out equally across all slides.
  • Using a carousel that automatically switches between slides raises engagement. The site that used an autoplaying carousel had the highest engagement, at 9.409%. It also had the highest engagement for subsequent slides, which ranged from 7.97% – 17.87%.  Both of these figures are significant deviations from the other sites tested.

What about iMarc specific data?

Recently, iMarc conducted user testing for the a client's website. After providing the users with a series of tasks to complete, we asked them if they could recall what the three slides on the homepage carousel were about. Zero of the testers were able to list back all three correctly, and the majority were only able to recall the first slide. Further, we found the less content that was on a carousel slide, the better. This is especially important if the carousel auto-scrolls - users must be able to quickly scan the content before the slide transition occurs.

What should we take away from this data?

Before I wrote this post, I was ready to throw out the idea of carousels all together. Having looked at the data, I still believe they are not very effective at engaging users. However, if you must use a carousel there are several paths to improvement.

  • Randomize the order of the slides for every user when they land on the page. This prevents the first slide from being the only content the user engages with.
  • Turn on autoscrolling. Many users have difficulty finding or using the navigation controls for carousels. This prevents them from ever seeing anything but the first slide.
  • Continually refresh the content in your carousel. Often times the carousel is used in a prime spot for promoting new material. If content is left to linger, it can become stale, wasting real estate that could be used more effectively.

Lastly, I'd like to point to Dave Tuft's post on "above the fold" which is a good complement to this post. The use of carousels and the emphasis on above the fold content for webpages are two common points of contention. It may be time to rethink both.

Conditional Widths Using the Adjacent Sibling Selector

Posted by Marcel Moreau on August 21, 2013. Tagged: best practices, engineering

All of the websites iMarc builds have administrative areas where clients can control their web content. One common content type clients like to control is photo galleries. When creating a photo gallery in iMarc’s CMS, a site adminsitrator has the ability choose what sections of the website to display it in. We typically output these into an aside. For example, a client creates a photo gallery of their staff’s annual outing. They would like to show this not only in their About section, but also their Community section because many local colleagues attended.

For a front-end developer, this unknown can be problematic. How can we ensure that our layout will handle one or two columns properly?

Layouts

Adjacent Sibling CSS Selector

I’ve found that using a CSS adjacent sibling selector handles this essentially as a conditional statement:

aside.primary + .main { margin-right: 220px; }

Is there a div.main following an aside.primary? If so, then give div.main a right margin to push it away from the aside. If there is no aside, then div.main will fill its parent with 100% width, as block level elements do.

This allows more flexibility for our main column. We do not need to set hard widths in our CSS based on section.

Browser support for the adjacent sibling selector is IE8+.

Here’s a demo via this fiddle.

Kill Two Birds With One Phone

Posted by Kevin Hamer on August 14, 2013. Tagged: mobile, technology

I drifted around the office and did a quick survey of what sorts of mobile computing devices people use in the office.

  • Everyone in the office has a smart phone. There were a few hold outs, but now everyone's running iOS, Android (or WebOS.)
  • 60% of us have tablets. Even more amusingly, aside from one person in the office, everyone with a tablet also has a laptop.
  • 90% of us have laptops. Whether an iMarc provided laptop or not, nearly everyone in the company has at least one laptop.

With smart phones only really becoming common place over the last five to six years and tablets (just counting web-capable devices with touch displays) really only showing up significantly in the last three to four, both have become staples of our culture and business. While laptops aren't new, even over the past two and half years we had at least four people convert from desktops at work to laptops.

The Ubuntu Edge campaign really got me thinking about device convergence. My phone is already my media player and my GPS, but we might not be that far away from it taking on even more roles.

Attempts at Convergence

The Ubuntu Edge is hardly the only device trying combine phones, tablets, and PCs together. Here's some current examples of how companies are trying to make devices that function in more than one role.

Devices Covering Multiple Roles

device overlap

Making Phones Bigger (Samsung, Sony, and HTC)

While this certainly isn't limited to these three companies, these three stand out. HTC is up to 5.5", Samsung is up to 6.3", and Sony just came out with a 6.4" screen device. With small tablets really focused around 7–8", the gap is practically nonexistent.

Keyboard Optional (Microsoft and Lenovo)

While again, not limited to these two companies, both Lenovo (Thinkpad Helix) and Microsoft (Surface) have devices which have removable keyboards, to either convert a laptop to a tablet or a tablet to a laptop.

Putting a Phone in a Tablet (ASUS Padfone)

This isn't a new product, but its certainly a rarity to see in the wild. The ASUS Padfone Infinity for example, came out this year as a phone with a "tablet dock" to provide a bigger screen when you want it. The Padfone is Android 4.x based.

A Phone With a Laptop Dock (Motorola Atrix)

The Motorola Atrix also hasn't really taken off, however the "laptop dock" for the phone makes it a fairly unique phone-laptop hybrid.

Phone with a Desktop OS and Specs (Ubuntu Edge)

The Ubuntu Edge is trying to make a big jump forward in device convergence by getting people to literally buy into the idea of a phone that they can connect to a keyboard, mouse, and monitor to use as a desktop.