Status

Off to Philly today for SRCCON, a gathering of some of the nerds who make the technology behind the news. I am so excited! For years, CMSes, publishing workflows, and the unsexy but very mission critical technologies have been my passion. Yet most of the conferences, online discussion, etc. have skirted around the topic, in part because legacy organizational structure hasn’t let the hackers get to work.

Funny how things go if you stick at it long enough. Washington Post and Vox have made great leaps forward, and convinced executives everywhere that change is possible. Hell, even The New Yorker relaunched on WordPress two days ago. NBD.

Back to Portland Saturday night, off to Sunriver Sunday through Wednesday, and then to New York for WCNYC Thursday through the following Wednesday. REST API retooling here we come!

The conference I want to attend this year

Blogging about the conference I want to attend this year because I don’t have the bandwidth to put it together. Let’s call it AgencyCon.

The key idea is to bring together a bunch of agencies that build on top of WordPress, Drupal, Joomla, and whatever other frameworks. Personally, here’s what I’d like to get out of it:

  • Learn how others are turning their agencies from guns for hire to experts in developing particular types of projects. For instance, with Human Made I would love to see more inbounds that refer to the product work we’ve done (e.g. Happytables and WP Remote) and want to hire us for similar. Rather than just doing work with a particular type of tool because you’re good at it, we be doing more work that we have proven ourselves leaders of.
  • Hear horror stories of situations other agencies the gotten themselves into, and want for no one else to ever repeat.
  • See the cool projects other agencies have been building but can’t publicly discuss. I want to be inspired.

Ideally, it would be a two or three day retreat-like event in some great location. Solid presentations, but lots of time for networking. I’m a fan of conferences as a model for continuing education largely because many of us are making this up as we go along, and they’re high-bandwidth opportunities for sharing knowledge.

Let me know if you know of any events like this, or are up for planning it yourself. I’d really love to see this conference happen.

Webstock: Karen McGrane, Adapting Ourselves to Adaptive Content

This week I’m at Webstock, a lovely conference in New Zealand. I’m doing my best to write little blog posts about the amazing presentations. Please forgive any typos, etc. If you’re here too, come write a haiku at Automattic’s booth.

Karen McGrane has made a career of dragging media companies kicking and screaming onto the internet. She’s helped with projects like a redesigned NYTimes.com, Atlantic Media’s web properties, and TIME’s new responsive redesign. “It’s tempting to think that mobile is a design and development problem,” but the real challenge of mobile is content.

To kick things off, compare NPR and Conde Nast. The latter has spent tremendous effort replicating print editions into iPad apps. When the iPad first launched, Karen asked Paul Ford what the effect might be on the publishing industry. This is what she heard:

We’re about to usher in a golden age of PDFs on the iPad.

Conde Nast has gone even as far as make print designers produce two layouts for the iPad: portrait and landscape. The 1980’s aren’t coming back, though.

NPR has taken an alternative approach: Create Once, Publish Everywhere. The story is created once, and let each platform determine how it should be presented. NPR’s CMS captures just the right structure for the content. All of this data is available through the API.

iPad issue sales are on the downswing for Conde Nast. For NPR, viewership has grown by 80%. They attribute it solely to the API and it’s downstream effects on how they produce editorial products.

Thirty years ago, TV Week made the decision to produce multiple versions of their content, and assign meaningful metadata to it. Thirty years later, that content still has value because it’s reusable in new or uninvented contexts.

“News organizations already have structured content […] So many problems in mobile would be solved if everything had a dek.”

One of the biggest challenges in digital is the notion that content and form are closely coupled. That how something looks has a significant influence on what it means. That there’s a “primary platform” for a given piece of content. For many news organizations, this primary platform is still print.

Adaptive content doesn’t mean content prepared for print and then moved to other devices. Nor does it mean content prepared for the web, then pushed to print and mobile. It means focusing on structured content that can live anywhere.

