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! :)
54 responses to “Getting Serious with a New Design”
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.
@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! ;)
@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 :)
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.
@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.
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.
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.
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 ;)
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 ;)
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.
@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.
I love the new design. Maybe I would put a soft background pattern, but it’s my opinion