One of my favorite things to do online is read the massive amounts of interviews available. There’s always a ton of information to be gleaned from them, and good interviews are full of brilliant ideas and tips. My favorite part about them are when they include life stories and lessons learned. One thing, though, that I’ve noticed is that the majority of people do not take the time to make their interviews look good. In my opinion, this is almost as essential as conducting a good interview.
There have been times when I’ve been lost (especially in 3-4 person interviews) about who’s talking and have to scroll around the page to figure it out. When I started giving my own interviews I decided to break the bad trend of poorly styled interviews.
Sometime in the middle of 2010, I came across this post by Nicolas Gallagher. When I saw it, I realized it was the answer to the poorly styled interview problem. I immediately began to work with what Nicolas had demonstrated and came up with a handy and good-looking way to style my interviews.
You can see the final result on one of the finalized interviews on my Interviews page. Keep in mind that IE users won’t see the sweet looking styles, but it will still look good.
So, let’s get started.
CSS Speech bubbles
I altered the speech bubbles a little bit from what Nicolas demonstrated to make them smaller. I’ve also heavily commented the CSS so you can see what each element does. We’ll start with the names and general bubble styles. Depending on the theme that you’re using (or child theme), you may have to add an id selector before each css element. For example, if you’re using the StudioPress Genesis Theme Framework (affiliate link), you would most likely have to place a #content identifier before each class.
/***** Interviews ********************/
/*+=+= General interviewer/interviewee name styles =+=+*/
.intername, .inteename {
position:relative; /* Gives it the correct placement */
padding:3px 5px 5px; /* Give it some room around the letters */
margin:0 8px 0 0; /* Give the bubble some room to breath */
color:#ffffff; /* Color the letters */
font-size:110%; /* Make the speech bubble text a little larger */
float:left; /* Make it stay left instead of stacking on top */
-moz-border-radius: 8px; /* Round edges for Firefox */
-webkit-border-radius: 8px; /* Round edges for Safari & Chrome */
}
/*+=+= Interviewer's bubble colors =+=+*/
.intername {
background:#075698; /* default background for browsers without gradient support */
background:-webkit-gradient(linear, 0% 0%, 0% 50%, from(#2e88c4), to(#075698)); /* Safari & Chrome gradient */
background:-moz-linear-gradient(50% 100% 90deg, #075698, #2e88c4); /* Firefox gradient */
background:linear-gradient(top, #2e88c4, #075698); /* Catch-all gradient */
}
/*+=+= Interviewee's bubble colors =+=+*/
.inteename {
background:#c81e2b; /* default background for browsers without gradient support */
background:-webkit-gradient(linear, 0% 0%, 0% 50%, from(#f04349), to(#c81e2b)); /* Safari & Chrome gradient */
background:-moz-linear-gradient(50% 100% 90deg, #c81e2b, #f04349); /* Firefox gradient */
background:linear-gradient(top, #f04349, #c81e2b); /* Catch-all gradient */
}
Now that you’ve got the bubbles created and their gradients figured out, it’s time to make it look like an actual speech bubble instead of just an elongated circle. That’s where this next style group comes in.
/*+=+= Adds the interviewer/interviewee triangle to make it look like a speech bubble =+=+*/
.intername:after, .inteename:after {
content:"\00a0"; /* Generates invisible content (like a non-breaking space) */
position:absolute; /* Allows positioning of the triangle */
bottom:-20px; /* Position the triangle vertically */
left:15px; /* Position the triangle horizontally */
width:0; /* Widens the triangle (requires changing positioning) */
height:0; /* Heightens the triangle (requires changing positioning) */
border-width:5px 0px 15px 10px; /* Vary these values to change the angle of the vertex */
border-style:solid; /* Gives it a border */
}
/*+=+= Interviewer's little triangle to make it look like a speech bubble =+=+*/
.intername:after {
border-color:#075698 transparent transparent; /* Gives the border a color */
}
/*+=+= Interviewee's little triangle to make it look like a speech bubble =+=+*/
.inteename:after {
border-color:#c81e2b transparent transparent; /* Gives the border a color */
}
That pretty much does it. But, as is my nature, I like to give it an extra special touch to take it to the next level. Even though the speech bubbles help to show who is speaking, I wanted to make the paragraphs a little different as well. To do this, I decided to give the interviewer’s paragraph an added touch of style. See the annotated code below for details.
/*+=+= Interviewer's paragraph style =+=+*/
.question {
display:block; /* Correctly positions paragraphs */
line-height:1.5em; /* Space between paragraph lines */
margin:20px 0 15px 40px; /* Give it some room */
font-style:italic; /* Changes font style to italic */
background:#f2f2f2; /* Gives a background color to paragraph */
-moz-border-radius:8px; /* Rounded corners in Firefox */
-webkit-border-radius:8px; /* Rounded corners in Safari & Chrome */
}
.question p {
padding:5px 10px 10px; /* Add padding around the paragraphs */
}
After adding that style, the interviewee’s paragraph style all of a sudden looks out of place, so of course, I had to fix that.
/*+=+= Interviewee's paragraph style =+=+*/
.answer {
display:block; /* Correctly positions paragraphs */
line-height:1.5em; /* Space between paragraph lines */
margin:20px 0 15px 40px; /* Give it some room */
-moz-border-radius:8px; /* Rounded corners in Firefox */
-webkit-border-radius:8px; /* Rounded corners in Safari & Chrome */
}
.answer p {
padding:5px 10px 10px; /* Add padding around the paragraphs */
}
And shazaam! The CSS is complete. Now, how do you use it? Well, there are two ways, both will give you the following result:
The Long Way
So, you have your interview written up (phew!) and it’s time to post it to your website. You’ve completed the css and you’re ready to let the world see it. If you’re unfamiliar with WordPress’ shortcodes ability or are uncomfortable dinking around in your functions.php file (I always make a functions-custom.php file to play it safe), you’ll simply use spans, like so.
<span class="intername">Chris Mower</span> <span class="question">Can you tell me a little bit about yourself?</span> <span class="inteename">Chris McClain</span> <span class="answer">My name is Chris McClain. I was born in Salt Lake City, Utah. I am currently 31 years old, married almost 8 years. I have a son on the way coming in the next few weeks. It’s very exciting. And that’s pretty much been occupying most of my time for the last 9 months almost. We’re getting the house ready, child-proof type stuff, buying a crib, baby sheets, clothes, things like that. What else do you want to know about me?</span> <span class="intername">Mower</span> <span class="question">Shoe size?</span> <span class="inteename">Chris McClain</span> <span class="answer">I wear a 14 on some days and a 13 on other days. It depends on the weather.</span> <span class="intername">Chris Mower</span> <span class="question">What can you tell us about your business?</span>
But as you can see that would take a long time, especially if you have a 40-minute interview to transcribe and code–even with copy/paste and find/replace.
That’s where the shortcodes come in. To quickly explain, shortcodes allow users to condense a large amount of code into an “itty-bitty living space.” It let’s you compact a short amount of code into an even smaller living space as well, which is more accurate in our case.
The “Short” Way Using Shortcodes
So, to start out, you need to create the shortcodes and add them to your functions.php file after the opening «?php and before the ending ?» (if it exists). Refer to your individual theme’s support documentation for any special conditions.
The shortcodes themselves contain the elements which prevents you from having to type them over and over again. You’ll notice on the add_shortcode lines that there are two different blocks of text between apostrophes. The first block of text (i.e. n1) is what we’ll be using to style the text. The second block is the function name.
// INTERVIEW SHORTCODES
// Add interviewer's name shortcode
function interviewer_name( $atts, $content = null ) {
return '<span class="intername">'.$content.'</span>';
}
add_shortcode ('n1', 'interviewer_name');
// Add interviewer's paragraph shortcode
function interviewer_question( $atts, $content = null ) {
return '<span class="question"><p>'.$content.'</p></span>';
}
add_shortcode ('ques', 'interviewer_question');
// Add interviewee's name shortcode
function interviewee_name( $atts, $content = null ) {
return '<span class="inteename">'.$content.'</span>';
}
add_shortcode ('n2', 'interviewee_name');
// Add interviewee's paragraph shortcode
function interviewee_answer( $atts, $content = null ) {
return '<span class="answer"><p>'.$content.'</p></span>';
}
add_shortcode ('ans', 'interviewee_answer');
Now that the shortcodes are in your functions.php file, you can go back to your post (or coding program) and use the shortcodes instead, like so (shortcodes bolded). Notice that you still need to end your shortcodes with a slash.
[n1]Chris Mower[/n1] [ques]Can you tell me a little bit about yourself?[/ques]
[n2]Chris McClain[/n2] [ans]My name is Chris McClain. I was born in Salt Lake City, Utah. I am currently 31 years old, married almost 8 years. I have a son on the way coming in the next few weeks. It’s very exciting. And that’s pretty much been occupying most of my time for the last 9 months almost. We’re getting the house ready, child-proof type stuff, buying a crib, baby sheets, clothes, things like that. What else do you want to know about me?[/ans]
[n1]Mower[/n1] [ques]Shoe size?[/ques]
[n2]McClain[/n2] [ans]I wear a 14 on some days and a 13 on other days. It depends on the weather.[/ans]
[n1]Mower[/n1] [ques]What can you tell us about your business?[/ques]
And wala! That’s all there is to it. In the long run, using the shortcodes route has saved me tons of time and energy.
There are two things you must remember though. The first, there is currently an issue with all versions of WordPress that I’ve tried that only allows a certain number of shortcodes to be used on one post. I’m not sure what that magical number is though. If you have longer interviews, you will need to use the <!--nextpage--> page break… hopefully this is fixed soon. The second is that you must use a space between the ending name shortcode and the beginning question/answer shortcode as shown in the example above.
As always, if you have another cool way of styling interviews, add your link to the comments below and share it with the world. Also, if you’ve used this method to style your interviews and feel like sharing, go ahead and do that too.
Cheers! Did you like this post? Please share it with your friends using the share button below.
wonderful post.
thanks