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.
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.
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.
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.
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
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
<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 ;)
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.
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! :)
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.
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!!!
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.
You forgot strike tag has been deprecated (mocking). ;-)
is it that time of year already?! looks awesome as always man!
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.
@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! :)
@Dave: interesting concept.. in what sense is this site “thoroughly commercial?”
I really like the new design. *beautiful* Warm delicious and vibrant colors :)
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
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!
@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 :)