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

Welcoming 5 New iMarcians!

Posted by Allison Boyajian on July 17, 2014. Tagged: culture

iMarc is thrilled to welcome five new members to our team. Let us introduce you to the outstanding new recruits!

new hires

Thomas Saraceno, Director of Experience

Thomas brings a wealth of experience to iMarc. Most recently, he worked as a designer at TripAdvisor. As Director of Experience at iMarc, he leads the UX team to deliver engaging and innovative digital experiences. He works to research and understand both the business needs and users’ behaviors in order to create innovative and easy-to-use websites.

After work, you can find Thomas at home with his wife and daughter. Thomas also has a dual identity as a rock star. He plays guitar (not to mention left-handed guitar) for a band and is basically iMarc’s very own Jimi Hendrix. Thomas also lives on a farm and rides/repairs motorcycles, making him probably the coolest person we know.

Victoria Anderson, Office Manager

Prior to iMarc, Victoria studied communication and media studies at Bridgewater State. After college, she worked as a manager for a Boston-based marketing company. As Office Manager and Receptionist at iMarc, she helps keep our team organized and productive by answering the phones ever-so promptly and pleasantly, managing office orders (iMarcians use a lot of Post-it notes), planning company events and client meetings, and filing bills.

After work, you might find Victoria on a beach, desperately deciding on an Instagram filter, and talking to her cat. Not necessarily all at the same time.

Tommy Chanthaboune, UX Engineer

Tommy Chanthaboune was previously a web developer/UX engineer for BBA Solutions in Arkansas. There, he was able to dive into the textbook industry, and learn about everything from packing books to coordinating policy for third party collections. Primarily, he worked with their development team to build great products. At iMarc, Tommy will be developing websites and applications with client-side technologies. 

Outside of work, you might find Tommy kicking around a soccer ball, reading, or hanging out with his friends and family. He loves getting in touch with his inner-foodie, and frequently tries new restaurants. If you’re looking for a new place to grab a bite, ask Tommy!

Allison Boyajian, Marketing Coordinator

Allison Boyajian came to iMarc as a recent graduate from Boston University where she studied mass communication and French.  Throughout college, Allison held several positions working on marketing, business development, and copywriting. At iMarc, she brings her communication expertise to the table by creating, delivering, and optimizing our marketing materials to ensure a strong message that is consistent with our brand image.

After work, you’ll probably find Allison conjuring up something sweet in her kitchen, finding overpriced sparkly pillows to add to her collection, or riding her mint green cruiser. She also tries to create her own knock knock jokes. They’re usually not very funny.

Katelyn Weber, New Business Specialist

Katelyn joins us at iMarc after having worked as a senior business development representative at Brightcove. Prior to Brightcove, Katelyn attended Assumption College where she studied marketing. At iMarc, she works on our business development team, seamlessly handling all things new business.  She works with companies to help them define their web and mobile strategies, ensuring that our custom solutions align to their objectives.

When she’s not working, Katelyn is likely to be working up a sweat at the gym, searching for innocent puppies to call her own, or eating Mexican food. (She highly recommends Mi Mexico Lindo in Metheun, MA!) 

Visit our About Page to learn more about the amazing iMarc team.

Using the Golden Ratio with Typography

Posted by Kevin Hamer on July 15, 2014. Tagged: engineering

Design isn't my thing. I still have opinions, but when it comes down to details like spacing and typography, I'm just guessing. The lack of certainty keeps me second guessing myself, so I'm always looking for ways to justify my reasoning for why I like one thing more than another.

For the iMarc Boilerplate, we focused on consistency. Spacing between any two related elements is always the same (1.5 ems), and spacing between two unrelated elements should always be consistent (3 ems.) Hardly imaginative, but consistent. However, font sizes, line-heights, and most other metrics are based off of what I found in similar projects or in practice. Popularity and convention are nice, but are poor justification.

Poking around and looking at things like typographic scales and ideal text widths, I came across the golden ratio a number of times. The golden ratio, ~1.618, is supposed to be inherently aesthetically pleasing, occurring through history and nature. I had played around with using the golden ratio before, but found it was a little too big as a ratio (~1.618) to use for line-heights, for example:

16px Lato at 1.618 Line Height

Still, the golden ratio seemed like a great starting point. This got me thinking about typographical metrics. To define a few:

  • Font size is what we specify, but doesn't seem to correspond to any part of the text's actual height or width.
  • Whereas point size is roughly from the top of uppercase letters to the bottom of letters like 'y' or 'p'.
  • Cap height is the height of uppercase letters.
  • X-height is the height of lowercase letters like 'x' or 'o'.
  • Leading is the space in between lines.
  • And lastly, line height, is point size plus leading, but is normally expressed as a ratio to the font size.

The golden ratio is really meant to be between visual elements, and the font size isn't the actual size of the text. Here's Lato at 100px, at 2x magnification:

Typography Metrics

The truth is that all of the dimensions of 100px Lato are smaller than 100px. If I want the ratio between leading and point size to be golden, I need to adjust for the difference between font size and and point size. I did this and got a line height of 1.44. This is closer to what I was hoping for:

16px Lato at 1.44 Line Height

