The Three Ps of iMarc's "Special Sauce"

Posted by Nils Menten on June 27, 2014.

This has been a big growth year for us in many ways, and there are three fundamental things that we have to execute very well on for that to happen. If you're interested in how we work our magic, here's the recipe for iMarc's "Special Sauce":

Structured Process 

In fact this is always a work in progress, and evolves with nearly every project because it's so core to our operations. It's been nearly 17 years since we first started producing web projects, and we've learned quite a lot about what works really well, and made our share of mistakes along the way too. For brevity on our site here we've distilled it into three primary phases: Discover, Create, Innovate, but each of those include a lot of sub stages, checks and reviews, and collaboration points with our clients and our internal and external project partners. If you don't develop and stick to a sound process its easier to get derailed and lose control of a project. 

Best Practices

I frequently refer to this as the "dovetailed joints" of our work, the part of our craft that is unseen by many, but has such a large bearing on the long-term stability, security, and potential for ROI of our work. There's so much that goes on under the hood to make the work great - how we provision and manage our servers and development environment, the developer tools we create and use, the professional code standards we adhere to, our discovery, design and UX techniques, and much more. We work very hard to stay current with the best practices of our constantly-evolving industry, and we have collected all of our best practices in our Company Handbook. If this is your business too you may feel free to use them and we hope you find them as valuable as we do. http://handbook.imarc.net/

Great People

None of this works at all without great people, and we have that in large measure. Have a look over on our "About" page and meet the team. Many of the crew have been with us for 10+ years, and although we do enjoy a deep bench of excellent freelancers and contractors that help with our projects now and then, we rely on full-time staff for the most part, and we're happy to show them off on our site. These are the people that produce the award-winning work and we're proud of them and grateful for the contributions they make every day to our company and our clients.  

 

 

How to Use Font Awesome Icons in OmniGraffle

Posted by Marcel Moreau on June 25, 2014. Tagged: user experience

font awesome omnigraffle

My last post related to OmniGraffle social media stencils seems to garner continuous web traffic, so I figured this post may be helpful to others who like me, have stumbled when trying to integrate Font Awesome icons natively with OmniGraffle.

I had a few problems getting this to work. If I could do it all over again, here are the steps I'd follow:

  1. When installing the .otf file on my Mac, install using Font Book’s Add command. Do not drag it into the program. Do not copy it into my user account’s ~/Library/Fonts directory.
  2. Like Font Awesome's cheatsheet page instructs, set your application’s (OmniGraffle) font to FontAwesome.
  3. Copy an icon from this page into OmniGraffle. Simply paste on your canvas. Are you getting a white background fill you can’t remove? Copy and paste it once again but this time from within OmniGraffle. Yeah, I know.

Common Design Tasks and Hacks: Volume One – Logo Isolation

Posted by Christian Keyes on June 13, 2014.

I love hacks, tricks, and shortcuts. My favorite thing is learning a strange new technique to easily accomplish something. Here in the creative room, we're constantly discovering new quirky ways to get the job done. Some of my favorite techniques were shared with me long ago by friends and colleagues. Since everyone here at iMarc wears many hats, developers and UX experts are often on the hook for some mild Photoshopping and typically have fairly common questions. Here are two that I hear all of the time. This will surely be a multi-part series.

"Hey, I need to put this logo on a different background, but it isn't transparent. How can I select just the logo?"

First off, ignore traditional palette based selection tools. The lassoo won't help you. The magic wand might seem tempting, but there is a better way. Channel based selections!

Step One:
For the purpose of this tutorial, we'll start with a flat, one color image. Open up your "Channels" palette and click the first icon in the footer, "Load channel as selection". This will select all of the white in the image as an alpha transparency.

Load Selection
Step Two:

Invert the selection (Select > Inverse) to select only the dark area.

Step Three:
Make a new layer (Layer > New > Layer) and fill it with the original color (Edit > Fill).

Step Four:
Hide or delete your original layer and you'll have your artwork on a transparent background to save or use however you need.

Transparent Selection


"We want to use this logo on a dark color, but I can't get it to look right."

Inverting the logo and setting the blending mode to "screen" is a good start for a monochrome logo. However, something with some color requires a little extra finesse.

