We are thrilled to share our latest launches for both the
Massachusetts Biotechnology Education Foundation (MassBioEd) and the Harvard Clinical
Research Institute (HCRI)! These long time clients of iMarc are doing incredible
work in the healthcare and biotechnology community, and we are happy to support
Since 2006, we have partnered with MassBioEd, a resource for educators, students, postdocs, and industry professionals to advance STEM and biotechnology education. MassBioEd is committed to cultivating the biotech industry through educational initiatives than span from elementary school to professional development. To help maintain its position at the forefront of biotechnology education, iMarc and MassBioEd embarked together on a redesign of its website to deliver a targeted, user centric experience with the results now live as of March 2013.
iMarc redeveloped the Foundation’s website with the
objective to deliver critical information to students, educators, and
professionals passionate about science education. Site visitors can access
learning resources, register for corporate professional development courses,
and donate to the Foundation from the website. One of my favorite features on
this new site is the interactive search toolbar on the homepage allowing site
visitors to self identify right away and be presented with the content relevant
to their interests.
Also this month, we launched HCRI’s new website. We’ve been working with HCRI since 2007 and this is the second iteration of the site that we’ve created for them in our 6 years together. In its latest iteration, the website features elevated visual design that personalizes the Institute’s research and aligns closer to the Harvard brand. We focused heavily on the presentation of their publications, and created tools for filtering through materials based on category, faculty member, and therapeutic area. As part of our project, we also conducted photography on-site at HCRI, and the new Leadership Bios reflect the outcome of this service. This website was built upon our full site content management system (CMS) that now gives HCRI staff the latest tools and technologies to power site content.
Here at iMarc we are
committed to healthcare and will be attending the New England Society for Healthcare Communications (NESHCo) conference in May. We
hope to see you there!
If you promise to keep my ideas and work free (as in speech), I will work for free (as in beer).
After a statement like that, we probably need some clarification. Just like any other viable web and media production company on the planet, iMarc licenses client-code under terms which are conducive to its business goals. But what licenses do individual developers make use of? More importantly, why do they use those licenses?
Statistics on this issue vary widely. According to Black Duck Software1, the GNU General Public License versions 2 and 3 account for nearly 45% of open source projects. While the lesser versions, takes up another 9% or so. Comparing this number to another page2 referencing the same company's data in March of 2011, we see a drop of about 7% in overall usage.
I'm not going to speculate as to why this may be the case, but there are a number of competing open source licenses which serve a number of different uses and purposes in particular contexts. At iMarc, for example, we frequently make use of MIT and BSD licensed code. Unlike the GPL and its variants, this code can be passed onto our clients without having to concern ourselves with overt sub-licensing terms or the need to place them under any additional obligations.
Recently, iMarc has also started releasing some of its own internally developed code on our GitHub page under the MIT license. Due to the obligations which the GPL enforces, licenses like MIT avoid much of the stigma surrounding its use in business. Why then do I use the GPL/AGPL for 99% of the software I write?
Freedom of Ideas
The Free Software Foundation makes a big distinction between open source and free software. While the GPL is often considered a "more restrictive" license, it is restrictive only insofar as it obligates distributors to ensure it remains open. What does this mean practically? It means that if you incorporate any portion of GPL code into your code, you must license the combined work under the same terms, if you intend to distribute it.
To make a case for why this is not only positive, but preferable, I will rely on two premises.
- Software is an idea.
- Ideas "want" and ultimately need to be free.
The first premise requires us to assert that software, unlike other commoditized wares, is materially non-existent. Yes, yes, we need hard drives to store it, computers to interpret it, and even electrons or photons to "ship it." But these are not conditions of the thing itself, merely the expression of the thing. If my hard drive has bad blocks, it is not the software that is damaged, merely the drive. The only thing that could possibly be lost with regards to the software, is a single expression of it (albeit a digitally perfect one).
It may be argued that software is more than an idea; that it is the particular implementation of an idea. This argument, however, seems to contradict how we speak about ideas in ordinary terms. We do not, for example, claim that the Golden Rule, as expressed by Confucius, is of a fundamentally different nature than that of, say, Pittacus.3 On the contrary, we recognize that despite having been expressed in different languages and with different phrasing, the core value proposition of each is essentially equal.
Software, likewise, is capable of being expressed in a multitude of languages with diverse organizational characteristics or "phrasing" if you will. To damage software, as with anything else, we must be able to show that it is possible to reduce its value proposition by some positive action. But if we wish to truly equate software to an idea, then to do this we need to decouple it from the expression or implementation of it.
How, then, can we damage software? Exactly the same way that we damage an idea!
In modern and free societies we have started to recognize that things like the First Amendment are conducive not only to the liberty of individuals, but to the rapid progression of our technological and economic condition. What use does a great idea, if expressed to no one, serve? And what use if only expressed to a select few?
An idea unexpressed is inevitably a dead idea; buried with its creator. Thus, an idea under-expressed is a damaged idea. It is an idea which cannot ever be developed to its fullest potential as its full potential necessitates it to be received, examined, and developed by the broadest amount of people possible.4
It means nothing then to say that we damage software by restricting the software itself because, like ideas, software is not self-expressive. Substantially, we can only damage software by restricting people.
Freedom of People
The earlier mention that the MIT license is considered "less restrictive" than the GPL is chiefly derived from a single additional allowance. Namely, you are allowed to "close" the software. That is to say, you have essentially all the same freedoms as you do with the GPL, except you are granted the additional allowance to restrict those freedoms for any third party to whom you distribute it.
Imagine now, if you would, a single idea or bit of knowledge that is radically important to our human understanding or condition. Got one? Now, imagine in the infancy of its development that those who received it had the absolute freedom to do with it as we can with open source software. If they could dissect it, build on it, modify it to be better in some way, and share it with others, we would surely recognize this as not only an asset to free society, but a pillar of it.
Now imagine the complete opposite.
More, the restriction of even a single afforementioned freedom with regards to ideas (software) could have potentially devastating consequences on our society or social progression.
What Do I Care?
I owe a lot to free software. Indeed, I would wager that I owe the entirety of my programming knowledge to it. It has not only directly contributed to my own ideas, but has provided me the means to express them. In a world where high-technology is becoming increasingly important to the human condition, often times superseding more traditional technology, I believe it to be not only a moral but a practical imperative to ensure that free software is not simply protected, but encouraged.
If your next great idea extends, builds on, or merely modifies mine in some way, even marginally, then I am going to do everything I can to ensure that our idea continues to be afforded to as many people as it can be in the same manner to which it was afforded to you.
The page at http://osrc.blackducksoftware.com/data/licenses/ contains daily updated statistics on licenses. ↩
John Haller consolidated these statistics in March of 2011 at the following site: http://johnhaller.com/jh/useful_stuff/open_source_license_popularity/ ↩
This is not to say that the same idea cannot be developed independently by two separate individuals given similar preconditions. ↩
I am not proposing "design by committee," merely making a simple point that more exposure amounts to those who could and would make positive contributions, doing so. ↩
- Light bulb image retrieved from: http://www.publicdomainpictures.net
I joined iMarc in 2005. I've just received my fourth round of business cards. It's interesting to look back over the corresponding website designs, and see how our brand's visual identity has evolved…
In 2005, our key—and only!—color was green. Conceptually simple, highlighted by silhouetted figures (“The Dudes”) busy building things around the edges. That was us: simple, direct, busy, and a little undisciplined.
In 2007, we went dark and dramatic, with a hint of woodgrain. Both our design and our engineering were getting more complex, yet we retained our roots of craftsmanship and care. We folded our old news into our blog and gave it top billing; content is king.
In 2009, we added colors to represent our evolving process (strategy, design, and development) while keeping a dark, dramatic look. We re-emphasized our client work, and downplayed our blog. Ultimately, the complex design didn't mesh as well with our culture as expected, and over time we found it did not match the image we wanted to project.
In 2012, our new Creative Director, Jared, led us through a thoughtful brand exploration. A lighter palette, a few strong colors, and photography of our team at work now grace our site design and collateral. (And the 2009 color gradient lives on today, tweaked and simplified.) Our site is easier to explore, better serves the needs of content, and adapts itself to your device. It better reflects who we are: friendly, open, flexible, genuine, mindful, welcoming, and human.
Eight years, four designs, one company.
Want some historical flavor? Browse all of our old websites at http://old.imarc.net.
Two weeks ago I was out at RSA Conference. Typically enough, in the expo hall it seemed that everyone had pens to give away. Here's a sampling…
Which one of these pens do you think writes the best? The sleek, silver one with a good heft? The light blue curved one with a big cushy grip? The elegantly simple black one?
All but one, no matter how nice it looked or felt outside, had a terrible, cheap pen cartridge inside. They required a lot of force to make a mark and were fatiguing to use for any length of time.
The only pleasant-to-use pen was from LogRhythm. It writes smoothly and effortlessly, has a modest but effective grip, has a pleasant blue ink, and even makes a nice clickey sound when I fiddle with it. Onto my desk it goes, where it will get used regularly.
Every time I reach for it, I'll see their brand, burning its way into familiarity.
Every one of these pens has some company's brand on it. But only one company took the time to select a pen that would give a lasting positive impression.
How something looks is not enough. What counts is how it works.
I’m going to take a holistic approach to talking about designing for the mobile web. Design doesn’t only apply to the look and feel. It goes beyond the color and type choices we make; instead we design at every stage of the project. We design content to be both relative and appealing to users. We design the user experience so the layout, functionality, and navigation all feel natural and easy to understand. We design the user interface so that everything looks cohesive, on brand, and the major elements get the visual weight they deserve.
There are five major aspects to keep in mind when designing for the mobile.
1. Content Flow
The Fold has been debunked for the desktop web. The idea of getting everything above the fold is moot when there are hundreds of “folds” out there. More important to the user is the flow and hierarchy of content. That approach is even more paramount when it comes to the mobile web. When you have the real estate of a desktop computer you can easily display information equally in three columns. On a mobile device you have to be more strategic when it comes to your content. In the limited real estate of a mobile device you have to stack your content.
Now I may be straying from my path a little bit and what I'm about to quickly mention should be a separate blog post all by itself, but this stacking approach is only truly effective if you've done a good job creating worthwhile content for your site. This approach isn't ideal if your desktop content is bloated and dated. If you take a Mobile First approach you'll be able to: optimize your website for an expanding audience, focus on key tasks, and take advantage of great features only available on mobile devices.
2. Calls to Action
Using a mouse to click on a link is easy, using your finger to click on a link can be difficult. The general rule of thumb is that interface elements on a mobile device should be no smaller than 44 pixels squared. This assures much greater accuracy for users. These interface elements translate directly to your calls to action on your mobile site. It doesn’t matter if it’s a purchase button for a product, a register button for an event, or a contact us button; they should all be easy to see and even easier to tap.
3. Navigation Style
Depending on how many navigation links you have, it will steer you towards a navigation solution. If your site only has four or five short nav items, you might be able to get away with listing them across the top. If you have more than that then you might want to consider one of the hidden menu approaches. The idea is that you want to keep the navigation clear while trying to minimize the screen footprint; users are here for your content, not to see a giant logo and a bunch of links that take up half the screen.
4. Available Features & Content
It’s funny to think your mobile website may be the only version of your website that some users see. With the rapid adoption of smartphones, more and more people are accessing the web via their mobile device. What we don’t often think about is that this is the only gateway some users have to the web.
What does this mean? Any content or features that are available on your desktop site should be available on your mobile site. Whether a user is trying to buy a product, pay a bill, or check a gift card balance they should be able to do it regardless of the device they are using. Kill those frustrating “Desktop Version” and “Full Site” links that force users into a bad experience and include the content and features your users are looking for on your mobile site.
5. Hi-Res Graphics
You’ve got the content you need, the user experience is tight, now you just have to make sure it looks as good as it can. The vast majority of desktop web is a uniform 72ppi (pixels per inch) but mobile devices now squeeze a lot more pixels onto their screen. The iPhone 5 is 326ppi, Motorola’s Droid Razr HD is 312ppi, and Samsung’s Galaxy S3 clocks in at 306ppi.
This means graphics saved out at 72ppi will look fuzzy on these devices. Now knowing this, you should try to rely on HTML and CSS for as many elements as possible: buttons, gradients, drop shadows, etc. When you can't execute the design with CSS and you must use images, like your logo or social icons for example, make sure they're saved out at a high enough resolution so they look nice and crisp on mobile devices.
Make it so!
Keeping these aspects in mind when you start your project will help assure that your mobile presence is a cohesive and smooth experience for users no matter what device they're using.
“The object of the artist is the creation of the beautiful. What the beautiful is is another question.”
― James Joyce, A Portrait of the Artist as a Young Man
I’m late to the party as usual, but I’ve really been enjoying the social video sharing app Vine. It takes the Instagram formula and runs with it, allowing users to share five second loops of video recorded with their iPhones.
I’d tried similar apps like Flixel, which encourages users to create and share cinemagraphs. Unfortunately, I have a blind spot for any software that features a timeline—my brain doesn’t bend that way. Especially so on a small touch screen. I grew quickly frustrated while attempting to loop a clip of my daughter on a swingset, and moved on.
After using Vine, I feel fairly confident invoking the ghost of Steve Jobs by saying “if you see a timeline, they blew it.” Vine cleverly sidesteps the timeline issue by discarding it—you start recording by pressing the screen. When you lift your finger, recording suspends. Put your finger back down, and it resumes. Once the progress bar is filled, you have your five seconds of video, and you’re done. Editing is done “in-camera”, like the budding adolescent auteurs of the 60s and 70s with their parents’ Super 8.
On a recent visit to the creative room, I was surprised to hear a certain level of grumbling and apprehension when the subject of Vine was brought up. When asked to elaborate, our creative director Jared explained that while tools like Vine and Instagram empower people, the frictionless nature of them can be problematic. “It allows users to share meaningless footage without the keystone of a compelling narrative.”
In the “old days”, an aspiring photographer would venture outside and take a bunch of pictures. Then, perhaps she would spend time in a darkroom developing negatives. She would then attempt to identify what worked, what didn’t, and make prints from the stuff that did. Repeat.
This iterative process is akin to going to the gym. Taking a hard look at your own work, deciding what sucks, and working toward improvement builds creative muscle mass. Eventually, you might even develop your own aesthetic.
But who needs to develop their own aesthetic when you have a dozen convenient, pre-packaged ones to choose from? Why waste time choosing the perfect shot? The only shot to choose from is the one you just took. In fact, these gimmicky filters distract us from improving our fundamentals. As Jared said, “[the tools] focus more on the effects and less about composition.”
Are these apps the creative equivalent of high fructose corn syrup? Perhaps these tools are “scratching our creative itch” and hitting our reward centers without making us do the hard work traditionally associated with an artistic endeavor.
This realization hits close to home, as I’m the poster child for this brand of banality. If you take a look at my Instagram, you would see that it consists of A) high contrast photos of old buildings/cars, B) food, or C) my daughter (I get a pass on that one, OK?). If you spend a few minutes exploring the public timelines on either of these apps, you will find many examples of typical race-to-the-middle work that supports Jared’s argument.
While the app does not provide filters (yet), the “rip and run” nature of Vine imposes a certain slapdash quality to its output. Most shots are handheld, so jumpcuts nearly always exhibit a jarring effect. And while I believe the decision to support sound was a “net win” for Vine, audio often takes a back seat to the visual content. Well-edited audio is one of the more unappreciated aspects of filmmaking. If Vine becomes the de-facto standard for sharing video online, the next generation of filmmakers might not know their “L-cut” from their “J-cut”. Imagine a dystopian future where the “guerrilla documentary” style is the norm, and people find watching footage shot with a steadycam disorienting.
Still, much like the Holga, some have embraced the limits of these mediums and enjoy pushing them. Michael Lopp takes a borderline-obsessive approach toward his Instagram output, tweaking his photos with a complex chain of external apps to acheive just the right look. There’s an aesthetic, and it’s definitely not prepackaged.
Similarly, actor/director Adam Goldberg has been using Vine to serialize a body of surreal, loosely-connected vignettes. They remind me of Maya Deren, Kenneth Anger, and other avant-garde filmmakers I didn’t fully understand from my college film appreciation class. Some of these shorts are extremely well-produced and clearly require a great deal of effort and thought.
As the discussion continued, we tried to consider the “pro” side of the argument. Jared related the story of a friend whom started taking photos through Instagram, but now wants to take the next step and purchase a DSLR.
“Bottom line:” Jared concluded, “garbage in, garbage out.” Like junk food, too much of anything can be bad for you. We all need a little bit of whimsy in our day, and if these apps can provide it, that’s a good thing. But snapping quick one-offs without putting much care or thought into them won’t help you grow as a photographer. Challenging yourself to live up to the standard of others embracing these new mediums just might.
This month, a great but virtually unknown man has passed away: John Karlin.
Karlin, who worked for Bell Labs in the decades after World War II, had a doctorate in mathematical psychology, was an electrical engineer, and a professional violinist. More to the point, he largely created Human Factors Engineering, the predecessor of what we today call "usability". By studying human behavior, systematically, he found ways to make technology better fit the humans it was meant to serve.
The rotary dial telephone is a fascinating (and photogenic) example. Early dials had the numbers inside the finger holes, so you could aim for them. Worked pretty well for numbers:
(photo credit: banlon1964)
But if you aren't looking directly at it, it gets a little harder to read:
(photo credit: Robert Huffstutter)
And when you add letters as well as numbers, it gets very tough indeed…
(photo credit: sagriffin305)
The solution is obvious, right? Put the numbers outside the finger holes, like this…
(photo credit: Dan Buczynski)
…or perhaps like this:
(photo credit: Master of Telxons)
Wrong. The improved phones took longer to dial!
Karlin's team investigated. It turned out that by removing the numbers from inside the finger-holes, it took people longer to find the now-empty targets.
In this next photo, can you see what they changed?
(photo credit: Andrew Yang)
By putting dots inside the finger holes, users could acquire and hit the target more quickly. After adding dots, Bell Labs finally saw the expected improvement in speed. And so rotary phones continued for decades with that time-saving dot.
Karlin's work at Bell Labs went far beyond just making phones easier to use. His approach to measuring and testing the interactions between humans and our artifacts was trailblazing.
Karlin wasn't alone; early researchers included Alphonse Chapanis, whose work for the army showed that pilot error could be reduced with better control design and layout; and Paul Fitts gave us "Fitt's Law". But Karlin demonstrated in wonderfully and appropriately concrete ways how the smallest of details can have a measurably huge impact.
John Karlin's work was inspiring. May he rest in peace.
The iMarc Boilerplate, much like the HTML5 Boilerplate or Twitter Bootstrap, is our starting point for new projects. It provides us with:
- Better, consistent defaults than what browsers use by themselves;
- Sharp, clean placeholders for styles on sites we can use until we've had a chance to restyle them;
- Clear, organized structure for our CSS going forward.
We wanted this file to be lighter than Twitter Bootstrap or the HTML5 Boilerplate and restructured in a way that was more fitting our mentality. Rather than layering our notions on top of one of these others, we wanted to take what we could from them create a base that fits us.
Best of all, we're releasing it on GitHub so its available to the community. You'll find more information on GitHub, as well as example markup and a separate page showing our document hierarchy and structure.
Did I just write “Springtime”? Yes I did. I was talking with my neighbor a few months back about the rainy season they call “winter” around here, and he advised me that once it passed, Spring was beautiful. I asked, “When is that Matt?”. “Oh, February.” I LOLed, but indeed it’s true. We’ve been hiking most every weekend and I went mountain biking after work last night.
Geography lesson: The dozen or so towns that make up Silicon Valley are variously known by their individual names if you live in one of them. Or as the “South Bay” if you live in San Francisco or across the bay in Oakland or Berkeley. Or you might hear “The Valley”, or of course the more formal but less locally flavored, “Silicon Valley”. But if you’re in Santa Cruz, it’s simply “Over the Hill” because it's, you know, just over the hill. And Lake Tahoe or Las Vegas or San Jose are roughly equivalent in the meaning of that. It’s like living on an island in that sense. “Over the Hill” means “Not in Santa Cruz”. 'Nuff said.
We had a mountain lion cruise through the ravine just down the hill from our house in Bonny Doon about 100 feet from our back door, caught on our game camera one night. How cool is that? My wife and I went hiking last Sunday, a scant hour south of the San Francisco city limits and saw two people the entire day, in the parking lot as we set out. It’s frightfully congested on the roads sometimes, but incredibly spacious in the other 99% of the state.
Gas is expensive, as is housing. Food is religion. The outdoors is your living room. People drive pretty darn well, and way too fast. The only style that’s not cool is not having some style. You could drive a dill pickle down the street and the CHP wouldn’t bat an eye, as long as it passes “smog” testing. Along those lines, if you drive a Prius, good luck picking yours out in a big parking lot when you come out of the store if you forget where you parked it.
This town has geeks and freaks and hippies and surfers and yuppies and locals, and a great Latino influence to boot. As I went mountain biking last night, plenty of folks were surfing at the break downtown, and 4 hours east of here they are putting chains on their tires to get to Lake Tahoe for skiing. This state is really a handful. We love it.
We are gaining traction out here, launching marketing campaigns, networking madly, and working with some really cool companies on some really cool projects. So far so good, but for sure the best is yet to come. Happy Spring!
Paul McCartney knows how to make things people like.
In Let It Be, the 1970 Beatles documentary, Paul offers wise advise on crafting a quality solution. The scene shows Paul and George arguing while writing the song "Two of Us". Paul doesn't like where the song is going.
"It's complicated now... so, see if we can get it simpler, and then complicate it where it needs complications." – Paul McCartney
Speaking words of wisdom there Paul. First, get it simpler.