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.

From 20-22 October, London was host to the TYPO 2011 conference. The conference started sixteen years ago in Berlin, continuing without interruption since. London holds the distinction as the first event held outside of Germany. The format: three days of talks with appearances by more than forty speakers. The schedule is quite ambitious. Talks begin in the early morning and continue well into the evening: there is no filler and the expectation of quality is high. Erik Spiekermann (always direct, brutally honest, wonderfully hilarious) and Adrian Shaughnessy acted as the glue of the conference, holding the space between speakers in place.

The theme of the conference is perhaps best summarised by a point Dale Herigstad made in the very first talk, later expanded upon by Tim Fendley. Spaces become places when they contain meaning; places gain definition with name. The speakers, organisers and audience members all arrived from a great many places, and the work and conversation shared amongst them reaches even further.

While I currently design and develop for the web, my background is in print. I formally studied as a Graphic Designer, schooled in the principles of the Bauhaus and Swiss design. Towards the latter half of university, I experienced the autumn years of post-modernism in design — a divergence that encouraged experimentation and insisted on questioning legibility — an experience that certainly influenced my understanding of design as much as formal modernism. The speakers who volunteered their time for this conference came from a genuine mix of design and art backgrounds. Design conferences of this scale are quite rare, and I feel quite fortunate to have had the opportunity to see the work of so many of my peers and heroes, to view the work as presented.

The quality and tempo of the conference was perhaps set by the first day of talks, a series to kick off the weekend in great anticipation.

People

Dale Herigstad. Media Space: Where is what? Where is where?

Chief Interaction Officer, Possible Worldwide

Screens can define places. Historically, a shape — the rectangle — confined information and entertainment. The rectangle, the screen, is surface onto a scene. Through advancements in dimension and space, the confines of the screen begin to erode. Detached observation moves to immersive and interactive space. Gestures, metadata, contextual information, social networking, multi-planing leads to the creation of media space. Content portals, transitions and advanced interaction provide a dynamic experience in-game and media space.

Further thoughts from the TYPO Blog

Nat Hunter. Telling the right story

Creative Director, Airside

Telling the right story is as important as a narrative work. Before presenting examples of great Airside narratives, Nat Hunter told a bit of her own story. Moving from chemistry to programming — with a great cameo from the Logo turtle! — to human computer interaction (HCI), she went on to start Airside as a collective with two partners. A few of the highlighted projects:

• Demos: The Power Gap
• Virgin Atlantic: In-flight entertainment
• CafeDirect / WeFarm

The new Virgin Atlantic in-flight entertainment system is welcome. I often fly Virgin to New York and the in-flight entertainment is — whilst better than most airlines — quite a terrible experience. Currently, an awkward game controller controls the user interface; accessing any piece of media requires, at minimum, half a dozen clicks and arrows presses. The new interface works entirely through touch and gesture. Media is largely accessed with one touch. Hunter described the challenges inherent to in-flight entertainment: by the time an airline manufactures and installs it, the system is outdated. The interface is meant to last for ten years. Aside from a few questionable UI decisions (primarily, heavy gradients) the interface should stand the test of time. I am eager to experience it on my next flight.

Ms Hunter shared an anecdote about the adoption of the new video screens: success is measured by a decline in drinks purchased from the bar, implying higher engagement with the entertainment system as a result of shorter wait times and more immediate interaction.

Further thoughts from the TYPO Blog

Kutlu Çanlio?glu& Titus Nemeth. BBC’s Global Experience Langauge in 27 languages and 9 scripts

PhD Candidate, Reading University / Senior Creative Director, BBC World Service

The BBC World Service poses a unique user experience and typographic challenge to the designers and developers of the broadcasting system. BBC news is available in twenty-seven languages and nine scripts. In applying their Global Experience Language (GEL) framework to the many World Service websites, the BBC attempt to ensure a consistency of layout, local interpretations of colour and design patterns whilst maintaining a respect for the varied methods of content delivery. Brasil, as an example, rarely uses images for hard news; images are largely provided by local contributors. In Russia, all news is hard news, it is difficult to ascertain hierarchy. Bandwidth in China is unpredictable and slow: web users expect links to always open in a new window so that they may continue to load in the background. Çanlio?lu and his team often weigh accessibility and experience principles against regional expectations, continually asking the question: are the differences relevant to our approach?

