My good friend Gabriel Valdivia had a great idea to do interviews that push people to be as honest and candid as possible and then present the conversations in the same format they occurred.
I thought this was rad, so I helped him build a website that acts and feels like a chat app where you can browse the interviews. We got real geeky on the details, so I thought I would share some of them here:
People seem to be surprised that this site runs on WordPress. The secret is Advanced Custom Fields. We crafted a backend that allows Gabe to fully manage the interviews and customize the related information accordingly. The chat bubbles are repeater fields and Gabe only has to choose whether it was himself or the interviewee who made the comment when entering the conversation.
The theme is responsive and completely custom, based off Underscores starter template. Gabe laid out a front-end in HTML and CSS and we converted that code into the WordPress PHP templates. On mobile you land in the conversations list view, when you land on a large desktop screen the info panel is pre-expanded, etc.
The chat bubbles auto-propagate into the correct shape depending on which bubbles come before and after. There are four types of bubbles: initial bubbles, closing bubbles, continuing bubbles, and single bubbles. It was important to have this step be automated instead of having to make this choice for every bubble in the WordPress back-end.
Gabe gets to choose the color of every interview from a color picker UI in WordPress. He usually bases it of the primary color of the interviewee’s Twitter profile.
The site has a read count at the end of each chat which gets kind of amusing being in public. We used a plugin called WordPress Post View and hacked it to fit our needs.
The 404 page is exactly what you’d expect. Check out how it responds on mobile vs desktop.
You can use the up and down arrows to move between conversations in any view. You can also tap the enter key to start composing a tweet. These commands are using jQuery’s keydown function.
Another plugin hack was using Mark New Posts to create an unread indicator dot when there were new conversations on the site since you had last visited.
We added browser push notifications for new articles using OneSignal which seemed like the easiest way to get them up and running as fast as possible.
There is some other fun stuff in there, but I’ll let you find it yourself. One of our next steps is to automate the process of moving a conversation into WordPress completely.
Gabe also sat down with Mark Wilson of Co.Design this week to talk about the experience. We helped them actually embed the chat with Gabe on Talk Turkey into the article. Super cool.