Getting Serious with a New Design

New design in effect at Perishable Press. It’s sort of a hybrid between some of the things I like about the Quintessential theme and some of the best parts of the subsequent Requiem theme. So this new theme is named Serious because it represents a renewed commitment to design, blogging, and everything I love about working on the Web. While I have everything fresh in my mind, here are some of the highlights of the latest incarnation of Perishable Press..

Focus on content

This is the primary motivation for this new design. My previous Quintessential theme was a colorful, psychedelic, post-modern crowd pleaser, but it was also entirely design-centric. It ~~said~~ screamed “look at me,” which was fun and all, but it’s time to get serious, so to speak. With this new design, the focus remains on the content, with every aspect of typography, composition, and imagery working to unify and emphasize the high-quality content that I strive to create. As they say:

Good design doesn’t say “look at me,” it says “look at this.”

Sidebar or super-footer?

Why not both. I absolutely love single-column designs, but there is a certain practicality to having key information available right there next to the article. My Quintessential theme had hundreds of links tucked into the scrolling sidebar panels, and the following Requiem theme went in the opposite direction with only a footer menu and no sidebar at all. With Serious, I wanted to combine the best of both worlds and went with a sidebar for on-site stuff and super-footer for the social-media, friends, and projects stuff.

Advertisements?

I gave this one a lot of thought. This is the fourth year of Perishable Press and the 19th redesign, and I have never put any advertisements on the site. I think there are pros and cons of doing so. The obvious benefit is the extra income, but the downside is being stuck with a bunch of uncontrollable material appearing on your site. The money is tempting, but for the time being I have decided to retain my commercial-free integrity.

New Logo

Perhaps the most significant change is the new logo. I tried like the dickens to get that old Rez-font sun logo to fit the bill, but it just wouldn’t gel. After some experimentation, I decided to roll with the triple dropped “e”s and half of the original sun icon. Way back in the days of pen-&-ink drawings and percolated bong hits, the “Perishable” logo was frequently deployed with either dropped letter “e”s, backwards “e”s, or both. Seeing that classic format here on the site is a good reminder.

Nice ‘n clean

One thing that I really wanted to do with this new design is clean things up and stay focused on what’s truly important. Rather than trying to link to everything from the sidebar and footer, I consolidated conceptually related information into second-level pages and just linked to them instead. A good example of this is the site Dungeon, where I give props to friends and software, share my accomplishments, reveal site statistics, and so on. Having all of this stuff on a single page eliminates clutter from the sidebar and footer. There’s just too much content on a site this size to connect it all at the top-level of the hierarchy. I think this new theme makes great strides toward a more streamlined organization.

Color palette

With its white-text on dark-background, the previously active theme (Quintessential) fried a lot of retinas. There is a way to do light on dark, but it’s a delicate balance of hue and contrast. Even just a few shades off and it’s gonna get painful — tracers, ghost text, and bleeding eyeballs in general. After much calculation and testing, I think I conjured up a color palette that’s much easier on the eyes. Using off-white text against rich tones of brown softens the edge without sacrificing contrast. So the readability is improved, and by sticking with only a handful of colors, the design conveys a sense of unification and harmony.

Custom fonts

The typography connoisseur will immediately recognize the use of Museo for headings and Monaco for <pre> and inline code snippets. This is accomplished by the increasingly supported @font-face CSS selector, which makes it possible to display custom fonts directly through the stylesheet. No JavaScript required, but support is either hit or miss as newer versions of popular browsers continue to embrace the functionality. Personally, I think the Museo font looks great. It’s been used on a number of other highly popular sites (including CSS-Tricks), and I predict that it will catch on like wildfire and become the next big font trend.

Uniform link styles

I think it is important that hyperlinks look like actual links. They should be easy to recognize as links, look uniform in appearance, and exhibit the same behavior. As obvious and simple as this sounds, I always find it challenging to accomplish in my designs. Many of my older themes fail in this regard, but the minimalist Requiem theme goes above and beyond with uniform links that are actually blue. The new Serious theme doesn’t go quite that far, but a simple look around shows that the links are definitely uniform.

