'Designing Blogs for Readers'

Matt Gemmell discusses the way his blog's design has changed over the last decade, and lists some ground rules for making your own site more readable.

“I don’t think there’s any reasonable way, or any need, to separate vanity and ego from a personal blog. Writing is inherently about its author, and is a product of their personality and opinions – that’s not something to be shy about, and we shouldn’t try to change it either. So, write for yourself – and hold yourself to an appropriate standard, because you’d better believe that others are judging the person as well as the piece – but as soon as you publish your views, you’re inviting readers to take a look. I think that the needs of the reader and the author are more aligned than many blogging systems seem to believe.”

I went through the list and discovered that Unretrofied meets many of the criteria Matt calls for, which I'm kinda proud of because I'm not a web designer by any stretch of the imagination.

I've just always strongly believed that sites explicitly meant to be read should not be designed so as to interfere with anybody's reading experience. That would be stupid, and I'm glad I'm not the only one who thinks so.

There are a few little things that could be changed to meet his standards (such as making visited links more obvious), along with some items that have always bugged me but I haven't gotten around to fixing yet (like the way my Fusion ad can interfere with other elements on mobile devices), but overall I'm glad to know I've tinkered my way into a fairly readable site.

On Stock and Flow

I recently came across a 2010 blog post written by Robin Sloan called Stock and Flow that really resonated with me. As it turns out, I'd apparently been living under a rock until now because this piece has influenced some of my favorite writers on the web.

The idea is simple:

“Flow is the feed. It’s the posts and the tweets. It’s the stream of daily and sub-daily updates that remind people that you exist.

Stock is the durable stuff. It’s the content you produce that’s as interesting in two months (or two years) as it is today. It’s what people discover via search. It’s what spreads slowly but surely, building fans over time.”

This, in a nutshell, is how I've tried to run Unretrofied: writing longer, column-like articles now and again, and keeping up the momentum with link-posts in between. Shawn Blanc explains this practice perfectly:

“[...] there’s just no way I could write the sort of original content I do often enough to keep the site updated on a near-daily basis. I spend a lot of time reading and researching, and I love to pass along links to the things I find of value.

If I were to shift the time I spend posting links to be time spent on original articles instead, it’s not like there would be a new article every day. Because I would still be spending time reading and researching and working behind the scenes. And I’d still be discovering the same stuff I am now — I just wouldn’t be linking to it.”

While the idea is simple on the surface, finding the balance between stock and flow can be difficult at times. Making both types of content great is even more so.

Most writers will be familiar with the difficulties of writing stock often and well. With any article of lasting value, there is always a certain amount of research to be done, data to be gathered, thoughts to be articulated, phrases to be turned. This is where the majority of our energy is devoted, and rightfully so.

Flow is another matter altogether. It can still be well-written of course, but it feels less like capital "W" Writing and more like a conversation with friends. It's only natural for us to share awesome stuff with like-minded people in our lives, and that's kind of how I view link-posts.

But here is where the difficulty lies: you wouldn't purposely share crappy stuff with the people you care about. You want to point them only to the good stuff, and there is a lot of it out there to sift through. You also don't want to overload them with this stuff, because if they're your friend, they're likely more interested in your story than all the cool stuff you happen to find.

And trust me, it's all too easy to get caught up in linking to cool stuff when you should be writing more stock.

So again, it's all about finding a balance. People read your blog because they want to see the things you write about, and maybe some occasional tidbits of things that are on your mind (but not too much). This is why the term flow is so perfect. It's about telling a story.

I realize that I'm about to link to Shawn's site for the third time in this piece, but one bit that came up during his interview with John Gruber several years ago is too fitting to pass up:

“As for what I link to and what I don’t, it’s very much like Justice Stewart’s definition of obscenity: “I know it when I see it.” There’s a certain pace and rhythm to what I’m going for, a mix of the technical, the artful, the thoughtful, and the absurd. In the same way that I strive to achieve a certain voice in my prose, as a writer, I strive for a certain voice with regard to what I link to. No single item I post to the Linked List is all that important. It’s the mix, the gestalt of an entire day’s worth taken together, that matters to me.”

