In 2019, we pitched the big one, Kodak.com. Kodak is a company born in Rochester, NY and when I was at Dixon Schwabl we had a long off-and-on relationship with the company. We would do small things that included involvement from Kodak, but when the opportunity to develop the newly designed Kodak corporate website came up we put all of our effort into it.

Around this time Kodak was looking to update the platform their website was built on and they had a specific request. They wanted the back end built in something that can be flexible and easy to maintain, with a front end that was headless and able to display a huge array of components.

Being a large, international company, internationalization was a requirement and we had to be able to author product pages, newsroom posts, and one-off marketing pages in multiple languages.

Kodak had their own designers and writers who were already familiar with the brand, so our role was mostly around the development of the website.

We developed various page types for the site. The homepage was sort of a page builder generic landing page type where it could feature films, videos, products, and one-off experiences.

The menu for the site was built in a "mega menu" fashion based on which parent page you were on. In addition to the links in the menu it might show products related to the page you are on or upcoming events.

We developed a product filter page that helped you narrow down products based on different features. This was similar to the kind of page you would find on an e-commerce website, letting you filter down products based on dimension or by feature. The product pages had a specific format where they included images of the product, product specifications, and the ability to download manuals and brochure PDFs.

Other pages inside of the site used the most epic page builder I've ever created. We had recursive components and layout options that provided the content authoring teams with plenty of layout options. The designers at Kodak did a great job organizing their work so we had consistent typesetting and color patterns to work from. For certain components we created every variation you can think of from black on yellow, red on yellow, yellow on black, etc...

When we launched the site we developed it to support English, Korean, Mandrin, and Japanese. In the future, new languages would be added, so we had to make sure fields and pages could be translated. We also had to include the ability to make some pages available in some regions and disabled in areas where the content wasn’t relevant.

While we let Craft CMS and it’s multi-site feature do a lot of this heavy lifting, the amount of fields and the type of content we were creating really pushed the platform to its limits.

What I Did

I was involved in this project from the very beginning. From being a big part of the original pitch meetings, to meeting with the client’s IT teams, I did a lot to help earn this business for the agency. Once development began, my friends, Marc, Rachael, Megan, and I became this inseparable unit that chipped away at the mountain of development tasks in front of us.

We created most of the front-end using Vue.js (eventually we transitioned the site to Nuxt.js) and the back-end in Craft CMS. We worked with another company to handle the DevOps and infrastructure of the site, so we could focus on content modeling and the front-end work.

On the front-end we created dozens of Vue components and used all of the performance and accessibility tricks we knew to make the site performant and capable of handling many different variations of the components we built.

Fin

There’s a whole lot more that went into this project than I can put in this blog post. The phrase working around the clock comes to mind as we worked on this throughout the onset and much of the first year of COVID. We had a ton of work to complete and a lot of major life changes to navigate, so Marc and I became a well-oiled machine of Vue templating and CSS styling.

I learned a lot throughout this project and it was a highlight of my time at Dixon Schwabl. It was also a very personal win for me. In college I took photography lessons and developed my prints on Kodak paper. I had a job in the photo center of a pharmacy developing prints, using Kodak chemicals and processes. My first two digital cameras were Kodak brand and they sparked my life-long hobby and provided me with many great memories. So walking through the halls of Kodak and meeting with the team felt surreal at times.

Kodak has seen its share of ups and downs, but they are still here and doing what they do best. I’m glad I got to play a tiny little part in their story.

• Community Bank

• Websites 2007 – 2021

In 2018, we launched a website for Community Bank, N.A. (CBNA). The site was the marketing and informational side for the US regional bank. It featured information around different account types, included rates and offers, had a store finder, and had a landing page builder used in marketing campaigns.

The homepage included current offers and links to popular pages. It was the place where many customers started before logging into their online banking. We included a rotating carousel of offers in front of a large hero image.

Some of the pages on the site had a unique page layout, but most of them were built using a page builder with components that mixed and matched, depending on the needs of the content authors.

Icons created by our designers added a little bit of character and consistency between pages.

As part of the CBNA website project, we developed a theming system that let us re-use page components across multiple themes. This was used to differentiate the wealth management section of the site.

What I Did

I was the main developer for the original launch of this site, but my friends, Zach Sackett and Marc Hartwig, wound up trading on and off with me as we worked to add new features to support the website. This included a whole page builder setup for their marketing landing pages and a similar templating system for their email marketing.

While the client handled much of the content authoring, we supported the site by adding new features over time. I wrote several custom Craft CMS modules to help support their content needs.

Fin

Throughout my career I had worked on a few high-traffic sites, but this was probably the one that had the most concurrent users on a regular basis. We optimized performance wherever we could and we had to take into account user traffic during update deployments because taking down the website could impact thousands of people at once.

These were the kinds of challenges I wouldn’t have anticipated in my early career, but it was mostly par for the course at the level we were working at by this time.

• RBC Heritage

• Kodak

In 2018, Dixon Schwabl’s social media and PR team was on fire. Their help promoting the RBC Heritage event earned us the opportunity to redesign the event website.

The website had two main phases throughout the year. First, there was the pre-event stage where selling tickets was the primary goal. Then, during the event the site got transitioned over to help attendees out with basic information (like where to park and where to stay), and to celebrate the winner and share social media images uploaded by fans.

Because of this hard line, we set the Craft CMS back-end up with a single switch that flip between both phases of the site. While there were some design changes, flipping this switch on enabled a countdown and several pages that were set up with information on buying tickets and volunteering signup forms.

The look and feel of the site was meant to invoke the landmarks of the golf course in Hilton Head where the event was played. From the iconic lighthouse to the event’s tartan plaid texture, we combined event specific imagery around a brand that fit the RBC sponsor.

One solution I helped with was in regards to how we handled social media posts on the homepage of the site. While there were plugins and ways to pull in social media feeds from Instagram, Twitter, and Facebook, we wanted to take a more curated approach to which social media posts made it onto the site. I created a process in the CMS to make it easy for our social media and other content authors to quickly upload photos, crop them, and share links back to the originating social media post.

The posts would appear in a grid and the social media team had the ability to pin certain posts in place to keep them around a little longer as new posts made their way onto the site.