The BBC join a bold, global initiative to utilise professional typography on the web, as embedded fonts. Arabic, as the flagship, is often only available in a single script released by Microsoft decades ago; a simplified representation of letterforms that ignores many cultural and linguistic subtleties. The irony, of course, is that users grew accustomed to the mistakes of the computer font and anticipate those changes over their authentic, written counterparts. The BBC selected Titus Nemeth’s Nassim typeface for Arabic-language sites. Much of the talk focused on the fascinating development of this typeface.

Further thoughts from the TYPO Blog

Jonathan Ellery. The here and the now

Founder, Browns

After a brief debate on his role as artist or designer (“design is: a brief, a client and fees”), Jonathan Ellery discussed the publishing business of his design studio, initiated in 2005. Named Browns Editions, Ellery self-publishes many of his own artist works, personal works that otherwise would be unlikely to see the light of day.

• 136 Points of Reference
• 87 (a study in typography and form)
• In and Out (an abstract journey: roots in the life of Ellery’s father)
• Constance (accompanied a performance: Ellery’s relationship with women)
• Ellery’s Theory of Neo-conservative Creationism (an abstract journey: religion and science reconciled)
• The Human Condition (a study of rings, from child innocence to dark sexuality)

I felt 136 Points of Reference was particularly interesting. A collection of objects, moments, and broadly defined things that influenced Ellery and his work at the studio. The reference points were arranged in the publication in a way to show relationships between objects; to build rhythm and context. He remarked that everyone has a constantly evolving set of references, and that we have a responsibility to acknowledge these references. Once acknowledged, set them aside and move on. In keeping the same points of reference, you and your work are at risk of becoming mere shadows of their former selves.

Further thoughts from the TYPO Blog

Tony Brook. Bred in the bone

Creative Director, Spin

Mr Brook took time at the beginning of the talk to briefly discuss two projects: the identity for Haunch of Venison and the curation/design of the Wim Crouwel exhibition at the Design Museum in London. The first appears to be a fantastic piece of reductive work: an apparent raw interpretation of the legs (the haunch) of a three-legged deer, turned to its side.

The Design Museum work was an extraordinary opportunity for Brook — a self-described “Wim Crouwel” stalker. He embraced the opportunity to meet with Crouwel, explore archives in the Netherlands. With some persuasion, Brook convinced the Design Museum to curate an exhibition. Spin visualised everything: catalogues, iOS apps, posters, invitations, exhibition signage, souvenirs.

“Bred in the bone” is a loose theory that design is shaped by the culture, heritage, economy of language and genetic makeup of those who create it. Brook used his own heritage to illustrate his point; the importance of Northern (England) culture in Halifax, Yorkshire — the places, people, language and music that leave sometimes in-discernible traces of influence in life and work.

Further thoughts from the TYPO Blog

Michael Bierut. The only important decision

Partner, Pentagram

Mr Bierut presented his showcase of work from Pentagram very much in the spirit of the conference. A sense of place for each project: work that embodies the context of the cities and landmarks in which commissioned. The title of the talk references the most important decision a designer can often make: what typeface should I use? In the highlights below, I’ve noted the typeface selected/created for each.

• Celebration, Florida (Cheltenham)
• Lower Manhattan, New York: Alliance for Downtown New York (Akzidenz Grotesk)
• Brooklyn, New York: Brooklyn Academy of Music (News Gothic)
• Park Avenue, Manhattan: Lever House (Lever Sans)
• Falls Church, Virginia: General Dynamics
• Milwaukee, Wisconsin: Harley-Davidson (Knockout)
• Floral Park, New Jersey: New York Jets (Jets Bold)
• Columbus Circle, Manhattan, New York: Museum of Arts and Design (MAD Face)
• Miami, Florida: New World Symphony
• Times Square, Manhattan, New York: The New York Times

Leave to remain

Currently, the United Kingdom grants a migrant working or studying a specific period of “leave to remain”, during which they are entitled to claim temporary residency. At the end of this time, a person may choose to renew their visa or switch to a more appropriate route — for example, a student or spouse seeking entitlement to work. After five years of continued residency, immigrants may then apply for “indefinite leave to remain” (ILR), provided they continue to meet the necessary skill requirements. While ILR is still a step removed from citizenship, it does grant permanent settlement in the UK and full access to state services. The aforementioned consultation seeks to define, at the onset of a visa application, which visas are temporary. Workers on temporary visas will not have the option to apply for ILR.

