All posts tagged “Typical”

Typical Oversights When Designing for Print


It is this crucial aspect that many designers forget to consider when designing for print. There are a number of problems that may pop up which can make your final product look different than what you intended. Here are just a few things to keep in mind if you want to be successful.

Nearly every design begins as a digital file, whether it ends up on the web or in print. However, when creating printed materials from digital files, the essence of your design can become lost in translation. This is because what you see on your computer screen is a two-dimensional image created with color and light, while printed ads are three-dimensional objects created with paper, ink and good old fashioned elbow grease.

Hand placement

Many designers tend to forget that print is a physical medium and the designs you create won’t be viewed on a screen-they’ll be held in someone’s hands. When designing for branded presentation products, you need to be aware of where your audience is going to put their hands so that important information isn’t accidentally covered up. Presentation folders, for example, are typically held near the left third of the front cover, so this area should be clear of any vital details.


Image Source: Business Presentations via Shutterstock.

You’ll also want to make sure these areas are pleasing to the touch – you don’t want sharp or jagged die-cut elements here, because they will be uncomfortable to hold onto.

Not accounting for texture

Since printed designs are physical, they have to feel as good as they look. Your choice in stock, imprint method and coating can all affect the way your final product feels.

Thick stock feels expensive and authoritative, while thin stock feels flimsy and weak. Textured stock can create a pleasurable tactile sensation that audiences take notice of.


Image Source

Embossing is an imprint method that creates a textured relief in the stock itself, similar to an official seal. It’s a good way to combine texture with specific text, shapes or logos. Using special coatings like soft-touch or vinyl can also give your printed design a unique textural identity.

Printing on colored stock

When you print using the four-color process, there is an unmentioned fifth color in play-that being the white from the paper stock. In fact, it is impossible to create white tones using CMYK ink. Many designers make the mistake of printing their designs on colored stock, which ends up distorting the ink colors and makes the design hard to see.


Image Source

If you’re worried your design doesn’t have enough color, you can use ink as a substitute for color stock – but be aware that doing so can lead to another set of problems…

White edges when printing a color background

When you use ink in lieu of colored stock, the color will only be noticeable on the surfaces that have been imprinted. It’s impossible to print on the edges, which means that the white from the stock underneath will show through wherever the final product has been cut.


Image Source

This is unavoidable in certain cases, such as when you need to print in CMYK, but some imprint methods like embossing and foil stamping are fully compatible with colored stock. Likewise, if your only printed elements are embossed or foil stamped, then it is more cost effective to use colored stock than to print a colored background onto white stock.

Proper spacing around logo

This is one of many common logo design mistakes that come up in print. Companies often have a stipulation in their branding guidelines requiring a certain amount of space around any printed logo-and with good reason. Not only does the practice help the brand’s identity stand out in your design, it also prevents the logo from becoming accidentally distorted due to printing errors such as ink bleeds.

Check to see if the brand you are working for has any stipulations in their logo guidelines-if not, it’s best to leave a gap in proportion to the size of the logo. Leave a space about half the height of the logo or the size of one of the lowercase letters between the logo and any other graphical elements.

Color conflicts with printing methods

When you print with colored ink, there are two different methods you have to choose from-four color process or PMS (Spot Color) printing. Four color process uses a combination of CMYK tones to reproduce full-color images, photos and graphics. However, not all tones are available with four color process.

PMS inks are pre-mixed, which means their colors are standardized and will never look distorted. However, each PMS color must be applied separately, which means there is a limit to how many colors you can use at once.


Image Source

Here’s a handy way to figure out whether or not your project needs four color process or PMS printing:

Four Color Process:

  • Only option for full color photography, not recommended for black-and-white photography.
  • Cost-effective option for any design that uses four or more colors.
  • Cannot faithfully reproduce metallic or neon colors, oranges, navy or some grey tones.
  • May cause color inconsistencies when printing logos.

