New Design and Updated Content

I’m getting back into the swing of things around here, now stepping it up with a new design, new tools, and lots of updated (and new) content, demos, scripts, and more. Here is a quick rundown of the new design and updated projects..

New Design

As mentioned, redesigning Perishable Press brings with it some significant challenges:

• 22 alternate themes, each with their own scripts, styles, images, etc.
• 1000+ posts/pages plus alternate views, custom scripts and styles, etc.
• Layout constraints due to advertising and other commitments
• Making image sprites work with rem units (until I got the hang of it)
• Old versions of IE (pre v9) — not really a challenge, just gets old

Going forward, the multiple themes were just too much to maintain, and removing them really simplified things going forward. The new design is clean, 1-to-1, responsive, lightweight, and works to streamline and organize the site’s massive amount of content (8 years worth!). Most importantly, the new theme inspires me to post more content and update existing tools, demos, and plugins. So on the surface it’s all fresh and new, while beneath the hood, I was able to remove around 10 plugins and hundreds of theme-associated files while greatly simplifying the structure of the file system. It’s good times (and well worth the effort).

For old versions of IE (less than version 9), I examined my traffic statistics and made the informed decision to simply redirect old-IE visitors to a custom “please upgrade” page. Sure, there is a fraction of a percentage of users who, for whatever sad reason, are unable to use a better browser than IE6/7/8, but fortunately their numbers are dwindling.

Before and After

Here is what the previous theme looked like (click image for full-size view):

..and the new theme (click image for full-size view):

Streamline and Simplify

Before moving on to the updated scripts, here are some ways that I’ve managed to simplify and streamline the site’s content:

• Goodbye numbers. Removed/hid subscriber counts, twitter counts, comment counts, hit counts, and so forth. I almost dropped tags and categories as well, but decided against it ;)
• Scaled back on the meta information. Author, date, tags, categories, and so forth are no longer displayed on non-single page views (e.g., home page, archives, etc.).
• Consolidated all of the social media stuff to two areas: profile/follow stuff in the sidebar and share/social stuff after each post.
• Better navigation. Added paged navigation for just about every type of page view, enabling easy browsing of content by post, page, year, month, day, and so forth.
• Simplified, vanishing sidebar. Less stuff in the sidebar plus it “fades out” to match the height of the main content area. Similar idea to Ajax Feeds with More Sidebar.
• Breathing room. Less clutter in the header. Keyword: dropdown menu.
• Feature panel for news and updates (optional show/hide via cookie)

More generally, I wanted the new design to be a current take on the classic, clean blog design. Instead of breaking with tradition and going crazy, I felt understatement and subtlety were more attuned to the site’s content. Additionally, the new design brings some swell new features:

• Lightweight, responsive design utilizing rem units
• Added a resize image script to help with older, smaller images
• Added an industrial-strength 404 script to keep an eye on things
• Integration of alternate custom Google search results
• Touch/tap sensitive dropdown menu for enabled devices
• Topped it off with show/hide latest tweet via cookies (using Twitter API).
• Serious revamping and streamlining of my .htaccess rules

Overall I think the new design is going to be good until next year’s scheduled redesign. I really need to find a better a solution for responsive images. I’ve tried all sorts of scripts, but the complexity and disparity of the site’s images (due in part to the 22 alternate themes) requires a more customized solution. For now, I’m using a simple script that dynamically resizes any image that’s above a certain percentage of the content width.. it works okay, but scaling up leaves some images blurry. I really don’t like the idea of reproducing larger versions of eight years worth of images, although I think it may be necessary at some point down the road.

Project Updates!

As I continue updating older projects and articles, I’ll try to post about anything significant, such as script or plugin updates, etc. So far (previous week or so):

• Protect Your Site with a Blackhole for Bad Bots
• Ajax Slide & Fade Content with jQuery
• Ajax RSS Feeds with More Sidebar
• 2013 IP Blacklist
• 2013 User Agent Blacklist
• Update: Ajax Error Log for WordPress – v2.0
• Update: Ajax Error Log – Version 2.0
• Roll Your Own: Dude What’s My IP Address? – Version 2.0

Additionally, all of my WordPress plugins were updated last month. Next, I’ll be working on updating articles, links, and so forth with current information, snippets, and so forth (as time allows). There’s a lot there, but it can be done ;)

About the Author

Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.