Spring Sale! Save $10 on The Tao of WordPress and book bundles with Digging Into WP and .htaccess made easy – Coupon code: Spring2014Get books »
Web Design
Category Archive

Roll Your Own SEO Log

Introduction Search engine optimization (SEO) is the business of every serious webmaster. The process of optimizing a website for the search engines involves much more than properly constructed document headers and anchor tags. Websites are like trees: their roots are the growing collection of content presented through the branching universe of the World Wide Web. Or something. The point is that optimizing a website requires nurturing the site itself while also ensuring proper exposure to the requisite elements of the internet. The process of optimizing your first website may seem daunting. There are many aspects to consider and many websites […] Read more »

Greenwich Mean Time (GMT) Formats

There are currently three formats for expressing date/time in Greenwich Mean Time (GMT). All examples represent the date, "July 04, 2050". The time for all three formats is expressed as "hour:minutes:seconds". Here is the preferred, standard format1 for the Internet. This format is defined by RFC 1123 (updated from RFC 822): # RFC 1123 Standard GMT Format Mon, 04 Jul 2050 07:07:07 GMT The programming language C uses the ANSI standard format1 in its asctime(): # ANSI Standard GMT Format Mon Jul 4 07:07:07 2050 The RFC 850 format2 is now obsolete (RFC 1036) and should not be used: # […] Read more »

SEO 101: Keyword Development and Deployment

Keywords play a vital role in search engine optimization (SEO), and — if used properly — have the potential to increase the flow of traffic to your site. It is beneficial to maintain an active list of keywords for each of your websites. Each list should be a continually evolving set of important, relevant keywords. The idea here is to develop a consistent practice of actively seeking better keywords, thereby producing your very own customized keyword library. Read more »

Customize WordPress Quicktags

Note: This condensed tutorial assumes you are working with WordPress 2+ and are familiar with editing .php and/or .js files. WordPress quicktags1 provide shortcuts for adding certain bits of code to your posts. The default set of quicktags includes some handy shortcut buttons for tags such as <strong>, <a>, and <img>, as well as a few others. While the default set of quicktag buttons is occasionally useful, a quick bit of quicktag customization can easily transform your personal set of quicktag buttons into a deadly arsenal of time-saving code shortcuts. First, open the quicktags.js file, usually located in the wp-includes/js […] Read more »

Absolutely Centered Layout

Absolute Centering with CSS & (X)HTML Designing an absolutely centered layout involves centering a division both horizontally and vertically. When this is done, the centered division (or other element) is centered according to the browser window. To accomplish this, use this (X)HTML: <div id=”wrapper”> <div id=”center”> </div> </div> And employ this CSS (commented with explanations): Read more »

IE Scrollbar Colors