Other bells & whistles

Instead of going on and on, I’ll try to summarize some of the cool bells & whistles:

Lots of progressively enhanced visual effects for the header, sidebar, links, code et al
Super-cool <pre> code areas. Following my own advice, I pimped out the pre code with auto-expanding boxes, hover effects, and better IE support.
Collapsible Twitter updates with cookies to remember user preference
Imported latest images from my graphix archive, Perishable.biz
Drop caps (in most browsers) on the first paragraph of each article
Fancy tooltips courtesy of the awesome qTip jQuery plugin
Toggling informational panels to keep everything nice and tidy
CSS-based graphical indication for external links
Auto-clear/restore input fields to make it all sweet

Plus all sorts of other stuff that I probably shouldn’t have bothered with, but it is so much fun playing with CSS and jQuery that I just couldn’t resist ;)

Performance

Of course, all of this fancy-pants design stuff would be pointless if site performance prevents people from participating. To optimize performance for the Serious theme, I tried to do as much client-side and server-side optimization as possible, including everything from image sprites and minified code to content compression and expires headers. You can check the results for yourself using YSlow or similar.

Cross-browser consistency and validation

The most painful part of any decent web design is getting them to look good in as many browsers as possible. To accomplish this, I relied heavily on multiple computers, Adobe Browsershots (which didn’t work that great), and the always helpful Chris Coyier. Overall, I think most of the bugs have been ironed out, but definitely let me know if you see something that looks off, broken or whatever.

As for validation, well I really haven’t bothered with it so far. After the theme is active for awhile, I might check a few pages, but honestly I stopped caring about validation once I realized that I don’t really need it. Not to sound boastful, but when you can code a site like this with Notepad, you don’t need the W3C to hold your hand along the way. Sure validation is great for double-checking your code, but if everything is doing what you want, there is no need to waste too much time trying to ensure strict obedience to every obscure rule in the book.

Feedback appreciated

Let me know what you think of the design and please contact me or leave a comment if you spot anything that looks out of place. Thanks! :)

About this article

This is article #726, posted by Jeff Starr on Monday, November 30, 2009 @ 08:17am. Categorized as Perishable, and tagged with news, Perishable, redesign, themes, update, WordPress. Updated on acid. Visited 91684 times. 54 Responses »

Bookmark • Trackback • Comment • Subscribe • Explore

« It’s Here: Digging into WordPress! • Up • Stupid WordPress Tricks »

54 Responses

1 • November 30, 2009 at 11:24 am — Alex Denning says:

Great stuff Jeff! The contrast between text and background is close to perfect as it can be :) Really impressive.

(and thanks for this ;) )

2 • November 30, 2009 at 11:36 am — Jeff Starr says:

Thanks Alex! Glad to hear the contrast is looking good. I know that was a primary goal for this design.

Absolutely my pleasure on the link — you’re one of the good guys :)

3 • November 30, 2009 at 11:53 am — Alex Denning says:

you’re one of the good guys

Can I quote you on that? In all seriousness though fantastic design; great work.

4 • November 30, 2009 at 11:53 am — Eddie Giese says:

Looks awesome, Jeff! I like how the color scheme is based on your sun logo. One thing I noticed in your CSS is the use of text-shadow for the headings and some other items. This doesn’t show up in FF3.5, but i know -moz-text-shadow does. Have you given any thought to including that in your stylesheet? Thanks for all your advice on Perishable Press, it has helped me solve countless problems!

5 • November 30, 2009 at 11:56 am — Eddie Giese says:

Disregard what I said about the text-shadow property. I see what you’re doing now! Sorry!

6 • November 30, 2009 at 12:01 pm — FreewareMatter says:

I prefer this theme than previous. The typography is good (but the font size is small, and it makes me hard to read). And the color shame is cool :)

7 • November 30, 2009 at 12:02 pm — Jeff Starr says:

@Eddie Giese: Thanks! That is an awesome tip - something that will definitely help. As you noticed, I am using the text-shadow property to keep text looking thin in Safari and similar, and with the -moz-text-shadow selector I can now see if it will help in Firefox. Thanks for the tip :)