So you see, there's definitely an art to all of this, one that I'm continually trying to improve on for myself. There is no formula, no perfect ratio, no right or wrong answer. But it is good to create some guidelines for yourself as a writer, in order to create a better balance.

Review: Logitech Ultrathin Keyboard Cover

As my readers may or may not know, I recently took a week-long trip to Disney World[1]. I just happened to be there the week before Stephen Hackett[2], who I work with over at Tools and Toys but haven’t yet had a chance to meet in person. We flew back maybe a day or two before he got there, which, talk about timing, right? I just hope he was able to locate all the “easter eggs” I’d strategically strewn about the various Disney parks for him.

Although I could have asked Shawn ahead of time to take off from my Tools and Toys duties, I figured I could just continue posting during downtime at the hotel each night. I mean, those posts aren’t required to be insanely long or anything, and I already had a few ideas lined up. Easy peasy right?

Wrong.

Something about the trip completely messed up my immune system, and each day seemed to bring a new “gift” in the form of severe allergies, migraines, a throat/lung infection (I’m still dealing with the cough from this one), fever sweats, and general exhaustion. It was taking all my energy to have any fun at the Disney parks, and that was with frequent rests and lots of water being consumed. So…much…water. By the time we got back to the hotel, I would almost immediately crash on the bed.

I managed to eke out one T&T post, then accidentally miss a day entirely, before I finally gave in and asked Shawn if I could just have the week off. He was totally cool with it, and I’m grateful for that. But since I didn’t know any of this was going to happen beforehand, the night before our flight, I stopped by my old Apple Store (where it turns out that I know almost none of the employees anymore) and picked up a Logitech Ultrathin Keyboard Cover for my iPad.

I’ve never really needed one of these, maybe I don’t even need one now, but I figured a trip would be the perfect time to try it out. My typing speed is okay on the iOS soft keyboard, but it will probably never compete with what I’m capable of on a physical keyboard. It’s one of those things kids will someday think I’m old-fashioned for, which I’ve come to accept.

Since this was the night before the trip, I didn’t get a whole lot of time with the keyboard at home. As usual, I had waited until the last minute to get my packing done, and it was necessary to go to bed early, so I just let the keyboard do its initial full charge for a couple hours or so, and then stowed it away in a bag right before hitting the sack.

My first real chance to get it back out of the bag and toy around with it was the next morning, after we’d made it through airport security and gotten some much-needed coffee.

Over the next couple of hours, as we waited for our plane boarding time, I began putting the keyboard through its paces. First, I fired up Day One to begin journaling our trip experience, then began writing up the first-impressions about the keyboard that eventually led to this article. I also went through some trial-and-error to find out what the function (FN) keys on the top number row could do, which I’ll be discussing in a bit.

My first impressions were extremely positive. Suddenly, writing on the iPad felt like a breeze compared to when I was typing on-screen, and I enjoyed having so much more screen space to work with. Since returning from the trip, I’ve had a lot more time to spend with the keyboard. Now that I’ve given you my life story, I’d like to share my thoughts.

The Hardware

A concern of mine before buying the Ultrathin was that the keys might be too small. I’d seen lots of pictures of course, but never really had a chance to try the thing out. It’s not like they keep them out on display at the Apple Store. In my usage so far, I’ve been pleasantly surprised to find that the keys aren’t too tiny at all. Now, they are a bit cramped together, but this rarely hampers my typing ability. In fact it’s quite a comfortable experience, much more so than I expected.

The keys feel very responsive and give a satisfying click when pressed. I had worried they might feel cheap and plasticky, but they feel great to me, and it seems like they will hold up well over time.

The case itself is quite nice too. When the iPad is in-use, it rests in a magnetic slot that stretches the entire length of the keyboard. This magnet is stronger than you’d expect; I can pick up the iPad by its bezel while it’s sitting in the slot, and the keyboard will travel with it, rather than falling off. I feel secure knowing the iPad isn’t going to suddenly tip over backwards out of the slot.

