Bram Pitoyo, Interlude, Links

Case Study: Making OakHazelnut.com Read Better [Updated with picture examples]

A blog post on OakHazelnut.com, before and after optimization

OakHazelnut.com is a working portfolio site of Amber Case: an amazing independent journalist, search engine and social media consultant. Her site is one that is a resource to the community, and thus is seen by thousands of readers every month.

However, because it contains ample amount of informations (a typical post weighs in at about 750 words) the site has to be easy to read. So easy that only the text that is absolutely necessary to the content shines, while other materials regress. Add the fact that she publishes an article every two days to this.

Readability and legibility is of further concern because, while the OakHazelnut.com’s ultimate goal is to get more subscribers, most readers still interact with its web interface, or at least use it prior to subscribing.

Objective and Challenge

As a typographer, my aim was to make OakHazelnut as easy to digest as possible. As a publisher, Amber Case needs a vessel that will, like Beatrice Warde’s Crystal Goblet, be robust enough to hold any content that she throws at it.

Right off the bat, I was presented with the challenge that the visual language of the site must stay as similar to the old as possible. This makes sense. After all, OakHazelnut.com has been known to use the same theme throughout its inception, GreenWave, and thus must remain consistent.

This means that tweaking navigation scheme is okay (and even encouraged if it can mimic those of other sites to encourage familiarity) but switching images, color scheme or number of columns around must be avoided, or done very subtly at best.

In addition to this, because the author installed many plugins and changed many lines of code already, shifting the structure of the CSS (ie. reorganizing classes) was not to be done, to avoid breaking the theme.

The many plugins installed at OakHazelnut.com

With these constraints in mind, I got ready to work.

The Four Step Process

1. Standardize Typography

The default GreenWave CSS specifies three different kinds of sans serifs, impeding consistency

The very first thing that I set out to do was standardize the font family used in the site. Many themes rely on using different families to distinguish content. This is fine, but only if done well Blogs have many layers of information that need to be distinguished from each other. For instance, a typical blog page may have:

  • Blog title
  • Blog description
  • Navigation
  • Secondary navigation
  • Blog post title
  • Post heading (h2 through h6)
  • Meta information
  • Body text

And in most cases, using one font family is enough to get the job done.

But if one would choose to use two, this is how one might group them. One font per group.

Group 1

Primary Information, one where you want the eye to go look at first. Ideally, you would be able to simply hover from item from item in this group and get the gist of the blog.

  • Blog title
  • Blog post title
  • Post heading (h2 through h6)

Group 2: Secondary

  • Blog description
  • Body text
  • Navigation

Group 3: Tertiary

Informations to be “read later” (in most cases, one would group them with Group 2)

  • Secondary navigation
  • Meta information

On Choosing Typefaces

Some fonts are better suited for one purpose than another. For example:

  • While Lucida Grande/Sans and Verdana looks and reads well at smaller sizes, it quickly loses subtlety and elegance when set as headlines (Lucida is more resilient.)
  • Helvetica, Arial, Times New Roman, and now Georgia, work equally well at relatively wide range of sizes, thanks to our habit of reading and therefore getting used to it over a long period of time.
  • Trebuchet MS, tend to be used prominently at large sizes but hadn’t found many uses in body text (even though it’s just as readable, this I don’t know exactly why.)
  • Others, like Hoefler Text, Baskerville and Didot, may be unsuitable to be set small thanks to the monitor’s low resolution
  • Others still, like Futura and Gill Sans, comes by default on Mac but never ended up getting used very much (the reason is obvious, for using a font that isn’t installed on 85% of the Windows-platformed systems does not make sense.)
  • Finally, Tahoma is face that comes with almost every computer, and one that I find to be of a fitting use in subheadline situations (the spacing is too tight on smaller sizes, yet the construction does no display subtlety at large sizes.)

Getting Into The Code

View GreenWave’s original CSS file.

View OakHazelnut.com’s CSS file.

Of course, then, even though I was forbidden to reorganize the CSS class and ID structures, I must in some ways put some order in its structure. Right off the bat, I noticed (code shortened to highlight important points):


body {
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
}
#menu_search_box {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#header_center_text #header_center_body {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#header_title span {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#menu {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#blog_right #sidebar h2 {
font-family:Arial, Helvetica, sans-serif;
}
#blog_right #sidebar ul li {
font-family:Arial, Helvetica, sans-serif;
}
#blog_right #sidebar li a {
font-family:Arial, Helvetica, sans-serif;
}
#blog_right #sidebar ul li ul li {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#blog_right #sidebar ul li ul li ul li {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#blog_right #sidebar ul li ul li ul li a {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#blog_left #blog_comm .comm_panel {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#blog_left #blog_comm .comm_text {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#blog_left #blog_comm #comm_post_form td {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#blog_left .item_class .item_class_title_text .date_month {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#blog_left .item_class .item_class_title_text .end_title {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#blog_left .item_class .item_class_text {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#blog_left .item_class .item_class_panel a {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#blog_left .item_class .item_class_panel a:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#footer #footer_text {
font-family:Verdana, Arial, Helvetica, sans-serif;
}

Notwithstanding the fact that Helvetica and Helvetica Neue should be specified in front of Arial whenever possible, and that mixing two sans serifs is generally not a sound principle to follow, specifying the same font-family set over and over again for very small levels of CSS class is simply redundant.

To remedy this, I did a Find-and-Replace run, deleted all occurrence of “font-family:…” and replace them with:


