📖 Timeline

By Michael Crichton

🎥 Frozen

🎥 The Hobbit: The Desolation of Smaug

Anyone who has ever searched for something related to web development has run into Chris. He runs the blog CSS-Tricks, as well as Code Pen, and the podcast Shop Talk Show. He’s like your own personal Mr. Miyagi in a can—always available to pop out when you need advice. He is now one of my heroes as he has unknowingly become something of a mentor on my path to front-end web development competence.

He was scheduled to be the second keynote address at the recent CSS Dev Conference, which I was invited to sketchnote. One of my goals in attending that conference was to meet Zoe Gillenwater, which I [wrote about]({% post_url 2013-12-07-meeting-your-heroes %}) recently. My other goal was to meet Chris Coyier. I started listening to and sketchnoting episodes of the Shop Talk Show a few weeks prior to the conference. One of huge interesting side effects of listening to someone over the course of a few hours is that you feel like you get to know them a bit. So I was excited to meet the man behind the voice.

The first night of the conference included a little history lesson on the Stanley Hotel. I went to the table where Chris was sitting and sat down next to him, and said something like, “You’re Chris, right?” Very kindly, he replied, “Hey, it’s Ben, right?” And my jaw dropped. The Chris Coyier knew who I was? I was stunned. I stammered out, “You know who I am!?” With great grace, he refrained from bursting out laughing, and pointed to the big name tag hanging around my neck. I started laughing at that point, and felt pretty foolish. Since I have four kids, and have seen the movie quite a few times, the scene from Cars flashed in my mind when the old rusty car with his name on his license plate freaks out that Lightning McQueen knows his name. Yeah, I was cool like him.

As Chris and I started chatting for a minute and I mentioned that I was there to sketchnote the conference, he recognized me from the sketchnotes I’ve done from Shop Talk Show. We chatted about him having lunch with the legendary Mike Rohde, the man who coined the term “sketchnotes” and who lives in Milwaukee as well. Over the course of the conference, we chatted a few more times, and I was impressed to find him a genuine, down-to-earth guy, despite being ridiculously famous in this little web-development world of ours (top nerd!?). And even better for me, he seemed remarkably willing to forget our meeting and still treat me professionally.

We all have moments that shape our lives to take us in different directions. For some people, it might be reading a particular book; for others, it might be hearing an influential talk; and for others, it might be just meeting someone. We often don’t realize in the moment that we are being transformed, but as we look back on our lives, it is easy to pick out those turning points. It can be dangerous when those turning points are so closely aligned with people that they become heroes to us. The danger is that they are human, and the possibility of eventual disappointment is huge.

Exposition

I work for Balsamiq, and every summer we all get together from our remote locations and have a week-long retreat. Last year it was in San Francisco, and one of our opening activities was to share a short slideshow of our heroes. One person commented that meeting your heroes can be a real let-down. He showed a slide he had made a few years earlier of his heroes, and then showed how many of them had been crossed off the list for one reason or another. One of the biggest reasons for the X’s was that he had actually met many of them, and they turned out to not be anything like what he thought.

Rising Action

For me, a specific turning point was the RWD Summit 2012, a web conference all about Responsive Web Design. I was a UX Designer on a team without front-end web developer, and was struggling to find a way to help get my designs implemented. I had no experience coding HTML or CSS to that point, and had heard the buzzwords “Responsive Web Design” thrown out, but they always seemed to mean something different each time I heard them.

There were two specific talks at that conference that seemed to open a door for me. The first was “Building a Responsive Layout” by Zoe Gillenwater. She showed how simple it was to build layouts that were not based on fixed widths, but rather on fluid percentages that could even be nested. She introduced concepts to me such as “mobile first” and “progressive enhancement” in a practical way that I could immediately see how to apply them. Because she combined solid theory with live examples, I felt like I truly understood what the foundations of responsive web design meant, and felt ready to apply them immediately in my own work.