Changing the color of scrollbars for Internet Explorer may very well be the oldest trick in the book. In fact, this post exists mostly for the sake of prosperity, as we here at Perishable Press strive to eliminate our entire offline library of website design notes by transferring them to the World Wide Web. Although library conversion requires time, patience, and determination, changing the color of IE scrollbars is relatively simple. Simply associate these CSS rules to the (X)HTML documents desiring unique scrollbar colors: /* produces a stylish black scrollbar with light-grey highlights */ * html body {    scrollbar-face-color: #000; […] Read more »

Fun with Downlevel Conditional Comments

Ever since Internet Explorer 5 (IE5), Microsoft has included browser support for "downlevel conditional comments," a non-scripted method of browser detection. Downlevel conditional comments (DCC) are a useful tool for targeting directives to specific versions of Internet Explorer. Downlevel conditional comments consist of an opening statement and a closing statement. Taken together, the statements enclose markup, CSS, JavaScript, or any other element typically included within an (X)HTML document. The DCC may be placed anywhere within the document and executes its contents only for the version(s) of IE specified. This technique is useful for delivering IE-specific stylesheets exclusively to specific versions […] Read more »

Nifty CSS Link Hover Effect

This nifty CSS link hover effect magically reveals a hidden span of text after specified links. The trick employs an anonymous span nested within an anchor tag. CSS then acts upon the markup with a set of rules that basically says hide the nested span until the link is hovered. Here is an example. Here is the CSS code and XHTML markup that makes it happen: a:link, a:visited { text-decoration: underline; color: #990000; } a:hover, a:active { text-decoration: none; color: #990000; } li a:link span, li a:visited span { display: none; } li a:hover span, li a:active span { display: inline; } <ul> […] Read more »

XHTML Document Header Resource

This XHTML header tags resource is a work in progress, perpetually expanding and evolving as new information is obtained, explored, and integrated. Hopefully, you will find it useful in some way. Even better, perhaps you will share any complimentary or critical information concerning the contents of this article. Table of Contents Important Information XML Declaration The !DOCTYPE The html tag The head tag The title tag base & item http-equiv link tags meta tags Geo meta tags Dublin Core tags References Read more »

Auto Clear and Restore Form Elements

Using a small bit of JavaScript, it is possible to auto-clear and restore form elements when users bring focus to them. Simply copy, paste, and modify the following code example to achieve an effect similar to this: Here is the HTML/JavaScript for your website: <input value=”Click here and this will disappear..” onfocus=”if(this.value == ‘Click here and this will disappear..’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘Click here and this will disappear..’;}” type=”text” size=”77″ /> Update [January 2nd, 2007] » Here is another auto-clear JavaScript trick that cleans up the (X)HTML code but does not auto-restore the element. […] Read more »

Optimize Convoluted Code via JavaScript

Search engines loathe crawling through convoluted lines of code. Oceans of complex JavaScript scare away the priceless indexing and archiving efforts of most major search engines, which will generally abort a crawl upon encountering such mess. The good news is that search engines actually do not deploy JavaScript, so it is possible to use JavaScript to hide those miles of messy code by using the fundamental document.write function. Place this function in an external JavaScript file, “navmenu.js”: function navMenu() { document.open(); document.write(“<div>Convoluted code goes here.</div>”); document.close(); } Link to the external JavaScript file by placing this code in the document […] Read more »

HTML Frames Notes Plus

If you think that nobody uses frames anymore, think again. I personally know of one person who threw down some tuf HTML frame action for a personal site. So, in the interest of prosperity, we are hereby establishing this post as our official dumping ground for all HTML frame-related garbage. Break your pages out of someone else’s frames We begin our journey with a totally sick JavaScript method for breaking pages out of the illegitimate frames of some ineffectually pathetic bastard: <script type=”text/javascript”> <!–//–><![CDATA[//><!-- if (window.self ! = window.top) window.top.location = window.self.location; //--><!]]> </script> Likewise, here is an equally effective […] Read more »

Display the Total Number of WordPress Posts, Comments, and Categories

Would you like to display the total number of posts, comments, and categories for your WordPress-powered website? Here is the code that can make it happen 1! Update: The count posts part of this method should only be used for WordPress versions less than 2.5. For WordPress versions 2.5 and better, there is a built-in function for displaying the total number of posts. See The WordPress Codex for more information. <?php $numposts = $wpdb->get_var(“SELECT COUNT(*) FROM $wpdb->posts WHERE post_status = ‘publish’”); if (0 < $numposts) $numposts = number_format($numposts); $numcomms = $wpdb->get_var(“SELECT COUNT(*) FROM $wpdb->comments WHERE comment_approved = ’1′”); if (0 […] Read more »

Accessibility Notes Plus

Just a few useful accessibility notes.. Add accesskey attributes to important list items, content areas, and any other key areas of the document. Use alphanumeric characters as accesskey values, as in this example: <ul> <li><a id=”home” accesskey=”h” href=”http://domain.com/home.html”><span class=”accesskey”>h</span>home</a></li> <li><a id=”menu” accesskey=”m” href=”http://domain.com/menu.html”><span class=”accesskey”>m</span>menu</a></li> <li><a id=”search” accesskey=”s” href=”http://domain.com/search.html”><span class=”accesskey”>s</span>search</a></li> </ul> When an accesskey attribute is present within a link tag, pressing alt+letter on the keyboard is equivalent to double-clicking that link. Generally speaking, the presence of an accesskey attribute within an element brings focus to that element. Thus, radio and check boxes are toggled, links are clicked, and form elements […] Read more »

Spamless Email Address via JavaScript

Let’s face it, spam sucks. Give spammers the figurative finger by using this nifty bit of JavaScript to hide your email address from the harvesters. Here is an easy “copy-&-paste” snippet for including a spam-proof email address in your web pages. Although there are a million ways of doing this, I am posting this for the record (and because I just can’t stand deleting usable code). This technique uses JavaScript, and therefore is not 100% ideal for all users. My advice would be to include a <noscript> element that contains an image of your email address. That way, users without […] Read more »

Latest Tweets Book update! The Tao of WordPress now current with WP version 3.9. Save $10 with code: "Spring2014" wp-tao.com