“30 Typography Examples from Advertising” plus 1 more - Speckyboy Design Magazine Feed

Posted: 08 Jun 2012 01:54 AM PDT

To the average person, an advertisement is an annoyance. The words have become synonymous in the decades since the golden days of advertising. Today, and to be worth the paper it’s printed on an advertisement has to step beyond the bounds of conventional professionalism and do something extra to capture the viewers eye.

Of course, in print ads the role of Typography can’t be understated. You must communicate details to the readers, but you can’t do it in a way they’ll easily forget.

This gallery highlights 30 of the finest examples of typography in advertising. They all communicate in wonderful and innovative ways, and work very hard to draw the eye.

ABSA Bank Typography Concepts

Meth

Vans

21 to Drink

Other Time

Nike

Neo Nation

Shape Ups

Species Risk Extinction

Coalition to Stop the Use of Child Soldiers

Girlfriend

Crash

Durex

Honda Weekend

Discovery Channel Life

Cascavel

Complot Creativity School

Fencer

Making Worlds

Vultures

Kodak Ads

Seriously Fungi

Finger Fun

Callbox Billboard Design

HBO 20th Century

Newport Beach Film Festival

Life

Eat My Brain

Honda Insight

Layout Design 2012

You might also like…

50 Beautifully Designed Posters with Amazing Typography →
Typography as Art →
18 Super Quick Web Typography Tips for Newbies →
21 Typography and Font Web Apps You Can't Live Without →
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices →
The Classification of Fonts →
Five Alternative Methods for Typography Inspiration →
45 Creative Examples of Typography in the Wild →
50 Examples of Effective Uses of Typography Within Web Design →
A Showcase of 35 Beautiful Typographical Illustrations →
45 Stylish and Creative Typographical Desktop Wallpapers →

Focusing on Usability with an Enhanced Pagination Design in WordPress Entries

Posted: 07 Jun 2012 09:47 AM PDT

WordPress has supported basic pagination in both entries and in lists of posted entries for quite some time, although this method is not the most intuitive way to navigate content. Because the developers behind this popular content management solution believe in making everything almost exceedingly basic, so that it accommodates novice users as well as those who are more advanced, the pagination technique used by WordPress simple allows users to click an “Older” or “Newer” link when navigating pages of content.

That might be fine in some instances, and it’s certainly functional enough to work out quite well for most blogs. However, it completely removes the ability to jump between specific pages of content without manually editing the permalink found in the browser’s address bar. It has the effect of catering well to novice WordPress designers and developers, but performing pretty poorly for novice website readers and those who aren’t familiar with permalink structure. At the end of the day, the reader is the most important aspect of a WordPress site and the administrator of that site must develop a solution which is publicly usable and intuitive.

Such a reader-centric focus when it comes to developing WordPress themes is what has spawned a thriving community of developers dedicated to “enhanced” pagination techniques. As with most things that enhance the built-in WordPress core functionality, these techniques rely on modifications to a theme’s functions.php file or the addition of a plugin to the wp-content folder. Thanks to the more than 15,000 developers which serve the WordPress community, website administrators have a choice between coding the feature manually and simply using a plugin.

This tutorial will examine both methods; those who prefer to develop their own, custom-designed pagination via coding it without a plugin will need to have pretty firm experience of PHP and CSS in order to have the greatest chances of success. Let’s begin developing a more user-friendly pagination technique.

Step 1: Get in Touch with the Theme-Specific Functions.php File

WordPress ships with two different types of functions files, each responsible for their own set of core feature. The site-wide functions.php file is located in the wp-includes directory and is generally considered off-limits for modification. This is the file that powers almost every default WordPress core feature and hook, and modifying it can have disastrous results if the code is not absolutely perfect. Furthermore, this file gets overwritten with every new WordPress software update and administrators would have to edit the file after every update to maintain any modifications.

