Pull Quotes are a bit of a throwback to a different era in communications. Pull Quotes were originally a technique that stemmed from the print industry, particularly from magazines and books.
A Pull Quote is a particular snippet from the page text, something that you want the reader, or the person scanning through the pages to notice before they even begin reading. This is used to pull people in and spur them to learn more.
The Pull Quote stands on its own as a wonderful item from the text that has substance, depth, and underlying meaning. As more books and magazines are published on the web, this print technique stands the test of time and works in the digital world.
This tutorial will show you how to engage your audience with an extraordinary quote from the text you publish on the web.
Step 1: Creating the HTML
First, we want to create a basic HTML page. Use your text editor and feel free to copy the following code into the editor. Save the file as “pullquote.html” when you are done.
Notice that we are adding the element of <p> to give the paragraphs some space between each other. We will define the body text with a style using the following line of code:
body {font: 13px/1.5 arial, helvetica, sans-serif;}
| <!DOCTYPE html><html><head> <style> body {font: 13px/1.5 arial, helvetica, sans-serif;} </style> <body> <p>I couldn’t wait to get back into my truck to travel along the coast again. There is nothing like driving California’s coastal highway whether or not you are searching for waves. When I head down Highway 1, I feel the ocean air against my face as I tilt my head out the window for a moment like a dog. The small bit of untouched land alongside the road doesn’t separate me from the waves, but rather draws me closer to them. The land, the highway, and the ocean all flow into each other seamlessly. If any barriers were to exist here, they would exist purely in one’s mind and nowhere else. Here, space expands without limit. There are still areas of road along this highway where I look out across the land, and see nothing but land itself. No visible areas of modernization taint its purity. Sometimes it may be a cultivated piece of farm land where the crops are lined in rows stretching to infinity. I can see no end. Even here, farms stretch out along the ocean, along the cliff line, overlooking the great Pacific. When the sun rises here, one feels warmth penetrating the rich soil and all those who cultivate it. Sometimes it feels as if I’m traveling through a well-written novel. But this is all real, and I’m the one who has taken to the road once again to experience all that it has to offer.</p> <p>I end up at a place somewhere between Morro Bay and Big Sur. The morning is cool, extremely clear and bright. This spot is a beach break, but for some reason, the swell is coming in from a sharp angle producing waves typical of point breaks. The waves are clear, thin, and so well formed that I have to take a second look.</p> <p>The importance of spontaneity is becoming clearer to me. None of this wasplanned. We just pulled in while traveling along the coast. Some of the best dayshappen with minimal planning. One’s mind has to be free to allow for taking offon a moment’s notice and discovering without expectations. Spontaneity is thekey to discovering our environment and ourselves. It invites introspection thatreveals inner qualities. When one can let go of expectations and desires for thingsto go a certain way, then no way is the perfect way. When no way is the perfectway, how can one ever be disappointed?</p> </body></html> |
Step 2: Floating the Quote
Now we need to pull a quote from the text and float it. We will also want to apply some special font styles to the text quote to make it truly stand out from the rest of the text.
In order to make this happen, we want to add in the following styles:
- blockquote: Gets rid of the default blockquote margin.
- .pquote: Aligns the text for the quote, gives padding, and all of the font attributes including font style, font size, and font color.
| <style> body { font: 13px/1.5 arial, helvetica, sans-serif; } blockquote {margin: 0;} .pquote { float: right; width: 200px; color: #030; font-size: 30px; line-height: 0.9; font-style: italic; padding: 14px;} </style> |
Now let’s add in the code with the quote we want to showcase:
| <p>I couldn’t wait to get back into my truck to travel along the coast again. There is nothing like driving California’s coastal highway whether or not you are searching for waves. When I head down Highway 1, I feel the ocean air against my face as I tilt my head out the window for a moment like a dog. The small bit of untouched land alongside the road doesn’t separate me from the waves, but rather draws me closer to them. The land, the highway, and the ocean all flow into each other seamlessly. If any barriers were to exist here, they would exist purely in one’s mind and nowhere else. Here, space expands without limit. There are still areas of road along this highway where I look out across the land, and see nothing but land itself. No visible areas of modernization taint its purity. Sometimes it may be a cultivated piece of farm land where the crops are lined in rows stretching to infinity. I can see no end. Even here, farms stretch out along the ocean, along the cliff line, overlooking the great Pacific. When the sun rises here, one feels warmth penetrating the rich soil and all those who cultivate it. Sometimes it feels as if I’m traveling through a well-written novel. But this is all real, and I’m the one who has taken to the road once again to experience all that it has to offer.</p> <aside class=”pquote”> <blockquote> <p>Spontaneity is the key to discovering our environment and ourselves.</p> </blockquote> </aside> <p>I end up at a place somewhere between Morro Bay and Big Sur. The morning is cool, extremely clear and bright. This spot is a beach break, but for some reason, the swell is coming in from a sharp angle producing waves typical of point breaks. The waves are clear, thin, and so well-formed that I have to take a second look.</p> |
From this, we get the quote in a position that clearly separates itself as a standalone, noticeable piece that reflects the depth of the text and directs the viewer into the area you want them to see.
Step 3: Adding Additional Decoration
Now let’s add some additional decoration. By adding the following CSS to the Styles, we can control the size of the first letter in the quote. Traditionally, the first letter in the quote is larger than the rest.
| .pquote p:first-letter { font-size: 60px; font-weight: bold;} |
The result is this:
If you want to add some background color to the quote, you can certainly do so by simply adding in one line of code to your already existing “.pquote” element.
| .pquote { background-color: lightblue; float: right; width: 200px; color: #030; font-size: 30px; line-height: 0.9; font-style: italic; padding: 14px;} |
The result is a nice background that helps to further showcase your quotation. You have a multitude of options here.
There are many places available for further investigation. Be sure to check out Font Weight, Font Families, and Background Image Size. These tutorials will help you to understand the wide range of possibilities for creative layout and design.
Finally, always consider your audience and make sure you pull a quote that is substantial for the viewer so that you can entice them into reading more.
Where to Next?
This introduction to Pull Quotes should provide a starting point for further inquiry into form design, layout, and practical application. As you can see, there are virtually unlimited creative aspects that HTML offers.
The Pull Quote is just one example of good UI/UX design. Creative concepts always have a way of expanding into another world of both practical and aesthetic applications.
We will continue to explore other areas of HTML design in the next blog. We hope this introduction has piqued your interest and inspired you to explore further and dive deeper into the world of web design.
Enroll in our Intro to Programming Nanodegree program today!
<p><a class=”btn btn-primary” href=”https://www.udacity.com/course/intro-to-programming-nanodegree–nd000” target=”blank” rel=”noopener noreferrer”>Start Learning</a></p>