Source
Step One:

Bring your logo or artwork onto the new background.

Step Two:
Invert the layer (Image > Adjustments > Invert). At this point, it will look almost correct, but your colors will be the opposite of what you want.

Inverted
Step Three:

Open up your Hue and Saturation controls (Image > Adjustments > Hue/Satruation) and slide the hue slider as far as it will go in either direction. Your artwork should now look like an inverse of the original with some respect for the original colors.

Hue inverting

Step Four:

Set this layer's blending mode to "Screen" and admire your work.

Final

If you have strict color guidelines, you can use a variation of the first technique to obtain a similar result. Experiment and see what works best for you. Invent a new technique altogether if you have to!

The greatest part of working the way we do is that each person will have a slightly different and interesting way of accomplishing the same task. There are no wrong ways of doing things like this. Keep looking out for more unique and helpful tips from the creative room!

More is Less: How to cripple your website in one easy step

Posted by Robert Mohns on June 9, 2014. Tagged: best practices, strategy, user experience

Have you ever noticed how even with a nice fast browser like Chrome, some sites can be really slow to load, and even stutter as you try to scroll down the page? Why is that?

Heck, why should we even care? Your content is already great, you’ve put in the time to make the design awesome, you’ve tailored your CMS technology to your content, and you’ve made sure your visitors can find the content they want. You’ve built it, and they will come, right?

Speed Matters

Consider:

Google has been trying to explain this since at least 2009. According to Google Research’s Speed Matters blog, slowing down a page as little as four-tenths of a second lowered traffic by half a percent.

Now, considering that conversion rates are typically around 2% to start with, do you really want to throw away any visitors?

KISSmetrics puts it succintly: “If a site is making $100,000 per day, a 1 second page delay could cost you $2.5 million in lost sales every year.”

“This site takes forever,” Tom said slowly.

So what makes your site slow? Assuming that you’ve optimized your images, aren’t loading unneeded CSS and scripts, and are generally being a good craftsman, it’s probably not your own site.

If you run a website, external services are among your best friends. With just a couple lines of Javascript and a quick copy-and-paste, you can add analytics, comments, slick fonts, social sharing, product reviews, videos, slides, heat maps, marketing automation tools, tracking beacons, good old fashioned ads… you name it.

They’re incredibly popular. Check out all the widgets and trackers used by these popular sites:

Tracker Overload

But when you add half a dozen or a dozen widgets, you start to slow down your page loads. Thus lowers conversion – your visitors become impatient and abandon your site.

Show me the data!

I went digging, looking at some of the worst offenders, such as RadioShack.com and Engadget. (I wanted to analyze Huffington Post, but their site has so many trackers that even the web inspector was getting wiggy.)

What I found was that it’s almost never any single widget or plug-in that was the problem. Here’s a pretty typical one – a SellPoint commerce tool used at RadioShack.com:

Sellpoint load time on RadioShack.com

It takes the browser a moment to look up the server. It then sends a request, waits for about a twentieth of a second for a reply, and in about a hundredth of a second it has the script. This resource also blocks blocks page load for about 79ms – less than a tenth of a second. That’s a bit higher than most, but within variance. Overall load time for Sellpoint: 100–150ms. Pretty good.

But RadioShack.com has 23 widgets and trackers, and many of them require several resource requests to get everything they need. Radioshack’s core page is pretty tight, but by the time all the rest of the resources load up, all those tenths of a second have added up to four seconds before the page is actually responsive, and it takes eight seconds to finish loading every last resource.

The situation on news sites is even worse:

Atwola blocking Engadget's page load

Engadget loads 23 services, but they’re not as fast as the services RadioShack uses. Here we see an atwola.com resource blocking for 67ms and taking over 90ms to reply, just to load a measly 860 bytes of data. (That’s about three paragraphs worth.)

The DOM was ready (which means the user can see content on the screen) in 1.3 seconds, which is great. But it took 15.8 seconds to load all the resources Engadget has piled on. And while that was happening, scrolling was janky and unpleasant, and the layout would flicker every few seconds as new scripts ran.

And then there’s security.