@FreewareMatter: Glad you like it! The color scheme goes very well with your gravatar ;) Thanks for the input on font size. That is also very important for good readability, but I really like the way 11px Verdana looks on the screen. May I ask what size monitor you are using?

8 • November 30, 2009 at 12:07 pm — Matthew Simmons says:

I really like this redesign. Lot of good work went into it.

Thanks for all of the good info you’ve been giving out.=D

9 • November 30, 2009 at 12:10 pm — Jeff Starr says:

Thanks Matthew! Glad to hear you like the design =)

10 • November 30, 2009 at 12:46 pm — paul says:

I think the design is very nice, but I don’t like reading on a dark background. It makes my vision all weird :)

11 • November 30, 2009 at 1:46 pm — Jeff Starr says:

@paul: I can appreciate that completely. The previous theme would really fry my eyes out. I think this one is much easier to read, but just in case it’s not, I do provide 18 alternate themes to choose from. This link is also available in the sidebar or footer of most of the other themes (and this one). For a clean, dark-text-on-white-background theme that is super-easy on the eyes, check out the recent Requiem theme. It’s still one of my favorites! :)

12 • November 30, 2009 at 2:07 pm — Luc Latulippe says:

Looks great! Caught me off guard because I was on the site while you uploaded it, so when I clicked to the next page, suddenly everything looked different!

13 • November 30, 2009 at 2:12 pm — Jeff Starr says:

@Luc: Ha! I was hoping that wouldn’t happen to anyone, but yeah, there were people visiting the site when the new design went live. Hopefully it wasn’t too shocking! ;)

14 • November 30, 2009 at 3:07 pm — Josh says:

I have a question. I have noticed that the drop caps on your site are perfect. On many sites I have seen them used on the top and bottom of the drop cap do not align correctly with the top and bottom of the respective line of text. This annoys the crap out of me! So my question is how? Even in IE it looks great. I know it can be cumbersome to answer every little individual question so maybe it would be a good mini post subject. I am sure I am not the only one that could benefit.

15 • November 30, 2009 at 3:08 pm — Jeff Starr says:

@Josh: It wasn’t easy, that’s for sure. I wrestled with many different styles before finally nailing something that worked in most browsers, and even then I am using conditional stylesheets to clean things up in IE. They do look good in most modern browsers, but as you get into some of the older versions of Camino and Safari, for example, they tend to shift in one direction or the other. Even so, I think it would be a good idea to share a quick tutorial on how to style cross-browser drop caps. Hopefully I can work something up here soon. Thanks for the idea :)

16 • November 30, 2009 at 3:09 pm — renczus says:

You say good design says ‘look at this’ not ‘look at me’…
Tell you what: I started reading your posts several months ago not only because you write good quality texts - it was the design! It just dragged me, made me remember the address and return for more.
What’s more - it made me dig through souce code and whistle with admiration - ‘that’s good piece of code, man’.
For me: nothing worse than throwing ‘the visual’ aside.

But it’s just MY oppinion.

17 • November 30, 2009 at 4:12 pm — Jeff Starr says:

@renczus: I hear you, and appreciate the sentiments, but I have been looking at that design day in and day out for over a year now, so it was finally time to let it go and move on. I thought about doing a “re-align” instead of a redesign, but for some reason I just saw too much I didn’t like with that particular theme and so it was much more inspiring for me to just start over from scratch. The thing is, I have learned a lot since creating that last theme, and as good as the coding and styling happened to be, this new design is far superior and represents my current skills as a designer. Everything’s still there, it’s all just a lot more subtle.

But if the new design still isn’t doing it for you, the Quintessential theme is still available and easily resurrected.

18 • November 30, 2009 at 6:39 pm — Thomas Scholz says:

I like the colors, Jeff. Verdana … well, my preferred font size is 16px (enforced via user stylesheet), and that’s a size where Verdana fails.
Could you add some left padding? 10—20px would be fine.

19 • November 30, 2009 at 6:48 pm — Jeff Starr says:

Hey Thomas, thanks for the feedback. I’m gonna have to pass on trying to accommodate individual user stylesheets, but I think it’s great that you like the colors. I shudder to think of what you might be seeing with that 16px Verdana all over the screen. Just remember about my alternate themes link in the sidebar ;)

20 • November 30, 2009 at 6:58 pm — Jessi Hance says:

Absolutely love the new design. It’s such a pleasure to experience!

If you don’t mind a couple of perfectionist nitpicks:

In your footer, the letter “j” in “Current projects” has its descender cut off a tiny bit, at least in Safari.

And maybe this is just my personal preference, but I wish the bottoms of the borders of the social media icons would align with the bottoms of the borders of the current projects graphics.

The only reason I mention these is because everything else I see is so damn perfect and consistent! Gorgeous!

Oh, I also dig the little hideable tweet in the corner.

21 • November 30, 2009 at 9:40 pm — Jeff Starr says:

Hi Jessi, thank you - I’m glad you like it! Thanks for pointing out ways to improve the details of the design. I did see the cropped descender in Safari during my testing, but actually didn’t think anybody would notice. Now I have good reason to fix it ;)

Also good call on the social media icons lining up with the projects graphics. I will try it out and see how it looks. I want the footer to look as tight as the rest of the design, but also maintain a sense of organic spontaneity.

Really glad to hear you like the design, Jessi. Thanks again for peeking into the details and keeping me honest ;)

22 • December 1, 2009 at 12:08 am — Philippe says:

As new comer I didn’t have enough time to fully appreciate the previous template. It was a great one
That one chocolate-coffee-biscuits is great for breakfast.
I will have my breakfast reading your news.

Maybe a little issue in the footer: the links (featured and friends) don’t lead to any anchor in dungeon page.

23 • December 1, 2009 at 12:21 am — Jeff Starr says:

@Philippe: Glad to hear the new design looks appetizing to you :)

May I ask which browser you are using? I tested quite a few and the footer links seemed to be working for all of them.. would like to fix it though if it’s not working in a specific browser.

24 • December 1, 2009 at 4:34 am — Bleyder says:

I love the new design. Maybe I would put a soft background pattern, but it’s my opinion

25 • December 1, 2009 at 7:35 am — Wulf says:

Beautiful, neutral tones, nice clean layout, definitely serious : ) Great work on your new design.

I feel that, imo, the white space at the top is a bit distracting. White space tends to lead the eye and the top area has a bit too much pushing the reader to the right and off the page, instead of anywhere you want them to look ( like the logo in the middle of it )

While I love the super footer–gorgeous–it’s too far down to be a useful navigation tool–if you hadn’t mentioned it I’d never know it was there.

Also, the font is just a bit small for reading at the native 1900×1200 resolution of my laptop; that’s a minor point, of course, since I can resize it using Chrome; I didn’t check to make sure that works in IE.

I really enjoyed the tooltip blurbs, too : )

Overall, a super hit.

26 • December 1, 2009 at 9:30 am — Jonathan Ellse says:

Yes Yes Yes. I love it, great new tones and colours. I miss the show boxes from Quintessential that showed random articles from various categories, but overall it is really great!!!

27 • December 1, 2009 at 10:59 pm — Philippe says:

Hi Jeff

I was using FF 3.5.5 Win and this morning,,
it’s another CSS (from requiem) which loads.

With Chrome it’s the /serious/ CSS which comes

The footer links with Chrome are working out.

28 • December 1, 2009 at 11:05 pm — Philippe says:

Another thing:
You forgot strike tag has been deprecated (mocking). ;-)

29 • December 2, 2009 at 3:33 am — Donace says:

is it that time of year already?! looks awesome as always man!

30 • December 2, 2009 at 11:09 am — Jeff Starr says:

@Bleyder: good idea - I think I will look at doing something like that for an upcoming “re-alignment,” as they’re called.

@Wulf: thank you - glad you like it :) Good points on the header and footer. I will keep that in mind for future updates. The font size is something that I am playing with, as several have commented that it is a bit too small. Hopefully it resizes okay in the meantime.

@Jonathan: great to hear it - thanks for the feedback :)

