Spring Sale! Save 30% on all books w/ code: PLANET24
Web Dev + WordPress + Security

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 the Author
Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
GA Pro: Add Google Analytics to WordPress like a pro.

54 responses to “Getting Serious with a New Design”

  1. 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.

  2. Jeff Starr 2009/12/09 8:47 am

    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.

  3. 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.

  4. 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.

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

  6. Jeff Starr 2009/12/13 2:46 pm

    @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 :)

  7. Marcel Korpel 2010/01/23 9:16 pm

    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.

  8. Marcel Korpel 2010/01/23 9:18 pm

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

  9. 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.

  10. Marcel Korpel 2010/01/23 11:31 pm

    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 (404 link removed 2017/01/26), 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.

  11. Thomas Scholz 2010/01/24 6:12 am

    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.

  12. @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 ;)

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
SAC Pro: Unlimited chats.
Thoughts
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.