I developed this site and worked closely with the client and with our social media team to make sure that when people are running around during the event they had the ability to get what they needed done without any friction. During the pre-event phase we made sure to include analytics to help spot content that was helping or hurting ticket sales.

2021 Redesign

While I got to create the site for the 2019 event, I also got a chance to redesign the site for the 2022 event.

The redesigned site was mostly a facelift on top of the existing site. It was updated to reflect some of the changes that Dixon Schwabl made to evolve the brand.

Fin

It was really cool to have a part in working on a PGA event. I like to think that getting this project was 90% because of our amazing PR team, but a part of winning the pitch for it was due to some of the other amazing web development work the team had done up until this point.

Around this time, I started fully managing the team of web developers who were working on sites like the New York State Fair website and multiple websites promoting the event spaces and businesses on the waterfront in Buffalo, NY.

• Greater Rochester Chamber of Commerce

• Community Bank

In 2016, Dixon Schwabl won the pitch to redesign and develop the website for the Greater Rochester Chamber of Commerce (GRCC) along with their logo and a few more brand assets.

The website would support local businesses that signed up to be chamber members by promoting their events, including them in a directory, and offering them members-only content within the site.

The list of chamber members would be fed into the CMS as part of regular batch import process. This way as membership expired or new members were added into the system, the website can stay up to date.

The homepage was designed to include a full frame video that we provided as part of the branding work. We shot the video with our newly acquired drone. The video included shots of our cityscape, wineries, and other businesses in the area.

The main menu reflected the hierarchy of pages in their site. On mobile it was a multi-level series of drawers that slid into view as you drilled down to the page you were looking for. On larger screens we slid the menu over from the left-hand side of the screen, one level at a time.

There was a page builder for standard pages of the site, but some pages had a unique layout based on their content. The membership benefits page was managed in a large table view, the events page was sourced from event entries, and the history timeline was an ordered list in another table field.

The members page included data that was imported in from the chamber’s database. When a member entry was imported through a custom Craft CMS module, it would go into a workflow where more fields and more data could be manually added to expand on the basic member data.

Fin

I was the primary developer on the site, but I had help from my friend, Marc Hartwig on some areas of the site. There’s a fun story I could tell about the party thrown to celebrate the launch of this website, but that one’s better told in person. Over beers. Somewhere in greater Rochester.

• Dixon Schwabl Websites

• RBC Heritage

Every web developer at Dixon Schwabl contributed to the main DS website from time to time. Sometimes adding features or fixing bugs. There were already 2 versions of the DS website by the time I started there in 2007, but for 3 redesigns to come I got to be the primary developer and architect—making technology choices and working closely with our design team to bring their visions to life.

The DS website served as a new business tool, a press room, a directory of our employees, and a blog to show off our culture and expertise. Over the years, the scope of the website changed, but the thing that remained was that each version of the site was a web development playground full of fun effects and designs that pushed our web development skills.

2006 Era

The website as it was when I started had a Flash header with animated swirls and a bouncy effect that happened whenever you rolled over an item in the site’s main navigation. The homepage featured a video message from the company founders and every few months we would rotate out the video based on what was going on around that time.

I wasn’t the original developer of the site, but I wound up taking it over and making a lot of updates to it over the following years. The site was based on PHP to help with simple includes and Flash, HTML and CSS were used mostly on the interior pages.

We eventually added a blog and in order to do that we created a separate website so we could throw just the blog onto a CMS platform. I don’t recall if it was based on WordPress or Drupal, but it would have been one of those at the time.

Early 2010 Era

DS was ready for a rebrand and with it we redesigned the website. As was common around the time, we dropped Flash and used CSS and jQuery plugins to pull off some of the fun interactions in the site.

For this version of the site we had this rotating cube and lots of drop shadow effects around the site. The site was built on top of Drupal to make it easier to update content, such as the news and blog posts. Our developers still made a lot of updates around the site.

I think this site was programmed by a few of us, but I remember working on the CSS-based 3D cube on the homepage. While there weren’t defined back-end and front-end roles on our web development team, at this time it was common that I would trend front-end where a couple of other developers handled more of the CMS work.

2014 Era

Around the time of this redesign our Creative Team leadership changed and it kickstarted a whole new era of creative thinking. The bar was being set high and we worked together to meet it.

The design of the 2014 site was very ambitious. It would be responsive, include videos and transparent overlays with large, bold color changes. It had a section on the homepage that when clicked, the entire homepage would shift over to the left and a directory of each employee with custom photography slid in.

I was the primary developer on this site and I worked closely with our designers on this one. Around this time we decided to get away from using Drupal as our primary CMS platform and after trying out a few more options we decided to use Statamic on this site. We did this because we wanted the static front-end for performance and the thought at the time was that most changes to our website would get done by the web developers, so we only content managed frequently updated sections, like the News and Blog.

Migration to Craft CMS

Well, by 2015 we hit the limit of what Statamic could do at the time, and after spending more time on a search for a good CMS option, we decided to re-platform the front-end onto a new Craft CMS back-end. This turned out to be a very easy port because both CMSs were very hands off on the front-end side of things. We just needed to re-create the CMS schema and import content into the database.

Since we were setting up a new CMS, we opened up content editing so our writers and designers could start to jump in and make changes to things like our portfolio. There were still a lot of areas where we made changes in the code, but the CMS also freed up our web development team during big new business pitches.

2018 Era

A few years later we were ready for another website refresh. We had learned a lot about accessibility and our brand was continuing to evolve and we wanted the website to reflect that.

We kept the same Craft CMS back-end, but we remodeled things like the portfolio and case studies sections so that at this point any art director or writer could jump in and make changes to the various pages. At this time we did a lot more with page builders and we made sure that you can mix and match sections like a video above a block of text and then above a small set of images in a grid.

I was the primary developer for this site, as well. While the visual side of this site seemed a little simpler than the previous site, this one had a lot more complexity in how parts were built. As we were doing a lot more with Vue.js, we wound up making a lot of the interactive and animated parts components.

CSS grid was also relatively new at this time and we got creative with how content overlapped and lived on various grids throughout the design. On the homepage we had created a grid that we would use to show links to portfolio pieces, news stories, case studies, and featured employees. The grid was fully content managed and I wrote a Craft CMS plugin, called Grid, that I used to manage content in the grid.