The rear edge of the case has another strong magnet, but this one is in the form of a hinge. To “close” the case, you remove the iPad from the keyboard slot and — making sure the home button is on your right side rather than your left[4] — merely lower it onto the exposed magnet strip on the hinge. The hinge will typically lift up to meet the iPad, and from there you just lay the iPad face-down on the keyboard like a laptop screen.

While it’s closed, the case’s aluminum exterior almost makes it appear as if two iPads are facing each other screen-to-screen. It also feels quite durable, although I’m not crazy enough to try any drop tests with it. When the case is opened again, much like with Apple’s Smart Cover, the released magnets within the iPad alert the display to turn on automatically.

Whether it’s open or closed, the Ultrathin has a relatively small footprint. It was the absolute perfect size to fit on every airplane tray I tried it with, and it stows away in a bag just about as easily as a standalone iPad does.

One last thing with the hardware: I’ve found myself occasionally using the Ultrathin merely as a stand for reading ebooks, watching videos, and other media consumption. It doesn’t have to be used for writing at all times. The magnetic slot holds the iPad at the perfect angle for such things, and the keyboard is small enough to stay out of your way even when you’re not typing.

Shortcuts and Function Keys

Another surprise I’ve had with this keyboard (are you sensing a trend yet?) is the fact that it supports some of the keyboard shortcuts you would use on a Mac:

  • CMD+C and CMD+V will copy and paste selected text, respectively
  • CMD+Z will undo the previous action
  • CMD+A will highlight the entire document
  • Initially I was disappointed by the lack of Home and End buttons for skipping to the beginning or ending of a line, but after playing around with various key combinations, I discovered that CTRL+[any directional arrow] will skip the cursor around this way. Left and Right take care of the same functions that Home and End would, but you can also use Up and Down to skip to the top or bottom of the entire document. Very nifty.
  • The ALT button will produce all kinds of interesting results in combination with the alpha and numeric characters. For example, ALT+P produces a pi (π) symbol.

In addition to that, the entire top row of number keys doubles as a set of useful functions in concert with the fn key. I’ll list them from left to right:

  • The first button in the row acts as a home button, no fn key required.
  • fn1 opens the iPad’s Spotlight search page.
  • fn2 switches between any languages you’ve enabled. In my case, the only option that pops up, no matter how many times I press it, is English.
  • fn3 summons or dismisses the on-screen soft keyboard.
  • fn4 highlights the text to the left of the cursor’s current placement, adding one word with every press.
  • fn5 does the same, but to the right of the cursor.
  • fn6 cuts any selected text.
  • fn7 copies any selected text.
  • fn8 pastes any copied text.
  • fn9 plays/pauses media.
  • fn0 mutes the audio.
  • fn- volume down.
  • fn+ volume up.
  • fn+delete acts as a sleep button.

And the ones I use most? fn4 and fn5 for selecting text[3], and the media keys: fn9 through fn+. The rest are nice but basically unnecessary to my workflow.

This is only tangentially related to shortcut keys, but I’ve been relieved to discover that all my TextExpander snippets work perfectly with this keyboard. I didn’t know what to expect in this regard but it hasn’t let me down yet.

The (Few) Bummers

With almost any review there is bound to be a list of cons. I don’t like dwelling on negatives if I can avoid it, but obviously it’s important to be honest. Thankfully, this list will be a short one.

  • There is no way to check the current battery status. You basically either know that it’s got a decent remaining charge, or it’s about to die. From what I understand, the way it notifies you of a low battery is a blinking red light, but I have yet to see it for myself. They claim that the battery can last for six months on a charge if used for two hours each day, so the lack of a battery status isn’t an enormous deal but it would be nice to have it.
  • There is no Caps Lock indicator light, so the only way to see if it’s enabled is trial-and-error.
  • Holding the delete key doesn’t gradually speed up the backspacing process the way it does when using the iOS keyboard. You’ve got to use either the fn4/fn5 system or touch the screen to use the iOS text-selection loupe.

And that’s about it. I’ve tried my hardest to look for any other “flaws” but this is all I could come up with. The keyboard is just that good.

In Conclusion

The Logitech Ultrathin has completely changed the way I write on my iPad. The luxury of having an entire screen to work with, unhampered by an on-screen keyboard, along with the ability to type almost as quickly as I would on a full-sized keyboard, is a huge boon for me. Not to mention the awesome portability of the thing and its amazing battery life.

