Monday, February 4, 2013

Stylish Blockquotes And Pull Quotes In Web Design: Tips & Examples

Stylish Blockquotes And Pull Quotes In Web Design: Tips & Examples:

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.

Modern CSS3 Blockquote style effects

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.

First blockquote example in CSS/JSFiddle

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.

Pull-Quote floating to the right JSFiddle

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.

Blockquote display source with reference

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.

Blockquote CSS styles with quotes icons

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.

open source pull-quotes with CSS3 on JS Fiddle

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

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.

Survs

Website quotes for Survs online

Modern Blockquote Styles

Modern CSS3 Blockquote style effects

CSS-Tricks Better Pullquotes

CSS Tricks blog pull-quotes styles

PSD2HTML Testimonials

Slicing website design layouts HTML PSD

Right Banners!

Design services Right Banners! testimonials

E-mail Craft

Online design testimonials for EmailCraft.com

Media Temple Clients

Media Temple online web hosting

BuySellAds

Webpage BuySellAds testimonials and press releases

Postbox

Mac OSX E-mail Postbox App Store website testimonials

Grooveshark Press

Press releases testimonials for Grooveshark app

Web Design Beach

Web Design Beach client testimonial box

Rdio

Rdio web app testimonial boxes blockquotes

Pligg CMS

Classic Pligg CMS Testimonial footer

LightCMS

Blockquote section testimonial web interface

Elegant Themes

Design testimonials Elegant Themes website

Do – Testimonials

Do.com website tasks list webapp

A List Apart

A List Apart blog theme design pull-quotes

Kupferwerk

German news source Twitter blockquote styles

eWedding

Basic CSS blockquote testimonial block

OnWired

OnWired website testimonial blocks

Jeroen Homan

website design portfolio of Jeroen Homan

Mississippi Remixed

Website paper textures blockquote style

CSS Mastery

Web design book CSS3 properties

CrazyEgg

Website blog design pullquotes CSS styles

Flow App

GetFlow webapp to-do list testimonials

Matty Studios

Website layouts Matty Studios designs

FreshBooks Press Center

FreshBooks Media Center press releases

Blog Pull Quotes

Green Beast Blog WordPress pull-quote styles

Blockquotes & Pullquotes

Myriad website blog layout pullquotes

Stylish Block Quotes

Studiopress blog post on Blockquote styles

Pearsonified

Online Pearsonified block quotes pullquotes design

Bills for iPhone/iPad

Bills iOS App User Reviews

Xero Case Studies

Xero online website customer testimonials

Shopify

Blockquote testimonials for Shopify website

Ning Media

Ning Company brands for social media

Digital Web Magazine

Web Magazine blockquote styles inline

Webtime Inc.

Webtime customer testimonial sidebar block

Masuga Design

Web design clients testimonials Masuga Portfolio

Chromatic

Chromatic web design client testimonials

Mobile Web Book

Mobile web design book blockquote testimonials

Iceberg

GetIceberg App client testimonials

WebFusion

Sidebar client testimonial blockquotes and pull-quotes

MVH Media

MVH Media testimonials and user blockquotes

2 comments:

  1. 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.
    website design

    ReplyDelete
  2. For some more wise and witty discussions, visit Hr Software

    ReplyDelete