duplokat

As Marco himself mentioned in a recent Build & Analyse episode, the design of the Instapaper website could use a refresh. I don’t know if he’s planning a full redesign, but I think that with just a few small changes the look can already be greatly improved.

I don’t use the website that often, opposed to the iPhone app, but all the functionality is already there. It’s just that it doesn’t really have that “modern” feel to it. I think the main problem is the header and the huge “this is the 90s” blue links.

You could argue that the links are instantly recognizable, and therefor improve the usability, but I don’t think that anyone will be confused when everything is muted and scaled down a bit.

Today I was archiving some articles and accidentally clicked on the “Text” button, which brought me to this:

Where did this come from? Shows how often I use the site, because I never saw this view before. It’s very clean, smooth and easy on the eyes. I thought that the bar at the top looked especially good, has a very professional look, and might be suitable as well on the main Instapaper site.

So I injected some simple JavaScript and CSS using Glimmerblocker to restyle and reposition some of the elements.

Here’s the current layout:

And updated:

Another example with text-shadow in the header:

Front page:

The differences:

1. I removed the “Hello, email@address.com” part to make place for the tagline. People usually know that they’re logged in, and they can always click on the “Account” link¹.

2. The logo is smaller and integrated into the top bar. I like the contrast of serif for the title and sans-serif for the tagline (or welcome text) and the links in the user panel.

3. I added the vertical lines to user panel links, just like in the read view, and changed the color to grey to integrate them into the top bar. They follow the convention of having these kinds of options available in the top right corner, so there really is no need to attract attention to them. The lines create the illusion of buttons, which seems more polished than simple text links.

4. The font size of the category links just beneath the header is way smaller, and they’re grey instead of blue. This alone changed the whole feel and look of the site quite a bit.

5. I removed all the round borders from the bookmarks and action buttons (“Text” and “Archive”). Although this is partly a personal preference, the current design doesn’t really have anything else in it that’s round, so rounded borders (with a radius of 15px, no less) fall a bit out of place.

6. The “Share” and “Edit” links are muted. Even though it’s less obvious that they are links, the words make it pretty clear that they perform a certain action, so I don’t think it’ll be that confusing. But a light grey border-bottom would fit nicely too.

7. The maroon color from the “Archive” button is now grey, but it’s still there on the “Delete” link. The “Delete” color was a bit darker, but hardly noticeable. Since they’re positioned at the same place, I find it confusing to give them a similar color, since archiving isn’t permanent, easily reverted, and doesn’t require an “alert!” color.

8. I changed the fonts of the bookmark/article titles to a sans-serif typeface. Again, a personal preference, but I find it gives a more “restful” feel to the page, and accentuates the serif “Instapaper” title.

And that’s about it. My goal was to change as little as possible, and mainly to tone everything down and make it look a bit more polished. With a couple of CSS changes and the addition of already existing elements from the read view, the site looks, in my opinion, a lot better.

Google:

We’ve recently introduced new email options. As always, we only want to send emails that you want to receive, so please let us know your preferences below.

Recently I’ve been getting popups like these whenever I log in to various Google services like Apps and Analytics.

By default all the checkboxes are checked, and there’s no way to discard the message. So the only option is to “Submit” these settings to access your account, or to manually unselect each option if you’re not interested in offers and surveys.

These opt-out settings make it clear that they really don’t care about the user, and set it up in such a way that most users will simply hit the submit button to get rid of the message.

I started out by linking this domain to a regular Tumblr account. The problem was that it just takes me too much effort to post something via Tumblr. I don’t like the way their apps/widgets work, nor posting via a browser, and I didn’t have time to learn how their API works to create a more streamlined way to post. Another thing is that I didn’t really feel in “control” of this Tumblr page. I’m a web developer, and I always feel more at ease working with something I created from scratch, tailored to my specific needs.

A while back I came across Second Crack, a static-file blog engine from Marco Arment. The general idea is that you write a post in Markdown, save it to Dropbox, and the engine converts it into an HTML file and that’s that. I really liked this idea, so I set out to create a similar system of my own. So yes, reinventing a reinvention of the wheel. But like the Second Crack readme points out, that’s what programmers do.

So here it is. Even though the back end is a bit different, the idea is the same. I can create a plain text Markdown file wherever I am, save it to Dropbox and my Mac mini server does all the work to convert it to HTML and place it online. No database, or server-side parsing, just a bunch of Markdown files on Dropbox that are automatically converted and uploaded when changed or added.

I’ve seen so many cop/police/detective tv shows over the years that I usually don’t even bother with new ones. This is probably why I never started with Southland, which started airing in 2009.

A while a ago I had some free time and thought I’d give the pilot a try. I was happily surpised and ended up watching all four seasons, save the upcoming season 4 finale.

Overall the content isn’t all that new, but it has a very strong main cast and a lot of focus on character development, instead of just another story of the week. There are many patrol scenes that take place in the city¹, which adds to the feeling that something is really happening, similar to The Shield and The Wire.

The seasons aren’t that long, 6-10 episodes, which makes it easier for the writers to stay focussed. Shows that run for 18-24 episodes often contain a whole bunch of uninspired filler episodes that really don’t add that much.

Another great surprise when I got to season 4: Lucy Liu. She’s a fantastic actress, and her character gets a lot of screen time and development during this season.