Responsive Web Design & WordPress

On 19 January, I spoke at the WordPress London meetup. The talk was a primer on Responsive Web Design, a topic I have a strong interest in (some might say an evangelical curiosity). The presentation briefly explains the basic philosophy of responsive design, demonstrates how Automattic has applied it to WordPress and offers suggestions to WordPress bloggers and developers ways of making their site responsive.

Video of the event is found on the website of Skills Matter, the organisation gracious enough to host the event.

The slide deck as shown, followed by an ordered list of my specific notes:

Continue reading

Custom WordPress RSS feeds and Feedburner

A great deal of web content is accessible through syndication feeds. RSS, the de facto standard, is often the singular path to publishings of an author’s blog. Despite rumblings of its demise, RSS remains an essential method of news consumption. As such, a feed should strive to provide the clearest, cleanest presentation of content possible outside of the feed’s source website.

I recently introduced a second stream of content to this site, Snapshots of web content that I find inspiring or informative. The format for presentation of this stream is still under debate, but the current solution mixes the posts into my normal blog stream. When it came to delivering this content to an RSS client, I wanted to ensure that readers weren’t forced to click through to this site first to view the linked content. Additionally, the posts categorized as snapshots should be differentiated in the feed.

Subscriptions for this site, like many others, are tracked through Feedburner. My goal was to create a custom RSS feed to accommodate a different type of content post which would overwrite the default WordPress feed, then track the custom feed with Feedburner.

This requires three steps.

WordPress

Automation

With the release of version 3.0, WordPress has supported a small but very helpful function for handling the output of RSS feeds. Previously, all links had to be added manually in the header section of the theme templates. The new function automates the entire process; on an index page it will create a feed for all posts and a feed for all comments; on an individual post, the two global feeds with the addition of a comments feed relevant to the current post. To enable automation, first remove all existing RSS links from the theme header. The function will not work otherwise. Then, add the following to functions.php:

add_theme_support( 'automatic-feed-links' );

If your theme requires backwards compatibility with WordPress before 3.0, have a look at Jeremy Clark‘s solution.

Building a custom feed

The WordPress documentation has a list of recommended methods for creating custom RSS feeds. I chose to build my feed as a custom theme template, based on notes from Zack Katz.

Set a function to load your custom PHP template.
The name of my custom feed template is, quite originally, feed.php and located at the root of my active theme. All mentions of honeycomb are unique, required values. Change the name to something appropriate to your site. Honeycomb is in reference to the name of my theme.

function honeycomb_rss() {
	load_template( TEMPLATEPATH . '/feed.php');
}
add_action('do_feed_honeycomb', 'honeycomb_rss', 10, 1);

Katz’s tutorial also provides a function to manage custom permalinks so that links to /?feed=rss will work as well as /feed/rss/ for custom feeds.

function custom_feed_rewrite($wp_rewrite) {
	$feed_rules = array(
		'feed/(.+)' => 'index.php?feed=' . $wp_rewrite->preg_index(1),
		'(.+).xml' => 'index.php?feed='. $wp_rewrite->preg_index(1)
		);
	$wp_rewrite->rules = $feed_rules + $wp_rewrite->rules;
}
add_filter('generate_rewrite_rules', 'custom_feed_rewrite');

Resaving your existing permalink settings in WordPress->Settings->Permalinks will activate the new rules.

Create a custom feed template
In the function above, the custom feed template is located at /feed.php (eg wp-content/themes/honeycomb/feed.php). Create a new file with your chose template name at this location, and drop the entirety of /wp-includes/feed-rss2.php inside.

This is your custom feed, and will reflect any changes made to the custom template.

The default WordPress posts feed is located at http://www.withoutnations.com/feed/ (alternatively, http://www.withoutnations.com/?feed=rss2). The custom feed noted above is accessible at http://www.withoutnations.com/feed/honeycomb/ and http://www.withoutnations.com/?feed=honeycomb.

Feedburner

The next step is to update Feedburner with the custom address. Select “Edit Feed Details…” from any of the analytics tabs at Feedburner to edit the feed configuration. As we are replacing the default WordPress feed with our custom file, the source that Feedburner looks to for analysis must be changed. In the settings pane, I replaced Original feed http://www.withoutnations.com/feed/ with http://www.withoutnations.com/feed/honeycomb/ (the path to the custom feed).

Apache

With the custom feed defined and the Feedburner source set, the last remaining task is to tell WordPress to forward your main feed path to Feedburner, where it can be properly tracked and managed. There are a number of WordPress plugins that can help with this: FD Feedburner and Primary Feedburner are actively maintained by their developers. Google still provides an older version of Feedsmith as well.

