Fall Sale! Save 25% on WordPress books with coupon code: FALL2017 Shop Books »

How to use the HTML <base> tag

When every byte counts, you can use the HTML <base /> tag to specify a default href and target attribute for all relative URLs on the page. For smaller sites with a flat directory structure, this isn’t going to help much; but for sites with deeply nested directories, the <base /> tag can potentially shave a lot of extra weight from your web pages, and also help keep URLs cleaner and shorter. So if you’re micro-optimizing for performance, the <base /> tag can help you out. Read more »

How to Redirect URLs

Want to redirect a URL from one location to another? This simple guide shows you how to do it with Apache/.htaccess, PHP, JavaScript, HTML, and more. Each redirect technique is briefly explained and includes ready-to-go, copy-&-paste examples. Just grab the code you need and use it in good health. May the redirects be with you! Read more »

Ajax RSS Feeds with More Sidebar

After implementing Chris Coyier’s More Sidebar technique here at Perishable Press, I needed a good source of “filler” content for the “more” blocks. After experimenting with multiple loops and template tags, the idea of sliding in RSS feeds seemed like a better solution. Replacing some empty space with great content is a win-win for everyone. For example, I display a few of my recent tweets in the sidebar to help fill a lil’ space. It’s a great way to share stuff, and it’s pretty easy to do. Read more »

PHP Tip: Encode & Decode Data URLs

Converting small images to data-URLs is a great way to eliminate HTTP requests and decrease loading time for your pages. Using PHP‘s base64_encode() and base64_decode() functions, we have the power to convert images to data-URLs and vice-versa. Read more »

Ajax Slide & Fade Content with jQuery

I recently redesigned my business site, Monzilla Media. The new design features a clean and simple single-page, fixed-sidebar layout. Visitors use the various links in the fixed sidebar to quickly and automatically scroll through to any section. In the Portfolio section, each item contains a “Details” link that loads more content into the fixed sidebar. As the site is mostly static, I wanted this bit of functionality to really shine, and after much testing and tweaking, ended up with a cross-browser slide & fade technique for loading content via Ajax and jQuery. Note this technique has been updated to work […] Read more »

Display Latest Tweet with Show/Hide Cookies

Update (2013/08/03): This simple technique no longer works thanks to the 2013 Twitter API, which makes it much more complicated to grab your latest tweet. For WordPress, check out the Latest Tweets Widget. My previous theme displays my latest tweet at the top of every page. It turned out to be an excellent technique for getting more followers – visitors see the tweet, click the link, and possibly follow me on Twitter. There is even a cookie-powered “Hide” link for uninterested visitors to hide the tweet for awhile. I received quite a few requests for a tutorial on the technique, […] Read more »

HTML5 Table Template

A good designer knows that tables should not be used for layout, but rather for displaying columns and rows of data. HTML enables the creation of well-structured, well-formatted tables, but they’re used infrequently enough to make remembering all of the different elements and attributes rather time-consuming and tedious. So to make things easier, here is a clean HTML5 template to speed-up development for your next project: Update, June 9th: Here is an absolute basic vanilla template for any markup language. Update, June 9th: Here is a better template for HTML5. For HTML 4.01 or anything XHTML-flavor, use the following template: […] Read more »

Perfect Pre Tags

If you operate a website that features lots of code examples, you know how important it is to spend some quality time styling the <pre></pre> element. When left unstyled, wild <pre></pre> tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the <pre></pre> tag quite differently, varying greatly in their default handling of font-sizing, scrollbar-rendering, and word-wrapping. Indeed, getting your preformatted code to look consistent, usable, and stylish across browsers is no easy task, but it certainly can be done. In this article, I’ll show you everything you need to create perfect <pre></pre> tags. First thangs […] Read more »

Pimp Your 404: Presentation and Functionality

I have been wanting to write about 404 error pages for quite awhile now. They have always been very important to me, with customized error pages playing a integral part of every well-rounded web-design strategy. Rather than try to re-invent the wheel with this, I think I will just go through and discuss some thoughts about 404 error pages, share some useful code snippets, and highlight some suggested resources along the way. In a sense, this post is nothing more than a giant “brain-dump” of all things 404 for future reference. Hopefully you will find it useful in pimping your […] Read more »

IDs are anchors, too.

While browsing the internet these days, I see a lot of this: <body> … <a name=”top”></a> … <a href=”#top”>- Back to Top -</a> … </body> There’s an easier, better and prettier way. CSS Signatures are all the rage these days. If you’re not familiar with a CSS Signature, it’s basically nothing more than an ID on your body tag, like this: <body id=”www-domain-tld”></body> The fundamental purpose of the CSS Signature is to allow a user to specify style adjustments to your site in their own user style sheets. Whether or not users are actually capitalizing on this is a discussion […] Read more »

Tell Google to Not Index Certain Parts of Your Page

There are several ways to instruct Google to stay away from various pages in your site: Robots.txt directives Nofollow attributes on links Meta noindex/nofollow directives X-Robots noindex/nofollow directives ..and so on. These directives all function in different ways, but they all serve the same basic purpose: control how Google crawls the various pages on your site. For example, you can use meta noindex to instruct Google not to index your sitemap, RSS feed, or any other page you wish. This level of control over which pages are crawled and indexed is helpful, but what if you need to control how […] Read more »

Sexy HTML List Tricks

Behold the ubiquitous list elements, <ul></ul> and <ol></ol>! These two sexy elements help millions of websites display lists of information in clean, semantic fashion. Without them, we’d be crawling around like filthy cavemen, eating dirt and howling at the moon. But these list elements aren’t just sexy, they are also extremely flexible, enabling us humble designers to create robust list configurations that are semantically versatile and highly customizable. We all know how to throw down a basic list: Read more »

The 5-Minute CSS Mobile Makeover

More people are surfing the Web via mobile device than ever before. It’s just so convenient to have that mobile access to anything you need. Sadly, most websites have not yet considered their mobile visitors, who probably move on to the next site before trying to make sense of a jumbled mess. Those of you who surf the Mobile Web know exactly what I’m talking about here: sites that “get it” are a joy to visit, but those that don’t are a total pain. What’s to get? Well, for one, if you do nothing else for your mobile visitors, take […] Read more »

The Power of HTML 5 and CSS 3

Web designers can do some pretty cool stuff with HTML 4 and CSS 2.1. We can structure our documents logically and create information-rich sites without relying on archaic, table-based layouts. We can style our web pages with beauty and detail without resorting to inline <font></font> and <br /> tags. Indeed, our current design methods have taken us far beyond the hellish era of browser wars, proprietary protocols, and those hideous flashing, scrolling, and blinking web pages. As far as we’ve come using HTML 4 and CSS 2.1, however, we can do better. We can refine the structure of our documents and increase their semantic […] Read more »

WordPress Tip: Valid, SEO-Friendly Email Permalink Buttons

In addition to your choice collection of “Share This” links, you may also want to provide visitors with a link that enables them to quickly and easily send the URL permalink of any post to their friends via email. This is a great way to increase your readership and further your influence. Just copy & paste the following code into the desired location in your page template: <a href=”mailto:?subject=Fresh%20Linkage%20@%20Perishable%20Press&amp;body=Check%20out%20<?php the_permalink(); ?>%20from%20Perishable%20Press” title=”Send a link to this post via email” rel=”nofollow”>Share this post via email</a> Within the code, you will need to edit both instances of the string “Perishable%20Press” to reflect […] Read more »

Better WordPress Archives via Dynamic Triple Column Layout

Here at Perishable Press, the number of posts listed in my archives is rapidly approaching the 700 mark. While this is good news in general, displaying such a large number of posts in an effective, user-friendly fashion continues to prove challenging. Unfortunately, my current strategy of simply dumping all posts into an unordered list just isn’t working. I think it’s fair to say that archive lists containing more than like 50 or 100 post titles are effectively useless and nothing more than a usability nightmare. With growing numbers of blogs building up massive collections of posts, finding better ways to […] Read more »

Latest Tweets Fall Sale! Save 25% on any book: Tao of WP, DigWP, WordPress Themes In Depth, & .htaccess made easy. Code: FALL2017… twitter.com/i/web/status/90414…