Background

If you are not familiar with Pull Requests, Github has a write-up on the current system. Pull Requests are normally thought of as a way to manage code across repositories. This is especially true in the open-source community. Pull Requests make it easy for developers to contribute to repositories without requiring write-access. At Viget, we have the advantage of giving every contributor write-access. So, how do we use Pull Requests?

While working on Puma, I create topic branches for each ticket. I push the topic branch to the remote server: Github. When I am confident that my topic branch is ready to be merged into master, I issue a Pull Request and notify the team. The other developers can review, comment, and decide whether my changes are ready or whether more work is required. As a new hire, this process has been a worthwhile experience.

Consistent Style

A code base with several different styles is a nightmare to read and maintain. Ideally, every new person on a project will continue using the established conventions. This allows for current (and future) maintainers to easily navigate and make changes. Pull Requests allow experienced developers to review the changes stylistically and comment on a line or block of code that does not fit. Style changes are considered minor in the grand scheme of things; but, they go a long way toward getting a new hire comfortable with what has been written.

Unknown Methods

During a code review via a Pull Request, the other developers point out an existing method that helps tidy up the code. Without the Pull Request, a new hire would not have known the method existed. Wouldn't documentation help in this matter? Not necessarily. Documentation is great, if the search criteria is known. The code review, however, brings the unknown method to light and gives the new hire better insight into the project.

Feedback

When joining a project, there are times when the scope of a requested feature is not fully understood. An experienced developer can help; but, a Pull Request can be issued to keep the conversation unobtrusive. This conversation is now documented with the code. It can be referenced in the future to better understand the context around the implementation of a feature.

Automated Tests

Adding tests to a change is very important at Viget. Making certain additional tests belong with existing ones is also very important. For instance, if context blocks are being used to organize unit testing class methods from instance methods, then new tests should continue to use this convention. This follows the same reasoning of keeping a consistent style within a project. Pull Requests allow the veteran developers to confirm the tests added conform to what has been established in the test suite.

Pull Requests also provide a channel to receive feedback on additions to the test suite. Developers can determine if tests are behaving as expected. They may find that a piece of the acceptance criteria is missing or that the method behaves correctly when nil is passed in as an argument. Without this feedback, the code is not tested properly and is not guaranteed to maintain behavior when a refactoring is done in the future.

Conclusion

Pull Requests have been beneficial to me as I ramp up with larger Rails projects at Viget. Code consistency, unknown methods, and feedback are just a few of the ways in which they helped me. In what ways have Pull Requests helped you? What else do you find beneficial when ramping up on a larger application?

Thinking back to my early days as a Project Manager in the client-services business, I would have loved to have tapped into a tribe of PMs to glean wisdom from the elders and get special potions from the medicine man. So, I’ve started to prototype this idea along with a couple of other locals.

Here’s the concept:

PM Mix UP (working title)

High-Frequency
We want a high-frequency event that allows us to really get to know each other. We’ll share current and ongoing challenges and solutions. We plan to meet monthly for lunch downtown.

Strong Community
We want to build a community with deep roots that will be sustainable over years. To accomplish this, we are starting with a small group and growing slowly. This will allow us to develop an intimate nucleus of trust and expand from there.

Wisdom Transfer
Our initial crew is pretty senior, but we’re all still learning. We want a forum where we can share our experiences and what we’ve learned to help each other (cue British accent) raise, raise, raise the bar. Ultimately, we’ll include a wide range of silverbacks and newbies. We’re looking at ways to best share information during our lunches as well as asynchronously.

Valuable Insight
Some of the key questions we’ll likely cover in our meetings:

• What tools are useful in managing resources, budgets, and project plans?
• What is the best approach for time management when juggling multiple projects?
• How do different pricing models impact management strategy?
• What have you found effective in navigating diverse personalities and work styles of internal and client teams?
• How do you delegate and manage internal communications?
• When all else fails, what strategies have proven valuable in keeping the project on track?

Our First Iteration
In April, 2012, we tried the first PM Mix UP. Stephanie Loring, Client Services Director at Imulus, Paul Knipe, Senior Account Manager at Vermillion, and I met at Shine. Everyone was very appreciative of the idea and enthusiastic about working together to develop a resource for our industry and peers. Our conversation naturally drifted to a discussion about different budgeting tools, pricing models (Time and Materials versus Fixed Bid), and tactics we’ve used to keep a project on track. We all do things a little differently and discovered some great insights!

Our Next Iteration
We’ve got another lunch planned and I’m looking forward to it. During this one, we’ll continue to refine the PM Mix UP model. We’re not sure what that will look like, but we’re excited.

Spreading the Love
Melissa Robison, Senior Project Manager at Viget in our Falls Church, VA, office heard about the PM Mix UP idea and was inspired to do something similar. She has recruited a number of PMs to date and will be scheduling her first meeting in a few weeks! Reach out to her if you are interested in being involved.