Here’s how it can be done:

  • Write for the chunk – Many CMSes give writers WYSIWYG editors where they can dump in whatever they want. They should not be permitted this.
  • Demystify metadata – The Guardian’s iPad application uses an algorithm to read editorial decisions from the InDesign layout to determine story priorities. Brilliant reuse of existing effort.
  • Better CMS workflow – Writers hate fields and checkboxes because the interface is terrible. “CMS is the enterprise software that UX forgot.” E-commerce checkout flows are analysed to the pixel — content creation flows should receive just as much attention.

“Metadata is the new art direction.” – Ethan Resnick. The more work you put into structuring your content now, the more opportunities you’ll have in the future.

Webstock: John Gruber, In Praise of Pac-Man

This week I’m at Webstock, a lovely conference in New Zealand. I’m doing my best to write little blog posts about the amazing presentations. Please forgive any typos, etc. If you’re here too, come write a haiku at Automattic’s booth.

John Gruber, well everyone knows who John Gruber is. If you don’t, please hand in your internet license.

Pac-Man is a maze. The maze is filled with dots. You eat all of the dots, without being eaten in turn by the monsters changing you. There are power dots in corners which turn the monsters into ghosts you can eat. Everything leads to points.

It was invented by Toru Iwatani. At the time, coin-operated video games was a nacent industry. Game operators converged at a conference every year to choose new games to buy. Pac-Man never stood out as a hit game. Until it did $1 billion in the first few years, more than Star Wars did in ticket sales.

Buckner & Garcia introduced a song in 1982 called “Pac-Man Fever.” It made it to #9 on the Billboard charts. Gruber remembers being able to play Pac-Man at the grocery store and an entire arcade of Pac-Man machines. It was the first game to reach this level of success.

Gruber ascribes Pac-Man’s success to four characteristics:

  • Fun
  • Simple
  • Obvious
  • Challenging

Mr. Do!, on the other hand, was an incredibly complex game only a few people at Webstock remember. For instance, when you eat the snack in the center of the screen, the screen changes color, some more bad guys come out that are more aggressive, and then maybe you get another life. Gruber still doesn’t know what the best technique is for winning the game.

Mr. Do! was a popular arcade game, but no one thought it was important enough to track how much money it made. Pac-Man was much more than a popular arcade game. “Everything in Pac-Man was iconic.”

The monsters in Pac-Man had their own names and unique personalities. “Blinky”, the red monster, persistently chased Pac-Man. He was the one most likely to kill you. “Clyde”, on the other hand, was a dumb oaf.

Pac-Man was popular because it rewarded obsessiveness, but Gruber argues it was financially successful because it was a game everyone could get. You didn’t have to be a gamer to know how to play it.

The original Macintosh was similarly successful. It challenged the status quo of interacting with a computer through the command line by offering an interface that was more intuitive. Gruber thinks Macintosh designers inherited many ideas from video games of the time. There was even iconography (e.g. a bomb on the restart modal) you’d expect to see in a video game, not an operating system.

iOS takes the simplicity even further. All of your apps live on your homepage. You’re either on your homepage or in an app. “Android is Mr. Do!” because there’s additional levels of complexity and conventions you need to learn.

Gruber’s advice: if you can’t describe your project in one sentence, you’re not working on a simple project. “Ten pounds of effort on one simple design element will have way more impact than one pound of effort on ten design elements.”

Webstock: Chris Coyier, The Modern Web Designer’s Workflow

This week I’m at Webstock, a lovely conference in New Zealand. I’m doing my best to write little blog posts about the amazing presentations. Please forgive any typos, etc. If you’re here too, come write a haiku at Automattic’s booth.

Chris Coyier is a humorous man. He was also a designer at Wufoo and now does CSS Tricks and CodePen. Today he’s covering:

  1. Getting started designing.
  2. Local development environment.
  3. Working on a team.
  4. Preprocessing saves happiness.
  5. Testing, testing, testing.

Chris designs in Photoshop, to the faux-horror of everyone in the room. Photoshop is more “left brainy” than a CSS editor. It affords more creativity. WebZap gives you buttons and other web patterns to use in your mockups.

The blank canvas is a challenge for every profession. In the design world, you might:

  • Toss down a texture.
  • Draw some shapes.
  • Avoid making wireframes.

