Simplenote Featured as a Best Mac App of 2013

Each year Apple pick out their favorites out of all new apps available in the Mac App Store. This is not just a marketing boost for the creators of such apps, it invokes a sense of accomplishment and validates their efforts. In short, it’s an honour.


This year Automattic was fortunate enough to have one of our very own apps featured. Simplenote is the simplest way to keep notes. It allows you to synchronize any piece of text seamlessly across devices, regardless of platform. There’s also a web interface, and my favorite: the ability to publish any note on-the-fly should you need to show something to someone else quickly. This ties in well with Simplenote’s collaborative functions where if you add another user’s email address as a tag in any note it’ll show up in their list and they’ll be able to make edits.

The Simplenote app suite was recently reimagined by a few key people who are the ones to thank for creating great, reliable, and over all else simple apps that are now a key part of my work flow. So major props to Michael Johnston, Tom Witkin, Dan Roundhill, and Beau Collins for making it happen.

WordPress is Mobile – 2012 WordCamp Netherlands presentation

Last year I presented at WordCamp Netherlands for the second year in a row. It’s one of my favorite WordCamps mainly because of the incredible community that surrounds it. Dutch people just seem to be on the ball with almost everything that’s going on at any given point.

It’s taken a while for the video to surface, and while the audio isn’t great it’s a presentation I’m proud of nonetheless.

If you’re interested, the slides are available on SlideShare.

iPhone 5 PSD Template

iPhone 5 Device PSD Template

The iPhone 5 is an amazing, well-designed, and versatile device. However, as usual, it’s extremely hard to find good lossless pictures of the device for use in promotions, blog posts, and on websites. The press graphics provided by Apple itself have very strict licensing and only scale so far since they’re already rendered and you don’t get access to the source files.

Given that most of this iPhone’s design will most likely stick around for at least 2 years to come, I thought it made sense to spend some time on making a fully vector based replica of it to save time for designers working on apps and websites for the iPhone 5.

This illustration was made in Photoshop to ensure pixel perfection but is composed entirely of vector based or scalable elements. You can literally use Image Resize to scale this image up to be as tall as yourself at 300dpi with the same level of detail and no pixelation. For convenience the template is fitted at Retina resolution, so you can easily drop in iPhone 5 screenshots of apps/websites into the template without having to resize the device itself to fit.

Download PSD Template

Download iPhone 5 PSD Template (zipped .psd, ~54MB)

Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Couldn’t find any better license than this. You’re free to use the artwork and modify it however you want for both personal and commercial use.


These instructions are also embedded in the PSD template itself.

  • Right-click on the Smart Object the PSD opens to in the Layer palette and choose Replace Contents to fit your screenshot snugly in the frame.
  • The guides in the PSD are fitted to be exactly 640x1136px.
  • There are three pre-set slices in the PSD, two for exporting the entire device with padding and one for exporting the screen only.
  • A sample status bar exists in the “Screenshots” folder, use it to apply a custom carrier, time, and battery life.
  • There are two device shadows included: one that indicates a device balancing on it’s edge and one for when it’s laying flat on a surface.
  • Three backgrounds are bundled, disable all to get a transparent backdrop.
  • A device reflection is also included. Use in moderation!

Enjoy and happy shoppin’.

WordPress for webOS released

A few days ago we were finally able to announce WordPress for webOS to the public. It’s a neat app made solely for the new HP TouchPad. Most of the work was done by Beau Collins, a great developer based in Seattle WA. My contribution to the project was mainly to make the app as suave as possible, and coordinating the launch.

It’s hard to design for a platform that barely exists. UI Guidelines gets updated while you’re working on conforming to them. I didn’t have a device myself, so most of my testing was done in an emulator and webkit-powered browsers. That’s the other thing about webOS, the name implies that it’s web-based – and it pretty much is. It uses web technology for almost every aspect in the app building process. For instance, changing the font size in a particular element within the app is as simple as writing a few CSS rules. Altogether, this enabled me and others working on the app to iterate very quickly and build powerful features in a very small timeframe.

A word of advice though, webOS is based on Enyo (JavaScript framework), HTML5, and CSS3 – but not everything works like you would expect it to. I’ve found the support for CSS3 rules to be spotty. While you can apply things like border-radius and gradients, as well as border-image, there is no support for box-shadow or even text-shadow. At one point I spent hours perfecting the look of some buttons with nested inset box-shadows, gradients, rounded corners, which all looked great in a browser. However when compiled, the buttons turned out very plain as most of these rules are not supported on an OS level.

WebOS is struggling with performance, and avoiding things that are heavy to render (such as box-shadow and text-shadow) makes a lot of sense to speed things up, but it’s annoying to have some of the most powerful rules taken away from you when working with web technologies.

As we release new revisions of the app, I’ll keep you posted about development tips and pitfalls from a designer point of view.

Find out more about WordPress for webOS here: