Posted on February 8, 2011 in Perishable, Structure by Jeff Starr
After many weeks of hellish labor, Perishable Press is redesigned with some significant changes to the main structure of the site. Before the 2011 renovation, the site operated from a subdirectory WordPress installation in the following location:
Posted on June 8, 2010 in Structure by Jeff Starr
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:
<table dir="ltr" width="500" border="1"
summary="purpose/structure for speech output">
<caption>Here we assign header information to cells
by setting the scope attribute.
</caption>
<colgroup width="50%" />
<colgroup id="colgroup" class="colgroup" align="center"
valign="middle" title="title" width="1*"
span="2" style="background:#ddd;" />
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Side</th>
<th scope="col">Role</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Darth Vader</td>
<td>Dark</td>
<td>Sith</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Obi Wan Kenobi</td>
<td>Light</td>
<td>Jedi</td>
</tr>
<tr>
<td>Greedo</td>
<td>South</td>
<td>Scumbag</td>
</tr>
</tbody>
</table>Ahh, gives me goose bumps just looking at it. You can use this code with any markup language, whether HTML5, HTML 4.1, or any flavor of XHTML. Here is how this basic template looks in the current web page 1 (using different data and with styles removed):
Posted on November 9, 2009 in Presentation, Structure by Jeff Starr
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> element. When left unstyled, wild <pre> tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the <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> tags.
Before getting into it, let’s take a moment to ensure we’re all on the same page. The (X)HTML <pre> element is used to display preformatted text, code, or just about anything else. pre tags are ideal for multiple lines of code or text that need to retain character spacing, display unformatted characters, keep inherent line breaks, and so on.
Posted on September 14, 2009 in Structure by Bill Brown
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">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 for another day, but doing this has other benefits like having an extra id to use when dealing with CSS specificity.
Additionally, we can use this to capitalize on a little known fact about HTML and anchors: you can use anchors to jump to any element on your page with an ID attribute.
Posted on August 16, 2009 in Presentation, Structure by Jeff Starr
Behold the ubiquitous list elements, <ul> and <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:
Posted on July 19, 2009 in Presentation, Structure by Jeff Starr
![[ Electrical Surge ]](http://perishablepress.com/press/wp-content/images/2009/misc-chunks/html-css-power.jpg)
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> 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 precision. We can sharpen the presentation of our stylesheets and advance their stylistic flexibility. As we continue to push the boundaries of existing languages, HTML 5 and CSS 3 are quickly gaining popularity, revealing their collective power with some exciting new design possibilities.
Posted on November 30, 2008 in Structure by Jeff Starr
When building web pages, it is often necessary to add links that require parameterized query strings. For example, when adding links to the various validation services, you may find yourself linking to an accessibility checker, such as the freely available Cynthia service:
Posted on July 30, 2008 in Presentation, Structure by Jeff Starr
![[ ~{*}~ ]](http://perishablepress.com/press/wp-content/images/2008/misc-chunks/title-separators.gif)
While writing my previous article on creating the perfect WordPress title tags, I deliberately avoided discussing the use of separators in titles. I feel that the topic is worthy of its own article, enabling a more thorough exploration of the details. Title separators are the symbols, punctuation, and other characters used to distinguish between various parts of the page title. For example, a title may include the blog name, post title and blog description, with each element separated by a hyphen. Any Google search will reveal that some of the most commonly used title separators include the hyphen, the dash, and angled quotes. Many others are used as well, and we will explore some of them in this article.
Posted on June 11, 2008 in Structure by Jeff Starr
NOTE: This entire article amounts to nothing more than an in-depth learning experience. After writing the article, I realized (painfully) that either format for the second iteration of the downlevel-revealed comment for XHTML is perfectly fine and displays no ill effects or unwanted characters in any browser. Thus, this article is essentially useless, but I am posting it anyway because I just hate deleting several hours of hard work..
As more and more people discover the flexibility, specificity, and all-around usefulness of Microsoft’s proprietary downlevel conditional comments, it behooves us to reiterate the importance of utilizing proper syntax. Specifically, for downlevel-revealed, or negative, conditional comments, the commented content will remain visible unless the associated if condition proves false. For example, if we were using XHTML and wanted to hide a specific CSS file from Internet Explorer 6, we could employ the following conditional comment to do the job:
Posted on March 19, 2008 in Presentation, Structure by Jeff Starr
![[ ~{*}~ ]](http://perishablepress.com/press/wp-content/images/2008/jump-menu/access-deco.gif)
Recently, a reader named Don asked about this theme’s accessibility (accesskey) jump menu located at the top of each page. Several people have commented that they like the way the jump menu “lights up” upon gaining focus. Whenever a user hovers their cursor over the region at the top of the page, all links in the jump menu change to a more visible color. Then, as the cursor moves over the various menu items, each jump link is further highlighted with an even brighter color and an underline. This progressive focusing is best seen in browsers that support the CSS :hover pseudo-class (e.g., Firefox, Opera, etc.), however the menu remains useful even in CSS-challenged browsers (e.g., Internet Explorer). In this article, I explain how the Perishable Press jump menu is built using Web standards via CSS and (X)HTML, and then provide the specific code required to emulate the jump menu as it appears here at Perishable Press.
Posted on March 16, 2008 in Presentation, Structure by Jeff Starr
Not too long ago, I played with the idea of releasing article content under a Creative Commons (Attribution-NonCommercial-ShareAlike 2.0) License. At the time, I wanted to host my own copies of the two associated CC license pages. During the process of uploading the pages to my own server, several minor adjustments (regarding image paths, etc.) needed to be made to the source code. After tweaking a few things in the XHTML code, I began snooping around in the pages’ CSS files. Eventually, I found myself rewriting the entire CSS and XHTML files for both documents. Although this sort of activity is not unusual for me to do, I admit that it is borderline obsessive/compulsive and perhaps even a bit paranoid. Nonetheless, the reworked CSS and XHTML documents are cleaner, less redundant, and better optimized (in my humble opinion) than the originals. Further, the remixed pages are fine-tuned with a hyper-critical design aesthetic. To my eye, they present much tighter than the original versions. But hey, that’s what the spirit of Creative Commons is all about, right? Sharing, remixing, and improving content? In any case, redesigning these pages was good fun and good practice, even though I have since decided against licensing any of my content via Creative Commons 1. So, rather than simply deleting these brief redesign exercises, I have decided to post them online and share them with anyone who might be interested in such esoteric dabblings. You never know who might find them useful! ;)
Posted on February 17, 2008 in Structure by Jeff Starr
Just a quick tip on how to create error-free links to feed validation services for feeds that are redirected through Feedburner. For example, let’s say our site’s main feed is originally located at:
http://domain.tld/feed/
If we wanted to provide our visitors with a link that would enable them to automatically validate our feed using a free service such as feedvalidator.org 1, we would create the link as follows:
Posted on January 27, 2008 in Structure by Jeff Starr
As some of you (e.g., Louis) may have noticed during the recent site redesign, I decided to switch the default doctype from XHTML 1.0 Strict to XHTML 1.1. Just in case you were wondering, XHTML 1.1 is different than XHTML 1.0 in three important ways 1:
lang attribute has been removed in favor of the xml:lang attributea and map elements, the name attribute has been removed in favor of the id attributeruby” collection of elements has been addedBeyond these three differences, XHTML 1.1 is identical to XHTML 1.0. Personally, I chose to markup my current design with XHTML 1.1 because of its advancement of the web-standards paradigm: complete separation of structure, behavior, and presentation.
Posted on November 12, 2007 in Presentation, Structure by Jeff Starr
By now, everyone is familiar with the Yahoo Developer Network’s 14 “best-practices” for speeding up your website. Certainly, many (if not all) of these performance optimization tips are ideal for high-traffic sites such as Yahoo or Google, but not all of them are recommended for smaller sites such as Perishable Press. Nonetheless, throughout the current site renovation project, I have attempted to implement as many of these practices as possible. At the time of this writing, I somehow have managed to score an average 77% (whoopee!) via the YSlow extension for Firebug.
Of the handful of these tips that I am able (or willing) to follow, number 6 — move scripts to the bottom — is definitely one of the easiest. The reason for doing this is at least twofold:
[…] it’s better to move scripts from the top to as low in the page as possible. One reason is to enable progressive rendering, but another is to achieve greater download parallelization.
— Yahoo! Developer Network
Many people mistakenly assume that the <script> element (and associated contents) must be located squarely in the document <head>, however, this simply isn’t true. As outlined in the official HTML 4.01 Document Type Definition and also in the official XHTML 1.1 Document Type Definition, the <script> element is allowed:
Posted on September 25, 2007 in Presentation, Structure by Jeff Starr
Recently, a reader named Max encountered some scrolling issues while implementing our absolutely centered layout technique. Of course, by “absolutely centered” we are referring to content that remains positioned dead-center regardless of how the browser is resized. After noticing the scrollbar deficiency, Max kindly dropped a comment to explain the issue:
…the div solution works well, only one problem maybe somebody can help: if you make the browser window smaller then the div is -> the scrollbar doenst fit right und you cant scroll over the whole area…
Apparently, because the horizontal/vertical centering method outlined in our original article employs absolute positioning with negative margins, resizing the browser to be smaller than the centered division results in cropped content that is inaccessible via scrollbar. Although this is the first I have heard about this issue, I went ahead and examined the alternate centering technique via the link generously shared by Max.
Posted on August 22, 2007 in Structure by Jeff Starr
In this post I have assembled a concise collection of conforming, bare-bones document templates for the following doctypes:
Posted on August 21, 2007 in Structure by Jeff Starr
![[ Image: Tyrannosaurus Skull ]](http://perishablepress.com/press/wp-content/images/2007/misc-chunks/html-dinosaur.jpg)
HTML 5, also known as Web Applications 1.0, provides new markup elements that will change the way you design your web pages. The new elements replace commonly used divisions in web documents, facilitating an even greater degree of separation between structure (HTML) and presentation (CSS). Indeed, in many documents, the new elements will structure the document while providing enough hooks to render obsolete previously required divisions, classes, and identifiers. Let’s take a look..
Structural Elements
The new structural elements in HTML 5 consist of the following:
headersectionarticlenavfooter