body {
font-family: "Lucida Sans Unicode", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
strong, em, b, i {
font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6, address {
font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

These lines of code does much of the same thing that the redundant blocks above do with only the lines that are actually needed to do the job, and nothing more. Much better.

On Choosing Lucida

Note how I specified a different set of typeface to replace the default set that the WordPress theme had. Why did I chose an odd combination of Lucida Sans Unicode, Grande and Sans? And why did fall back on Helvetica Neue, Helvetica and Arial?

Technically, I used a solution from SixThings called “Lucida Hybrid.” Put simply, Lucida Hybrid aims to combine the best of:

  • Lucida Grande – only available on Mac, no italic, renders beautifully
  • Lucida Sans Unicode – available on Windows, no italic, renders beautifully
  • Lucida Sans – available on both platforms, has italic, but the normal weight renders poorly at certain sizes

Typographically, I used the Lucida family because it’s the same face that Mac OS X uses to set the UI texts—bringing familiarity, therefore allowing the typography to disappear and content to shine. On the case that a Window user don’t have this family, the CSS will roll back to Helvetica Neue first, then Helvetica, and, if nothing else is possible to use, Arial. Again, Helvetica and Arial are two faces that computer users are used to seeing.

2. Enhancing Body Text Readability

My next objective is to soup the body text up. GreenWave’s default CSS specified:

#blog_left .item_class .item_class_text {
color:#8a8a8a;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
line-height:20px;
}

This is the right idea. Any small type on low resolution display must be generously leaded to avoid clumping, and Verdana reads well at 11 pixel. However putting an #8a8a8a (roughly 50% grayscale) color on a white background provides too little of a contrast for such ample amount of texts to read well.

My solution:

#blog_left .item_class .item_class_text {
color:#262626;
font-size:12px;
line-height:20px;
}

On a lit display like a monitor, specifying black (#000) on white (#fff) is too jarring for the eye. I avoided it by using a dark shade of gray. The same solution is used in most books that are printed in slightly tinted, “egg white” paper, because reading a bright white, glossy paper is not easy.

Note how I kept the line-height generous, but increased the font-size by one pixel.

3. Standardizing Behavior

Next, I looked at how the links behave. Notice how, by default, the theme behavior specified light grey for body texts and dark grey for link colors. This is very helpful, but note how hovering at the link does not actually change it in any way. It remains dark grey. No highlight. No underline. Nothing. To aid comprehension, links behavior should be standardized:

  • Every link color inside the body of the blog, if put on top of a white background, should be colored green. This includes regular and meta information links. Exception: Post Titles, because it’s big enough to be distinguishable from the rest of the text.
  • Every link color, if put on top of a non-white background, could be colored white or grey, depending on the needs and color contrasts
  • Every link put on top of a white background, when hovered, should be colored in light green, then underlined. Exception: Post Titles, because underlining a text with small leading isn’t pleasing to the eye
  • Every link put on top of a non-white, when hovered, could keep its color or switch to light green, whenever appropriate and beneficial to page contrast, but they should always be underlined.

4. More Tweaks

The last step is to change more colors, increase more leading and decrease more type sizes. To regular readers, the tweaks are subtly visual at best; but remember: the more readers voraciously dive into the material itself without noticing how the type was set (except on highlighted elements), the more the typography had succeeded.

A fuller comparison of an OakHazelnut.com blog post, before and after typography treatment

Ready To Make Your Site Or Blog Read Better?

Advertisements
Standard
Bram Pitoyo, Interlude, Links

Get Your Name On The Portland Tech Twitter Wiki And Help Evangelize Portland

Let’s say that you’re someone who works in the creative or tech industry, who is new to Portland or are visiting the city.

Actually, let me back up, you could also be anyone who is curious about Portland, and is watching the beat of the city.

You may have visited the city on several occasions. Or you have have just settled in your new place. And you’re looking for a user group, meetup, or a venue to learn something useful. You may start bookmarking events and going to them. Then you meet someone, who tells you that almost all the community member uses Twitter to communicate with each other inbetween the usergroups, meetups and venues.

But you don’t know how amazing Portland is—not yet. All you have is an invitation to join “this microblogging thing called Twitter” and the Twitter username of your newly met friend at the usergroup, meetup or venue.

So your friend says:
“If you’re on Twitter, follow me @JohnSmith!”

But then you ask:

“Sure, but who else should I follow on Twitter?”

And your newly met friend replies:
“There’s about 50 of them that would be perfect for you to follow, but that I can’t think of right now. Can I email you when I get home?”

Here’s the problem: there’s a chance that the email will never get sent, and you may never discover how vibrant the local creative/technology community is.

What a waste of opportunity, right?

But what if your friend can refer to a page that has Twitter handles of all Portland creative and technology community member, along with a short description of who they are and what they do (and even a profile, if you’re that curious)?

Let’s call the page Portland Tech Twitter wiki. And the URL: http//tr.im/ptt

And, lo: you’re able to search for Tweeples to follow based on your interest, and your friend don’t have to blame his inability to recite names of 50 Portland area Tweeple—impromptu!

All we need now is the “50 Portland area Tweeples” bit (which, in reality, is closer to 5,000 Tweeples.) Because Amber Case, Mark Dilley and I couldn’t possibly type all of your usernames, short bios and profiles up.

But you can.

So, could I ask you a favor?

  • Go to the Portland Tech Twitter wiki
  • Edit the page by hitting “Edit Wiki,” and then
  • Add your Twitter handle, name and short description to the list, or correct your description—mostly made by Amber Case and I rather hastily (I try my best to be snarky)

That’s it. There’s even this code that you can Copy and Paste to the wiki edit window to make it easier:

:[http://www.twitter.com/YourUsername @YourUsername] – [[Your Real Name]]
::A short description about what you do, and your day job at [[ThisCompany.com|This Company]]

The goal is so that everyone can refer to the page when they meet someone who is new or curious to the city and its communities, and make it easier for everybody find people who he/she may like to converse with on Twitter or meet in real life. New friendships are thus made. Connections are born. And communities, grown. And everyone leaves the room after the meetup better than when he/she came.

So add your name to the Portland Tech Twitter wiki, won’t you?

And don’t all go hit the “Edit Wiki” button together.

Thank you.

Standard
Bram Pitoyo, Etc.

Tweet: An Apple Alert Sound

Good afternoon,

Last night, when we worked on cleaning up the audio cutoffs from our Hazelnut Tech Talk Episode 8’s interview with Sarah Lacy, we made an Apple Alert Sound.

It came rather accidentally, when, in a desire to test just how well can Audacity’s “Remove Noise” filter works, we apply it to a small segment of the audio.

And now we can introduce to you: The Tweet Sound (right-click and direct download it.)

Instruction: (here’s Apple’s official instruction)

  • Go to Finder
  • Hit Apple+Shift+G or click on the menu “Go → Go To Folder…”
  • Type “~/Library/Sounds”
  • Drop the Tweet.aif file into the newly opened window.
  • Go to System Preferences → Sound

The Tweet Sound should be located on the bottom of the list.

Enjoy!

Standard
Bram Pitoyo, Etc., Interlude, Links

An Interview With Tyler Jackson Of Ghost Toast

On Friday the 9th, Amber (@caseorganic) and I attended Art Comp Live 2008 at Backspace.

Art Comp Live 2008 at Backspace

Joining us were our friends Sarah O’Brien (@moneteva) and Derrek Wayne (@derrekwayne.)

Derrek Wayne, Amber Case and Sarah O'Brien, Pedicabbed On Waterfront

The event was impressive, to say the least, and Sarah wrote a recap more extensive than what I could hope to capture.

But somewhere along the night, an artist caught our attention.

(Note: All images of the artist are

uploaded by Chris Faulkner.)

To my regret, he did not finish his work on time nor win the money prize. But the three-hour that he spent working on the toy showed that he was more than a craftsman.

So we bid him to send pictures of the finished product—

Front View Of Wooden Toy Made By Ghost Toast's Tyler Jackson

Side View Of Wooden Toy Made By Ghost Toast's Tyler Jackson

Back View Of Wooden Toy Made By Ghost Toast's Tyler Jackson

—and then to answer several questions so you, gentle readers, get to know more about him.

Here we go.

About Me:
I am originally from NH but I claim Hendersonville, North Carolina as my hometown because I went to high school there and basically my oldest friends only go back that far. I am the eleventh child in a family of fifteen children (9 boys, 6 girls). I had an amazing childhood and although we were dirt poor I wouldn’t trade it for anything. I moved to Portland in 2003 to finish my degree at the Pacific Northwest College of Art and when I graduated my wife Emily and I just could not leave. We have a great group of friends here and the opportunity to make art was very compelling in our decision not to leave.

Q: How did you came into woodworking?
A:
Actually, I started making wooden toys quite recently. My wife and I had a baby in April and I am already really excited about making things for him. I have done quite a bit of casting of plastic figures in the past, but I really wanted to get away from this for several reasons including cost, safety and environmental impact. I wanted to make something that I wouldn’t mind my kid sucking on. I started messing around with some wood shapes, drew up some sketches and created some characters I liked but I never actually made a wooden toy until the night I participated in ArtComp. Since then I have made several more and I am becoming comfortable with the process.

Q: When you look at a piece of wood, or a dowel, or anything, do you think about what you can build with it?
A:
These things are coming to life in two ways. The first is a very organic process. I have shapes of wood and as I hold and study them something pops into my head. I begin to combine shapes and eventually I have a toy. I sketch out my idea and then I make it. The sketches are not fool-proof. Often things don’t go together like I imagine they will, or they look weird so I improvise a solution.

The second is exactly the opposite of this. I draw a character I like and then find the pieces to make it happen.

Q: Could you send a list of tools you use? How many different sizes of drill bits? How do you get the pieces to fit together?
A:
The tools are developing just like the process, bit by bit. I have a couple tools that are staples of the work. A miter saw, a drill press, a scroll saw, a drill, a dremel, and a nice big vise. Everything else I generally get as I discover I need it. I live close to a Fred Meyer so I often just ride over to their tool section if I need something.

(Below are questions blatantly ripped off Portland On Fire’s)

Q: What are you up to?
A:
I work as an interactive designer for Downstream in Portland although I am definitely a little more dreamy and not quite as anal as most great designers are. Personally, I just make stuff. I have a very short attention span so I am working on like fifteen projects at once, which has its ups and downs.

Currently I am working on three big projects including a series of large-scale photos about a fictional character named Sir Bishop Jenkins (who is stranded on an island with a group of men all of whom are all living beyond death hoping to leave the island). I also just finished writing a children’s book about a wrestler named the Incredible Skull and I am working on the illustrations right now. And finally, I am making wooden toys.

Q: What are your passions?
A:
Art has always been my biggest passion. I have been drawing and making things for as long as I can remember. I like to play sports. I play soccer, basketball, dodgeball, softball and I also run a lot as well as some snowboarding during the winter. I have a lot of energy to expend. I am passionate about my friends as well. They are a very important part of my life and, since I live so far from my family, they are very much my second family.

This may sound stupid, but I am really into the Gabriel García Márquez book, One Hundred Years of Solitude. I read it at least once a year, sometimes more. I probably have read it between 10-12 times. It is one of my greatest pleasures.

Other than that, I am really into my work. It is always nice to meet people or have people tell me that they like my artwork, or want to buy something I have made but I would still be doing it even if no one cared. I guess that’s passion to me, doing something even if its only reward is what you find in it.

Q: Share your thoughts and feelings about Portland.
A:
I love Portland. It is just a great city to live in. I like the size of Portland a lot. I like the fact that I recognize people I don’t even know because they go to the same places, events, and seem to move in the same circle that I do. I like riding my bike, so you can’t really do better than Portland for that. I also feel that politically Portland is well aligned with my personal beliefs, generally open and accepting of people. Plus, the food here is great and I like rain.

Q: How can we connect with you?
A:
I have an online portfolio site, ghost-toast.com, which I am currently rebuilding. It has taken me several months to get it going and I still haven’t finished all of the pages. Being on the computer for my job, I am not very motivated to spend time on it when I am home. This means my site never has my latest work up, which is something I really want to be better about.

I don’t spend much time on the internet. I wouldn’t say I am disconnected, but that’s just not how I spend my free time. To me the computer is a tool just like any other. I use it when I need to for finding reference images or whatever, but when that task is done I am off. There is just so much for me to do that doesn’t involve sitting in front of a monitor.

Tyler’s email is tyler@ghosttoastdesign.com

Standard