Other Resources

• Are you a local Product Manager? Check out Boulder Product Meetup - a networking group where you can connect with other Product Managers in Boulder.
• If you’re a Project Manager working in web/software development for a client-services business and you’re interested in joining us for lunch one of these months -- drop me a line.
• Love this idea, but aren’t local to Boulder or in the DC area? Why not copy me and start a PM Mix UP in your home city? Just be sure to let us know how it goes and what you learn.

*Ok, I made that up, but it seems accurate.

Luckily, major brands like Paypal and Google stepped up to help alleviate those headaches. And though both of these tech giants allow processing donations, more companies have cropped up with the model of catering specifically to Nonprofits. Start ups like Piryx, Razoo and FirstGiving sprouted up with an even greater focus on empowering Nonprofits with greater marketing and social media tools to spread their message. But even though these services offer great social networking features, are easy to implement, and will securely and quickly process incoming donations, they still suffer from two crucial pitfalls:

• Higher transaction fees. (Sometimes much, much higher)
• User must leave your site.

Now, this is not an article about why you should stop using the third-party payment processing service you are currently using. This is an article about why you should consider collecting donations directly on your site, too, and how Stripe can help.

Arguably the most popular payment processor is Paypal. But, because Paypal can be easily added to any and all websites, we can tend to think of it as unimpressive and some say unprofessional when it is the only option when making a transaction. Additionally, if someone is confused by the Paypal checkout process, had a poor experience with them in the past, or for another reason chooses not to use them, that donation is either delayed or lost completely.

So, Why Am I Focusing On Nonprofits?

Nonprofits can use the most help. In the early stages, success or failure can be determined by a single donor. And although money does not warrant success, making sure that those who do want to donate can have a memorable experience certainly helps. And just having the ability to take money from people over the internet is not good enough. There’s more to it than that.

You need to inspire people to realize your cause can make a difference -- and encourage them to be curious, comfortable, and happy to support it. There is a serious disconnect when you are forced to move someone away from your site in order to support you. That needs to stop.

Welcome Stripe Payments

Stripe is an online payment processor that makes it incredibly easy to start accepting payments directly on your website -- today. There’s no sign up. No monthly minimum transaction amount. There’s no catch. With Stripe you can:

• Securely accept donations directly on your website¹
• Funds deposited into a bank account on a seven-day rolling basis
• Incredibly powerful and developer-friendly API
• No multiple third-party vendors to deal with
• Unmatched customer support
• Attractive and easy to use Dashboard (Live demo)
• More representative credit card statements  (ie. DONATION TO YOUR ORGANIZATION)
• Same or lower fees than Paypal²
• Keep the user on your site and maintain the site experience

Stripe lets you easily and securely add a donation form directly on your site -- no iframes, javascript embeds, nuttin’. This allows you to maintain the user experience, design the form however you wish, add and record custom fields, and convey a level of seriousness that many Nonprofits lack.

Aside from the brand image and user experience reasons to keep the user on your site, Stripe makes the life of the developer building your site stress-free. With a powerful API, thorough documentation, plenty of example applications, and many more on github, they’ll have ample access and references for integrating Stripe into their site or app. And since Stripe is actually processing the donation, you do not have to worry about PCI Compliance.

Stripe also offers more advanced features that allow accessing customer details (non-billing) so you can set up recurring billing, retrieve transaction details, update and save customer details, and more.

If you are interested in using Stripe and want to test drive the Stripe Dashboard before making any promises, click here. If you are impressed and may want to use the service in the future, click on the Save Account link at the top of the screen. After entering an email and password login you’ll be moved to another screen to enter your bank account information. Once you hit submit, you can start accepting donations.

What About That Freebie

I put together a simple script that uses Stripe to process a donation, forward the user to a “Thank You” page, and send a receipt to both the administrator and the donor. 

View the Demo  |  Download Script

To get started just open up the Readme and follow the instructions. If you are a developer, feel free to check out the source on Github.

For testing purposes Stripe does not require an SSL Certificate. However, once you go Live, you’ll need the certificate.

Thousands of notable companies and nonprofits are already using Stripe to save money and impress their users. Why not do the same?

¹ With the help of an SSL Certificate. SSL Certificates encrypt sensitive data, and is required to work with Stripe. Ask your web administrator or host to install an SSL Certificate for you. Prices should range between $100 and $350 annually.

² While both Stripe and Paypal offer 2.9% + $0.30 per transaction, Paypal charges 3.5% for AMEX. And while Paypal does offer a discount rates for registering your 501(c)(3) with them, you lose all the added benefits of using Stripe and, even worse, possibly donors who would have contributed had you not been using only Paypal. 

Unfortunately, the demands placed on icons can make them difficult to use on large projects. The variations required (size, color, pixel density, texture) can bloat your icon pool to an unmanageable size pretty quickly, requiring extra bandwidth and front-end development time.