PMS (Spot Color) Printing

  • Best option for black-and-white photography. Cannot accurately reproduce color photography.
  • Best option for monochromatic designs. Not recommended for designs that use more than three colors.
  • Can faithfully reproduce most tones, including neon colors and metallic colors.
  • Best option for printing color-accurate logos.

If you need the versatility of four color process but the accuracy of PMS printing for branded elements, your best option is to print in four color and spot print the branded elements in PMS ink.

Difference between one-sided/two-sided printing

For single page print projects, the difference between one-sided and two-sided printing seems pretty obvious-however, multipage and folded projects can be trickier to figure out. These types of projects are printed flat and then assembled afterwards, meaning one-sided printing can often refer to elements on the interior as well as the exterior.


Image Source

For example, when designing a custom pocket folder, the interior pockets are on the “first side” along with the front and back cover, since the pockets are folded inside after printing. The only areas on the “second side” of the folder are the inside panels, and those are typically covered up by the folder’s contents.

Conclusion

The best way to avoid potential printing errors is to work with a printer that cares. I’ve also outlined some tips for making your design print-ready, which you can download as a free whitepaper. It will provide you with some great information on different printing techniques as well as offer suggestions for the most effective way to make your print design dazzle the audience.

Do you have any questions about designing for print that I’ve not mentioned? Do you know of any stories of print projects gone horribly wrong because a simple mistake? Share your comments below, I’d love to hear from you!


Typical Oversights When Designing for Print


Speckyboy Design Magazine

The WP_List_Table Function: What it Is and How to Use It Within a Typical WordPress Installation

For the past several major releases of WordPress, the columns of data within the WordPress Dashboard have been sortable either in ascending or descending order. This applies to virtually every column located within the Dashboard, including those that advertise categories, post titles, publishing dates, or page creation dates. It can also alphabetize things like categories, tags, and even pages or posts. This is a long-requested function on behalf of average WordPress users, and it’s great that it finally has been included with the shipping version of the Dashboard. While a great additional feature, however, it does come with quite a few complexities for developers. That’s because the function used to create sortable columns within the WordPress Dashboard is considered “private” and it cannot be extended to other plugins or areas within the WordPress installation, either within or outside the Dashboard interface itself.

To solve this problem, WordPress has actually created dual functions that allow columns to be created and made sortable. Its own private function is known as the _get_list_table() function, and this is what is used throughout the category, post, page, and tag pages in the Dashboard. This borderline proprietary function for sortable columns is then paired with the _wp_list_table() function; that function is the one that developers are encouraged to utilize when listing plugin data for use by administrators. It’s somewhat complicated, but most developers will get the hang of this disparity relatively quickly when creating their plugins or themes, and creating columns of data that should be sorted by the end user. Those developers looking to list data in a table, and make the columns within that table sortable, need to understand what this function is and how to best employ it for maximum utility and usability.

First Things First: What is the WP_List_Table Function Within WordPress?

The WP_List_Table function is a relatively recent addition to the WordPress Dashboard and its list of developer functions, and it directly replaces an earlier function for creating sortable columns throughout both the Dashboard and WordPress themes. One of the main differences between the WP_List_Table function and its predecessor is that the new function can now be fully integrated with an AJAX sorting implementation, like those supported by the popular jQuery JavaScript library for advanced interfaces. This makes it possible to perform advanced sorting functions and other administrative tasks without a forced page refresh that can cause some serious usability headaches for developers, authors, and website users alike.

WordPress actually makes a distinction between the WP_List_Table and a whole series of other WordPress functions, calling the WP_List_Table function a “framework” rather than a pure, straightforward function. And that’s because, in addition to incorporating AJAX manipulation, this new way to create sortable columns is composed as an extensive array that can be intricately customized and extended by the developer him or herself.