Earlier this year, some hackers found a novel way to deface a site. They couldn’t crack target server, but they found a weakness in a web stats service the target used. Specifically, the service’s DNS records were on a vulnerable server, so they took over that server, then redirected the stats script requests to a malicious server. Boom. Now the visitor’s browser was running JavaScript that it thought was coming from a trusted location.

The hack was functionally harmless – a political statement, not a financial attack or identity takeover or botnet installer. But it could have been much worse.

With every outside service you add, you add a potential vulnerability.

TL;DR: Keep it under half a dozen.

So, should you eschew all of those fantastic external services? No way! They’re great. Keep using them. But don’t use all of them.

As a rule of thumb, you should expect that each service you deploy will add around a 100–150ms to your page load time. You can afford to load up four or five, maybe even six, assuming the developers of the service themselves value performance.

Be choosy. Don’t duplicate. Pick one stats tool and love it. One marketing automation or visitor tracker. One ad network. One social sharing platform. You get the picture.

Bonus tip: How to Speed Up Your Web Surfing

Install a tracker blocker. It’s really that easy. Some good ones include:

  • Ghostery – I’m quite fond of this comprehensive blocker. It provides fine-grained blocking and is regularly updated.
  • Privacy Badger – From the EFF, Privacy Badger only blocks services that appear to be tracking you across multiple sites without permission. Slick.
  • Adblock Plus – The grandaddy of ad blockers, this community project targets ads, popups and video ads.

Contributing to an Open Source project

Posted by Jeff Turcotte on May 30, 2014. Tagged: open source, technology

We work with a lot of open source code and tools. Because of the nature of software, there are a lot of times when these tools are missing features we end up adding in, and when possible, it's nice to contribute back. Sometimes patches are accepted, and sometimes they are not, but it never hurts to share code with a broader community in the event that someone might find the enhancements useful. Here’s what I have found that makes for a successful open source contribution more often than not:

Gauge interest & do some research

Not completely necessary, but has this feature been requested? Has the project maintainer made positive comments around similar features? Has someone already written the same thing you were interested in and there is an outstanding pull request? You can learn a lot from looking through GitHub issues alone.

Pick a reasonable scope

Best to stay away from any major overhauls. Unless you have the blessing of the core contributors, focus on one or two new features. This means less code, less tests, less review, and most importantly, less barrier to acceptance. Just like any software project, the smaller the scope, the better chance it has.

Follow the conventions and rules

Don’t rustle any feathers. If there are contributor guidelines, be sure to review them. When writing your code, follow all of the styles and conventions that are already in place. This alone makes your enhancements look like they belong. It’s valuable to analyze the way someone else has written something even if, in the end, you still prefer your own style. As far as PHP is concerned, PSR-1 and 2 have helped out somewhat with defining best practices for style, but there are still plenty of libraries that don’t conform, so do your best to fit in.

Be complete in your enhancement

Is all of the code you wrote properly commented? Is there documentation or a user guide that needs to be modified as well? Have you written tests? Did the tests pass? I’ve seen so many abandoned patches/enhancements simply because the author just threw together some code without taking the time to finish the job. Frankly, any new features without tests or docs are pretty much worthless to the project maintainer. Be sure that all bases are covered before you submit anything back to the project.

Clearly communicate the details

When you’re ready to submit your features back, most likely through a pull request, be sure to describe your feature in detail. Explain the problem it solves and dive into the specific use case that you felt needed to be addressed. A nice quick code example of how the new feature works is ideal, with a link to more details if necessary. It also can’t hurt to have a pleasant tone and conclude by thanking the project maintainer for taking the time to review your enhancement.

---

None of this is a guarantee for a successful enhancement to an open source project. If you’re lucky or have a good reputation, it could be accepted right away, but most likely, the maintainer will have some changes they want made before accepting and you can work with them to do so. Still, by following these general guidelines, you have a pretty good chance of becoming a productive contributor to an open source project.

Taco Truck Friday

Posted by Robert Mohns on May 30, 2014. Tagged: culture

Nick recently told us about Metzy's Taco Truck. Maribeth organized an outing. Today, most of iMarc found Metzy's at the Plum Island airfield. We even had some family join us.

Metzy's tacos are amazing. Add lawn games, friends and family, and you get an Awesome iMarc Friday.