The previous, Labour government introduced the current tiered working visa system in 2008. It is now all but extinct. The Home Office, in the waning years of Gordon Brown, made incremental restrictions to tiered visas by increasing the skill requirements of incoming workers. Following the election of the Liberal Democrat / Conservative coalition, the government has systematically dismantled the visa system. The highest privileged working visa — the Tier 1 Highly Skilled Migrant — closed on 6 April 2011. Tier 4, the student visa, was significantly altered the same month in parallel to closing of the Tier 1 Post-study working visa.

The Home Office states that 84,000 migrants from outside the European Economic Area were granted indefinite leave to remain in 2010 via employment routes, a 17% increase from totals in 1997 (a year apparently relevant as it was the start of the three-term Labour government). Oft quoted reasons for reducing migration include the additional strain on services and loss of skilled jobs.

Theresa May, the Home Secretary, has made it clear that the United Kingdom intends to block the flow of immigrants from outside the EEA to as few people as legally possible.

Labor

We want the brightest and best workers to come to the UK, make a strong contribution to our economy while they are here, and then return home.

Damian Green

The Home Department addresses immigrants as “workers”. The underlying rationale is that visa holders have come to the UK to advance their work and careers. This is fair reasoning. However, the assumption that people are here only to work is deeply flawed. Green ignores the strong cultural and social ties that immigrants inevitably form. Adopted homes, however fleeting, still bind. Expecting immigrants to arrive, work for a bit then neatly pack their bags disregards the life that work is bundled within. Five years can be a lifetime of experience and learning; of friendship, of love, of cultural embrace.

The proposal makes no care for these links to community; coldly rational, it either denies the existence of friendship and possibility outside of work or expects the swift burning of bridges. Damian Green’s words amplifies an understanding that people are resources: temporary bodies to fill temporary roles.

Contribution

In striking contrast, Michael Bloomberg, mayor of New York, is pushing an initiative to reform immigration in the United States, acknowledging the essential role of immigrants in America’s economic and cultural growth. Bloomberg proposes more temporary and permanent working visas for highly skilled migrants, new entrepreneur visas and expanded green cards.

We will not remain a global superpower if we continue to close our doors to people who want to come here to work hard, start businesses, and pursue the American dream. The American dream cannot survive if we keep telling the dreamers to go elsewhere.

Michael Bloomberg

His initiative is a stark difference to the policies of the coalition government in the United Kingdom, and indeed to opinion in many parts of the United States. Yet his honesty and openness hits at a truth that many have been content to ignore. The immigration debate so often focuses on illegal persons that it rarely recognizes the economic and intellectual boon that stems from legal paths of migration. Globalization has allowed business and innovation to flourish, yet our borders are being closed to a generation of makers and thinkers.

Choice

The proposal (document), if passed, will come into effect in 2014. It is unclear whether immigrants already in the United Kingdom would be affected by the changes. The Home Office is keeping an open consultation until 9 September.

I did not move to the United Kingdom with the intent to settle permanently. The prospect of permanent settlement, however, is incentive for me to stay.

I have lived in this country for two years and already have a sincere appreciation for my work experience, my friends, the culture, this city. I understand how difficult it could be in one year to leave all of that behind. The same decision three years on is a choice I would hope to earn: a choice I believe all legal immigrants deserve.

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

The process of selecting and securing a partner, whether for conceiving and rearing children, or for enhancing one’s socioeconomic standing, or for attempting motel-room acrobatics, or merely for finding companionship in a cold and lonely universe, is as consequential as it can be inefficient or irresolute. Lives hang in the balance, and yet we have typically relied for our choices on happenstance—offhand referrals, late nights at the office, or the dream of meeting cute.

On the other side, Garcia inserted the metal nozzle of a 90-pounds-per-square-inch compressed-air hose and blasted the pigs’ brains into a pink slurry. One head every three seconds. A high-pressure burst, a fine rosy mist, and the slosh of brains slipping through a drain hole into a catch bucket.

I have the sensation, as do my friends, that to function as a proficient human, you must both “keep up” with the internet and pursue more serious, analog interests. I blog about real life; I talk about the internet. It’s so exhausting to exist on both registers, especially while holding down a job. It feels like tedious work to be merely conversationally competent.