Category Archive for “Structure”

Here is a list of all articles categorized as “Structure”. If you enjoy the high-quality content that I provide here at Perishable Press, you may want to subscribe to our main content feed to stay current.

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 ...

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 element. When left unstyled, wild tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the 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 tags. First thangs first Before getting into it, let’s take a moment to ensure we’re all ...

IDs are anchors, too.

While browsing the internet these days, I see a lot of this: ... ... - Back to Top - ... 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: 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 ...

Sexy HTML List Tricks

Behold the ubiquitous list elements, and ! 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: Pancakes Bananas Monkeys Or even throw down some hardcore nested-list action: Pancakes Swedish Blueberry Chocolate Bananas Manzano Plantain Cavendish Monkeys Spider Howler Squirrel This nested list markup will result in a unordered bulleted parent list with numerically ordered nested lists, resulting in something like this in a browser: Pancakes Swedish Blueberry Chocolate Bananas Manzano Plantain Cavendish Monkeys Spider Howler Squirrel Of course, we ...

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 and 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 ...

How to Write Valid URL Query String Parameters

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: WCAG Accessibility Check Another example is seen when linking your feed to a feed validation service: RSS Feed Validation And one final example showing a more complex query string: Bookmark at Delicious As is, however, these links won’t validate due to a number of issues. Let’s fix ‘em up with a few quick-and-easy changes. Replace ampersands with & One of the reasons these links aren’t ...

Choosing the Best Title Separators

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 ...

Quick Reminder About Downlevel-Revealed Conditional Comments..

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 ...

CSS/(X)HTML Tutorial: Hovering Accessibility Jump Menu

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 ...

XHMTL/CSS Remix: Creative Commons License

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 ...

Error-Free Feed-Validation Links for Feedburner-Redirected Feeds

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: Validate our Feed ..which would do the job nicely. However, if we are redirecting our feed through Feedburner, the previous link will return an error, as the feed URL now registers as the following: http://feeds.feedburner.com/myfeedname ..depending on the Feedburner name ...

What is the Difference Between XHTML 1.0 Strict and XHTML 1.1?

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: On every element, the lang attribute has been removed in favor of the xml:lang attribute On the a and map elements, the name attribute has been removed in favor of the id attribute The “ruby” collection of elements has been ...

Prevent JavaScript Elements from Breaking Page Layout when Following Yahoo Performance Tip #6: Place Scripts at the Bottom

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!) ...

Absolute Horizontal and Vertical Centering via CSS

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 ...

Bare-Bones HTML/XHTML Document Templates

In this post I have assembled a concise collection of conforming, bare-bones document templates for the following doctypes: Document Templates XHTML 1.0 XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset XHTML Basic 1.0 XHTML 1.1 XHTML 1.1 XHTML Basic 1.1 HTML 4.01 HTML 4.01 Strict HTML 4.01 Transitional HTML 4.01 Frameset Doctype Declarations In addition to the complete document templates listed above, this post also ...

Rethinking Structural Design with New Elements in HTML 5

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.. New Structural and Semantic Elements in HTML 5 Structural Elements The new structural elements in ...

The Friendliest Link Targets in the Neighborhood

The target attribute for anchor elements () specifies the location in which the referenced document should load. For example, to open a link in a new window, we would use a target value of _blank. Although this is a commonly employed technique, the target attribute has been deprecated by the W3C and is not valid (X)HTML. Regardless, the target element remains a useful tool for practicing designers and developers. Here, we present the attribute values for the target element: Attribute values for the ...