As soon as you have a Minimum Viable Design in Photoshop, though, take it to the web. Making it perfect in Photoshop just means you’ll have to do the work all over again.

“Let’s change the phrase ‘designing in the browser’ to ‘deciding in the browser’.” – Some Guy I Missed

Don’t work live on a server. Just don’t.

Instead, you can and should develop in a local environment. If you’re building for WordPress, MAMP is a good option to provide everything you need to run a web server.

Two tools to demystify version control: Github for Mac and Tower.

Chris is all about the Sublime Text. In version 3, being able to jump to files is amazeballs. Emmet does all sorts of crazy HTML auto-completion.

Some advantages to using a preprocessor like Sass:

  • DRY awesomeness.
  • Mixins allow you to define named functions, and use those functions elsewhere in your Sass. Everyone screws up CSS3 vendor prefixes. Mixins allow you to only screw up (and fix) in one place.

Sass plus Compass gives you an amazing number predefined mixins.

Editor’s note: All of this frontend hotness is blowing my mind. I didn’t even know.

Preprocessing also greatly simplifies media queries. And it makes writing CSS fun again.

CodeKit is a Mac app that automagically preprocesses all of your shiz. It will inject style changes into your browser while you edit. Great for when you might need to style web apps with various states. It can also losslessly compress any image assets used in your site.

The easiest way to make a website faster is to load less stuff. If you can’t remove it entirely, you can concatenate and minimize.

Testing is a big PITA. BrowserStack lets you test in a variety of browsers from the comfort of your own home.

Webstock: Miranda Mulligan, Your Survival is Designed

This week I’m at Webstock, a lovely conference in New Zealand. I’m doing my best to write little blog posts about the amazing presentations. Please forgive any typos, etc. If you’re here too, come write a haiku at Automattic’s booth.

Miranda Mulligan (hey, I know her!) helped take the Boston Globe through a responsive redesign, and now is Director at the Knight Media Lab at Northwestern. She’s the first in five generations of women to not make clothing for a living. Clothing matters; what you wear is an indicator of what you value.

“Journalism needs to be a more thoughtful dresser.” Some large news organizations have very good UX designers, and many more have very good editorial designers. But news design has stagnated, and the news industry needs more design-thinkers.

When Miranda talks with publishers, they’re fascinated by responsive web design. They don’t have many designers in their organization though, and design comes at the end of the project workflow.

“Technologists are winning at media innovation.” Twitter is reinventing breaking news situations. The Evening Edition gives you a summary of what’s happening at the end of every day. Narrative Science turns big data into readable stories. Why aren’t media companies inventing these new products?

Webstock: Aza Raskin, Design is the Beauty of Turning Constraints Into Advantages

This week I’m at Webstock, a lovely conference in New Zealand. I’m doing my best to write little blog posts about the amazing presentations. Please forgive any typos, etc. If you’re here too, come write a haiku at Automattic’s booth.

For the last couple of years, Aza Raskin (@aza) has been working on helping bring design to solving health challenges. Solving difficult problems happens by changing how you ask the question. The big meta problem of design is figuring out how to ask the right question.

In 1959, Henry Kramer had a dream that people should be able to fly under their own power. He put up a challenge of 50k pounds to anyone who could build a device for flying a couple meters above the ground between two points. Double the award for someone who flew across the English Channel. No one could solve it.

Paul Maccready in 1977 said that most participants were trying to solve the wrong problem. The real question was “how can you build an airplane to fly under human power that can be repaired in hours?” Other participants would build an airplane in 12 or 18 months, try to fly it once, and it would break. Paul was able to solve the challenge in 8 months by reframing the question.

“Science is in the business of embracing failure because it’s only through failure that we learn.”

It’s not about thinking outside the box, because that means there are no constraints. Instead, it’s about figuring out which box to think inside. “Constraints give you permission to think about something smaller.” Architecture provides perfect examples of thinking inside the box because you often have to deal with specific physical requirements:

The origin of the 140 character limit for text messages is also one of constraints. The person who made the determination wrote out everything you might communicate with a typewriter. Then he measured each line.