We also did a lot of scroll-activated animations, so the items in the homepage grid would all animate into place as you scrolled down to them. I found an early prototype of this animation that I had done.

2021 Era

As a cap to my 14-year time at Dixon Schwabl one of the last projects I worked on was the most recent redesign of the website. Unfortunately, I didn’t take the time to grab screenshots of the website around its launch, but I have a behind-the-scenes video showing a dark mode switch and a little bit about what the homepage looked like as we got close to wrapping up development:

As Jamstack picked up steam in some areas of web development, we used this redesign as an opportunity to get on board and learn our way through things like incremental front-end builds and setting up Craft CMS’s Live Preview with a headless front-end. The back-end continued on the same Craft CMS setup from 2015, but the front-end was created using Nuxt in static mode.

Fin

I have so many more stories about these sites over the years and I remember pulling more than one all-nighter to have some of these redesigns ready to present in our all hands agency meetings.

The DS website was always a place where I learned something new around web development. Our leadership were enthusiastically open to trying new ideas and using our site to wow our clients. When I think about these projects I appreciate how much we got to explore and learn, while getting support from some amazing designers and creative thinkers.

• Dixon Schwabl 3D Tour

• Greater Rochester Chamber of Commerce

Have you ever worked on a project that didn’t quite go the way you hoped it would? This is a story about a project that I worked on at Dixon Schwabl that got released, but it included some strange patterns, had performance issues, and didn’t end up with the polish that most of our other projects had.

Still, those of us who worked on it learned some things and got to have a little bit of fun in the process.

The project was part of a self-promotion paper magazine that Dixon Schwabl released from time to time. The magazine was a showpiece for our services and it highlighted some of our clients and success stories. Employees could volunteer to write an article and our Creative Team would work magic coming up with some amazing layouts and slick illustrations. From time to time we would get a local photographer on board to shoot photos for it and we would use our in-house video production studio to shoot videos that could be linked to with a QR code or a vanity URL.

As part of the Interactive Team, our web developers got to pitch in by creating little microsites and online experiences that were sprinkled in each issue. We could also share these pages on social media to drive more engagement using the same assets.

3D Tour

After going through a large building expansion in our main office, we decided to put together a virtual tour of the building for the next issue of the magazine. The idea was similar to that of the Energy Saver Series project we completed for Black & Decker.

• Energy Saver Series Power House

The Power House was gone, along with most Flash projects at the time. My collaborator on the Power House, Ian Auch, and I wanted to see if we could use newer technologies to re-create the 3D rotating building, re-create the portal UI, and when a portal was clicked the user would zoom into the building and play a video showing off the newly remodeled interior.

We got the green light to move forward with this concept and our writers and video producers got to work on shooting and editing the videos. Ian and I kept to our previous roles, where Ian would use Blender to create a 3D model of the building and I would handle the UI and interactive pieces.

Long story short, we did create a rotating building with clickable portals that played the videos based on which room you selected. However, we weren’t thinking of the audience as hard as we should have.

The 3D tour page was meant to be played inside a QR code reader app on iOS and Android devices. As we were walking around the agency asking people to pull up the website on their mobile phones we found that the page stuttered and it was almost unusable in portrait mode.

To fix the portrait mode issue, we essentially blocked the app based on the orientation of the devices.

Some of the performance issues came down to the fact that we were rendering the model in 3D and mobile devices at the time didn’t have the GPU power to handle it smoothly. While it played fine on a capable desktop computer, most people wouldn’t experience it from their desktop browser.

Other issues that came up were related to the portals. We had ideas to use a mobile app to scan a room and then help us model out the interior, or we planned on using photos of each interior to create the rotating portal look like we did on the Power House. But as it sometimes goes, we prioritized client work and we essentially ran out of time to get this tour page done by the time the paper magazine would get printed.

These were hard lessons learned and we knew better for the next time we would attempt to use 3D on the web.

Behind the Scenes

I had played around with Three.js before, but I was still learning my way through working with a camera and interacting with objects in 3D space. To handle some of the camera panning animations, I used Greensock to tween the camera position and rotation. I wound up creating a dev mode that was enabled by a boolean on the global level. When enabled, extra controls would become available for me to read out the coordinates of the camera and the rotation of the scene. I had it set up to jump between all of the different angles we would zoom in on so I can test them out on different screen dimensions.

I used dev mode to adjust the lighting of the scene. While subtle, I added realtime shading based on the position of the "sun" in the scene. We removed the shading when we originally launched the tour website as a way to improve rendering performance, but a couple of years after the magazine issue was released I updated the tour page to include the shadow and some other easter eggs.

For example, one thing that I don’t think anybody other than Ian and I knew about is that we slipped in a sunset and sunrise routine based on a sped up and imaginary clock. If you let the site sit idle for a bit you would see the shadow change and the tint of the building and the sky background change.

Again this was taken out of the launch version, but I re-enabled it at a later point in time.

Fin

This isn’t exactly a project where I’m proud of the final results, but I believe anytime you’re doing something you’re learning. In this case I used what I learned on some other 3D projects. Combining GSAP and Three.js turned out to be a great combo that I used a few more times since this project.

With AR continuing to gain interest by companies like Apple and Meta, and with better 3D support improvements happening in browsers, I like the idea of doing more with 3D on the web. I would love to get my hands on the original source files to see how well this would work on today’s raytracing-enabled phones.

• TA

• Dixon Schwabl Websites

In 2013, I was asked by an old professor of mine if I would like to be an adjunct professor for an introduction to web design course that was part of the Graphic Design curriculum at my alma mater, RIT (Rochester Institute of Technology). This was an exciting opportunity for me to get better at public speaking and to practice being a mentor for junior developers and the co-ops I worked with.

The course was essentially modeled after one of the classes I took while in the Graphic Design program. It was mostly focused on the why of web design, with a little bit of coding HTML and CSS as the main deliverable from the students. The idea was that when students spent time writing code and struggling to make CSS layouts work, they would learn how to be realistic and savvy when designing for the screen. If a student went on to enjoy coding, they could take a more advanced course where they would ultimately program their own design portfolio for use when they got out into the world.

As I organized my lesson plan for the quarter, I decided to put together a tiny HTML page that I could use to as an outline for to help me keep track of the important items to go over, and to help me manage my time during the two-hour classes.

I put together a three-column page layout with a list of each class date on the left, the outline for the selected class, and then the current time on the right (based on my computer’s current time). At the start of a class I would pull this up on my personal laptop, select the current class date, and set it next to the classroom computer.

As I presented the day’s outline I would scroll down the page and make sure to hit on each of the items on my list. I made it so every item in the outline could be clicked on and when you do that it would be highlighted, so as I glanced between my screen and the presentation monitor I would easily find where I left off.

Fin

I taught the course twice, and—fun fact—the first time I taught it was during the last year RIT would follow the quarter system. They switched over to the semester system and my second time teaching it was during that first semester.

I put this up on GitHub and kept it public in case anybody else wanted to pull it down. A few people even tried it out and contacted me about it!

• The A Cappella Blog

• Dixon Schwabl 3D Tour

Starting in 2007, my friends, Mike Chin and Mike Scalise, started a blog that was solely focused on collegiate a cappella, called The A Cappella Blog (or ACB for short). My friends started the blog where Chin wound up creating most of the content, and Scalise did the majority of the technical side of things, including developing the original blog on WordPress. The duo would travel around the US and review singing competitions (including the actual ICCA events featured in the Pitch Perfect movies), impart wisdom they picked up by being around a cappella groups, and share YouTube videos submitted by the community.

As their friend who wanted to hang out and occasionally join them on the road, I started bringing my camera with me and started taking photos of the events that would eventually be shared on the site and on the ACB Facebook page. This started to become a regular thing and over time I began to get more involved in the blog.

In 2011, we were discussing some changes the guys wanted to make around the site and I asked if I could take a swing at redesigning the site. We worked together to change the information architecture around the site and transition everything over to a new theme.

Around this time I was working on my first responsive web design project at work, and we decided to try to incorporate RWD into this design. On smaller devices we replaced the grey header with a skeuomorphic blue header that felt like it fit into the iOS 6 aesthetic. We included a hamburger icon that shifted the entire site over to display a navigation drawer.

Also, as part of the redesign, we moved the site off of Wordpress and migrated its content to Drupal. Part of the reason for this change was because the way Drupal managed content entries was a better fit for a few features we included in the redesigned site. For one, we created a directory of all of the college a cappella groups that we were aware of. We also ran a bracket contest that let users submit their predictions for who would win ICCA regional and national events.

Drupal allowed us to create the content structure that allowed for storing and managing these content types. We also created custom Drupal modules to help with the bracket contest and submission process.

The A Cappella Book

I mentioned this in the Maker section of my site, but during this era I also took part in laying out The A Cappella Book. You can read more about it here:

• The A Cappella Book

Re-Platform and Redesign

By 2014, I had gone all in on Craft CMS for my personal and professional web development projects. It was often the more flexible CMS option for our clients and I became very used to using it for web development. In 2016, I discussed how we might want to make adjustments to the ACB site and with that I pitched the idea of buying a Craft CMS license and porting all of the content, once again, over to a new CMS platform.

At this point we decided to dial back our commitment to the site as we were all beginning to start families and dial back on traveling to cover events. With the redesign we cut out the bracket contest and looked to simplify the scope of the site.

The new site focused on blog posts, the book, and the group directory. I got to take some big swings on the design in a way I didn’t get to experiment at work. For example the list of blog post categories was large and cluttered until you hovered your mouse over an item—fading all but the hovered item away.

Other pages on the site had big text and featured a large header photo. If a blog post had a specific feature photo we would show that in the header, and if no header photo was set, the header would randomly select an image from those uploaded into the CMS.

As another experiment, the main header photo was set to take up 75% of the vertical viewport. This was true on landscape and vertical screens, so as the size of the window changed it would cause the focal point of the photo to get cropped in unfortunate ways. To fix this, I used the focal point feature in Craft CMS to let you point to the subject of the photo in the CMS. Instead of using it to crop the photo down and focus on that point, I extracted the coordinates, converted them to percentages, then used CSS to make sure that the subject of the photo always stayed in view, even when the rest of the image got cut off.

ACB Archive

In 2019, my friends decided to retire The A Cappella Blog. At that time we decided that no further posting would occur, but we wanted to keep the site up as a static archive so people could continue to read the articles and refer back to the site as it was in that state. I wrote about the process to converting that site here:

• Archiving the A Cappella Blog with Nuxt Content

Fin

The A Cappella Blog was a labor of love for my friends and I. For me, it was especially satisfying in letting me explore web design and features as I started taking on more full stack development and management responsibilities at work.

• Mobile Strategies

• TA

Before 2010, our approach to websites on mobile devices was that on iOS we were okay to leave things as-is if you can pinch and zoom into the content and carry out all of the primary functions of the website. If a site had Flash on it we would provide a non-Flash HTML fallback that represented the Flash portions but without the animations and some functionality.

But CSS was improving and approaches to web development were evolving to start making the experience on mobile devices better for customers.

Data Publishing

One of our longstanding clients at Dixon Schwabl was a telecom company in the Lowcountry, called Hargray Communications. Another company that was related to Hargray, called Data Publishing, provided the services you might get from the Yellow Pages or similar data providers. We created a handful of search websites under the Data Publishing brand, starting with a redesign of the main Data Publishing site in 2010.

The Data Publishing website was created with Drupal on the back-end and the front-end was made with HTML and CSS. When we launched the website it was not optimized for mobile, but because of the audience being more business focused at the time, it wasn’t a concern or something we recommended investing in at the time.

Hargray Search and HTC Search

From 2011 to 2012 we launched two more websites for Data Publishing: Hargray Search and HTC Search for customers in their respective markets. Both websites were separate entities, but they started from similar code bases.

These sites had a broader audience than the corporate website so creating a mobile site was something we wanted to add onto the project. We decided to create m-dot mobile sites for each website.

For those who are unaware, an m-dot site was typically a separate front-end code base that was usually intended to be smaller in file size, sometimes with limited content or functionality, with a user experience that was tailored to using mobile browsers on iOS and Android. Typically, to set up an m-dot site, the customer would start by loading the default domain, www.something.com, and using something like the browser’s user agent string, you could decide to re-route the customer to a mobile-specific URL, like m.something.com

I was involved in all three of these websites. I believe the Data Publishing site was built on top of Drupal, but the search websites, and their m-dot variants, were made with HTML, CSS, and maybe a little jQuery.

Interlude

In July 2011, the A Book Apart book, Responsive Web Design, was released on paperback and epub. I had read the A List Apart article around RWD and as soon as the book came out I devoured it. Around this time the leadership in our web development team changed and I was finally given the role of guiding the technologies we used in our websites. With that, I declared that the Data Publishing sites would be the last m-dot sites we created, and the rest of the developers agreed.

Abbott’s Frozen Custard

We designed the Abbott’s website as a desktop and m-dot combo, but—as per above—we changed course and time boxed a responsive web design PoC. It worked out well and the client agreed with the approach.

The website was a website for a frozen custard franchise that was well known in the Rochester, NY area. We included a store finder, links to an online ordering tool, a blog, and information for people who wanted to start their own store in the franchise.

The site was made with HTML, CSS, and jQuery on top of a Drupal-based CMS. jQuery was used for the homepage carousel and heavily relied on for the mobile menu. We even used a color picker field to make a display of all of the flavors served at Abbott’s stores.

Fin

It’s hard to recall the time when we weren’t using responsive web design practices in our websites, because it’s become so standard these days. I remember our designers each had to wrap their heads around the concept of designing for multiple screens. We’d have debates about where to put breakpoints and if you should go mobile or desktop first. It felt like a really exciting time to be a part of web development.

• Internal Apps

• The A Cappella Blog

During my time at Dixon Schwabl our developers did more than just marketing websites. Sometimes we would be asked to help come up with solutions for clients to help them with their own sales efforts or training. Here are a few projects I got to be a part of.

Lenel

Lenel was a security company based out of Rochester, NY and they asked us to help them put together a presentation tool that they could hand out at trade shows and use as a leave-behind for sales calls.

We created an application that can be run from a CD, using Adobe Air. The presentation allowed you to navigate from four different sections that highlighted their offerings and testimonials.

On this project, I programmed the interface and used Flash to create the Adobe Air app. I worked with our IT team to test an autorun script that made it so when the CD was inserted into a PC drive it would automatically run our Air application.

I also created the startup screen animation based on a storyboard created by our designers.

SentrySafe

I don’t recall the specifics around this project but what I do remember is that SentrySafe needed an application for their trade show booth. They provided us with some presentation slides and data sheets for their products.

The people visiting the booth could view the presentations and either print or have the data sheets that they selected emailed to them directly. We used this tool to gather the emails and the actual emailing process took place by the sales team after the trade show was complete.

I remember putting together this project using Adobe Air. I believe when we collected the names and emails we wrote them to a SQLite file or a CSV so they could be used by the sales team from the PC running the application.

For fun, we took an image of one of their products and turned it into the app icon.

Hazlitt

The Hazlitt winery asked us to put together a presentation management tool they could take with them for in-person meetings. The problem they needed to solve was that they wanted the ability to play video clips during a presentation, but they needed the ability to remove videos to shorten the length of the presentation or to cut out unrelated videos based on the topic of the presentation.

Our studio team cut videos down into smaller clips and we put together an Adobe Air app that was shared with the client. The app started off in our menu that let the client either play 2 different default versions of the full presentation or "program" their own presentation.

The app showed all of the video clips in order. The client could decide to choose which videos they wanted to skip, and when they did that, they could see what the total length of the presentation would be.

When they were done, the client could play their presentation and each of the selected video clips would play in sequence.

Because there were times when the client wanted to repeat some of their choices, we added the ability to save out their selections to a file that could later be loaded and played from the app.

I developed this application and designed the UI for it. Usually I would have worked with a web designer or art director, but to keep costs down I remember doing quick sketches and then putting this together from there.

S.T.E.V.E. and Other In-House Tools

At one point I put together a traffic and job management application for internal use at the agency. I don’t have screenshots or videos to share, but I think it is worth mentioning.

While we had software to estimate and bill jobs, at one point we found ourselves looking to digitize our job trafficking process. With input from our account executive team and our creative management I put together an internally-hosted system that managed the jobs going through the Creative Team. This included every email, banner ad, billboard, studio production, etc...

Our co-op, Zach, named it STEVE—a name that confused everyone so much we later on tried to make up a back story, like that it was named after Steve Jobs, or maybe that S.T.E.V.E. was some sort of abbreviation.

STEVE was written in Drupal and each person who needed it were given a login and a user role based on their role in the agency. Account executives and creative management could create new jobs and assign team members and art directors and copywriters only needed the ability to log in and update statuses and sign off on approvals.

Eventually STEVE was replaced by a much more mature software platform, but for a few years, every job that went through the agency went through STEVE.

Other Internal Job Tools

In addition to STEVE, I also put together the following:

• A time tracking app used by HR and finance to submit hours weekly for payroll.
• A banner ad preview app that showed all Flash or HTML-based banner ads at once for easier proofing and approvals.
• A virtual recording light that was installed on all of the computers on the same floor as our audio and video recording studios. Anybody on the floor could turn on the recording light and anybody running the app would see a notification on their computer screen.

Fin

We were given a lot of freedom to chime in and volunteer solutions for problems and I took this opportunity whenever I could find ways to use technology to better the company.

In many cases doing an internal application gave me a better understanding on how better to serve our clients. It also helped me wrap my head around things like rolling out releases, managing user roles, and all the technical headaches that come with account management.

• Benches on Parade

• Mobile Strategies

By 2010, Dixon Schwabl had already had lots of experience launching events and campaigns that included multiple phases and different mediums to bring about awareness. We often did this for clients, but every now and then we put together a series of events featuring the businesses and artists in the Greater Rochester area. Before I was hired at DS they had already done a couple of events in the series, notably one called Horses on Parade.

The idea behind Horses on Parade was that local businesses would sponsor a “horse”, an artists would design a horse statue that embodied the spirit of the local business, the artists would take an existing fiberglass horse statue and modify it to bring their vision to life. The final art pieces would be displayed in an art gallery, then they would be installed inside or around the business for the community to look at.

Benches on Parade followed that process with the difference that not only would the artists be creating a unique piece for the business, but it had the added challenge of making art that can be sat on and interacted with.

