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:

Slide 2
The state of the web today.
Designers and developers have spent the last decade fighting for the desktop.
We reach a consensus. 1024×768 was a safe resolution.
Mobile web is born, not much happens, and we continue to follow the same patterns.

Slide 3
We continue to create pixel-perfect layouts for a fixed canvas.
Individual layouts for every device.
We have widescreen television, desktop, tablet, mobile.
If mobile is acknowledged, it is commonly sand-boxed and dependent on user agent.

Slide 4
Designs are cut and cropped.
Performance issues.
No content hierarchy.

Slide 7
If you do have a mobile solution:
How many devices do you cater a service or product to?
How many experiences will a user have?
What assumptions and compromises are made to this end?

Slide 8
The idea is instead:
Accept “the ebb and flow of things”.
Websites cannot be pixel-perfect.
Presentation must change from desktop to tablet, tablet to smartphone.
It is context that plays an essential role in the user experience.

Slide 9
Ethan Marcotte.
Responsive web design is: Flexible grid, flexible images, media queries.
Consistent and focused experience.

Slide 10
Use percentages, not pixels.
Create a fluid layout from a modular grid.
Set minimum and maximum widths.
The grid must resize as the browser changes.

Slide 15
Scalable images and video.

Slide 16
Scale to the design, but never above original size.

Slide 17
We’ve had media types (screen, projector, print, handheld)
CSS3 provides better ways of testing.
Media queries look at physical characteristics.
Browser viewport, device screen size, device orientation.

Slide 19
The foundation of responsive design.
Create a single site and single experience that targets the browser, not the device.
Scales to fit all device sizes and orientations.

Slide 25
Responsive web design is not the first and last solution.
There are valid reasons to create tailored mobile sites and native applications.
Bespoke experience, advanced device features, hardware access, distribution, curated content.
Responsive design fills in the gaps.

Slide 32
Beyond presentation. Impact on site performance and user experience.

Slide 35
What can you do to make your site responsive?

Slide 36
Start new. Making a site responsive retroactively is difficult.
Focus on content. Mobile first.

Slide 37
Start small.

Slide 38
Use media queries to enhance and expand the design as screen real estate grows.
Perfect example of progressive enhancement.
Set queries at common smartphone sizes, tablet, desktop.

Slide 39
Javascript for conditional loading: sidebar content, social media share buttons.
Avoids overloading mobile users with supplementary material.
This is important. Forces you to focus on necessary content.
What do your site visitors really need?

Slide 40
matchMedia.
Set breakpoint in a variable.
Add a listener to the variable.
Set functions on load or resize.

Slide 42
No shortage of good themes.
Find themes that focus on mobile first.

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

form input {
	position: relative;
	margin: 0;
	padding: 0 10px;
	width: auto;
	height: 25px;
	cursor: pointer;
	border: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background-color: #3E9EEF;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.5, rgb(62,159,239)),
	    color-stop(0.5, rgb(75,177,241))
	);
	background-image: -moz-linear-gradient(
	    center bottom,
	    rgb(62,159,239) 50%,
	    rgb(75,177,241) 50%
	);
}

-webkit-border-radius is only necessary if you are either targeting older versions of Safari and Chrome, or need to support the iPad until the release of iOS 4.2. background-color is a fallback for Internet Explorer. IE9 will be the first version of that browser to support these properties.

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>

The complete class with options for different widths and background images. A rollover state stored within the background image and accessed through negative padding would be a simple addition (see the Filament Group post). The class works in Firefox 2+, Safari 3+, Google Chrome, and Internet Explorer 6/7/8.

Example images:

input-btn.png

input-btn-link.png

input-btn_small.png

CSS:

/*---------------------------------
input type=submit, <p> etc 
---------------------------------*/
/* basic class */
.input-btn {
	margin: 0;
	padding: 0;
	float: right; /* either float or display: block */
	color: #FFF;
	font-size: 1em;
	border: none;
	cursor: pointer;
	overflow: visible;
	background: transparent url(input-btn.png) no-repeat 0 0;
	height: 25px;
	text-align: center;
	width: 265px;
	/* Firefox on the PC may need font-family redefined: */
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	}
input::-moz-focus-inner {
	border: none;
	}
input.input-btn:hover {text-decoration: underline;}

/* + different widths */
.input-btn.small {
	background: #FFF url(input-btn_small.png) no-repeat 0 0;
	width: 100px;
	}
.input-btn.medium {
	background: #FFF url(input-btn_medium.png) no-repeat 0 0;
	width: 150px;
	}
.input-btn.large {
	background: #FFF url(input-btn_large.png) no-repeat 0 0;
	width: 185px;
	}

The same style applied to an anchor tag, very flexible with width. Requires /span/ or similar.

/*---------------------------------
a: span
---------------------------------*/
 
a.input-btn-link {
	margin: 0;
	padding: 0 15px 0 0;	
	display: block;
	text-align: center;
	width: 170px;
	background: transparent url(input-btn-link.png) no-repeat right -40px;
	text-decoration: none;
	}
a.input-btn-link span {
	display: block;
	margin: 0;
	padding: 5px 0 5px 12px;
	height: 15px;
	color: #FFF;
	background: transparent url(input-btn-link.png) no-repeat top left;
	font-size: 1em;
	line-height: 1.3em;
	white-space: nowrap;	
	}
a.input-btn-link span:hover {text-decoration: underline;}

/* custom width */
a.input-btn-link.small {width: 100px;}
a.input-btn-link.large {width: 250px;}

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