Apart from this file, WordPress supports a theme-specific functions.php file in the theme’s root folder, placed right alongside the main template files which dictate the theme’s look and feel. These files are invoked only when a theme is activated, meaning that every feature coded within them is theme-dependent. These files are the safe way to add new functionality to a WordPress installation without risking the core features that power the software. This is the file that will be edited in this tutorial, and it can be found at the following path within an FTP client or web-based file manager:

/home/public_html/wp-content/themes/THEME-FOLDER/

This directory should already contain the functions.php file which will be edited but, if the theme is very basic, it may not have this file at all. WordPress does not explicitly require a functions file, so a user may have to create it on their own. That’s as simple as opening a plain text editor, creating the document, and saving it with the .PHP file extension. It can then be uploaded to the theme’s folder for immediate effect.

Step 2: Telling WordPress to Revolutionize the Way it Paginates Entries and Loops

WordPress has a built-in hook for the pagination of its content, and that hook is straightforwardly labeled “pagination.” It’s used as a function throughout the site-wide functions.php file that can be found in the wp-includes directory. Luckily, the theme-specific version of this file is actually processed before the site-wide version, allowing any functions placed into it to supersede those developed by WordPress’ own developers. This is the approach that will be taken, as the theme-specific functions.php file essentially rewrites the pagination hook. Here’s how the process begins:

  function pagination($pages = '', $range = 10) {  $showitems = ($range * 3)+2;  global $paged;  if(empty($paged)) $paged = 1;    if($pages == "") {  global $wp_query;  $pages = $wp_query->max_num_pages;  if($pages) {  $pages = 1; } }

The beginning of the new function is very similar to the way the existing WordPress pagination hook operates; this construction simply tells the software when to paginate a post or a listing or posts, and how many characters or entries to display per page. It also tell the pagination routine not to run when there is not enough content to warrant the pagination process. With that in place, it’s time to make some real changes to the way the pagination looks on the website itself.

Step 3: Creating the New Pagination Appearance Using the Pagination Hook and Function

No new functions or hooks are being added to accomplish the changed appearance of the pagination element. Instead, the code below builds on the above function_pagination element and simply defines a new form of XHTML styling which will greatly enhance the usability of entry pages and content sections. Here’s what that code looks like when brought into the new pagination hook:

  if(1 != $pages) {  echo "< div class=\"page-numbers\" >This is page ".$paged." of ".$pages." pages;  f($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "< a href='".get_pagenum_link(1)."' class=\"first-link\" >First Page< /a >";  if($paged > 1 && $showitems < $pages) echo "< a href='".get_pagenum_link($paged - 1)."' class=\"next-link\" >‹";    for ($i=1; $i <= $pages; $i++) {  if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) {  echo ($paged == $i)? "< div class=\"this-page\" >".$i."  ":"< a href='".get_pagenum_link($i)."' class=\"this-page\" >".$i."< /a >"; } }    if ($paged < $pages && $showitems < $pages) echo "< a href=\"".get_pagenum_link($paged + 1)."\" class=\"next-link\" >›< /a >";    if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "< a href='".get_pagenum_link($pages)."' class=\"last-page\" >»< /a >"; } }

This part of the code is by far the most extensive chunk, and that’s because every single new link which is rendered by WordPress must be given the appropriate XHTML construction. This includes the <DIV> and <A> tags, as well as the classes and IDs which will enable a stylesheet to give them an attractive and highly usable appearance. The lines above can be customized within the echo statements that determine the XHTML output of the function The primary way to customize these statements would be to change the names of the classes or ID elements assigned to a tag.

Once all of the code has been placed into the file and has been modified to work with the website’s stylesheet, it can be saved and the functions.php file can be uploaded to the server. That file can now be closed, as the rest of the operation will focus on the stylesheet.

Step 4: Styling the New, Easy-to-Use Pagination Technique