The overall feeling I've had during my experience with this keyboard is one of pleasant surprise. I went in with somewhat low expectations and came out feeling very positive vibes about my purchase. I don't know why I didn't give it a try sooner.

For me, there is no going back from this setup. Of course, I’ll always be able to use the on-screen keyboard if needed for quick jobs, but as long as I can help it, the Ultrathin will always be nearby. I think I’m in love.


  1. From April 13th through the 20th, if you include the two Saturdays of flying.  ↩

  2. His son Josiah was granted such a trip by the awesome Make-A-Wish foundation.  ↩

  3. This almost makes up for not having a mouse/trackpad. Speaking of which, the way this thing makes the iPad feel like a laptop has sometimes fooled me into instinctively reaching for a trackpad that isn’t there. Completely user error, but I thought it was an interesting fact. Time will tell if this habit goes away completely.  ↩

  4. The orientation matters because of where the magnets reside within the iPad.  ↩

Audience Quality > Audience Quantity

Myke Hurley, filling in for Stephen over at 512pixels, explains why he stopped paying attention to stats and numbers:

“At one point, 70Decibels had 12 active shows. At the time, I was checking performance for each one – logging into separate hosting accounts – multiple times per day. I was consumed by the numbers. I obsessed daily, weekly and monthly—desperately trying to find some sort of formula or correlation to achieving success.

Even after we were able to get long-term sponsors on board, I was still meticulously checking these numbers—it became a habit. I wanted to ensure that I was doing the right thing and I felt like I could only find vindication and answers in the graphs.

But then something changed. After listening to that SXSW talk earlier this year I started to consider things differently.”

I've been quite guilty of this same behavior. Always checking my page views, seeing how many people have faved that tweet I'm proud of, worrying about how many subscribers/followers I've got at any given time...none of this is healthy behavior (ahem, sorry Myke, behaviour).

In the last couple of months, I've quickly learned that having thousands of page views doesn't necessarily equate to gaining legions of new, loyal readers. Only a tiny percent of these are what I would call quality page views, and that's been a valuable lesson for me to learn.

Thanks to some much-needed perspective, I feel like I've broken out of some kind of deranged fever. I hardly worry about the stats anymore, and simply try to do good work as often as I'm able. It's good to hear that someone like Myke, a guy I hold in high regard whether he knows it or not, has had the same revelation.

New RSS Feed

Hey guys, just a quick update about the Unretrofied RSS feed. I've set up a new feed over at URI.LV, an awesome service that was built as an alternative to Feedburner (which is likely to die soon, if Google Reader is any indication). Here's the new feed url:

http://unretrofied.com/feed