The best fix at the moment? Chris Coyier's Icon Font method. If you haven't seen this going around, it suggests using the @font-face at-rule to serve vector icons to your users. Advantages:

• Widely supported (@font-face works on a huge number of platforms and browsers)
• Scaleable
• Colorable
• Animateable(!)
• Works with effects like text-shadow and background-clip: text
• Easy to serve in retina and standard pixel density
• Competitive filesize, especially when compared to icon sets with lots of variations

Icon playground from CSS-tricks.com

Acquiring a font

Many icon designers are already selling icon fonts as part of their packages. Some great examples:

• Pictos
• Fico
• Icomoon
• ShiftIcons
• iKhahnfont

There are also excellent free sets out there:

• Font Awesome
• Signify
• Iconic

Rolling your own icon fonts is another option. You can use font creation software like FontLab or Glyphs, or for a free alternative, try the Inkscape method or Hieroglyph, a script I wrote for generating SVG fonts from a single folder of icons.

Before you generate your own font, make sure the icon license doesn't disallow embedding. Serving your icons as a font makes vector paths available to web-savvy users, so be careful that you're not accidentally redistributing someone else's work.

Implementing

There are a few competing methods for actually placing your icons on the page once you have a font:

• Chris's original proposal uses pseudo-elements.
• Jon Hicks suggests combining pseudo-elements with a data-icon property.
• You can also just place your icons on-page as an element like a <span>. At the moment, this is the only way you'll be able to apply animations to them in Webkit browsers.
• BONUS: Check out Patrick Haney's "best of both worlds" idea, which uses Jon Hicks' approach on spans to create animateable icons.

With all of these methods, you need to worry about accessibility: sprinkling random letters through your document can be confusing to users with screenreaders.

• If you're using pseudo-elements, you can use glyphs that are mapped to supplementary private use areas, which won't be read to screen-readers — the downside being that these characters are harder to remember and type, and you have to find a font that uses them.
• According to Hicks, the "data-icon" method will read your icon names to screenreaders, but the convenience of the method might outweigh the accessibility issues.
• Finally, if you include icons onpage as spans, you'll need to go out of your way to treat them for screenreaders. One suggestion:

<span class="icon" aria-role="presentation">
  <b>Icon:</b> F
</span>

This method hides the icon from most screenreaders, but leaves a cue as to the element's purpose when a page is viewed without CSS.

Hieroglyph

A quick plug for the Hieroglyph ruby gem:

Easy to install — on many systems, 'gem install hieroglyph' is enough

Repeatable —  unlike the Inkscape method, Hieroglyph works from a dir of icons and doesn't require tedious pasting into additional files.

Flexible — Supports private use unicode chars and special characters

Helpful — Generates a character sheet PNG

If you want to test it out on a system with ruby installed, just run:

gem install hieroglyph && hieroglyph -e && hieroglyph

This sequence installs Hieroglyph, creates a folder of example glyphs (including two 'bad' glyphs for comparison), and finally generates an SVG font from the folder.

Hieroglyph can't generate a full set of fonts on its own - for that, you'll need to upload your font to a service like FontSquirrel or FreeFontConverter. If you try out Hieroglyph and run into any problems, make sure to let me know on GitHub.

Wrap Up

Have you seen any great icon font resources I should include in this post? Have any new info about this technique? Let me know over Twitter or in the comments.

The one issue that definitely took some thinking to figure out was how to deal with nested columns. What the heck do I mean by that? The following image should demonstrate what exactly I mean:

For the site I am building, we are using a 12 column grid. To build the layout pictured above, we are looking at two 6-column-width columns, and the second column would have 2 rows with two 3-column-width columns in it. Kinda confusing in words, but here it is in markup:

<div class="row">
	<div class="span6">
		Left Column
	</div>
	
	<div class="span6">
		Right Column
		
		<ul class="row">
			<li class="span3">Sub Column</li>
			<li class="span3">Sub Column</li>
		</ul>
		
		<ul class="row">
			<li class="span3">Sub Column</li>
			<li class="span3">Sub Column</li>
		</ul>
	</div>
</div>

If we take fluid grids out of the picture, that would all work fine. But, since we are using percentages, that would look like crap, and here’s why.

.span6 {
	width: 49%;
}

.span3 {
	width: 23.5%;
}

Here are the pixel equivalents if our design were 1000px wide:

span6: 1000 * 0.49 = 490
span3: 1000 * 0.235 = 235
span3 inside of a span6: 490 * 0.235 = 115.15

So clearly that approach won’t work.

How does Twitter Bootstrap handle it?

Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.

Ok, so they are recommending that the markup should look like this:

<div class="row">
	<div class="span6">
		Left Column
	</div>
	
	<div class="span6">
		Right Column
		
		<ul class="row">
			<li class="span6">Sub Column</li>
			<li class="span6">Sub Column</li>
		</ul>
		
		<ul class="row">
			<li class="span6">Sub Column</li>
			<li class="span6">Sub Column</li>
		</ul>
	</div>
</div>

Weird, but ok. Let’s look at how our columns calculate out in pixels.

span6: 1000 * 0.49 = 490
span3: 1000 * 0.235 = 235
span6 inside of a span6: 490 * 0.49 = 240.1

Hmmmm, close, but that value is a bit different from what the design is calling for. Here’s where we could argue about sites not having to be pixel perfect to the design and blah blah blah. But, this is potentially a larger problem because we need to have images big enough to fill those sub-columns.

My Solution

My solution involves “resetting” the values of each sub-column’s width inside of every column. Sure, that sounds like a lot of work, but Sass and Compass can help with that.

Variables and Mixins

$cols: 12;
$gutter: 2%;

$one_col: (100% - ($gutter * ($cols - 1))) / $cols;

@mixin cols($num) {
	width: ($one_col * $num) + ($gutter * ($num - 1));
}

@mixin sub_cols($num_child, $num_parent) {
	$parent_size: ($one_col * $num_parent) + ($gutter * ($num_parent - 1));
	$child_size: ($one_col * $num_child) + ($gutter * ($num_child - 1));
	margin-left: ($gutter / $parent_size) * 100%;
	width: ($child_size / $parent_size) * 100%;
}

$cols and $gutter are variables that you would want to adjust to match whatever grid your designer is using. The rest are things you shouldn’t have to change.

Generate the grid

Next, we need to utilize these mixins and generate our grid.

.row {
	#{enumerate('.span', 1, $cols, '')} {
		float: left;
		margin-left: $gutter;
	}

	@for $i from 1 through $cols {
		.span#{$i} {
			@include cols($i);

			@for $j from 1 through ($i - 1) {
				.span#{$j} {
					@include sub_cols($j, $i);
				}
			}
		}
	}

	> :first-child,
	.row > :first-child {
		margin-left: 0;
	}
}

A sample of our output would look something like this:

.row .span6 {
  width: 49%;
}

.row .span6 .span1 {
  margin-left: 4.0816326531%;
  width: 13.2653061224%;
}

.row .span6 .span2 {
  margin-left: 4.0816326531%;
  width: 30.612244898%;
}

.row .span6 .span3 {
  margin-left: 4.0816326531%;
  width: 47.9591836735%;
}

.row .span6 .span4 {
  margin-left: 4.0816326531%;
  width: 65.306122449%;
}

.row .span6 .span5 {
  margin-left: 4.0816326531%;
  width: 82.6530612245%;
}

So, if we take our new width for a 3 sub-column inside of a 6, 47.9591836735%, and do some math, this is what we get:

span6: 1000 * 0.49 = 490
span3: 1000 * 0.235 = 235
span3 inside of a span6: 490 * 0.479591836735 = 235

Hot.

I’ve got a repo up on github with all this stuff in it, along with some demos. I also put together a fiddle if you just want to mess around with it.

One More Thing

I had to increase the number of decimal places to get more precise percentages. You can do that by throwing this into your config file:

Sass::Script::Number.precision = 10

A Caveat

This only solves the problem two levels deep. If you tried to go another level down, you would encounter the same problem, but two levels was deep enough for me.

So how have you all solved this problem before?

Next week our local businesses, restaurants, bars, coffee shops, streets and foothills will be packed full of folks celebrating the awesome startup culture of Boulder. It’s time again for the annual 5-day event: Boulder Startup Week!

We at Viget are psyched to show our support of Boulder Startup Week by hosting an event featuring speakers and insight from the local community. Our event is called Startups + Great UX = Great Success and it’s a topic close to our heart. Besides an enticing alphasymbolic title, we hope the lineup of speakers (see below) will be able to drop some wisdom on ya. Here are the details:

Startups + Great UX = Great Success

Absinthe House - Thursday, May 17, 2012, 2-3:30pm

It's no secret that creating a great experience for users is critical to a successful startup. But doing that in a startup environment can be challenging. Limited resources, small teams, and the pressure to get something, anything, out the door can sink even the best intentions. We'll hear from people working inside local startups and at agencies that work with startups on how they try to overcome those challenges to creating a great product. Speakers will briefly share their experiences and work, then we’ll have a moderated Q&A. First drink complimentary. Light snacks provided.

Moderator

Andy Montgomery, User Experience Designer
Viget

Speakers

Jackson Fox, Senior User Experience Designer
Viget

Dave Pitman, Designer
Lab Cogs Co.

Andrew Cohen, Lead Designer
Next Big Sound

Kevin Menzie, Founder & CEO
Slice of Lime

Register

If you’d like to register, click here. 

Conference schedule

Some themes from Gravity Free 2012: Outlaws and Icons:

Sustainable vs. Green vs. Nature

There was general consensus that just because something is sustainable doesn't necessarily mean it's green and vice versa. Gordon Gill shared the work of his visionary architecture firm that explained how thinking about how wind travels through and around buildings is far more important to sustainability than finding ways to support trees and greenery in the structures. Put simply, finding ways for wind to penetrate structures easily means lighter and fewer materials are needed to build taller buildings. Contrasting slightly, James Ramsey cited the importance of greenery to human comfort, health, and happiness as he described how he and his partners are working to build a subterranean park in an abandoned underground railway terminal in Lower Manhattan. Margie Ruddick explained the importance of natural "mess" which is essentially designing around nature so that nature can thrive the way it is supposed to – naturally. In essence, she described how nature allows for both order and chaos and how we, as humans, walk a fine line between the two.

Chip Kidd speaks about his graphic novel.

Pencil, Pen & Paper

Big ideas often come from the simplest of tools. Opening speaker, Chip Kidd, right off the bat referenced the pencil as an important tool for creative thinking. Conference organizer, Lee Knight, described Javier Mariscal as a pen and paper designer before introducing him to the audience through video conferencing. While Mariscal didn't specifically reference pen and paper, it was clear very quickly how important the two tools are to the sketch-like quality of the design he's become known for. In the epic closing remarks from George Lois, he was quick to tell us not to expect a clever idea to come out of a computer. He went further to say that collaboration was far less important than individual creative thinking. He calls the resistance to collaboration "rejecting group grope."

Panel discussion led by Jonathan Alger featuring Brian Collins, Margie Ruddick and Javier Mariscal.

Persistence 

Cartoonist Ivan Brunetti stated "Remain unreasonable until the world bends to your will." Reflecting back on all of the speakers, it was clear that none of them gave in easily on their ideas. Good ideas require confidence first, then persistence to ever see the light of day. Lois backed this up by saying, "There is no such thing as a cautious creative" and that "Designers don't need to learn how to design. They need to learn how to sell their ideas."

Ivan Brunetti speaks about his persona and approach to comics. 

Bravery, Courage & Risk

Perhaps the biggest takeaway for me was the importance of courage as it relates to design on a day-to-day basis. This includes everything from the courage to try new things to the courage to fight for the best ideas and to never compromise what you feel strongly about. Neville Brody reminded us that "Possibility grows out of risk." If we don't take risks, we limit what is possible. James Victore shared a story about how the Museum of Modern Art wrote a letter to his mom in reference to his upcoming exhibition just because he asked them to. The lesson being that if you want something, just ask for it. Finally, George Lois built a career on courage. Every sentence out of his mouth in his closing remarks was either directly or indirectly a reference to bravery, courage, or fearlessness. An excerpt from his book (a gift to all attendees) sums it up best:

The courage to create only superb work, through thick and thin, and to fight to protect it at all cost, is not generated in the head … it comes from your very heart and soul. 
--George Lois, Damn Good Advice (for people with talent!)

Keynote George Lois spouts good advice.

The beauty in Gravity Free was in the broad brush strokes. While there are plenty of conferences out there with more narrow nib focus, it's good to use different size brushes from time to time. I'm glad I went. 

Be brave. Make design that matters. 

As I debated which table to join, a crowd quickly gathered in the back corner. Weaving through the maze of people and tables, I heard laughter from the circle of people that surrounded the table. Clearly this was the place to be, so I took my place in the standing room only crowd. On one side of the table sat an older man. His circular stainless steel framed glasses and sharp black suit sharply contrasted his otherwise grandfatherly look. The crowd hung on every word of the stories that he told in a thick Bronx accent. This table certainly was special, because the sign on the table read George Lois.

The theme of the 2012 Gravity Free conference was Outlaws & Icons. Many of the presenters fit into one, or both, of those categories. But George Lois has secured spots near the top of both lists. His lifetime of work challenged culture and changed minds during a pivotal time in American history. In the 1960s, Lois designed some of the most controversial covers of Esquire magazine. Under the editorial leadership of Howard Hayes, he is credited in part for increasing the magazine subscriber base from 400,000 to over 1,000,000. Everyone wanted to get close enough to hear him speak, and even CBS showed up with a camera crew.

Leaning forward, Lois peered over the top of his thick glasses and recounted the events that led to the creation of the “I want my MTV!” slogan in 1982. “I told them that we’d get Mick Jagger to do the commercial. They said it would never work.” At a time when the network was struggling to get cable networks to include MTV in the lineup, it was Lois who rebranded the network causing it to soar in popularity. “I called Mick and talked for three minutes. I finally stopped and said, ‘Mick, you there?’” “Yeah, yeah...keep going,” Jagger replied. Lois slumped back in his chair with a look of amazement as he remembered Jagger saying, “I’ll be in New York next week. Where do you want me?” Lois continued, “He came to the studio an hour late, we shot the commercial with Mick picking up the phone saying, ‘I want my MTV!’, and that’s how it all started.” He finished with a broad smile that only comes from telling a story that will never get old.

The hour disappeared with Lois telling one story after another. Every so often he would stop mid-thought and offer a piece of sage wisdom from working at his craft for so many years.

• “Create big ideas, not designs.”
• “There's no such thing as a cautious creative.”
• “The word comes first, then the big idea.”
• “Never work for bad people. If you do, you're mediocre.”
• “Designers don't need to learn how to design. They need to learn how to sell their ideas.”
• “Present your ideas without saying ‘yeah’, ‘like’, and ‘um’ every other the word.”
• “You can't let anybody make you do bad work.”

In the end, this polarizing figure in the world of advertising sold me. Lois sold me on his work, his big ideas, and himself. I left Gravity Free feeling energized about my own work, and excited to learn more about Lois. I realized that I’m guilty of focusing solely on studying web design because that’s what I do day-to-day. The principles of good design are ubiquitous and translate to every design discipline including the web. Big ideas are still out there. The opportunity to be unique isn't dead. Go do good work for good people and avoid mediocrity at every cost. 

Resources about George Lois

• GeorgeLois.com
• Wikipedia
• Book: Damn Good Advice
• Big Think

Working on these skills is like brain pilates. Observational exercises are great avenues to recharge our professional spirit, but honing our skills in observation requires training. It demands we slow down and reflect—it requires patience, passivity, and a willingness to table our personal bias. This type of empathic design will help you produce more innovative solutions and create a strong communal association with the behavior of users. It's a gentle reminder that our role is one of advocacy, trust, and facilitation.

Considering the need for this kind of professional development, our UX team has actively created “training” exercises that specifically focus on refining our observational skills. One recent opportunity we created took place at the Virginia Museum of Fine Art in conjunction with a team offsite event in Richmond, Virginia.

Image courtesy of VMFA. Photography by Bilyana Dimitrova.

Our goal was simple—create an engaging team exercise to challenge our ability to observe and record behaviors, usability patterns, or interactions. The museum provided a great setting for this type of exercise since it contains visitors of all ages, interactive exhibits, wayfinding/traffic flows, and wasn’t too large or too small.

We determined that a digital scavenger hunt would provide a recognizable game structure for teams to understand. Using our smartphones as a recording device, teams were given an hour to photograph examples of interactive-related behaviors. We created 11 categories modeled after a hunt created by the Computer-Human Interaction Forum of Oregon (CHIFOO). Each category included instructions to capture both a good and bad example of each category. These included tasks such as:

• Capture an arrangement of controls that make it easy to perform a task
• Capture physical feedback that interferes with a user’s ability to use a system
• Capture an interactive sequence with an intuitive user flow
• Capture an example of an agent that negatively affects the user’s behavior
• Capture an example where color is successfully used to convey meaning
• Capture an experience that users enjoy.

We also wanted to have a shared online repository where every team could record the observations they captured within each category. Our smartphones were an efficient and unobtrusive way to record our observations, and we discovered that the Pinterest app’s interface suited our requirements better than many applications specifically built for scavenger hunts. Pinterest allowed us to create shared pinboards for each usability category and pin our images to the appropriate board immediately after they were captured. Our boards could then be used for any future exercises, morphing into a long-term collection of good and bad usability examples.

One final aspect that was particularly interesting to the team was how observations or notations around spatial properties in the physical world reflect similar usability concerns in online environments. Could the observation of a flow or sequence in an environment such as a museum influence any future interactive patterns we develop for our clients? I’ve listed a few of our observations below.

The transition from the balcony to stairs was further cued in a floor texture change from tile to carpet. While this decision likely served a practical material purpose, the subtle reinforcement of the upcoming transition prepared visitors for their descent down the stairs.

Matching the background of the exhibit description labels to the wall paint color allowed the boards to be legible when in the immediate vicinity of the object, but not distracting (and fairly invisible) when panning or surveying the entire exhibit. This allowed the art, rather than the supportive objects to be the primary focus of sight.

Image courtesy of VMFA. Photography by Bilyana Dimitrova.

The success of pushing the elevator button is further reinforced by a visual cue of highlighting the button's outline.

Poor user flows and navigation were not typical of the museum except in this one example where the visitor encounters a dead-end and must retrace their steps back out of the exhibit. The physical experience of dissatisfaction and confusion is not dissimilar to user flows which provide little evidence of further interactions.

Listing the upcoming exhibits at this scale and location on this 3rd floor wall removed any ambiguity or confusion around the exhibits in this distant space, even for a user 2 floors below.

Example of a perspective where key pieces of art are visible from various points during your progression. Besides providing a sense of anticipation and wonder, the pattern of using art to mark the beginning or end of a path was established. This navigation strategy became a useful mental model for a visitor to understand progression through the museum.