It’s also worth noting that the developers behind the WordPress software itself have thoroughly committed to supporting the WP_List_Table function/framework well into the future. Unlike the short-lived sortable columns feature that preceded it, the WP_List_Table is assured to be “hooked” into future WordPress releases. That means any columns created with today’s implementation of the WP_List_Table framework will be forward-compatible, even if WordPress changes some basic things about how this new framework functions and what it is actually capable of within the Dashboard. It’s the kind of confidence that should inspire use of the new WP_List_Table framework among a larger group of developers, and that’s the primary good of the WordPress development team. Sortable columns and AJAX implementations are highly usable, more so than any other technology currently used in legacy areas of the Dashboard. It contributes to an overall easier way to use advanced functions, making the software more appealing to entry-level users. This, in turn, increases the appeal of WordPress and helps it continue as the most popular content management platform currently on the market.

Finally, developers should understand that the WP_List_Table is considered an extension of the get_list_table() function, rather than a replacement of it for developer users. Though developers cannot modify that function, it is still an integral part to producing listed data and allowing it to be sorted. Therefore, WP_List_Table should be considered an extension of WordPress’ main functionality, not a substitute for the built-in column hooks.

This is best seen in the way a new WP_List_Table class is initiated within themes or plugin files that produce their own WordPress Dashboard control panel pages. The opening lines of any new sortable column actually begin with language that clearly identifies them as an extension of an existing class, rather than as an entirely new class or set of data itself. Here’s how that looks in a typical plugin or theme functions file:

class Custom_List_Table extends WP_List_Table {}
$  custom_sortable_table = new Custom_List_Table();

After this simple extension has been properly declared within the plugin or theme functions file, the new column can be created by using a pretty straightforward array. That array will name the column of data, and it will set important parameters that pertain to its functions. This is where things like sortability, AJAX implementations, and other advanced features come into play. These things are produced in a standard PHP array, which is what causes WP_List_Table to be identified more as a framework than as a pure WordPress administrative function.

Methods, Extended Properties, and Properties: How to Turn an Extension into a Sortable Table

The WP_List_Table framework is labeled as such because of how customizable it is after it has been initialized. These customizations are actually made by using a series of arguments within an array, and WordPress groups these things into methods, extended properties, and properties, that customize how data is displayed and which functions can be performed upon that data by administrators and other Dashboard users. For those who are new to the WP_List_Table function and framework, as almost every WordPress user is, here is a brief overview of how each method, extended method, and property, works to create an advanced column of data.

Properties: The Basics of Sorting and Presentation

The “properties” group of PHP array arguments is generally the most basic, with each line of code determining something essential about the data displayed. Indeed, this group of array arguments actually contains the $ items tag that displays the sortable data itself. Here are the properties available for use with WP_List_Table:

  • $ items – Typically used in the “prepare()” part of the array, this variable displays the data that will be listed and sorted in the sortable column or table at large.
  • $ _args – This variable is used for storing information about the table itself, and is typically not manipulated by the developer.
  • $ _pagination_args – This variable, typically left unmodified, handles pagination of data and the caching of paginated data in the Dashboard.
  • $ screen – Used to store information about the current screen.
  • $ _actions – Another cache-based variable, this one stores information about cached actions in the Dashboard.
  • $ _pagination – This cache-based variable stores information about paginated output and caches it. This is typically left unmodified by the developer.

Extended Properties: A More Advanced Way to Utilize WP_List_Table

There is just a single extended property available for use within the WP_List_Table framework, and it controls the header of each column within the table. That property is $ _column_headers. It contains three arrays: One array to name the column, another to define hidden column properties, and a third array to either allow or prohibit the sorting of the column’s data.

Methods: Extensive, Detailed Modifications of Sortable Column Data using WP_List_Table

Finally, developers will have access to a series of modifications that the WordPress documentation refers to as “methods.” These things are far more minor modifications, and they control much more intricate pieces of functionality within the sortable columns and the table itself. To that end, there are well over twenty individual modifications that are defined as “methods” within the WordPress documentation. While it would be impossible and impractical to define each one of these extensive modifications here, they can be easily defined by utilizing the WordPress Codex documentation when creating a sortable table or column.