However, the more I looked at this, the more I was unsatisfied. Two things stood out:

  1. I wanted to use the x-height instead, as that seemed like a better measurement of height of the text than point size.
  2. I wanted more leading. In fact, I wanted to try making leading ~1.618 times the size of the text, instead of the other way around.

After these changes, I ended up with this:

16px Lato at 1.36 Line Height (highlighted)

This works out that, if you'd like the ratio of your x-height to leading to be golden when using Lato, you should use a line height of approximately 1.36. Here's the text again without highlighting:

16px Lato at 1.36 Line Height

And here's an overlay, showing the golden spiral overlaid on some 100px Lato at 4x:

Golden Spiral on Text

This was enough to make me happy. Now I have a method for picking line heights that I can justify and do without fussing around or trying to decide which looks better.

I measured a few other popular fonts and shared the results below. I'm not suggesting that these line heights are always the best choice, but at least these numbers have some reasoning behind them.

  • Arial: 1.39
  • Georgia: 1.31
  • Helvetica: 1.39
  • Open Sans: 1.41
  • Times: 1.18
  • Trebuchet MS: 1.36
  • Ubuntu: 1.36
  • Verdana: 1.44

Blame Canada: Robert Bringhurst is Wrong

Posted by Robert Mohns on July 3, 2014. Tagged: content, design, rants

Em Dash

iMarcians care very much about doing their very best, whether it’s code, design, experience, or content. We argue—sometimes vociferously—about what, exactly, is best. Today's topic: Punctuation.

Let’s talk about dashes. There are many—see Your PC is not a typewriter for the full list. I’m interested in the use of dashes to denote an change in thought or direction, for example:

Many readers of Adventures of Huckleberry Finn consider the ending flawed—Hemingway, for example, said that Twain “cheated”—while others have praised it. (source)

You’ve got two choices, the en-dash and the em-dash.

Typographer Robert Bringhurst has exiled the em-dash, claiming it’s Victorian. However, other typographers disagree based on contemporary American usage. The Chicago Manual of Style prescribesthe unspaced em-dash, as does the Oxford Guide to Style, the New York Times Manual of Style and Usage, and most American book publishers.

For that matter, what about spaces between sentences? Bringhurst hates two spaces, also considering it Victorian. Yet Bringhurst’s history is sadly, demonstrably factually incorrect, as documented in Why two spaces after a period isn’t wrong (or, the lies typographers tell about history).

Spacing around the em-dash is a valid concern. Full spaces can really make words seem too far apart; typographers solved this problem centuries ago. Modern recommendations vary by style guide; most American, Austrialian, and some British guides recommend using hair spaces or simply setting them closed. Several major English publishers (including the prestigious Cambridge University Press) use a space, en-dash, space, and most Canadian style guides do as well. (Did I mention that Bringhurst is Canadian?) The spaced en-dash is the convention in German and French as well.

(The AP Style Guide ignores the matter entirely and shows its telegraph roots in prescribing a double hyphen instead. Oy gevalt.)

Here are samples of the spaced en-dash, the un-spaced em-dash, the spaced em-dash, and the hyphen, set in Georgia and as rendered by Safari 7… (I’ve borrowed and mangled content from DIY Leather Tassel Necklace, which I found because of the domain name. Ironically, she uses en-dashes instead of em-dashes.)

Looks Right
Using spaced em-dashes is right
Looks Wrong:
Using spaced em-dashes is wrong
Looks Okay:
Using spaced en-dashes is okay
Looks Very Wrong Indeed:
Using spaced em-dashes is very, very wrong

And that’s in a decently well-made font. Some font designers make, ah, questionable choices. For example, the Mac system font Lucida Grande, for no good reason, uses almost identical glyphs for the en-dash and hyphen, making the em-dash the only sane choice:

Looks Right: the em-dash
Lucida Grande gets it horribly, horribly wrong: Exhibit A]
Looks Like A Mistake: the en-dash
Lucida Grande gets it horribly, horribly wrong: Exhibit B.
Looks like PEBKAC: the hyphen
Lucida Grande gets it horribly, horribly wrong: Exhibit C.

So, we can’t count upon commonly used fonts to have sane metrics (except for newer browsers which support @font-face—hooray for them!). But it gets worse.

The real trouble with “space en-dash space” is line breaks. Web browsers traditionally suffer from truly horrific typography. No line should begin with a dash of any sort, yet browsers will cheerfully honor a space for a break and push your en-dash to the next line:

Bad Wrap! No Biscuit!
Bad wrap! No biscuit!

Any good typographer would catch and fix this, but web browser engineers haven't yet noticed the problem.

(Let’s not even get into Microsoft Word’s autocorrect follies, other than to say it rarely honors the typeface you’ve selected and substitutes fonts without telling you.)

So now what?

The en-dash can’t be relied upon to look right, and it causes weird wrapping. The em-dash is right in every font I’ve examined, and it prevents browsers from doing horrible things.

Most British and Canadian publishers prefer the spaced en-dashes. Most American publishers and newspapers prefer the unspaced emdash.

We definitely don’t use French or German as our working language.

We’re an American company and our clients’ sites are overwhelmingly written in US English. We should use—nay, mandate!—the unspaced em-dash.

’Murica!
Murica.

Or we could sidestep the debate entirely. Just put in a period and start a new sentence. It worked for Hemingway.

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!