During the planning of Benches on Parade we broke our timeline up into major milestones. First, we planned on awareness for the project—getting business on board and looking for local artists to sign up to work on their bench. Second, we planned PR around the reveal of the completed benches and a time period where people could come see all the benches in one place. Finally, we planned on making a book and changing the website to include a photo submission process to bring about more community involvement.

Stage 1

The awareness stage included a website that featured the timeline for all of the important dates around the event. There was a blog to share personal stories and reminders around the success of our previous campaigns. Most importantly, we highlighted sponsors and made sure businesses and artists could sign up for their parts.

Stage 2

The event phase was where our PR experts got to shine. They had a reveal event held in a building downtown where all of the benches fit into one large room. People involved in the project got a sneak peek.

During the process of moving these benches onto the event floor, each bench got taken into a photo studio where they were shot at an angle for use in print and web collateral.

Stage 3

After all of the benches had been moved and installed to their final destinations, we shifted gears to help people find and get to experience the benches around the city. We made changes to the website to include a map of all of the benches and their locations so you could hunt down one you want to visit. We added the ability to log into the Drupal-based website and upload your own photos. A collaboration with Kodak, one of the biggest bench sponsors, ran a contest where you could win a camera after sharing a photo of the bench in the wild.

In addition to the website updates, we created a book that featured the photos of each bench and a description written by our copywriters. Portions of the book sales were given to local community art spaces.

What I Did

I was involved in developing the website along with our co-op-turned-employee, Zach Horton. Most of the site was built with HTML, CSS, and PHP, but we eventually added Drupal to help manage users, photo uploading, and publishing blog posts and photos to the gallery.

Fin

In 2010, we had a small social media integration with Facebook, but I would bet that if we did this today a lot of the social engagement would have shifted over to Instagram and the TikToks and Snapchats we eventually worked with in later campaigns.

If you drive around Rochester, NY you can still see fiberglass horses, benches, and even golf balls. We’re not the only city that has done this kind of event as you might find painted pianos or other animals around town, but I remember feeling a great buzz while it was happening. I liked that local artists got to show off their talents and that the businesses in our community came together to support them.

• ESL Online Banking Guide

• Internal Apps

I’ve had the pleasure of working on lots of ESL collateral over the years. From creating banner ads and email templates to spending time working from the ESL office to support the re-launch of their website in the 2010s.

One of the first projects I got to work on for them was a guide to their online banking application. Among friends and co-workers at the time, ESL’s banking application was one of the best that they’ve used from a customer experience standpoint. Part of being one of the best was making sure people knew where they were going and how to accomplish the tasks that are important to them.

We created a guide that could be summoned as a popup window from various places around the website. The guide covered several topics using text or videos to explain things like how to make payments on your mortgage or how to download statements.

The guide was built using Flash and it had a navigation bar along the top that swapping in different pages of content. Some pages looked like a screenshot from the online banking application and clickable outlines overlayed the screenshot. Some buttons displayed text or a link to take you to a longer knowledge base article. Other buttons played a screen-captured movie that included voiceover walking you through what was happening on screen.

Here is what the guide looked like:

What I Did

I worked with our designers and video editors to put this guide together in Flash. I adding the little transitions and hover effects, and I remember feeling it was important to break up the mask on the buttons to make sure that when the screenshots faded to highlight the guide content, the buttons didn’t fade with it.

I worked with the team at ESL to help launch this and make sure the popup window worked correctly.

Fin

This was our approach to the kind of thing you might use a tour JavaScript library for nowadays. ESL, along with our other financial clients, made it very clear where the line was between their secure banking sites and marketing properties were divided. For security purposes, we never touched source code within the banking apps, but this was as close to that as we got.

Probably the coolest part about this project for me was that I heard from a couple of people around that time that didn’t know I worked on it and had used this guide.

• Flash Websites

• Benches on Parade

In 2009, Flash was widely used by the audiences we were reaching with the websites we created at Dixon Schwabl so the Flash train wasn’t slowing down just yet. However, three things were happening that got us to start changing our solutions. The lack of Flash support on mobile devices meant that a user was shown a "Get Flash Player" button on their phone browsers, SEO and Google search was becoming more of a concern for clients and Flash sites were not crawlable, and it was becoming more popular for us to put a CMS behind our websites so our clients could update the sites themselves.

So while we still kept making Flash sites, we also added more work to account for all of these new changes.

Sample New York

The Sample New York website was a way to promote New York agriculture and exports all year around. It pointed to events and places where you can experience what New York State had to offer.

Most of the site was built in HTML and was driven by Drupal on the back-end. We wanted the homepage to have a WOW factor, so when you were on a computer that supported Flash, you would see the homepage animate in from all sides.

Here is what the homepage animation looked like:

The events would be pulled in from a calendar in the CMS. Clicking on a link on the homepage brought you to one of the interior pages.

My role in this project was to create the homepage animation and populate the Events area. It was really fun to animate the homepage, but the thing I liked the most were the animated bees in the top-right corner.

Finger Lakes Riesling Festival

For those who are unaware, Rochester, NY sits right above the Finger Lakes and based on its latitude, areas around the lakes are very good for grape growing and wine production. Because of this, the area is busy with tourism in the summer and our local wine and spirit stores usually stock 1-2 aisles of wine produced in the area.

Having relationships with many of the wine producers, Dixon Schwabl helped put on a large tasting event in Canandaigua, NY that featured all wineries who wished to participate.

We created a fully Flash website that featured hand-drawn and animated illustrations in a Where’s Waldo fashion. Starting on a splash screen with a blue background, clicking on "Enter Site" panned down to reveal the illustrated festival around a lake. When you hovered over a group of people, they would animate and then clicking the group triggered an animation of a column coming up from one side of the screen or another. The column displayed information about the event.

When left idle, animations would trigger. For example, a balloon might float up into the air or a plane would fly by with the logo of one of the event sponsors.

My part in this project was to do all of the programming and animation based on collaboration with our designers.

Riesling Festival Updates

While we loved the full Flash site, over the years we would address the problems with Flash in a few different ways. In 2010 we added HTML placeholders that brought you to a full HTML version of the site—reusing the same content and illustrations, but without the animations. If your browser didn’t support Flash, you could at least get to the content.