Taco Truck and iMarcians

Mat & Maribeth

iMarcians & Airplanes

iMarc Wins Again!

Posted by Katie Desmond on May 22, 2014.

We always put our clients' goals and objectives first and awards tend to be the last thing on our mind but, we have to admit that it is still very exciting to be recognized for our work. While we know we deliver exceptional value for all of our clients across all of our disciplines including strategy, UX, design and development it's always nice when someone else lets you know what an incredible job the team has done. So without further adieu, I am proud to announce that we are winners of both the New England Society for Healthcare Communications (NESHCO) Lamplighter Awards and Academy of Interactive Arts and Visual Arts Communicator Awards.

NESHCO Silver Lamplighter Award

The NESHCO Awards honor exceptional marketing in healthcare. Last year we won a Silver Lamplighter Award for the Anna Jaques Hospital website so to follow it up again this year with the Women's Healthcare site is thrilling! We are so grateful for the honor and to continue to partner with the Anna Jaques team.

Communicator Awards

The Communicator Awards honor excellence in marketing communications and with over 6,000 entries received from across the U.S. and around the world, it's the largest and most competitive awards program that honors the creative excellence for communicationcommunicator awardsprofessionals. And yes, we won three new awards!

iMarc was honored for the design and development of the Off The Front Productions, RSA Conference and Women's Healthcare sites.

Congratulations to all of our award-winning clients and my fellow iMarcians for amazing collaboration and of course driving great results. We look forward to see what the rest of 2014 brings!

iMarc Welcomes Mat Olsen!

Posted by Patrick McPhail on May 13, 2014.

After a perfect-in-duration hiring process, involving a number of excellent applicants, iMarc is thrilled to announce the addition of Mat Olsen to the team. Mat will be joining Team &wich (led by Yours Truly) as a Lead Web Engineer; responsible for bringing the functionality and requirements in all of our/your projects into reality. 

Mat has extensive experience developing in ColdFusion, an excellent foundation in programming in general, and I can tell you we were just blown away by his code samples and homework (yes, we give homework during our interview process). We're all very excited to have him as part of the iMarc team and are looking forward to years decades of productivity. 

How to Give (and Take) Constructive Design Feedback

Posted by Paul Kelley on May 5, 2014. Tagged: creative, design

Constructive feedback — not everyone is good at giving it and some people just don’t know how to receive it. Constructive feedback isn’t about personal preference and it’s not about whether you like it or not. It’s always about one simple fact; does it solve the problem?

Giving Constructive Feedback

You can start by putting your ego aside. This isn’t about how you would have done it; it's about how the design provides a solution to a specific problem. Therefore, when looking at a design, the question you have to ask yourself is, “How effectively is this solving the problem at hand and is there something that can be done to improve the solution?” All of your comments should be based on the answer to that simple question.

Words to Avoid

It’s important to remember that not everyone has the same tastes. One aesthetic does not always fit all. The words like and dislike have no place in constructive feedback. There are movies I don’t like that have won Academy Awards. There is music I don’t like that have won Grammys. Not liking something doesn’t mean it doesn’t work.

The overall goal of providing feedback is to create a better end result and resolve a problem. Unclear feedback can make it difficult for us to improve the outcomes. Some examples include: 

  • “I hate that red color.”
  • “I’m not a big fan of the font you’re using for the headers.”
  • “I don’t like font sizes you're using.”

However constructive feedback can help us deliver an even better experience; such as:

  • “That red is a bit distracting which makes me overlook the important calls to action.”
  • “The font you’re using for the headers doesn’t compliment the body copy very well. Did you try using one with a similar height?”
  • “I find myself straining to read some of the content. Making the font size a bit larger would fix that.”

Receiving Constructive Feedback

As designers, we start off the same way and it’s even more important the second time around to put your ego aside. You’re not going to have the midas touch each and every time. If everyone is telling you that you missed the mark on a desired look, don’t go down swinging trying to defend your design. Fix it and move on. Your work will be stronger because of it.

It's Not Personal

While it may be the hardest thing to remember, it's not personal. It’s natural to get defensive about your work so it’s hard to not take it as a knock against your skills. Just because someone is telling you how to improve something doesn’t make you a bad designer. Getting feedback and learning how to best implement that feedback will only make you better.