@Philippe: I will look into it - you may want to clear the cookies for this site to see if that helps with anything. Thanks for getting back.

@Philippe: Ha! Yep, I know it, but so are <acronym> tags and I use them all over the place ;)

@Donace: Hopefully I’m not that predictable! :)

31 • December 2, 2009 at 12:08 pm — Dave Doolin says:

Hi,

Just one nitpick…

I consider Perishable Press thoroughly commercial.

Having ads - or not - is simply a tactic.

Personally, I have no doubt that if you put ads on PP, they would be elegant and tasteful.

32 • December 2, 2009 at 12:21 pm — Jeff Starr says:

@Dave: interesting concept.. in what sense is this site “thoroughly commercial?”

33 • December 3, 2009 at 5:38 pm — Lillan says:

I really like the new design. *beautiful* Warm delicious and vibrant colors :)

34 • December 4, 2009 at 6:52 pm — Tal says:

I dig it. I really like the color scheme. It’s nice that you have a lot going on/built into the site but it’s very understated. I still love the requiem theme the mostest but this theme has some of its qualities. Finally bought the book and though I’ve only had a chance to skim through it, I’m really impressed. You and Chris did like a totally radical job, like totally. I’d like a print version on my bookshelf. \m/ Good luck to you both

35 • December 5, 2009 at 2:14 am — Teddy says:

Your new design totally blew me away, Jeff! You’ve outdone yourself again :) and have I ever told you that earthy tones (exactly like the ones you’ve used in your new theme) is my personal favourite? Half of my wardrobe is in those tones, haha!

One thing I really love looking forward to your redesigns is your typography - I’m yet to master the very least bit of it and you’ve done an exceptional job - I really love how you’ve used Museo (correct me if I’m wrong) for the headers, sans serifs for the content and georgia for the blockquotes. Really amazing combination you have there.

The number of characters or words on each line is just perfect - a little more than a typical Tumblr layout (I somewhat find their content columns a wee bit too narrow) and better than many layouts out there who have grotuesquely long lines. The contrast of dull-yellow links against the background is also perfect!

Earthy tones is a tricky scheme to deal with before I’ve tried it before and all the mockups, to quote my friend, looked like something “you would only see in the toilet bowl”. Haha! The shades of brown I picked were totally off.

Super footer - that’s one thing I love! I see that it’s a lot bigger than your previous layouts. The sidebar got a little lighter in terms of content, and the negative spaces between each listed item in the sidebar and footer is perfect.

I can’t help but ogle at your theme even when I’m done with the comments. That’s really some 5 star work you’ve done!

p/s: Have a great weekend!

p/p/s: I shall catch up with your old entries when I’m done with my exams. Take care!

36 • December 8, 2009 at 12:14 am — Jeff Starr says:

@Lillan: Thank you - glad you like it =)

@Tal: thanks for the feedback, and glad to hear you like the book. Printed version on its way, hopefully before Christmas!

@Teddy: yep, Museo for the headings, a choice inspired by Chris Coyier (we use it in the Digging into WordPress book). Great to hear that the contrast is working. I am a huge fan of light text on dark backgrounds, but it takes some careful planning to make it work. Btw, your themes are just as awesome - I am always spending too much time admiring your handiwork! Good luck on your exams :)

37 • December 8, 2009 at 8:47 am — mtness says:

Hi there again!

All your thoughts concerning “Serious” are true, but I still prefer and use the dark minimalism theme - this was the active theme then when I first visited perishablepress, and I am still using it today. I tried every other theme here, but to me, they are just not that “perishable”

As in the words by Saint-Exupery:
“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”

Best regards, mtness.

PS:
my own theme is still a work in progress, but you might want to have a glance none the less: http://mtness.net/style
You might even find something useful there.

38 • December 9, 2009 at 8:47 am — Jeff Starr says:

Hi mtness, I am also quite fond of the dark minimalist theme. It is actually a lot more “Serious” than the Serious theme itself, but believe me when I tell you that many people complained about usability and the text being difficult to read.

