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.

Survs

Modern Blockquote Styles

CSS-Tricks Better Pullquotes

PSD2HTML Testimonials

Right Banners!

E-mail Craft

Media Temple Clients

BuySellAds

Postbox

Grooveshark Press

Web Design Beach

Rdio

Pligg CMS

LightCMS

Elegant Themes

Do – Testimonials

A List Apart

Kupferwerk

eWedding

OnWired

Jeroen Homan

Mississippi Remixed

CSS Mastery

CrazyEgg

Flow App

Matty Studios

FreshBooks Press Center

Blog Pull Quotes

Blockquotes & Pullquotes

Stylish Block Quotes

Pearsonified

Bills for iPhone/iPad

Xero Case Studies

Shopify

Ning Media

Digital Web Magazine

Webtime Inc.

Masuga Design

Chromatic

Mobile Web Book

Iceberg

WebFusion

MVH Media

Startup entrepreneurs, in particular, are keen to get investors for their project and even if they have a winning idea that investors look foward to, the idea itself may still not be enough to convince investors. Startup entrepreneurs should realize that a brilliant idea alone will not get the funds from investors; they also need to express their ideas in a way that will impress investors enough to part with their money.

(Image Source: Fotolia)

To make the cut, you will have to support your ideas with hard evidence and facts, which will give the impression that your project is designed for success. And that you have a plan for that success. Every investor can be different, and might have their own opinion or criteria for success, governed by certain sets of principles.

Some investors appreciate honesty and sincerity in what you say. Regardless of what you put in, the pitch is the key to getting through to your investors.

Recommended Reading: Entrepreneurs: 5 Startup Mistakes To Avoid

1. An Honest pitch

It’s perfectly understandable when entrepreneurs give a lot of significance to a pitch. However, some make mistakes in that when they try to make their pitch a unique one, they pack their pitch with unnecessary aspects, turning the pitch into a mere tool to impress investors.

They forget that investors are sharp and may focus more on how you feel about the idea i.e. your passion and your belief that this is the next thing to change the industry, or the world. The way you feel about your business idea will tell investors how serious you are with your idea, and how far you can push the idea.

In your pitch, tell them what made you develop the idea. Investors are keen to hear how the idea was born because the uniqueness of an idea is more likely to turn into a vision, and visions get funds.

2. Geared towards investor’s benefit

Investors have to deal with many pitches, all different to a varying degree and therefore, it’s not advisable to put the faith purely in your product or your business descriptions alone. More than your business, it’s the benefit that the investor will eventually receive that will keep you in the hunt.

Investors will only invest, when there’s a possibility of returning profits.

(Image Source: Fotolia)

It doesn’t matter what medium you choose to pitch your idea, at the end of it, it has to contain details about the benefits your investor is likely to receive.

You don’t have to list all your benefits, just the ones that stand out, particularly how their association with your business idea will be able to bring benefit to them. Even when they aren’t entirely convinced, making them interested gives you a second chance to elaborate and explain your idea further.

Also Read: 5 Reasons Why Your Products Are Not Selling

3. Short and decisive

Never settle for a boring pitch, make them attention-grabbing, and most of all make them second nature to you, the kind where you can easily pitch off the top of your head, in the back of a cab or better yet, when you find yourself in the same elevator with a financial investor.

There’s your chance, it’s now or never, you have 1 minute at most, to talk face to face with a possible investor and the both of you would not be interrupted by a secretary, a co-worker, or a phone call. What do you say? What should you share about your business idea that will be the clincher?

Build Your Pitch

Once you have figured that out, let’s get out of that scenario. Now, build your full pitch from that 1-minute scenario pitch. You have all the impertinent points, the things that cannot be left unsaid. You know what should be said, put that into your full pitch.

No one has the time to read or listen to a long-winded, unstructured and unfocused anything, let alone a pitch. Don’t waste your investor’s time. Get all your facts straight then get straight to the point. Even that alone will put you above others vying for the same attention and funding as you are.