Creativity comes from constraint, and asking the right question is the most important part of design. Two more important ideas:

  • Perceptual scope – How do you see things (to what degree do you see the forest vs. the trees)
  • Conceptual scope – How you classify what you see (e.g. of a list, which items are furniture)

On the science of this, you’d look at how obstacles change someone’s perceptual and conceptual scopes. Generally, thinking of challenges as obstacles to overcome makes people think broader and more creatively.

If you encounter a detour on your drive home from work, you’re more likely to pick something new to eat for dinner. Getting out of your habits is very important. Adding an obstacle changes your perceptual scope.

Webstock: Jason Kottke, I Built a Web App (And You Can Too)

This week I’m at Webstock, a lovely conference in New Zealand. I’m doing my best to write little blog posts about the amazing presentations. Please forgive any typos, etc. If you’re here too, come write a haiku at Automattic’s booth.

Jason Kottke is a blogger and a web developer. Kottke.org is a blog he’s been publishing since 1998. Today he’s talking about something else.

1. How do you decide to do something?

When one of his kids was born, lots of friends and family took pictures for tweeting, Flickr’ing, and generally posting on the web. Most interactions with those images came in the form:

  • Facebook: Like
  • Twitter: Favorite (with a star) and Retweet
  • Flickr: Favorite (with a star)
  • Vimeo: Like (with a heart)
  • Tumblr: Like (with a heart)

Three years ago, when Kottke started thinking about this, most companies just tucked the data away. It was/is hard to access again by users. “If you’re favoriting things to save important family memories, this is a problem.”

According to Stephen Johnson, good ideas come in the form of a “slow hunch.” One example: Tim Berners-Lee’s invention of the World Wide Web. After college in 1980, Tim coded a hyperlinked tool for academics to share knowledge. It didn’t really take on. In 1989, he hatched a plan to build a more ambitious version of the first tool. He took a vague notion and iterated on it, over and over.

Kottke’s first slow hunch: blogging software. He started Kottke.org by editing static HTML files. Since the time he switched to MT in 2002, he’s thought about writing his own blogging app.

The second slow hunch: streams. When the web first began, the NCSA logged everything that was new on the web. People would email the NCSA anytime they changed something with their website. And the NCSA would post the newest stuff at the top, and bump the older stuff down.

“It’s weird that we read backwards in time on the web, and forwards in time everywhere else.”

2. Stellar, something he decided to make

Stellar is a web app that collects all of your social media favorites in one place, and follow your friends’ favorites. At this point, 15k users have signed up. 2-3k are active users.

Kottke thinks of it as a lightweight blogging app. Every time you favorite something, it gets blogged to the stream. What’s surprising to him is how useful it is as a tool for finding things you didn’t know you’d be interested in. “The delicious cream off the social media churn.”

Stellar is hosted on two EC2 instances with RDS as the database. Software: Ubuntu Linux, PHP, Memcached, CodeIgniter, jQuery, Typekit, Mercurial, and MySQL (RDS). Everything is free, or very cheap, and way easier than it was five years ago.

3. What he’s learned, and the current status of Stellar

Another important stack: the meat stack. There are plenty of articles on how to get the most out of yourself and collaborators on HackerNews, Stack Overflow, etc. Kottke’s advice:

  • You can do it. When he started, there were many things he didn’t know: how to use an MVC framework, how to memcache, etc. Kottke started making Stellar, and learned along the way.
  • Sit in the chair and do it. Making something involves actually making something.

Design turned out to be harder than programming. One sign of success: if he got sidetracked by some new content while working on a feature, then he must be doing something right.

After two and a half years with 25-30 hours / week towards it, Kottke thinks Stellar is about 20% done. Some work to do:

  • Convert to Twitter’s new API request requirements.
  • There are almost 18 million favorited items in Stellar’s database, which is not insignificant. Database server needs to be upgraded or rethunk and it will be costly.

“How can I build a business on the shifting demands of corporate APIs?” Kottke hasn’t committed to Stellar since July 31st, 2012 because he’s been stuck. He was that guy, super stoked about what he was building, until about eight months ago. Only time will tell what will happen with Stellar.