The second talk that struck me was “Retrofitting Sites for Responsive Web Design” by Ben Callahan. He walked through the practical example of making the Twitter site responsive as we watched, using the Chrome Dev Tools. That showed me even more some of the basic properties involved in making a site responsive. I also realized that I could start playing with those tools right away to learn different CSS properties, and understand what they meant by seeing what they did when changed.

That insight opened the floodgates for me. I went back to my team and started inspecting the pages after they had tried to implement my design, and I would tweak it and them email them the line number and the CSS code that I wanted changed. Eventually, I got set up to write the code from the beginning, and thus began my journey into becoming a front-end designer. Since that time, I have progressed to writing production-level code, and have been able to design and code a few sites by hand, including my own site with two different skins.

Fast forward to Fall 2013, and I found myself anticipating meeting the two people I hold responsible for getting me into front-end development, Zoe and Ben. The kind folks from Environments for Humans had me out to sketchnote the CSS Dev Conference at the Stanley Hotel in Estes Park, Colorado, and the Artifact Conference at the Biltmore Hotel in Providence, Rhode Island. I set as my goal before the conferences to try and meet Zoe and Ben, as well as Chris Coyier, although meeting him is a [different story altogether]({% post_url 2013-12-08-my-own-cars-moment %}).

Climax

The first night of the CSS Dev Conference included a tour of the haunted hotel that inspired The Shining, and I found myself walking next to none other than Zoe Gillenwater. I introduced myself as the guy there to sketchnote the conference and was shocked when she responded with something like, “Yeah, I know you! I love your sketchnotes!” We started chatting for a minute, this keynote-speaking, book-writing hero of mine and me, and found that we had a lot in common. We both have young kids, we are both passionate about learning new things, and we are both Mormon. Over the next few days of the conference, we had a few opportunities to chat, and we talked about how she got into web development, how she started writing and speaking, as well as fun random stuff about having a young family and trying to figure out a career and balance home life. I left the conference feeling like I had a new friend, which blew all my expectations out of the water.

Two weeks later, I was landing at the airport in Providence, RI, and as I got picked up and driven to the hotel, I rode with, you guessed it, Ben Callahan. We chatted briefly then, and off and on throughout the conference, but didn’t get much time to talk until dinner on the last night. I’ll talk more about that dinner in a minute, but it gave me the chance to sit next to Ben and just talk about his life and his journey to where he is now. Again we found much in common with raising small kids, balancing a career, and learning and growing while giving back. I was so inspired by what he has been able to accomplish.

Falling Action

At dinner that last night in Providence, I had been invited to come out with the workshop presenters and the conference organizers. I felt a little bit like the little kid at Thanksgiving who is invited to the grown-ups’ table for the first time. There were so many people that I admired and respected there. As we talked, it was kind of funny how the circle of inspiration had gone around the group. Brad Frost talked about his experience meeting Jen Simmons for the first time, and realizing that she was the one who wrote “that cool web book.” He said if it wasn’t for her, he wouldn’t be doing what he is now. Ben Callahan shared a similar experience about meeting Christopher Schmitt for the first time. And I was thinking about how it was happening for me! Right then! I wouldn’t be there if not for Ben Callahan, and I was sitting right next to him as if I had some right to be there! I kept my thoughts to myself that night, just happy to be at the table. Maybe next time we are all together, I can share my story.

Dénouement

One of the biggest takeaways from my conversations with both Zoe and with Ben was to start writing. That is the best way to start sharing knowledge and experiences, and begin contributing to this living, growing community we are lucky to be part of. Even if we aren’t already all that we want to be, it is helpful to everyone if we document the process along the way to get there. So here’s hoping I (and all of us) can stay consistent in sharing lessons, mistakes, and successes.

🎥 The Hunger Games: Catching Fire

📖 🛏 The Chronicles of Narnia

By C. S. Lewis

📖 Twilight Series

By Stephenie Meyer

📖 🛏 Harry Potter Series

By J. K. Rowling