As an experiment, we partnered with a local app developer who created an iOS app that had a similar look and feel to our website. The app would mirror the information from the website and it would get updated year after year.

Finally, by 2013 we redesigned and re-developed the festival website as a fully responsive HTML/CSS website. While I don’t have a video of it in reach, one unique feature of the new site was that we had broken up the header image into layers and created a parallax animation for when you hovered over one of the main four buttons.

For example, when you hovered over Activities, the images in the header started slowly panning over to the left at different rates until settling into a new scene of images.

I believe this was created in JavaScript, using Greensock to help coordinate all of the movement and the easing effects in a performant way.

Fin

Both of these projects started to show that the needs of our clients were changing. The web was no longer only a novelty, but it could lead to a great impact on the success of a business, and our projects would begin to reflect that.

Looking back, I still loved working on these subtle animations and working with our designers to iterate until we got them all right. At the same time, I was the iPhone/iPad guy who championed Steve Jobs’ "Thoughts on Flash" article as a way to start looking towards a Flash-less future.

• Energy Saver Series Power House

• ESL Online Banking Guide

In 2009, Black & Decker launched a handful of products under a campaign, called Energy Saver Series. These products helped consumers monitor their energy usage on a live reader, turn off light switches automatically, and detect potential insulation issues that drove up heating or cooling costs.

Dixon Schwabl would design a microsite that featured all three of these products and an interactive demo that showed how the energy monitor and thermal reader worked. To get to the interactive demo, US customers would select the state where they lived and energy costs would get calculated based on the state average around that time.

The microsite was built using HTML with all of the tricks you would use in 2009 to accomplish shadows, gradients, and custom fonts. The right-hand sidebar included a link to the interactive demo—which we called the Power House.

As with a lot of our Flash projects at the time, the first SWF file was just a loading screen that loaded the actual demo assets from a separate SWF file. On this project, we also loaded a video that showed the customer what they should expect when they get in there. Sort of a tutorial explaining how to use the site.

Once loaded, the customer was brought to a game-like interface where a re-creation of the product appears in the bottom-right and the bottom-left featured UI elements to help navigate the website. In the middle of the screen was a 3D house with these portal-like buttons that showed the interior of the room in this imaginary house. Clicking on a portal showed a quick animation and then replaced the house with a fixed view of the interior of the room.

Inside a room, the customer would use their mouse to explore the room. Like a point-and-click adventure game, when they hovered over a point of interest we showed a power button that was orange when the power was off, and green when the device in the room was powered on. Sometime this power button displayed information around appliances that are heavy energy users. Some products had a button to toggle the device on or off, and other products had advanced controls that turned the power up or down.

Just like the actual product, when a device was powered on, you can see the LCD screen on the emulated device change to reflect the energy value and the cost to the customer. To drive home that energy can be tied to homeownership costs, we took that energy cost and multiplied it to show a 30-day average.

In the bottom-right corner, a customer could click on the other device and it would swap the mode for the interactive demo from the energy toggles to a thermal measuring mode.

When the Thermal Leak Detector was on screen, a colorful light followed the mouse cursor and as the customer moved their mouse around the screen you could see the light change as a new set of points of interest would simulate what it was like to point the device towards a portion of the room that was outside of the room’s average temperature. So when you pointed it at a drafty window, the light would turn blue to show that cold air could be leaking into your home. In some cases we displayed educational messages that called out common areas where thermal leaks occurred.

As a bit of an easter egg, and to enhance the immersion of this site, when a customer found the Plasma TV on the wall in the living room we included an option to "Watch TV". Clicking this button zoomed further into the room and on the TV screen we played 3 different product videos.

Here is what the project looked like in action:

What I Did

As a running theme in my work archive, I don’t remember who did the HTML and CSS for the microsite. It could have been me, one of my co-workers, or even the web development team at Black & Decker that we worked with to implement this project. My main focus, and the part that took the longest, was the Power House interactive demo.

I worked closely with my friend, Ian Auch, on this one. Ian worked with our designers to design the room interiors and he modeled them out in a 3D program. He rendered the room with the main light on and then again with the light off, then for each lamp or other light source he would provide me with images with transparent background so we could blend them in to show the light was on or off.

Ian also created the 3D model of the house in a format that I could use in Flash. We came up with the idea to change the angle of the interior rooms on the portals based on the rotation of the house, so Ian re-rendered each room at different angles and provided them to me as low-res images.

I used the excellent Papervision3D engine to rotate the 3D house and the portals in space.

For anybody who has heard of the JavaScript 3D tool, Three.js, its creator, Carlos Ulloa (aka mrdoob), was also behind Papervision3D.

I created the emulated products with some help from the design assets I was given, and by manually creating the LCD screens in Flash. ActionScript was used to modify all of the data on the screens.

For the Power Monitor, we talked to the engineering team at Black & Decker and they provided us with the formula the device used to calculate the energy usage and the cost totals.

For the Thermal Leak Detector, Ian and I came up with the idea to use something similar to a bump map in a 3D program to define the differences in temperature. We took the 2D renderings from each room and used Photoshop to draw a greyscale image on top of it. Black areas would indicate areas where the temperature was hotter, white areas showed colder areas, and middle grey was around the base room temperature. We then took that image into Flash, set its opacity to zero, and used it to detect the brightness value that your mouse was over. We’d calculate a temperature value and put it on the Thermal Leak Detector’s LCD screen, and if you met a certain threshold we would change the color of the light from the device from green to red or blue.

Fin

Please don’t tell my other Flash projects this, but this was my favorite Flash project that I got to be part of. This was a simple idea that got us to stretch our problem-solving muscles and it let us show off all of the technical skills we had earned up until that point.

What I liked the most was sitting around with Ian and our designers to explore different ways we could approach each part of this project. We did proof of concepts to learn our way through the 3D Flash stuff and the bump map approach. I remember working long hours and staying late just because it was so fun to work in this playground we were creating.

• Messages of Thanks and Empowerment

• Flash Websites

Sometimes in advertising you come across an idea that works so well in one place so you wind up finding other places to replicate it.

I Am Thankful

At the tail end of 2008, me and the other folks at Dixon Schwabl created a holiday themed website that was part self-promotion and part community involvement. For this project we collected a handful of messages from friends and family and we displayed them one at a time on an interactive Flash website. The website featured a snow globe and every time you "shook" the snow globe a new message would appear.

