Most of my clients don’t use block quotes in the way they’re intended. Unless you’re a magazine and will be actually quoting folks for use in your content, there are better ways to make use of the Block Quote styling that is built into your theme.
By default, block quotes are ugly, boring and really uninteresting:
I mean, it gets the job done, but it’s boring as hell. Light grey, italic text offset to the right a little bit…
When I’m working with a new client, I like to figure out a way to make better use of the block quote feature. Most of my clients are pretty comfortable inside the Visual Text editor, but they’re not comfortable adding custom styling via the Text Editor. Rather than create a custom style that my client will never actually use — and also, rather than let the blockquote sit dormant and never GET used, I like to style up my block quotes to be pretty.
Here are a couple of examples:
Phillips Gradick Engineering is a client of mine in Atlanta. They’re a well-established company and their website redesign was a slick, modern facelift highlighting their varied portfolio of projects. Click here to visit their site.
And the CSS to accomplish this was pretty straightforward:
blockquote,
blockquote::before {
color: #333;
}
blockquote {
background-image: url('images/texture_white.png');
border: 1px solid #f5f5f5;
padding: 10px;
margin: 40px;
}
blockquote::before {
content: "\201C";
display: block;
font-size: 150px;
height: 0;
left: -52px;
position: relative;
top: -77px;
}
I added the background image on line 7 (to match the rest of the background images on the site in the header and footer), a very light border on line 8, increased the size and darkened the color on the unicode character on line 14.
And now, instead of just your basic boring blockquote, you’ve got a nice, still pretty minimally styled blockquote that ACTUALLY looks like somebody designed something.
Another example, this time slightly more involved, is with one of my therapist clients, Megan Swisher with Swisher Psychological Services (visit site here). Megan had worked with copywriter extraordinaire Charlotte Riley and one of the elements that kept coming up in her copy were stylized versions of quotes on a few pages. Initially, I took the lazy designer’s way out and just built them in Adobe Illustrator and uploaded the images. But because of the responsive nature of her child theme (Adorn by Restored 316), these images took up too much real estate on desktop and not really quite enough on mobile devices.
Enter… The styled blockquote!
This time, I reinvented the blockquote as it’s own special little creature.
blockquote,
blockquote::before {
color: #262626;
}
blockquote {
margin: 0;
font-family: Emblema-Fill1Basic;
font-size: 30px;
line-height: 40px;
text-align: justify;
color: #262626;
background-color: #229b91;
padding: 0px 40px 10px 40px;
border: 1px solid #262626;
margin-bottom: 20px;
background-image: url(images/menu-cursor-01-01.png);
background-repeat: no-repeat;
background-position: top center;
padding-top: 70px;
background-position-y: 20px;
}
blockquote::before {
content: none;
display: block;
font-size: 30px;
height: 0;
left: -20px;
position: relative;
top: -10px;
}
And, to combat the issue with the imbalance of mobile responsive design, I added this little bit to the media queries:
@media only screen and (max-width: 460px) {
blockquote {
padding: 0px 20px 0px 20px;
padding-top: 60px;
background-position-y: 20px;
font-size: 20px;
line-height: 25px;
text-align: center;
}
Inside the text editor, Megan needs to only create her quote, align the quote to the left and the attribution to the right and highlight the text, click the blockquotes button and wham-bam-thank-you-ma’am, it’s beautiful. Not only does it match and reinforce her branding, but it’s just really damn easy for her to recreate quotes on the fly. Having the ability to do shit for yourself as a site owner = autonomy. Autonomy will save you money in the long run (and this designer will love you for wanting to do this kind of shit on your own).
Have you seen any pretty blockquotes in the wild? Give it a shot and make something beautiful.
