“THISn QUICC BDE4 FROCCDX HJUNOE OV4E3DR TTHJREV N V DOGTG”
Advertising was meant to be a win-win-win solution for consumers, publishers, and advertisers alike.
The big bird is finally out of its cage.
One thing I like most about Tweetie is the ability to drill down into conversations and user’s tweets. The feature is much like that on the iPhone version of Tweetie but with an implementation that is much more desktop-y.
Tweetie also lets you choose your own URL shortening service, and will take long links and convert them to short ones from within the New Post Box. And if you tweet links often, Loren has created a bookmarklet which will take the current Web page you’re on and start a new tweet post with that URL in it (much like the bookmarklet that works with MarsEdit). Info on the Tweetie bookmarklet can be found here.
Also, Tweetie is powered by Fusion Ads. Not only does the free version display in-line ads from Fusion, but even the for-pay version gives you the option to enable the ads.
The fact that Ashton Kutcher interviewed Larry King about Twitter seems surreal to me.
Why wait until Monday when you can read Dave Chartier’s first look now? (Via @Fusion.)
The best hamburger joint in Kansas City. Everything — including the ketchup and mustard — is homemade. (No relation.)
Very cool to watch the progression of the app’s design and development. And while you’re there, the Smule, Demiforce, and AOL videos are also worth viewing. I love how Steve Demeter took his app from idea to demo in just ten days by coding 12 hours a night in-between his 9â€“5.
It is a simple idea made great by putting a twist and a story to it. The twist is that “Birdhouse was built to give you more control over writing for Twitter.” Cameron and Adam built an app that applauds the idea that Twitter can be better if you aren’t constantly telling people simply what you’re doing. Even first dialog box you see when you open the app says, “Birdhouse requires you to have a Twitter account and something to say”.
Birdhouse is the first iPhone app I’ve seen that launched with a story: the demo video had a plot; the pre-published tweets from @camh and @lonlysandwich; and then that same tweet waiting for you to publish once you set up Birdhouse.
This app not only has its own personality, but it helps its users to have one too.
One of my favorite authors, who’s “style is singularly fascinating, graceful, various, subtle, and with a charm all its own.”
These online archives include, of course, some of his most popular books such as The Strange Case of Dr Jekyll and Mr Hyde, Treasure Island, and A Child’s Garden of Verses. But I am most excited that it includes one of my favorite writings by Stevenson, Virginibus Puerisque and Other Papers, which I don’t own and nearly bought on Amazon before discovering this site.
They’ve got fantastic book designs accompanied by interviews and/or clever and relevant info on the design, the layout, and the sometimes book itself.
Sometimes a little design element on your own site pops out to you as suddenly being not quite right. And from that moment forward it’s as if your site has a huge zit right on its nose, and everyone is staring at it, unable to see anything else, anxiously waiting for you to pop it already.
For the past few months I was seriously considering a complete redesign of shawnblanc.net. When I finally sat down to begin the project I decided against a total re-do from the inside out, and went for a bold but familiar realign instead.
The idea to pull the header down was originally inspired by Phu Ly’s WordPress theme, Ambiru. That theme is now 3 years old, and I’ve always admired it. My thoughts to go with a tall header were encouraged even more by the fantastic designs of A Working Library and Designing The News.
My initial Photoshop mockups were with a shorter, 235-pixels tall, header. (235 pixels being one-half the measurement of the text column.) But I didn’t like that height. It felt as if it was reaching for something unique and bold but not quite landing it.
When I launched the design on Monday morning, the header was 350 pixels tall. I liked how bold and un-apologetic that size was. Not only did it look particularly great in a large browser window, but even those viewers with the shortest browser-window height of 410 pixels (according to my Mint stats), could still see the first post’s heading.
However, after letting it sit for a few hours and then coming back and staring at it, I got to thinking about those 350 pixels; that perhaps they were, in fact, a bit too much. As if they made the statement that the header was the most important element on the website — which it’s not. I then dropped it to 313 pixels (two-thirds of the text column’s width) but it still felt like too much.
The header is now 300 pixels tall, and, like Goldilocks’ 3rd bowl of porridge, is just right. Though 300 pixels does not fall onto the grid of the site, the baseline of the masthead and navigation menu sits at 255 pixels from the top, which is one-third the site’s total width of 766 pixels.
The header has been, by far, the primary topic of feedback; a lot of people like it, but a lot don’t. I wonder how much the power of suggestion influenced their opinions? My previous post which announced the new design was titled “A Very Tall Header”. What if instead the post had been titled “Finally, Some White Space and Breathing Room”? Perhaps the negative response would have been less? Who knows? Nevertheless, the negative feedback about the header has ceased. Perhaps shrinking to 300 pixels tall was all that was needed.
Ultimately, what I like most about the header is that it’s so big it’s polarizing. It is such a stand-out design element that people seem to either really love it or really not. And I’m o.k. with that because, like it or not, the thing has personality. And that is precisely what I wanted.
Color and Texture
As mentioned earlier, for a long time I considered a total overhaul of the site, which would have meant taking it to a dark on light color scheme with serif body text. The colors and fonts that people like Sean Sperte, Pat Dryburgh, Mandy Brown or Daniel Mall use on their sites kept teasing me to abandon the current branding of shawnblanc.net for something on the opposite side of the spectrum…
But I just couldn’t do it.
This site is nearly two years old, and even though I had the itch for something totally new with this refresh, I felt that keeping the visual familiarity was important for two reasons:
First of all, when you read someone’s site you are imagining their voice. Not only is that voice influenced by the style of their writing, but also by the design of the site itself. Drastically changing the colors and fonts of a site can have serious impact on the reader’s pre-established and familiar voice of your site.
Secondly, not everyone subscribes to a site the first time they visit. It could be months or years in-between visits, and most likely not by the same channels. Having a familiar element is, in my mind, crucial to a visitor thinking “Hey… I’ve been here before. This site must be pretty amazing; I think I’ll subscribe.” 1
What I did do to improve readability was take the texture that used to sit behind the content and move it into the header. I then made the header a little darker, and lightened up the background color for the main content.
Here is a side-by-side comparison of the same text with the previous, darker background on the left and the new, lighter background on the right:
An Aside Regarding Fonts
One negative about light text on a dark background is that, in general, the font weight often appears to be more bold. It is not actually bold, but the color-contrast as the stroke blends into the background is more harsh with a light-colored font on a dark background than the opposite.
Compare these two screenshots of the same title, in the same font family and size, but on flip-flopped color schemes. The darker letters on the right look thinner:
Looking at this cross-section of the “H” from the “Hello” zoomed in to 1120%, and comparing the stroke width, you can see how the darker colored letter blends into its light background much quicker, giving the appearance of a thinner stroke, though in reality the light and dark legs are both 5 pixels wide.
Styling of Links
Continuing on the issue of color: I got a couple questions regarding my rhyme and reasoning behind the seemingly sporadic styling of links.
If you count them up, there are about 10 uses for links on this site — each one with a unique placement and/or styling. But I see them all as just two types of links: expected or unexpected.
Links such as the navigation bar, the article titles, the word “Permalink” at the bottom-right of a post on the index page, and others are expected — the reader sees that word and they don’t need it to be orange to tell them it’s a link. Simply due to its context on this site and the consistency of the web, the reader is rightly and easily able to identify it as a link.
Since the orange is such a bold color (and too much of a good thing can spoil it), expected links, when in their un-active state, are the standard body-text color. Hover over those links and you’ll see the orange right away — proving your assumption was right.
Those links that are unexpected — such as words in the middle of a paragraph — need to be highlighted and styled so the reader knows they are links. Welcome to web-design 101. No further explanation needed.
And why the inconsistency between underlined and not underlined? That comes down to my personal taste. You’ll notice that only links in body text are underlined. I think the underline looks great there but not in the sidebar or footer (where I think it looks cramped). Thus, for the sake of design rather than consistency, not all links are underlined.
A primary goal of the realign was to clean up and simplify the sidebar without loosing any of the elements in the process.
The previous sidebar’s contents were center-aligned. Though it looked good by itself, when looked at in context to the whole site it felt, to me, that the contents were floating and cluttered rather than securely and carefully placed. Left-aligning the sidebar helps the contents feel more secure.
Shrinking the sidebar from 232 pixels wide to a more slender 219 not only tightens the whole thing up, but also gives some additional breathing room between the left edge of the sidebar and the right edge of the content.
The “Get the Best RSS Feed Known to Man” button has been removed and replaced with a simple “RSS” link in the navigation menu. I am banking on the fact that those who want to subscribe to this site’s RSS feed don’t need me to remind them by placing a big button in their path. If they don’t already have a bookmarklet set to add a site’s feed to their reader, they are using a browser that identifies and provides a link to the site’s RSS feed right in the address bar.
I will admit that I was a fan of that button. It, too, had personality. It will be interesting to compare RSS readership growth over the next few months and see if it’s effected or not. My guess is it won’t be.
The previous sidebar had two typographic images highlighting some quality archives. In the original mock-ups I toyed with some new revisions of those designs, but I couldn’t land a concept that I liked. I still wanted a way to point people to some of the quality articles I’ve published here over the years, but I didn’t want to simply post a list of articles right in the sidebar. So I decided to try the route of a Popular Articles page. Unfortunately those are quite common and not always viewed as exciting or interesting.
Ironically, the content on my 404 page is specifically built for the uncertain, first-time visitor. (Though I will admit it still needs some help.) And being challenged to check out a 404 page is much more intriguing than a popular articles page any day.
However, I have a feeling that there is still a better solution out there, I just don’t know what it is. Reworking the 404 page? Making a dedicated “favorites” page after all? Something else all together? I’m not sure at the moment.
An Element of Style
Link posts now no longer have a dash after the title. My original intention for doing that was to help distinguish the title of a link post from the commentary underneath it, and to set it apart as being its very own post title, and not just a link that is part of the previous article.
But I learned that the dash after the title is poor form. And more than that, I don’t think it’s necessary. The link-post title is clearly identifiable as-is. I should have stopped doing it a while ago, but just never did.
Shawnblanc.net got realigned over the weekend and now sports a somewhat new look.
The site still feels familiar since the colors, fonts, and general layout have hardly changed. A few areas have been polished (specifically: the sidebar and the navigation), while the most noticeable change is obviously the very tall header (I figured go big or go home).
If you see something that looks busted, please let me know. And for those who look forward to geeking out on the what-and-why details of the realign, I will have a post up in the near future.