WordPress is designed to be receptive to stylesheet code, and the function placed into the functions.php file above continues this trend by assigning specific classes to the next, previous, first, and last elements, as well as the numerical elements which allow a user to jump between pages. Overall, the entire thing is contained in a <DIV> tag which is assigned the class of page-numbers.” While this tutorial won’t cover how to style each individual pagination link, as that is entirely up to the site’s designer, it will cover creating the basic page-links class which will give the pagination routine a basic style even without link-specific code. Here’s how that should look in most cases:

  .page-links {  clear:both;  padding:5px 2px 5px 2px;  position:relative;}    .page-links a {  display:block;  margin: 4px;  padding:2px;  color:#000;  background: #eee;  }

The great thing about the above code is that it actually styles every single link within the pagination area in an identical way. This could, essentially, the the only CSS modification that is required in order to make the pagination elements user-friendly and design-friendly at the same time. However, many WordPress administrators prefer to style the “next” and “previous” links in a distinct way as compared to the “first” and “last” links, in order to chance usability and accessibility, especially because these links look identical without textual labels.

This essentially concludes the process of developing pagination links that perform their task far better than WordPress does with its native “pagination” hook. Be sure to test the new elements extensively, ensuring that each link goes to the appropriate page and that the appropriate content is pulled from the database without any overlap. And, of course, make sure that they look good. That’s the key to a great website that is as functional as it is aesthetically pleasing.

Step 5: Deciding Against Manual Coding and Opting to Paginate with a Plugin

With more than 15,000 dedicated developers, WordPress has more than enough pagination plugins to suit the needs of users who prefer to download their additional functionality rather than code it themselves. Though the WordPress Extend website offers a number of plugins that can create nearly the same appearance as the manual option mentioned earlier in this tutorial, the most popular such plugin is easily WP-PageNavi. This is the plugin that has been around the longest, and it comes with a great Dashboard control panel page which allows site administrators to control the language used by the plugin as well as customize its appearance.

Overall, WP-PageNavi is exclusively designed for those novice WordPress users who want the enhance their site’s pagination links without brushing up on their WordPress variables, PHP code, and CSS coding techniques. Unlike the technique mentioned above, however, the WP-PageNavi plugin will not automatically change the way WordPress prints pagination links to the end users. It does not modify the actual “pagination” hooks like the functions.php file above. Instead, it adds a new page_navi function to WordPress through the plugin code and then requires users to modify their templates in order to show the new pagination when it’s appropriate.

This can be done by placing a single variable on the index.php page, or standalone entry templates. The same variable is considered valid on archive, category, and tag pages. That variable looks like the following:

<?php wp_pagenavi(); ?>

More advanced plugin users can choose a piece-by-piece variable technique which will allow them to deliberately place the “first” or “last” links wherever they’d like to in their template files. They can also use this technique to place the page numbers in a custom location. The variable above will print the exact same kind of pagination element that was developed earlier in this tutorial, with numbered page links falling between first, last, next, and previous options.

Once the plugin has been installed and activated, and the variable has been placed into all the relevant template files, double check the custom Dashboard page’s settings to ensure that everything will print as expected. Then, as always, point the browser toward a paginated entry or archive and ensure that the plugin is performing as it should.
Remember, there should be no content overlap between pages, and the links to the first, last, previous, or next pages of content should only appear when they are needed. If this is the case, then the plugin is performing as it should an the site’s pagination will be even more user-friendly than WordPress’ built in technique!

You might also like…

10 HTML5-Ready Blank, Bare-Bones and Naked Themes for WordPress →
15 Free WordPress Themes with a Responsive Layout →
30 Grid-Based WordPress Themes →
20 Minimal WordPress Themes 2012, 2011 Edition & 2010 Edition
20+ Free and Stylish Typography WordPress Themes →
Essential WordPress Plugin Development Resources, Tutorials and Guides →
20+ Powerful WordPress Security Plugins and Some Tips and Tricks →
20 Helpful WordPress SQL Queries Snippets →
20 Plugin Replacing Tutorials, Tips, Snippets and Solutions for WordPress →
10 Useful WordPress Search Code Snippets →
20 More WordPress Code Snippets and Hacks →
20 Plugin Replacing Tutorials, Tips, Snippets and Solutions for WordPress →
Dummy Content Filler Resources for WordPress, Drupal and Joomla Developers →

Freitag, 8. Juni 2012