Why do this? A few reasons:

  • Squarespace still has yet to re-implement RSS tracking. I say 're-implement' because it was a supported feature during the Squarespace 6 beta (and also existed in Squarespace 5) before being dropped.
  • The old feed URL was ugly and more difficult to remember (http://unretrofied.com/blog?format=rss)
  • I want a feed I can control, not one provided by my webhost.

I would appreciate it if you would update your RSS reader to use this new feed, although you don't necessarily have to at the moment. As long as I'm on Squarespace 6, the previous feed will work as it always has. But I may decide to move this site elsewhere someday, and if you update to the new feed now, any future transitions should hopefully be smoother for you as a reader.

Thanks!

An Address to New Readers

Hello, everyone. Over the weekend, my Apple Store piece gained quite a lot of attention thanks to sites like Hacker News and Reddit. The count is still climbing as of this morning, albeit a bit more slowly, but so far it has attracted 70,400 views. This is a high enough number that it makes the previous years' worth of traffic almost look like a flatline:

Needless to say, I've been a bit beside myself watching all of this happen. I never anticipated such a strong response, which has naturally been both positive and negative. The positive feedback I've received has far outweighed the negative, but those few negative responses still bothered me.

After a while, I simply stopped reading the Hacker News and Reddit threads, but before doing so I saw that my story was being called into question. I'm not about to address every single complaint, but I would like to clarify a few things:

  • Yes, these events really happened.
  • Yes, certain parts of the story were a little embellished, a tiny bit of which was for storytelling purposes but mainly because the event took place 6 or 7 years ago and my memory is terrible. In all honesty, they may have all been purchasing iPod Touches rather than MacBooks and I could be misremembering. It's certainly a gigantic difference money-wise but that's also not really the point of the story.
  • No, I don't remember what the name of their school was or why they all knew sign language if they weren't deaf. They may have been training to become deaf translators, for all I know. I had a couple of friends back in high school who were doing exactly that, so I don't think it's outside the realm of possibility.
  • No, I didn't write it to pat myself on the back. It was an experience I had that I felt like sharing, that's all. Anyone who knows me in real life knows that I am definitely not someone who seeks out lots of attention. I wrote this as someone who doesn't expect more than maybe a few hundred page hits on a given day, and that's if I'm lucky! To be quite honest, being in the spotlight is an uncomfortable position for me, as I'll talk about in a minute.
  • When I said the students were going store-to-store, I didn't mean that they went on a huge shopping spree. They were in the mall mainly to visit the Apple Store, but they visited various stores (not every single one) and spent a few minutes simply trying to ask employees questions. One example I remember was a student trying to ask someone at one of the clothing stores where they could find a certain brand of jeans. The point of the assignment was to see how employees dealt with these types of situations, not to buy anything.

After the story blew up, I wondered if very many people were subscribing to the site's RSS feed. I have no way of telling, since Squarespace 6's RSS service doesn't track that sort of thing. I do know that I gained several followers on Twitter and nearly doubled my follower count on App.net.

For a short while, I hesitated to post anything on either service for fear of suddenly alienating all these new people. I've since decided that it wouldn't be fair to myself not to express my thoughts in the way I choose.

I'm going to continue doing exactly what I've always done, which is post stuff that interests me, make the occasional bad joke, and not worry whether or not people who found me through a lighthearted story get offended that I have certain strong political views (just to get this out of the way right now, I'm about as liberal as it gets). I may lose the new followers, and already have lost a few, but I figure they probably wouldn't have stuck around long anyway.

The same kind of thing goes for this site. Any new readers should know right now that I don't constantly post long, personal, feel-good stories. They do come up occasionally but aren't the focus of this site. Check the archives if you want a better idea of what I do here. Yes, I have link-posts like many other tech bloggers do. Sorry if that bugs anyone.

Again, I sincerely thank everyone for all the kind words I've received these last few days, and I hope many of you will stick around as regular readers :)

*Whew!* Now I've got all that off my chest, back to work.

The iPad Apps that Power my Tools and Toys Workflow

One of the topics I’ve been most enthusiastic about lately is the idea of using only an iPad to do all my work. I’m not talking about my day job here, but rather my writing workflow, and more specifically the writing I do for Tools and Toys.

(I would love to have a nice workflow setup for Unretrofied, but unfortunately the Squarespace iOS app is pretty terrible and there are no alternatives due to their lack of an API. So while I may do some writing for Unretrofied on the iPad using Byword, I almost always publish from the back-end CMS on a desktop or laptop.)

Since Tools and Toys runs on WordPress, there are a wider array of apps I can use for publishing, which makes an iPad-only workflow more feasible. I’d like to discuss the apps I use to get the job done, but first it helps to know the ground rules for every T&T post:

  • Each post must contain an image, 600px wide being okay but 1200px being better for Retina displays. Either way, the site will display the image in a 600px wide box.
  • Image file sizes should be reasonable so as not to delay page-load times. The 150kb–200kb range is fine.
  • These images must be hosted on the site’s Amazon S3 account.
  • There are three custom fields used within the CMS: the image link, the product link, and the name of the store/website where an item can be bought.
  • Stephen Hackett and I each have a particular posting schedule, so we need to be able to schedule final drafts to be automatically published at a later date/time.
  • When we link to something on iTunes or Amazon, we must use affiliate links.

Obviously there’s no one app that can do all these things, but I’ve managed to accumulate a variety of apps that have allowed me to do my work on-the-go. So far I’ve managed to get the entire workflow down to a handful of apps.

The first app, Instapaper, comes into play long before I ever write anything. I’ve got a special folder set aside where I like to save ideas for potential products to write about. If I come across something cool out on the web, I save it to this folder and reference it later when it’s time to write a new post.

The next two apps I use are Safari and Mail.app. I use Safari for finding links and images, as well as researching items to make sure I know what I’m talking about when I’m writing about them. When I can’t find a nice, hi-res image of a product anywhere, I use Mail.app to ask the makers of those products if they have any images I can use. Everyone I’ve ever talked to has been super nice and helpful.

Once I’ve got an image, or a set of images, I use an app called Reduce to batch-resize them. I even have a preset stored in the app: 1200px wide, 150kb file size. I run the photos through that preset, and the app saves a copy of each image to a “Reduce Export” album on the iPad for easy management.

The way I currently upload these images to Amazon S3 is with the iFiles app, which presents the most convoluted part of my current workflow. It’s an okay app for uploading, but it seems to have no way of renaming files or copying their public URLs, which is why I’m still on the lookout for something better.

Since I can’t rename from within iFiles, what I’ll typically do is remotely login to my office PC using LogMeIn Ignition1 and do it there. This step is technically unnecessary, but I prefer having a file name that uses the name of the product rather than something generic like “Photo02272013.jpg” or whatever.

Why is that, exactly? Well for one thing, it makes it easier to locate a particular image in our list of previous uploads if I need to. Secondly, even though I can’t copy the public link, I can simply take the url http://i.toolsandtoys.net.s3.amazonaws.com/img/file-name.jpg and substitute the file-name portion with the easy-to-remember file name I just made. A bit ghetto but it works.

Let’s just say that my life will be a lot easier if I can find a suitable replacement for iFiles.

Now that I’ve dealt with images, I’ve got to manage the text stuff. My absolute favorite app for writing and publishing to WordPress is Poster. It’s beautiful, easy to navigate around, and it features everything I need to publish a post, including those custom fields I mentioned earlier.

Next up comes the links. Regular links are easy to copy and paste, but when it comes to affiliate links I have a couple of tools at my disposal. The first one is Launch Center Pro, in which I’ve set up custom URL schemes for each link-type. They both operate based on whatever’s saved to my clipboard. Since this app was more intended for iPhone than iPad though, I tend to use TextExpander snippets to generate the links instead. Poster includes TextExpander support so these snippets are a breeze to use.

Lastly, we’ve got Dropbox. This is where I store any drafts or images I have yet to put together as final posts. I can access them from anywhere, and Poster can pull text files from Dropbox in order to create new posts. Doesn’t need much more explanation than that.

So there you have it. There are still some kinks to be worked out, and the overall process of putting things together could be a little smoother, but the sheer fact that I can do almost everything straight from my iPad is awesome to me.

Before I end this post (which is incidentally about 20x longer than most T&T things I’ve ever written), I’d like to thank Shawn for giving me the opportunity to write for the site. It’s been a blast so far and I look forward to where the site is headed.


  1. This app is incredibly expensive these days at $130, but I bought it years ago when it was on sale for $20 and I had an iTunes gift card.  ↩

CriticMarkup

Gabe Weatherhead of Macdrifter and Eric Hess of The Mindful Bit have teamed up to develop a new syntax called CriticMarkup, which is useful for denoting editorial changes in a document and is fully compatible with Markdown, LaTeX, and HTML.

As someone who doesn't do a whole lot of collaborative writing, I honestly don't have much use for this currently, but I think it's a fantastic idea and something I'll be keeping on my radar.

They've come up with lots of other goodies to go along with the syntax, so head over to Gabe's site to read more about the project or visit the CriticMarkup site itself.

Typekit Integrated Into Squarespace 6

Until now, I've been using various Google Fonts throughout this site's existence on Squarespace 6. I have a free Typekit account, but a lot of the typefaces I really want (such as FF Meta Serif Web Pro and Proxima Nova) only exist on the paid plans and I haven't opted to upgrade just yet.

Today though, those fonts and a lot of others have been made available for all Squarespace 6 users, thanks to a deal the two companies have struck together. This makes me pretty happy.