There are plenty of examples in web typography where block quotes fit perfectly into your layout. When you need to express dialogue or repeat a quotation from another source this is the perfect HTML style. But strangely there aren’t as many professional examples online where you can look into for inspiration.
I want to dedicate today’s post to look at how you can create stylish blockquotes and pull quotes.
As a web designer, you have to consider webpage content as a crucial factor in selling your domain. Creating a stylish look to your blog posts and pages will keep readers hooked for longer. There is a handful of differences between these quotation styles and we should examine them closer in order to fully understand these modern design trends.
It’s not required to understand very much about HTML5 or CSS3, but having some background knowledge in web design will make this process a lot easier. And feel free to emulate many of these styles in your own layouts!
Recommended Reading: Designing Killer Web UI Layouts With Freebies – Ultimate Guide
Diving Into Semantics
Before we look into CSS styles we should first go over the differences between blockquotes and pull quotes. There is a small collection of different tags you can use in your markup to denote these page elements.
Blockquotes
When using the HTML5 blockquote tag this should represent a full block of text – a paragraph or possibly a few paragraphs. These usually span the whole width of your text and will appear much bigger than normal. Blockquotes contain quoted text from any external reference, most commonly other websites or blog posts. But you could quote text from print or even digital media, like a movie or TV show.
Pull quotes
Pull quotes are aligned off to the side of your page in-between content sections. There is no specific pullquote tag in HTML5, so the semantics are not exactly formal. But the most typical use of pull quotes is to copy text which is already found somewhere in the document. This helps emphasize important phrases and breaks up the typical page flow.
New HTML5 Blockquote Rules
With all previous HTML standards the blockquote element was a root element which contained only semantic markup tags. These may be <p>, <ul>, <div>, or other block-line elements. This typically would mean that blockquotes could only be used for larger quotations of text.
However the new HTML5 blockquote specs specifically state that “one does not have to use p elements inside blockquote elements”. This makes constructing your HTML so much easier since we don’t need to rely on older, more confusing coding standards. Just drop your text into the <blockquote> tag and you’re good to go.
Another typical addition is the cite attribute on blockquotes. You can set a unique URL value which contains the text you’re quoting. This isn’t a bad option to add into your code, but there are alternatives which may be more user-friendly.
For example you can add some text directly underneath the blockquote and link to the article in-text. In this scenario your readers also have the opportunity to trace the quote back to its original source.
Inline Quotations
Pull quotes could be considered inline quotes as they are commonly found floating to the left or right side of your page content. Articles use these inline pull quotes (or lift-out quotes) to display related content from the article.
A smaller HTML5 <q> tag can be used to wrap these pull quotes, although this element is often used for quotations inside your paragraphs. I rarely ever see web developers using the <q> tag because it’s very clunky within markup.
I would honestly recommend setting up custom styles for your pull quotes and wrapping them inside a div, span, or even blockquote elements.
My example above illustrates a really simple pull-quote. We can style a .pull class onto any typical blockquote element which is then floated to the right. You can spruce up the styles even more using quotation marks and italicized text.
Styling Full CSS Blockquotes
Let’s take a look at some basic examples I’ve created using CSS properties. Blockquotes are so interesting because there are dozens of unique styles to follow. The typical inline quote is a bit more subtle, since you can blend this text into your main page content.
The example above uses a default block-style quote with attribution towards the top. You can place a character reference or web link connecting to your quoted text. I have added a text shadow effect to enhance the viewing a bit more.
This blockquote styling is a whole lot different than typical default properties. You have freedom to copy over my codes and edit the styles to suit your need. The source attribution can also be moved below the quote, if you think that looks better. Fluidity is one key aspect to creating workable blockquotes which also look nice on a monitor.
Using BG Image Quotes
One other popular trend for blockquotes is to add your own CSS background images for quotation marks. Since you can’t predict the height of these quotes you’ll generally create two different images and rotate one of the quotation marks upside-down.
In my example we’re using another blockquote with a special class .bq3. I’m using a paragraph element containing the full quoted text so that our bottom quotation mark will expand vertically.
The premise is to use a non-repeating background image on the blockquote element in the top left corner. Then on the inner paragraph element, add another non-repeating background image to the bottom right corner. Sprinkle on some extra padding and we’ve got a really nice looking blockquote styled for any page layout!
Pull-Quotes that Stand Out
For my last bit of code we can create a totally new set of colored inline pull-quotes. This internal blockquote element is floating onto the left side, and I’ve created a darker box color scheme contrasting the paragraph text. This will stand out as you’re skimming through page content.
You can ideally use any matching color scheme which follows your layout. Pull-quotes are unique in that they can fall anywhere along the page copy and still look really elegant. But when you add these extra background effects with rounded corners, you’ll find that visitors are much more receptive to reading instead of skimming articles.
You can create something very similar for your own designs and even add background images, if you like. The possibilities are endless and require careful consideration before making any first move. But take these CSS examples as a starting point and proceed jumping in and coding your own pieces!
Further Reading
- Modern Block Quote Styles
- Simple CSS Blockquotes and Pullquotes
- Block Quotes and Pull Quotes: Examples and Good Practices
- Snazzy Pullquotes for Your Blog
- Swooshy Curly Quotes Without Images
Showcase Gallery
What article could be complete without showing off some talent from around the Web? In the following gallery I have put together over 40 examples of blockquotes and pull-quotes in website layouts.
Designers from all around the world will find plenty of inspiration to work off. But if you have any questions or suggestions for styles we may have missed, feel free to drop a comment in the post discussion area below.
Related posts:
Wonderful article. Author made excellent efforts to make this article so interesting. I truly like to reading your post. Thank you so much for taking the time to share such a nice information. I'll definitely add this great post in my article section.
ReplyDeletewebsite design
For some more wise and witty discussions, visit Hr Software
ReplyDelete