A few challenges we noted were not being able to capture video for time-based observations like sequences and not having an efficient means to provide context or descriptions around the captured images. Given the limitations around mobile typing, the static image and subsequent label did not always adequately reflect the context for the observation.

Overall, the exercise was a success and provided a good opportunity for the team to practice our observational-based skills. The game-like mechanics and competition of the scavenger hunt made the exercise enjoyable while providing some categorical structure and focus to the behaviors we were looking to capture. It was also beneficial to pin our observations to a central location so all the groups could reference the images after completing the exercise .

We’d love to hear if other teams have found success in any observational exercises. In the meantime, check out our Pinterest boards or download the list of categories and tasks we used in our hunt.

Over the past couple of weeks, I’ve been consulting with various folks across the company from co-founders, Brian and Andy, to Cindy, our first employee (whom I’ve now classified as our Resident Historian since she either remembers or has access to information about almost anything from Viget’s past), to Jason, who more recently helped start our Boulder office. I stumbled upon hilarious photos from TTT events going way back, heard stories about previous employees, and got a chance to flip through binders of our old internal weekly Lab Reports (updates on projects, sales, and other Viget info).

In the end, I was able to capture Viget’s history in a visually-compelling timeline and showcase how Viget has changed and grown both professionally and as a family over the last 12 years. All of this without having to worry about finding design or development resources.

A lot of organizations have switched to the Timeline, but have chosen not to backdate it with information from the past. I’d encourage those of you who have already switched over or those who are still thinking about it to explore your company’s history and put some time into piecing together a complete timeline -- you won’t be disappointed with the journey or the result. In the meantime, check out our Facebook Timeline and feel free to tell us what you think!

Now I find myself writing posts for the same blogs that I once followed so intently. But, why is it that Viget sought to dedicate time to sharing?  Our CEO wrote about the original blog strategy back in 2008.  With the launch of the new Viget.com in March of this year, Brian commented on the success of the blogs.  We’re big on data here, though, so we decided to dig into the numbers to figure out what kind of impact our blogging strategy has had over the past four years.

While we knew that the blogs had led to some great recruits, a good amount of industry attention, and several key clients, we weren’t sure what to expect when we looked at the numbers. Below is a visualization of some of our findings. This graphic was originally created for an internal meeting, but we figured that since we’ve been sharing all this time, why not share some of the numbers behind the sharing too?

In the last year we have added a dozen new faces to our team, several of them to our Boulder office. And, since this was our opportunity to celebrate Viget being another year older and a TTT where we were all in one place, it needed to be special.  The whole Boulder team and Doug flew to the East Coast for the week and we all met halfway in Richmond, VA for our Quarterly Progress Meeting.

After our meeting, we mosied on down to The Capital Ale House where we rented out their private Music Hall for the night. Introductions and speeches were given and we took the time to recognize Kevin, Doug, and Emily for being with Viget for 5 years, and Peyton for his 10 years of service.

We ate delicious food, consumed multiple drinks, reflected on the last year with an amazing video by Zach, and laughed a lot (mostly at with Dan).

After dinner we played our annual game of Vigetry where there were moments of joy and humilty.

With our own private stage, we couldn't pass up the opportunity to showcase some of our talents, some more serious than others.

The rest of the night was filled with mingling and catching up with our friends.

We couldn't have asked for better weather on Saturday morning which got us pumped to go rafting with Riverside Outfitters. After all, what better way to recover from a late night than a face full of cold river water? With our rafting-themed gifts from Viget, we were ready! We filled up 10 rafts and hit the white water on the James River which offers the only Class III and IV rapids through an urban setting.

The morning water was calm and gave us the opportunity to wake and warm up. We took a quick lunch break and then it was back on the river for the more vigorous rapids.

Before we knew it, the trip was over and it was time to head home. It's memorable events like these that help remind us of how hard we work during the year that allow us to spend a few days to play even harder. Happy birthday, Viget! And, here's to another great year.

Any suggestions on what we should do for Viget's 13th birthday?

GPP (git pull --rebase && git push)

I can’t push without pulling, and I can’t pull without rebasing. I’m not sure this is still a point of debate, but if so, let me make my side known: I hate hate hate merge commits. And of course, what does Git tell you after an unsuccessful push?

Merge the remote changes (e.g. 'git pull') before pushing again.

This will create a merge commit, regardless of whether there are any conflicts between your changes and the remote. There are ways to prevent these merge commits at the configuration level, but they aren’t foolproof. This alias is.

GMF (git merge --ff-only)

I can’t create merge commits. Similar to the last, this alias prevents me from ever creating merge commits. I do my work in a topic branch, and when the time comes to merge it back to the mainline development branch, I check that branch out and pull down the latest changes. At this point, if I were to type git merge [branchname], I’d create a merge commit.