The basic function of all of the plugins is to set an Apache rewrite rule that redirects your feed URL to Feedburner. It’s a convenient service if access to your site’s server environment is restricted or you are uncomfortable editing server-side files. However, if this isn’t a worry, I suggest setting the rewrite rule yourself in .htaccess. It’s straightforward, dependable and does not rely on third-party plugins which are prone to compatibility issues and bugs.

In a not-so-recent article, Jeff Starr at Perishable Press provides a few simple and efficient .htacess rules to achieve WordPress to Feedburner redirects. His suggestions include both post and comment feed redirects. Have a look through his article if this is something your site requires; I was only interested in creating one single custom post feed and setting it to redirect and hence left WordPress to manage the comment feeds.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} !^.*(FeedBurner|FeedValidator) [NC] 
RewriteRule ^feed/$ http://feeds.feedburner.com/withoutnations [L,NC,R=302]
</IfModule>

Requests for /feed/ will redirect to Feedburner at http://feeds.feedburner.com/withoutnations. This rule reroutes the main feed but leaves /feed/honeycomb accessible to Feedburner.

If your site is using custom permalinks, it is essential to place the Feedburner rewrite rule above the WordPress permalink rewrites, otherwise WordPress ignores the redirect. Typically, permalink rules will look something like:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

The simplest way to test if the feed is working is to check the feed URL in a browser: /feed/ should immediately redirect to the Feedburner account address (eg http://feeds.feedburner.com/withoutnations).

Input buttons and CSS3

CSS3 brings a wealth of new properties to the web and to modern browsers. There is a greatly reduced dependency on images in creating rich, stylized content. I’ve used a few of these new properties to render the submit buttons throughout this site. It’s a basic solution to a common request that was previously only possible with imagery.

Continue reading

Styling Input and Anchor tags as action buttons with cross-platform support

Attempting to style inline objects consistently across multiple browsers and platforms is difficult enough with unpredictable standards support — trying to maintain that exact style across form input elements as well has been near fantasy until recently. Thankfully, with the combined knowledge of the web development community and rapid adoption of reworked web standards by modern browsers, solutions are available.

For a recent project I had the task of applying one consistent button style to form inputs, anchor tags, and a handful of paragraph tags — with varying widths and background colors. Taking a cue from the brilliant work already posted on the Filament Group (which is derivative of the ALA sliding doors method and the work of Kevin Hale at Particletree), I developed a class that is applicable across a variety of elements. The examples given were generally applied to the button element; my project called for standard inputs with type ‘submit’. The class scope is left open to allow for easier application to non-form elements. A few instances:

<a href="#" class="input-btn-link"><span>Add to Favorites</span></a>
<a href="#" class="input-btn-link small"><span>Add to Favorites</span></a>
<input class="input-btn" type="submit" value="Add to Favorites" />
<input class="input-btn small" type="submit" value="Add to Favorites" />
<input class="input-btn medium" type="submit" value="Add to Favorites" />
<input class="input-btn large" type="submit" value="Add to Favorites" />
<p class="input-btn">Add to Favorites/p>
</p>

Continue reading

IE6 Considered

As my earlier post made clear, I have dropped support for Internet Explorer 6 — the percentage of visitors to this site who are still running the browser is negligible. However, I feel compelled to offer a compromise. Andy Clarke posted a very clever solution on his site a few months ago; a notion to serve the same basic, content-focused stylesheet to all IE6 users. He was then gracious enough to host it at Google Code as well. I have implemented that universal stylesheet on this site. Enjoy

HTML5 in the News

HTML5 this week (mostly for my own reference)

ALA: Get Ready for HTML 5

Get Ready for HTML 5, A List Apart

HTML Redefines Footer, Jeffrey Zeldman

Nine into Five, Eric Meyer

HTML5 Super Friends

HTML Super Friends, Technical Details

HTML5 Tracking (Footer)

HTML5 for Smarties, Jeffrey Zeldman

Regarding HTML5, SimpleBits

HTML5 Drag and Drop in Firefox 3.5, 0xDECAFBAD

HTML5 Drag and Drop, alert debugging

A Note on Internet Explorer 6

As a developer, I make a concerted effort to build websites with strong interoperable support among web browsers. Generally, this translates to providing a separate style sheet – with all the necessary hacks and edits — needed to keep Internet Explorer 6 from mangling an otherwise beautiful layout. I know that as long as there a broad range of users to cater to, the effort is required.

A slow but growing consensus of web developers is beginning to abandon support for IE6. I agree with the vocal majority that if you believe you have a user base with need for continued support, by all means offer it. Otherwise, drop support and never look back.

That said, I take a small drop of satisfaction in stating this site will not make any more effort than needed to support Internet Explorer 6. Take a minute to upgrade or download the latest Firefox.