This post wraps up my series of sketchnotes created for The Company Corporation (Incorporate.com). The event was a Q & A session with Brandon Steiner of steinersports.com and went through lessons he learned as an entrepreneur. The session contained tons of great information for small business owners, but was a challenge to sketchnote. All of the other sessions in this series were prepared presentations, so they had a structure, and a natural flow. But this one was more organic, with stories illustrating unconnected points. So the process that I took was different from what I have used with most events, and I thought it would be interesting to share.

I watched the broadcast once in its entirety without capturing any sketchnotes just to get a feel for the content. That helped me realize the approach I wanted to take. Similar to my sketchnotes for the Raising Capital webinar, I wanted to try a different layout than what I have typically used. So when it came time to actually sketchnote the event, I left lots of white space and captured main ideas from the stories presented as usual, but I worked in more of a popcorn layout. As new ideas came up, they just popped onto the page without following a set order or pattern. For a linear presentation where the ideas build on each other, a sketchnote using this structure would be harder for someone reading it to follow, but since the ideas were loosely connected if at all, this worked well.

Once I was finished with the event, I went back and added some color and some emphasis to the title. With a non-standard layout, the title needed to pop a bit more than normal. Usually, this will be the final step for me. I prefer to do as much as possible live during the event, and will often add color highlights as I go if I’m going to use them in a sketchnote. Since these sketchnotes were for a paying client, I wanted to take a bit more time on each of the stages so that the end result would be the best that it could be.

Finally, I decided to try something else new and add some embellishments. There was so much great content and I wanted to convey that sense immediately. The clean layout that I had with lots of the white space works well for many situations, but I wanted something more. So I went back to the presentation and added some additional points that I didn’t capture during the first pass. I also added illustrations for some of the original points until I felt like I had the effect that I wanted. Since this was pushing me out of my comfort zone a bit, I scanned in the sketchnote at each of the stages, so that if I was dissatisfied with how things turned out, I had something to fall back on. But in the end, I felt that I had a product that worked well and was something I could be proud of.

Hopefully this glimpse into my creative process was interesting for you and sparks ideas for things you could try!

Back to top | View entire gallery»

The third installment of the series for The Company Corporation (Incorporate.com) was another fantastic resource for small business owners. This was focused on how to raise capital for your business, and making sure that you have considered all of the ramifications.

I had noticed that my sketchnotes had all been in the same basic layout: top to bottom and left to right in something of a “Z” pattern. So this time I tried a completely different layout, and I loved it! Doing something different pushed me a bit out of my comfort zone, and I was pleased the with end result. Hopefully you enjoy it too!

Back to top | View entire gallery»

The next installment in my continuing series of sketchnotes produced for The Company Corporation (Incorporate.com) is from a webinar about maximizing your tax benefits as a small business owner. This was delivered by Sandy Botkin, from Taxbot.com. He is a CPA and a former trainer for the IRS, so his perspective was invaluable. It was a fantastic session for small business owners about how to make sure that you are taking advantages of the laws that are created to help build your business. I learned a great deal, and enjoyed sketchnoting it.

Back to top | View entire gallery»

One good thing leads to another! A couple weeks ago, I posted about Next Thing Now and some sketchnotes that I did for a webinar they put on. Through that event, I was introduced to John Meyer from The Company Corporation (Incorporate.com), who commissioned me to provide sketchnotes for a few webinars. They provide many of these webinars as free resources to small business owners in their Learning Center.

This first session was presented together with SCORE (www.score.org), and was all about how to start your own business. They went through the details of the preparation that you have to do, the options that you have, and the information that you need to know. It was a great session, and one that I would recommend to anyone who owns a small business or is looking to start one. Here are my sketchnotes!

Back to top | View entire gallery»

This was an exciting week! Tom Nagle contacted me early in the week wanting me to do some sketchnotes for a great speaker series he has organized. Next Thing Now served as the first stop for Dan Pink’s book tour for his new title, To Sell Is Human.

It was such a treat to be able to get an exclusive look at Dan describing some of the principles from a book that I had on pre-order! His talk was an hour, and just scratched the surface of what is in the book. I hope you will enjoy the sketchnotes and then read the whole book. It will be well worth your time.

Back to top | View entire gallery»