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. 

Password Managers: 2014 Heartbleed Edition

Posted by Robert Mohns on April 14, 2014. Tagged: best practices, technology

Lock down Heartbleed!Password managers, thanks to Heartbleed, are top of mind this week. While nothing can save you from sites with truly idiotic password requirements, a good password manager tool makes it tremendously easier to prevent identity theft and fraud.

Dan wrote about password managers back in 2009, but that's so five years ago. I took an informal poll around the office and here's what iMarcians use today, as well as a few others that are well-reputed.

(Impatient? Jump to the TL;DR.)

1Password:

  • https://agilebits.com/onepassword
  • Platforms: Windows, Mac, Android, iPhone, iPad
  • What's special about it: It does pretty much everything, pretty much everywhere. Very configurable strong password generator; integrates tightly with Chrome, Firefox, Safari and IE; syncs across your devices using Dropbox (or iCloud); insanely deep organization (tags, favorites, folders); secure notes; software licenses; manages and auto-fills credit cards and multiple identifies into web forms. iPhone/iPad version includes a built-in browser, handy for banking.
  • Pros: Powerful, runs on all the big four platforms.
  • Cons: Not cheap. $50 for Windows or Mac, or $70 for a cross-platform bundle. $15 for iPhone/iPad (currently on sale for $9). Also, the Android version is read-only; you can't add and edit new passwords.
  • It's currently on sale for half off the usual price.
  • More iMarcians use 1Password than any other tool.

Password Hash:

  • https://www.pwdhash.com or http://crypto.stanford.edu/PwdHash/
  • Platforms: Firefox, Chrome, Opera, iPhone.
  • What's special about it: Creates a custom password for any website using one password of your choice. Implemented as a browser extension for desktop Firefox, Chrome and Opera.
  • Pros: Free and easy. Very effective at blocking website phishing attacks.
  • Cons: No official mobile support, but there is a $0.99 iPhone app, KeyGrinder, that implements the same algorithm and is thus compatible.
  • One iMarcian uses this.

LastPass:

  • https://lastpass.com
  • Platforms: Browser extensions for Safari, Firefox, Chrome, Opera, Internet Explorer. Native app on Windows Phone, Blackberry OS 7, Blackberry Playbook, Symbian, Android, WebOS.
  • What's special about it: Supports two-factor authentication.
  • Pros: Runs everywhere. Everywhere. If you have one of the great-but-gone WebOS tablets or Blackberry Playbook, LastPass has you covered. Free-as-in-beer for desktop PC/Mac use.
  • Cons: Advertising-supported. Paid subscription is required for mobile access (but at $12/year, it's cheap).
  • One iMarcian uses this.

 KeePass:

  • http://www.keepassx.org
  • Platforms: Linux, Windows, Mac
  • What's special about it: It's free-as-in-liberty – GPL 2.0 open source license.
  • Pros: Source code hosted at GitHub. Fork it yourself!
  • Cons: Clunky. Autofill remains an "experimental" feature years after its introduction, and Linux-only.
  • No iMarcians use this.

mSecure:

  • https://msevensoftware.com/home
  • Platforms: Windows, Mac, Android, iPhone, iPad, Windows 8 Phone
  • What's special about it: Optional self-destruct feature to beat brute force attacks. Works on Windows 8 Phone. Syncs using Dropbox.
  • Pros: If you use Windows 8 Phone, this appears to be your best bet. Inexpensive; just $20 for Windows or Mac.
  • Cons: Windows 8 Phone version doesn't yet support Dropbox sync.
  • No iMarcians use this.

Go be forth, be secure, and encryptify:

Aside from picking a tool that supports your computers and/or mobile devices, which you use is largely a matter of personal taste. I suggest…

Power user's delight: 1Password or LastPass.

Free as in Beer: LassPassKeePass or PwdHash.

Free as in Liberty: KeePass or PwdHash

Finally, here is a list of top sites that you should change your password now. Get to it!