Modern Software Experience

2009-01-26

twitter button

content

Once you’ve joined twitter, you may want to consider how to integrate twitter with your existing web site. I considered Twitter Integration options and concluded that the only thing my minimalist design needs is a follow me on twitter link or button.
That is the minimal amount of content I need to let my readers know I am on twitter.

design

That answered the what, but not the how. There remained the matter of design. Many easy choices - such picking some ready-made button and slapping it onto the site - would destroy the clean, uncluttered look I have now.

keeping it simple

The site looks simple, deliberately so, but getting it too look that clean was not so simple at all. Brusquely adding some random element would destroy the design.
To add the twitter link yet keep it simple, I had to consider look, text, placement, and text style.

look

Whatever I was going to do exactly, it had to fit the existing style. So, just downloading any ready-made button and putting that somewhere was out. To avoid visual disruption, the text, colours, shape and behaviour have to match what is already there.

I considered placing a small icon in the footer. That would be fairly unobtrusive, and perhaps I would have gone that route if there were several buttons to place. There is something about a few icons tucked in a bottom corner that appeals to me, and it is a visual design pattern that users are familiar with. Still, a graphical button would be an additional element. More complexity, more clutter, and therefore undesirable.

Apart from the logo and the permalink icon, the entire design is text-only. This keeps the site design simple, lightweight and functional.
So, I decided to add a text-only element to the existing design, and considered that he best way to avoid an out of place look would be to place it near existing buttons using an existing style.

text

The canonical follow me on twitter text has two issues.
First of all, it is a rather demanding text. It is an imperative sentence, telling the visitor what to do. That’s not right. I believe my visitors are smart enough to make up their own mind. I do not want to demand or even just suggest that they follow, I just want to provide them with an option; inform them they can do so, and allow them to do so. The right button will do both at once. The text on that button should be something passive and informative, such as twitter profile, nothing more.

The follow me on twitter text text is not just demanding, it is also unsuitably long for a button. A shorter text is more practical, better suited to some link or button in a menu. The minimal functional text is twitter, and that seems just right.

placement

There are three fairly logical places for placement for a twitter button; at the end of each article, in the menu area on the left, or in the footer.

I immediately decided against placement at the end of each article. Many of the arguments I’ve made against a barrage of bookmark buttons apply. It would not just clutter the design, but it is also rather in your face, a bit pushy and demanding. The twitter option should just be there, and blend into the background of consciousness like other buttons do.

The footer is used for things that apply to the site as a whole. The twitter link does not apply to the site, it leads to another site, so the footer seems inappropriate.

Placing it in the menu area on the left did not seem much better either. All the links there are internal links, an external link does not belong with those.

There is a similarity between the existing buttons and the twitter button that clinched the decision to place it in the menu area and not the footer. All the existing buttons are tag links like blogs have. In this particular web site, these tag buttons lead to a tag page; a page with a list of articles and a brief text for each.
That tag page is a list of brief items. The twitter page is a list of brief items too. That is one reason why the menu area does not seem so wrong. There is also a semantic reason why it is right. However, although the button may belong in the menu area, it still does not belong in the existing menu.

My first thought about placing the twitter button a bit lower, like it is now, was that it breaks the visual rhythm of the links above it and stands out to much. However, the alternatives I considered stood out more and were not half as logical.

style

I considered placing the twitter button with the other buttons. That would provide the cleanest visual design, but send the wrong message. It would suggest that it is the same kind of button as the others, that it leads to page of articles tagged twitter. That is wrong. As much as I like a minimalist design, it has to remain functional, and should not become confusing for the sake of design.
Besides, come to think of it, I might want to add a twitter tag page later, and how would I do that if the text was already taken by another button?
The twitter button would have to stand out somehow.

white outline

I played with the -webkit-text-stroke property to get a white outline around the twitter text, just like in the twitter logo. It did not look too bad, but there were many reasons to not do it.

browsers

|That the outline effect would only be visible in WebKit-based browser such as Apple Safari or Google Chrome and that even Firefox 3.1 Beta does not support it does not bother me. I consider attempts to make sites look exactly the same in different browsers rather misguided. I am perfectly happy with the idea that those who use a better browser will experience more of the web. It rewards users for using the latest and greatest browser and keeps the browser vendors on their toes.

However, it does remain an issue that to the Firefox user all the buttons would look the same, when I am aiming to make it clear the twitter button is different.

standard

What does bother me is that the outline effect is not a standard at all. The working draft for CSS 3 includes text-outline with a slightly different syntax. The webkit-text-stroke property is a just WebKit extension, and this site is coded to standards.

looks

It also bothers me that it is a solution that is specific to twitter. You would not want to use the same design for a Facebook button, and creating a separate text style for each external link, although a distinct possibility, just doesn’t fit a minimalist design very well.

minimal design

These thoughts about text style led to the conclusion that, to keep the design minimal, the twitter button should look like all the buttons in the menu area. Moreover, to make the button stand out, but not distracting, the visual indication should be clear, but minimally impact the existing design.

The solution is a bit of white space. Some white space to visually separate the tag buttons from the twitter button is the minimal visual indication that the twitter button is different, that it is not part of the menu of tag buttons.
What’s more, I did not change any style to add that white space.

semantics

I opted for a semantic solution. The twitter button does stand out a bit, because it stands alone. This design would look better if there were more external links. In that thought lies the solution used here.

two menus

There are two menus. The existing tag buttons are internal links. That is one menu. The twitter button is an external link. That is another menu. It is the menu of external links. That menu has just one item now, but it is a menu, and additional links can be added later.

I did not add a single twitter button, I added a one-item menu of external buttons instead - and everything else fell into place.

menu is a lists

There are no real HTML buttons on this page at all. That menu of tag buttons is really just a list a with links, styled to look like a menu with menu items. That is nothing special, that is common practice for standard-based web sites.

Using a list with list items has a high semantic value. It will translate easily into XHTML 5 later, but that is not why it is a popular technique. It is a popular because it is logical. A list of links is the essence of a menu. A list of links has minimal download size, and is easy to style.

style

The existing style for the list of links already used some white space around the menu items, and a bit more around the menu as a whole. Thus, when I added a second list for external menu, the existing list styles already provided the visual separation between the two menus.

updates

2009-03-30 facebook

I have added a facebook button, so the twitter button does not look so alone anymore. Having these two buttons together reinforces that these buttons are different, that these two are external links instead of internal tags.

2009-03-30 end

An objection to this design is that, for all but very short articles, all buttons will be out of sight once the reader reaches the end. That is exactly why many blogs have an unsightly cacophony of links and buttons at he end of each article.

I considered adding twitter and facebook icons in the bottom bar. I considered making these two buttons float to the bottom as you scroll. I decided on something different, that does not add any text and just a minimal amount of mark-up to each page.

Each page already ended with a copyright message. I’ve now hyperlinked my name to the new What Where page. That is a short page that informs the visitor where to find my content. The link deliberately lacks the icon indicating that it is an internal link, to keep visual clutter minimal.

links

articles

standards