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..
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
- 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.
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 ;)
Looks good, this is a more significant redesign than I ever do on my main website. I just keep tweaking and adding “trendy new features” which were usually trendy and new several years ago.
Great work,love the “clean” look!
Very nice design!!! I just came here for the first time through a Hot Link on Chris Coyier’s CSS-Tricks, I only have to comments:
1) The font becomes waaaay too small on mobile view, both if you resize the browser or view on an actual mobile, I couldn’t read it from my phone.
2) On FireFox (v23.0.1 – Windows 7) the text in the comments break in middle of words, and it’s very hard to read. Incidentally, I know that Chris Coyier had the same issue (I pointed it out to him too), and he got it fixed, perhaps you should get in touch with him regarding.
Otherwise, your website is very nice, and definitely going on my must-read-blogs list…
P.S. While we’re at it, I wanted to send this to you in an email rather than commenting on a post, but I couldn’t find where to do that
Thanks for the heads up on the breaking comment text — apparently I was overzealous with the text-wrap (i.e., no hyphens), which now has been removed from most everything.
I’m currently looking at increasing some text sizes for smaller width screens, thanks for the reminder it’s much needed.
P.S., the contact form is at
/contact/(been there for 8 years!), which I think is pretty common for contact pages these days, but there’s also a link under the Archive menu should you prefer.
Sorry didn’t find the `/contact/` link, my bad, shoulda thought of that…
In any event, have a great, and thanx for the fast reply
Nah dude it’s all good.. I definitely appreciate the feedback — very useful!
finally a nice change that I appreciate,I think the design was old and had another…very nice job 10 plus.
I love the
#cc3c09ghost-highlight on link hovers. Very nice!