4. Do your Homework

In a normal pitching session, your pitch could be interrupted midway with a barrage of questions from the investor(s). Don’t worry. It’s a good sign. The investor does that to check how you cope with confrontation, and whether you have done your homework and thoroughly understand and have thought out what you have been explaining all this while.

(Image Source: Fotolia)

Your awareness about the project will help you to answer them. For instance, you may be asked why you think you require this particular amount. Does it have to be this figure? Why? This is your cue to explain the allocation of your expenditure. The investor will try to pick signals from how you answer.

The more you know about the project, the better you will be able to tackle any of their questions.

5. Pitch should say something about you

Your past history may come as a help in terms of credibility to your business idea. They like to side with people who know what they are talking about, preferring those who can show that they have relevant knowledge in the business, thereby helping to increase the possibility of the idea taking flight.

Your connections with relevant industries may also be helpful and yes, your personality can help as well. It gives investors an inside look into the kind of person behind the idea – whether you are passionate, dynamic, capable or a flip-flop with half an idea that you won’t be able to see to fruition. A pitch riddled with dynamic personality can be very inspiring to say the least.

6. Eyeing Success

To recap, have an honest pitch, one geared to name all the benefits you can bring to the investor, be brief, but don’t steamroll over the important points, come prepared and don’t be afraid to get personal with your pitch. The path to success is paved with experience, and every failed pitch just adds to your experience in dealing with investors and stakeholders.

Don’t Miss: Handling Negative Product Reviews Professionally

Like previous Windows operating systems before Windows 8, when you press the Windows Key and start typing, you can search for programs installed on your computer and launch the program by pressing Enter. It’s the same on Windows 8, however, something peculiar happens.

On Windows 8, if you have Dropbox, try doing this simple test. Press the Windows Key and type ‘Dropbox‘. See the first result that appears in your search. While we’d usually seek to launch Dropbox, as your experiment may reveal, you get ‘Uninstall Dropbox’ as the first result instead.

This is the same for any other program, so there could be search results of webpages or other irrelevant programs turning up as your first search result. Here’s a way to get rid of all those unwanted files, and reorganize apps on your Modern UI.

Recommended Reading: Getting Around (And About) The New Windows 8 UI

Organize And Remove Metro UI Apps

To remove something from the Modern UI apps menu, first search for it.

For our example, we’ll be removing the ‘Uninstall Dropbox’ link that turned up in our experiment. Right click on ‘Uninstall Dropbox’ and at the bottom click on ‘Open file location’.

A folder will open where you can find ‘Uninstall Dropbox’. Because it’s just a shortcut, you can delete it without corrupting it in anyway. You can also go ahead and delete ‘Dropbox Website’ if you don’t want it to turn up in the Apps menu.

When you have cleared the unwanted shortcuts, the results will only show the intended program you actually want. If you used OblyTile to customize the Modern UI, you will still see 2 ‘Dropbox’ links but both can launch the app.

This trick also works for any other program that you might come across and is not only exclusive to Dropbox.

Create A Favorites Folder in Apps Menu

Through this trick, we found a way to further organize your more commonly used programs into a central location for faster access. You can create a custom ‘favorites’ folder in the Modern UI Apps menu.

First, go to your C: Drive and navigate to Users > [yourusername] > AppData > Roaming > Microsoft > Windows > Start Menu > Programs and create a new folder called ’00 Favorites’. We use the two zero’s in front to ensure it is at the top of the list.

Now go to your Modern UI, and search for a commonly used program, such as Dropbox. Right click on it and click on ‘Open file location’ at the bottom.

A folder will open with the Dropbox shortcut. Copy ( Ctrl + C ) that program shortcut and paste ( Ctrl + V ) it into the ’00 Favourites’ folder. Repeat the steps you did with the Dropbox shortcut for your other favorite programs.

Once you’ve compiled everything, sign off Windows and when you sign back in, press Windows Key + Q and you should be able to see a ’00 Favorites’ header with all your commonly used programs.