Your site is looking better than ever. I found something that is really inspiring, but I’m not quite sure I caught its name. It’s that large image of the bright tracers swarming all over the screen. That is an extraordinary image that I will be using for my desktop (I wish it were larger!). It makes me wonder how it was created. In any case, keep up the good work with your site - it is a nice refuge from the commercial onslaught so prevalent elsewhere.

39 • December 10, 2009 at 1:09 am — mtness says:

Hi Jeff! Oh, I certainly believe the amount of people contacting you concerning the dark minimalist theme.

Well, concerning the tracers: You hit me with that! It’s a work in progress… Just email me the size you need it in, and I will see what I got here. More details on this to come, your comment is a big motivation for me to resume working on this.

40 • December 10, 2009 at 6:15 am — Jonathan says:

I really like this new theme particularly on how clean and uniform everything is.

mtness is right I also really like the dark minimalist theme over all the other themes to choose from but my opinion is biased as I am also very fond of dark backgrounds.

41 • December 13, 2009 at 9:41 am — Louis says:

Well, it’s a nice design Jeff. Kudos :)

42 • December 13, 2009 at 2:46 pm — Jeff Starr says:

@Jonathan: awesome, glad to hear you like the design. And another vote for the dark minimalist theme! I think you and mtness have inspired me to use that theme for awhile ;)

@Louis: Thank you - great to see you back at Perishable Press :)

43 • January 23, 2010 at 9:16 pm — Marcel Korpel says:

Again, very nice design. :)

Two things: you write that you’re using “Monaco for and inline code snippets” (’custom fonts’). But I just get (awful) Courier New in code snippets. When browsing through your CSS, I see only one instance of @font-face, only loading Museo. Did you forget something or leave something out intentionally?

Secondly, when a tooltip pops up at the left of my screen (e.g., on your contact page, the link to Monzilla Media), the left side of the balloon disappears at the left side of my browser screen. Can’t you align the balloon at the left side of the view port, in such cases? The same holds true for the right and top sides, of course.

44 • January 23, 2010 at 9:18 pm — Marcel Korpel says:

(citation in first sentence should of course have read: “Monaco for <pre> and inline code snippets”)

45 • January 23, 2010 at 10:24 pm — Jeff Starr says:

Hi Marcel, I think I used Monaco as an enhancement for those with it installed locally. I’ve read that it is a (relatively) common font, so I’m not loading with it @font-face, although I may do that with my next design, depending on how it’s licensed. Does the fallback font (Courier New) appear readable or should I adjust the size a bit..? Not sure if I’ve seen it without Monaco.

Your second question leads me to ask which OS/browser you are using. I tested on quite a few browsers, but didn’t experience that particular behavior. I know there is a way to prevent overflow, however, so if it is a prevalent issue, I will see about modifying the code.

Thanks for the insightful feedback.

46 • January 23, 2010 at 11:31 pm — Marcel Korpel says:

Yes, Monaco is a common font… on the Mac. Unfortunately not on Windows and Linux systems. But I doubt the EULA of Monaco permits embedding in a web page, though.

On my Flickr page I added several screenshots. Notice that in Firefox, the code appears dark green, which is less legible than its appearance in Chromium (Chrome) and Opera. Notice that I am running Arch Linux with the special Ubuntu LCD rendering package, so my text may appear rather different than on other PCs. Nevertheless, most of the time text is very legible using this configuration.

The behaviour of the tooltips (also shown on Flickr) is the same in Firefox 3.5.7, Chromium 4.0.249.64 as well as in Opera 9.64, all running in Linux.

47 • January 24, 2010 at 6:12 am — Thomas Scholz says:

I’ve removed Monaco from all of my systems because it looks like Comic Sans and it isn’t a real monospace font.

The (imho) best monospace font for Linux is DejaVu Sans Mono and for Windows it is Consolas.

The tooltips are cut off when your browser window is smaller than 1040px. And below 977px the body text starts exactly on the left window border. This is the earlier mentioned readability problem. Some left padding could fix both issues.

48 • January 24, 2010 at 11:11 am — Jeff Starr says:

@Marcel: Thank you for the screenshots. The information will help me iron out the wrinkles for my next realignment of this theme. The tooltips issue is a great motivator for me to setup a test environment for Linux.

@Thomas: I am seeing Monaco for code used around the Web more and more these days. It’s a great font, whether “real” monospace or not.

Thanks for the tip on DejaVu Sans Mono and Consolas – I will try to implement them as fallbacks for the next design realignment.

I will also look into adding some of that left padding you keep talking about ;)

49 • January 25, 2010 at 8:17 am — Marcel Korpel says:

@Thomas: I like DejaVu Sans Mono and Consolas, too. My comment was just aimed at Courier New as fallback font, because I dislike the looks of it and there exist far more legible fonts on Linux and Windows.

@Jeff: actually, I did some testing in Windows and the behaviour is the same (by the way, your site degrades nicely on IE6). As Thomas mentions, this happens when the browser width is too small, less than 1040px. I don’t have screen size statistics (especially not for this site), but I think there are still many people around browsing on a 1024×768 monitor, so they will get this behaviour, too. Nonetheless, testing in Linux is good to do. One thing that strikes me is the green font appearing in FF 3.5.7 on Linux, but not in other browsers and not in the same browser version on Windows. I’ll have a look into that, when I sit behind my Linux terminal again.

Also, I don’t think just adding left padding will solve this problem (of the balloon sticking out of the viewport). As this is implemented as a JavaScript function, you’ll just have to put some extra conditionals in your code, testing if the balloon sticks out of the left or right side of the window and adjusting its position accordingly.

50 • January 26, 2010 at 9:29 am — Jeff Starr says:

@Marcel: I thought that the greenish font was because of the Ubuntu LCD rendering package you had installed..? If you do look into that, I would be very interested in hearing about your findings.

For the left/right padding - I think you may be correct that it would be better to script a solution. I’ll have to check if there is already a way to configure the qTip plugin to do that; if not, I may end up switching to the TipTip plugin, which does this and looks pretty good in general.

51 • January 27, 2010 at 10:18 am — Marcel Korpel says:

Well, I initially thought that could not be the case (the Ubuntu rendering of fonts resulting in greenish looking characters), as in other browsers in Linux (Chromium and Opera) I did not see this strange rendering. But after looking in Firebug and knowing that the colour is actually the same, I just resized the font to something bigger and the correct colour popped up. Perhaps it has something to do with sub-pixel rendering. Anyway, it’s solved.

About the tooltips: my first thought was to plough through the qTip sources and build an extra test in the JavaScript code. But moving to TipTip seems more sensible, as this plugin renders the tooltips always on a visible place.

Just one more remark: I noticed that the footnotes on your pages are not clickable, like on Wikipedia. Is this on purpose? Do you dislike within-page links? I don’t like having to scroll down looking for a note. Perhaps a nice tooltip good be a solution, with a within-page link as a fallback for users with JavaScript turned off.

52 • January 27, 2010 at 6:16 pm — Jeff Starr says:

So it was only for smaller (looked like 12px) font sizes that the pre text was greenish in Ubuntu/Firefox? Certainly not critical stuff, but good to know about for future designs. Thanks for checking it out :)

Same thinking on the tooltips thing.. i think it would be easier to just swap out scripts and re-configure/re-style tips as needed. Fiddling with jQuery plugins is always something I regret doing.

I like the idea of improving my reference links with jump functionality; many of my older articles actually do have cross-linked refs, but coding it manually gets tedious. I would love to find a script that either cross-links <sup> tags automatically or creates a nice tooltip as you describe.

53 • March 20, 2010 at 9:30 am — David says:

I love the elegance with which you were able to pull such a earthy look off. This is a lovely, content-centered design that still catches the readers attention.

However, the comment form is rather blah. Perhaps the borders are just too strong. Also, I now have to read you site with “CTRL+” because the font is too small (and I have >20-20 vision).

Good work!

54 • March 20, 2010 at 9:12 pm — Jeff Starr says:

@David: Thanks for the feedback on the design. The next version will include larger fonts and maybe a more “inspiring” comment form ;)

Perishable Press