The most important thing to know about “methods” as they pertain to sortable columns is that they’re almost all entirely optional. They’re used only where their specific brand of modification or manipulation is required. If they’re not needed, then they are simply left out of the sortable column’s array entirely, and the data is presented without being modified by any “method” at all. This means that most “methods” manipulations within the array are used only by the most advanced WordPress developers and only within the most elaborate WordPress plugins or theme control panel pages.

Revisiting the Use of Column Variables Within the WP_List_Table Array

One of the most complex things to do when putting WP_List_Table to good use within a new WordPress plugin or theme control panel page is to create the actual columns that will contain sortable data for the end user. This is because columns require a three-pronged approach to creation; each of these approaches must be contained within the array that actually creates the column and, without all three of them, the column will either fail to display or it will display with a number of errors and irregularities.

To create a column properly when using WP_List_Table in a new plugin or control panel page, be sure to follow the format below. This will ensure that any column created works as intended and displays data in a proper way:

$  this->_column_headers = array(
$  this->get_columns(), // This initializes the columns themselves and acts as the parent array.
array('Plugin Data Column 1', true),// This is the first column of data.
array('Plugin Data Column 2', true),// This is the second column of data.
array('Plugin Data Column 3', true),// This is the third column of data.
array(), // This is an intentionally hidden column.
$  this->get_sortable_columns(), // This array indicates that each of the three visible columns above should be sortable by the end user. );

The above array is the first way to begin creating a truly rich and advanced table full of sortable data, as it initializes the actual headings or “slugs” of the columns that will contain data pulled from the database. Below this opening array for columns, the WP_List_Table will be utilized to actually pull data in from the WordPress database using the “$ items” variable discussed above. Each data “item” will be placed into an appropriate corresponding column. Those columns can then be sorted with a mouse click and, unless indicated otherwise through one of the “methods” tags, they will be sorted using a basic AJAX (jQuery) function rather than employing a page refresh.

Take Time to Learn WP_List Table — You’ll Need It

Developers who are considering bringing the WP_List_Table function to their WordPress plugin or control panel page should set aside a significant amount of time to learn about and internalize all of the functions and features contained with in this function/framework provided for their use. While it’s certainly not difficult to deploy a table of data with sortable columns once each property, extended property, and method has been learned, it will require a significant investment of time to actually learn what each of these things does and where it’s applicable.

Developers should also set aside a great deal of time for testing their sortable columns that employ the WP_List_Table framework, especially because one wrong property or so-called “method” can cause entire columns to display errors or disappear from the WordPress Dashboard entirely. A thorough mastery of the WP_List_Table framework is a long-term investment in WordPress and its most advanced functions, and this will be rewarding for virtually every developer who endeavors to take it on.

You might also like…

Using jQuery to Validate the Standard WordPress Comment Form →
Using the Power of the .htaccess File to Improve WordPress SEO →
Tracking Social Media Sharing and Button-Clicks with JavaScript and WordPress →
For the Novice Developer: The Anatomy of a WordPress Theme →
Focusing on Usability with an Enhanced Pagination Design in WordPress Entries →



Speckyboy Design Magazine

Citing Sources: How to Bring Footnotes into a Typical WordPress Installation

Unfortunately, including footnotes with a post is something that WordPress itself actually does not support by default. That’s a little surprising, especially since the software has always been primarily focused on the creation and promotion of written content online. This pretty big oversight has led many websites to simply place source information for articles in parentheses immediately following the sentence that was pulled from that source. While this works great in research papers and other important documents, it’s a little awkward when placed into online content that is designed for more general perusal and sharing. Indeed, parenthetical content in any blog post is a little awkward even if it’s not a an attribution of article content.

To overcome this distinct shortcoming of the WordPress software, many users have turned to plugins that enable traditional footnotes within posts and pages. Many of these plugins even support the pagination of entries, ensuring that their attribution spans those pages and is easily accessible by readers from the start of an article right up until its last paragraph. WordPress benefits significantly from implementations of footnotes, and any website administrator looking to take their website to the top of Google search results as well as a list of reliable research sources should look into the installation of such a plugin.

The Best Implementations of Footnotes Use Shortcodes for Quick Inclusion

The developers behind the WordPress software have been promoting shortcodes as a highly usable way to customize page and post content for the better part of a decade. Indeed, this was one of the first major features to be included in WordPress at the request of the software’s independent development community. Simply put, shortcodes are small tags that enable advanced behind-the-scenes functions. While they can sometimes be used to place dynamic, plugin-generated content into an entry, their most common use is the formatting of textual elements within a typical post or page’s content. Shortcodes are typically used to make text bold or italicized, or even insert block quotes or images. Their usability exceeds that of XHTML tags, and they require no real knowledge of web programming languages when being used by amateur WordPress website owners.

For this reason, it’s easy to see why the best plugins to enable footnotes are those that include a simple shortcode to get the job done and produce a quick reference to a reliable outside source. One such plugin is known as Simple Footnotes. The name couldn’t get more straightforward, and the implementation of this plugin is roughly as simple as the name that describes it. Simple Footnotes uses a shortcode to surround a source link and make it easy to find for readers who are trying to find the source of any claim within a page’s posts or pages.

When a link is surrounded with the [ref] shortcode, a footnote is automatically generated next to the word that lies to the left of the referenced link. Those footnotes are automatically numbered based on the number of footnotes within an entry, beginning at 1 and increasing to virtually an unlimited number of reference links. After the footnote has been generated next to a word, it is turned into a link; that link leads readers to the bottom the page where an extensive list of footnotes is contained. This list includes every cited source, even if there are multiple post pages. Additionally, every footnote links directly to its own area of the post footer, making it easy to find the correct source.

On multi-page WordPress posts, website administrators can choose to display the post footer on every page, or only on the last page of the post’s content. This flexibility is important, as the WordPress community seems to prefer both approaches based on personal taste and their experience with footnotes in general. While the traditional approach is to include footnotes on every page of paginated content, and that’s the default option here, the “last page only” implementation is equally well done and highly usable by website readers.

The Simple Footnotes plugin does bill itself as simple and that will be noticed by most administrator users within the WordPress Dashboard. The plugin actually does have its own series of settings and customizations, but it neglects to install its own Dashboard control panel page upon activation. Instead, any options pertaining to footnotes within WordPress are placed on the Reading page of the Dashboard, which is already filled in with a number of standard WordPress settings and preferences. All settings for footnotes used on the website are placed into a group of options at the bottom of the page, below any WordPress content, eliminating useless Dashboard pages and making good use of existing WordPress Dashboard semantics.

The Footnote footer area is automatically appended whenever there are footnotes, and it is placed on both the homepage and any standalone pages that are produced for pages and posts. Its content is given a pretty basic style by the built-in stylesheet paired with the plugin during installation. This can be customized by placing a few classes into the current theme’s stylesheet and overwriting any information included into the site’s theme by the plugin. Generally, this means customizing the size and color of the footnotes, as well as customizing the size and formatting of the Footnotes header. The actual Footnotes text can be customized either within the Dashboard control panel area, or by customizing the plugin’s PHP code itself.

Taking a Different Approach: Invoking jQuery When Creating Footnotes

While the Simple Footnotes plugin is probably the most popular way to enable the footnotes functionality within WordPress, it is certainly not the only way. Indeed there are far more advanced ways to cite sources and lend an air of credibility to the website. One such method is to actually employ JavaScript in the form of jQuery when creating footnotes. Doing so eliminates the need for a so-called “footer” with every post; instead of using this area to display an extensive list of sources, those sources are displayed whenever a reader hovers their cursor over the elevated footnote number itself. The link is displayed in a pretty compact “popup” that only stays on the screen until the cursor has been moved away from the indicated footnote number.

While this feature might be enough to sell the plugin to some users, there’s another key change available with the jQuery Hover Footnotes plugin that will entice some more advanced WordPress website administrators and authors. It should be noted that the Simple Footnotes plugin has no way of customizing how footnotes are labeled and generated. They’re simply given numbers, from 1 and up, that link to footnotes in a “post footer” area. That’s not the case with jQuery Hover Footnotes. While footnotes can certainly be assigned numbers, they can also be assigned letters and entire words when including citations into a post. This is done by using a unique “double shortcode” approach to citation when composing a new entry in the WordPress Dashboard.

While the Simple Footnotes plugin requires surrounding a cited link with [ref] tags, the jQuery Hover Footnote requires a slightly different approach to create valid footnotes. It looks something like this:

{{15}}

In this case, the footnote will be included into the entry as a superscript “15.” And, while this will appear to be a pretty standard footnote, it can be endlessly customized for the convenience of the site’s readers. For example, the text included in the double brackets above could be changed to “source 1″ or “first source.” It could also be changed to an uppercase or lowercase letter, or even a longer phrase. The footnote’s actual superscript text is entirely up to the administrator or author who is composing the new post, and that kind of flexibility makes it really easy for readers to follow along with the sources cited in a typical post or page.

Of course, every footnote needs a source. In this area, the jQuery Hover Footnotes plugin is incredibly consistent and pretty predictable. A footnote’s source is designated by using a different set of double brackets, and the source that corresponds to the above superscript text would look like the following:

[[15]] http://link-to-source.com [[15]]

Because the source is displayed upon cursor hover, rather than in a list at the end of the file, the advanced shortcode containing the source above will never be seen. Indeed, it will disappear form the entry completely when the entry is read by end users on the production site. The source will only appear when a reader hovers over the “15″ superscript text alongside the sentence that is attributed to the referenced source. That’s a pretty great way to encourage the inclusion of footnotes, and it requires no advanced knowledge of superscript, XHTML code, or any other programming languages in order to get the job done.

Optionally, the jQuery Hover Footnotes plugin can be instructed to place footnotes at the bottom of the page, near the bottom of the post itself, if the end user desires. This can be done either in place of sources appearing upon cursor hover, or in addition to that standard functionality. Including footnotes in this way is probably a good idea for websites that are regularly served to browsers where JavaScript has been disabled. For those users, failure to include footnotes on the page in a traditional way will mean that they simply cannot see the post’s sources at all. That can be a significant hit to website credibility among users with more restrictive browsers, or those using screen reader applications for accessibility reasons.

Unlike the Simple Footnotes plugin, the jQuery Simple Footnotes plugin includes its own settings panel that is separate from the standard “Reading” settings. This control panel page is accessible beneath the “Settings” heading in the Dashboard sidebar, and can control things like the appearance of the jQuery popup, and the heading used near the bottom of a post if a physical listing of footnotes is desired or required by the website’s administrator.

A Great Way to Enhance a Website’s Good Reputation When Posting Content

Footnotes have greatly improved Wikipedia’s reputation as a source of reliable information, and they’ll likely have the same effect on any blog that takes the time to implement them alongside traditional weblog content. Blogs can be a really great source of aggregation and information, but they must remember to cite their sources and bring peace of mind to academic professionals and their students. With the right implementation of footnotes, this can be done in a few easy steps with some of the most simple and straightforward plugins currently available for WordPress.

When choosing between traditional plugins and those that use jQuery or other advanced programming languages, be sure to keep in mind that users with accessibility problems or restrictive web browsers might be negatively impacted by these more advanced implementations. Often, the key is combining leading-edge technology with traditional usability to create the best environment for a website’s authority and reputation.

You might also like…

Using jQuery to Validate the Standard WordPress Comment Form →
Using the Power of the .htaccess File to Improve WordPress SEO →
Tracking Social Media Sharing and Button-Clicks with JavaScript and WordPress →
For the Novice Developer: The Anatomy of a WordPress Theme →
Focusing on Usability with an Enhanced Pagination Design in WordPress Entries →



Speckyboy Design Magazine

Ten Key Ways to Secure a Typical WordPress Installation