If you do disagree with a piece of feedback and feel you should keep it the way it is, make sure you detail the reasons you’re not changing it. If someone took the time to look over your work and give you detailed, constructive feedback the worst thing you can do is ignore it and pretend nothing was said.

Always remember your favorite does not mean its the best. Sometimes you have to learn to let go when it comes to your work. You’re going to have favorites, it’s inevitable. When you create half a dozen logo concepts for a client it’s impossible not to have a favorite. Just remember that your favorite might not be their favorite. It’s your job to create and pitch concepts that work. You should be proud of the work whether it was your favorite or not. Again, don't get defensive if a client doesn't like your favorite concept.

Overall, giving and receiving constructive feedback is a skill you develop as you mature as a designer. It’s not easy but with practice it’ll become second nature and you’ll be a better designer, and person, because of it.

5 Tips for Creating Great Content

Posted by Nils Menten on April 23, 2014. Tagged: best practices, content, SEO, strategy, user experience

5 Tips for Creating Great Content

It sounds so simple, and in fact, it is. Want a great website? It’s gonna need great content. It is, in the simplest view of it, the only reason anyone comes to your site, stays there, and gets value from it. 

iMarc Partner Dave Tufts gently dope-slapped me on this topic many years ago, and I’ve repeated and paraphrased his comment many times since. In fact we’ve never created a great website without great content. "Well, duh!” you might say, but even so, it is sometimes overlooked in establishing budgets and work plans.  I’d go as far as saying you could have a very successful website with GREAT content, even if the design and UX wasn’t top-notch (see also: Craigslist).

Content comprises many things these days, including the text on a website, but many other things fall under that heading too; including photography and illustration, infographics, motion graphics and video, documents, demos and downloads. 

Here are 5 tips for making it great:

1

Hire professionals and plan to keep them on the team. 

Professional content is developed by professionals. They do NOT need to be subject matter experts, that’s your job, but an experienced professional writer can quarterback the gathering and creation of raw content, get it all whipped into shape for consistency, voice and tone, and it will make all the difference in the quality of the site. Sure, there are some content types you may not need help with, but for the initial build this is money very well spent. Same with photography, videography and illustration. This is so important that I’m going to make this worth two on the list and go straight to number three.

3

Identify the key audiences and content.

Explore and prioritize the people that you most need to communicate with, and spend some time putting yourself in their shoes, thinking specifically about what they need. Sometimes it's helpful to develop different "user personas" for who might come to your site and how they could best use your site to get what they need. 

  • For a potential customer that might mean organizing  and creating your content in a way that is most accessible to them, using language they will readily understand to communicate the value of your products and services. 
  • For a potential employee that might mean including information on your workplace, culture and benefits of employment. 
  • For existing customers and business partners that might mean maintaining content for things they frequently need, reference material, technical or other documentation, access to past orders or shipping information.  

4

Invest in rich media, and great photography.

Content is more than text and documents, and different types of content are TONS more effective at communicating different things. Go ahead and describe a beautiful spring day like today in words while I step outside with my camera. I’ll be right back. 

...

Yes, I cheated, that was last spring

See what I mean?

Stock photography is the bane of any proud designer, and should be avoided if at all possible. Make the images you use real, personal, and authentic. Rich media also includes video, motion graphics, and infographics which are fantastic for conveying complex ideas, processes and relationships in a way that words simply can’t hope to match. (P.S. In fact I did take that photo, but I confess it was last spring during a visit to Yosemite).

5

Lighten up, and make it easy to digest.

Create your content, then throw half of it out, just as I did with this blog. Users don’t have time to read and digest large amounts of text, and if you care about the growing segment of your audience that is reading it on their smartphones, it had better be concise, scannable and easy to understand.

6

Plan to maintain it.

This is the hardest part for some but without a plan to maintain the content of the site, including a budget, schedule and resources allocated to it, it mostly won’t get done. Explore what content ought to be created, when it should be created throughout the year, and how it’s going to get created. Then make sure it happens! That will help deliver the most ROI for your site over the long haul, and give your visitors (and the all-important search engines!) a reason to return.