Using this alias, though, the merge fails and I receive a warning that this is not a fast-forward merge. I then check out my topic branch, rebase master, and then run the merge successfully.

GAP (git add --patch)

I can’t commit a code change without looking at it first. Running this command rather than git add . or using a commit flag lets me view individual changes and decide whether or not I want to stage them. This forces me to give everything I’m committing a final check and ensure there isn’t any undesirable code. It also allows me to break a set of changes up into multiple commits, even if those changes are in the same file.

What git add --patch doesn’t do is stage new files, so you’ll have to add those by hand once you’re done patching.

Hope you find one or more of these aliases helpful. These and more! available in my dotfiles.

Once configured, Single Entry moves your single entry channels out of EE's standard publish and edit workflow and into a new section of your content dropdown.  From there, you'll have quick access to creating and editing the individual entries in those channels without the hassle of navigating through the standard EE edit workflow or accidentally creating a new entry in a channel that can't use one.

Best of all, your data and development workflow aren't changed in any way. Single entry channels are still completely native and can be assigned custom field groups, category groups and statuses, and used in templates just like always. And through the configuration panel, even the name of the new section in the content dropdown can be customized.

Single Entry is available starting today on Devot:ee for just $5. Grab it here.

.example {
  pointer-events: none;
}

What the property does:

The pointer-events property allows you to specifiy how the mouse interacts with the element it is touching. Although it was originally intended for SVG elements, browser support for pointer-events on other elements is pretty good, except for IE, which in some cases may not matter (I'll explain why towards the end of this post). The most common use case is to set an element’s pointer-events to none, which allows clicks to pass through the element, or hover actions on the element to be ignored.

How it made my tooltips sweet:

You can view and play with the code here. (And yes, it degrades gracefully for IE.)

I was creating a CSS-only tooltip and I wanted to fade it in and out using the CSS3 transition property. Fading the opacity to 0 works great, except that the tooltip is technically still there (just invisible), blocking mouse interaction with content below it and growing the :hover area of its parent to include itself. Boo. I couldn’t just toggle display:block and display:noneon:hover because that would hide the element before it had a chance to smoothly transition out.

Setting pointer-events to none solves the issue by making our invisible tooltip invisible to the mouse as well. You can now mouse all around the button without hitting our hidden tooltip. When the tooltip is showing, I set pointer-events back to auto so that the tooltip stays visible while I’m hovering over it in addition to its parent.

For Internet Explorer (lte9 - I haven't tested 10 yet), rather than animating opacity and translating the position, I’m just toggling display:block and display:none since the CSS3 animations aren't supported anyway. So in this case, we don’t need pointer-events (which is unsupported in IE) because display:none removes the element completely.

Other fun stuff in the CSS:

• CSS generated content: Check out Trevor’s post if you don’t understand where that cute lil’ triangle on the tooltip is coming from.
• Bridging the gap: If you were to mouse up from the tooltip link and into the tooltip bubble, normally your mouse would be leaving your hovered element, and the tooltip would disappear. We want the user to be able to mouse over the tooltip as well, so using generated content again, I created an invisible block beneath the tooltip that bridges the gap between it and its parent. Now you can safely mouse into the tooltip without it disappearing.
• Webkit display fixes: -webkit-transform:translateZ(0) fixes the infamous flicker I’ve written about previously, and -webkit-font-smoothing:antialiased fixes another webkit-only display issue where the text flickers as it momentarily changes antialiasing modes while animating.
• IE conditional classes: If you’re unfamiliar with this best practice, see Paul Irish’s post. (It’s even got Doug’s two cents thrown in!)

Internet Explorer Oddities:

Like I said, the pointer-events property is not supported in Internet Explorer, at least through IE 9. There are javascript workarounds, however it’s good to note that IE handles transparent elements differently, and you may not need the property at all in some instances.

Check out this example in IE and compare it to other browsers. It's really odd behavior.

You can view and play with the code here.

Crack open IE and hover in and out of the text, "HOVER HERE (div-2)". In Internet Explorer (all versions through at least 9), if div-1 has a height and a width, and is positioned on top of div-2 , but does not have a background-color or background-image, you can interact with (hover in this case) div-2 wherever there is content showing through. So when you hover over the text, "HOVER HERE (div-2)", div-2 gets hovered, and div-1 loses hover. Weird! Anywhere else within the bounds of div-1 it does not. If you wanted to make div-1 act like normal browsers and truly cover the content below it, you can give it a transparent background png or gif. All other browsers (to my knowledge), div-1 would block the mouse events on div-2 whether or not it was filled with something.

Moral of the story:

In certain instances, you can use this to your advantage as an IE workaround for pointer-events:none that lets you click or hover on elements behind another element.

In conclusion:

I hope you and pointer-events have a wonderful future together. Had you heard of or used the property before? Do you have a different way of accomplishing the same thing? Share you knowledge!