Join Sue Jenkins for an in-depth discussion in this video Exploring the secrets of effective block quotes, part of Productivity Tips for Web Designers.
Hello, everyone. This is Sue Jenkins with Productivity Tips for Web Designers. In this week's lesson, I'll be showing you some secrets to designing effective block quotes. Invariably, when we design for the web, there will come a time, when you need to format a quote. And for those occasions, we typically use HTML block quote formatting to visually distinguish the quote from surrounding text. Separating the block quote from the rest of the text gives it emphasis, and it can help break up the normal flow of content.
You can also use block quote styling for direct quotes as well as dialogue, pull quotes, even testimonials or quoted text from external sources. On the Web, a block quote should be marked up with the block quote tags and should be used exclusively for quotes, or any section of quoted text from an outside source. Here's an example of how the block quote looks in Dream Weaver. As you can see the tag is preformatted to indent both left and right margins, but you can easily override the style with CSS.
You can also use the site attribute in the HTML tag to include the citation details like a name, and a URL. To make your block quote stand out from the rest of your text on your web page, you can edit any of the following style attributes in your CSS. Font face, size, color, line height, style and letter case. As well as margins and padding, background color, pattern. Borders, and even use custom graphics. With that much freedom, knowing what to change first can be really hard.
So to help you find the right style for your block quotes, consider the following 10 simple guidelines. First, keep it simple, and start by changing the font face, style, or letter case. With some fonts, going bold or italic, or switching from normal case to all caps or smalled caps, is just enough of a visual change to help the text really stand out. Second, determine if you need to increase or decrease your font size, and or your line height.
By increasing your line height, and also increasing your font size, you can really make your quote more readable for your site visitors. Number three is changing the font color and or considering adding a background color to the block quote. You could also try using a background texture or background pattern, so long as it doesn't make the text unreadable. Number four is adjusting your margins. Adding space to the left and the right of your quote can really improve the readability and the flow.
You can also include a background color. Just be sure to adjust the padding between the text and the background edges. Number five is playing up the block quotes border. Try adding a thick border to the left edge of the quote or the right edge, or surround the entire block with a dotted or dashed line. Number six is considering decorating your block with graphics like, a large quote mark, curly braces, or some other symbols. You can add graphic elements to the start of the block only for a unique look or, to both the start and the end for symmetry.
If you're going to use quotes, consider whether to use them normally or as Roman Hanging Indents. I personally think that the Roman Hanging Indent looks fantastic, because what it does is it aligns your copy along the left edge and the indent hangs off of it sort of outside this invisible line. I think it's a cleaner look and that it helps with readability. Next is considering your alignment. Left aligned text is great, but for something like a block quote, try right alignment or even centered text. It could add just the right touch of creative flair.
And number nine is adding a little pizazz. You can try a fancy drop cap on the first word, give the block quote a drop shadow, or even try rotating the entire block to make it stand out. And lastly, you can style the source differently. For example, if you list someone's name and where they work as the source, try styling both elements differently from the quote itself and surrounding text.
Skill Level Appropriate for all
Q: In "Organic and ethical SEO coding," the author mentions Google+ Authorship. I heard Authorship results are no longer shown in Google search results. Why? Are there benefits to keeping the Google+ Authorship markup on my site?
A: As of September 2014, Google discontinued Google+ Authorship for SEO. The only reason to keep the code on your site would be for Author Rank purposes. See http://searchengineland.com/google-authorship-dead-author-rank-202254 for more information.