Users of the website were encouraged to add their own messages to the site, via a form in the Flash site. They could also add their message and send it to another person. When that person received the email it would include a unique URL that played their message first.

Here’s how it looked in action:

The 3D scene and the snow globe were created by my friend, Ian Auch. The movement of the snow globe and the triggering of the animations were something I remember spending hours tweaking until it felt right. I believe the dynamic animation of the text flowing in was based on a feature in Flash that let you animate letters individually.

Pluta Cancer Center

The Pluta Cancer Center website is a resource for patients and family members to get information on where and how their treatment programs took place. This project was one we launched in early 2009 and it featured one page where users could inspire others or be shown messages of support in an interactive way.

When you got to the You Can page, you would see curated messages floating in space. As you navigated around the word-cloud like interface you would see message snippets come in and out based on where you mouse was within the page. Clicking on a message showed the entire message and its author.

A button on the page brought up a Flash-based form—similar to the one in the holiday card—that let you submit a message and your relation to the organization. The messages here were processed on the web server and stored until someone re-entered it into the database of messages that fed the page.

To be honest, I may have programmed the full website or maybe just the You Can page of messages. It’s been long enough that I don’t recall, but I remember working on the You Can page. I remember we wanted it to feel like an open and endless space where someone would feel like there was endless support and people backing them up in their fight.

Fin

The holiday card’s user message feature was an example of us using our self-promotional work to prove out and learn our way through something that we eventually implemented for a client. This was something that we sometimes did from time to time as a way to use ourselves as the guinea pig before we could confidently sell a bleeding edge technology or solution to a client.

In the 2010s you might have used social media campaigns to accomplish what we did with these sites. You might even try to make a custom hashtag happen. What I liked about these sites were that they were almost less about promoting the brand and they were about moving someone emotionally with just a few lines of text—presented in a fun way.

• Flash Video Players and Other Interactive Bits

• Energy Saver Series Power House

As the "Flash guy" in my early career, there were several projects that were primarily developed by another developer where I would pop in and add a video player, an interactive timeline, a carousel, or some other interactive and self-contained piece of content. Some of the details around who did what are a little fuzzy nowadays, but I can tell you about the parts I got to take part in.

Let’s go!

SentrySafe

One of the first projects I worked on at Dixon Schwabl was to add a homepage animation and a video player to the SentrySafe corporate website. The homepage video was an animation that promoted their document safes that were pitched as being the ideal place to store electronic media (CDs, flash drives, etc).

The video player featured videos or segments that ran on various national TV programs that featured their products. We added the ability to select from a few different videos and the video would be played in Flash’s default video player UI.

ARC of Monroe County

The ARC of Monroe County was a special site for us at DS. We loved promoting organizations who took care of our neighbors and their family members. For their main website we broke it up into four main sections, and for each section there was a title page that had links to all of the section’s pages on the left. On the right was a looping video that featured members of the ARC community holding signs with letters on them that spelled out the section name.

My role in this project was to provide the video player without any UI. This was in the days before you could use the <video> tag, so the video was created in Flash and it was carefully edited to make sure it blended in with the white background of the page.

Clark Patterson Lee

CPL was a website for a Rochester, NY-based architecture and planning firm. To be honest, I don’t remember who was the primary developer on this site, but I think it was my friend, Wayne Gormont, who did most of it. I remember sprinkling in little parts here and there where images faded from one color to grayscale or where an image gallery was needed.

These days many of these little Flash areas we created for it could be accomplished through 3-4 lines of CSS and they are par for the web development course, but back when this site was designed it included a lot of thinking that was ahead of its time.

The PIKE Company

We had a long relationship with The PIKE Company and we were heavily involved in several redesigns of their website. The first one we worked on was mostly developed by Wayne and I don't think I was involved in the initial release of the website. I think it was a little later on when they wanted to add an interactive timeline that showed the history of the company.

The Pike Timeline was my contribution to the project and it was a pretty straightforward display of images and text along a horizontal timeline. Maybe it’s just me, but I remember doing many of these back when the web was new, but I don’t see this all that often on corporate sites anymore.

Fin

This doesn’t include all of the times where I added Flash pieces to websites, but this represents an idea of how I was involved in some of our early projects from 2008 to 2009. I really liked the role I had where I could touch so many projects while sharing it with the other developers I worked with.

Eventually these skills I was learning about how to animate and visually set the tone for a project would translate really well as we started picking up jQuery, Greensock, Three.js, and other interactive web technologies. What you can do now in JavaScript or even in CSS would have blown my 2008 mind.

• ACAnswers

• Messages of Thanks and Empowerment

My first project for the ad agency, Dixon Schwabl Advertising, was a Flash-based microsite for a private K-12 school, Allendale Columbia. We called it ACAnswers and it featured a series of questions that were answered in the form of video testimonials by current students, alumni, and parents of students. The idea behind the site was to reach each of these segments and help relate the benefits of the school in a way where the audience can connect with the folks who have experience with the school.

What I Did

I entered into this project as a contractor, and over the course of about a week I took the Photoshop-based design and created this Flash-based website. The video clips were already shot and edited, so I created thumbnails and built out the homepage and each of the answer pages. I believe there were only two Movie Clips (in Flash terms) and the pages were programmatically created, but to be honest, at this time it’s possible we duplicated the answer pages and edited them by hand.

This project launched in 2007, then in 2008 a new set of videos were uploaded as the campaign was updated for another round.

Fin

This project was my foot in the door at DS. The single web developer that worked there at this time was a college professor of mine and he did a lot of work to kick off several web development projects, but before implementing them all he decided working at an agency wasn’t for him. He recommended the agency split his salary and hire me and a dedicated web designer to take all of the new business he had gotten and to carry those projects across the finish line.

I remember getting the call that the agency wanted to bring me on full-time and I remember it was exciting and I was very thankful for my professor for recommending me. I was being brought in as a Flash and HTML specialist as the agency began its journey to build out its web development team.

A couple of weeks later the check for this project arrived in the mail and I remember—now having steady income in reach—I went to the Apple Store to purchase my first iPhone. Little did I know where that would take me.

• Websites 2007 – 2021

• Flash Video Players and Other Interactive Bits