Perishable Press 2012 Redesign

Updated August 3, 2018 • 28 comments

Welcome to the new site! So many changes I don’t even know where to begin.. I think for now the design is beta so I’ll hold off on a big lengthy explanation and just keep an eye on things for awhile.. I guess this post is a good place to mention anything weird or broken that’s happened after the new design went live.. Definitely more updates on the way :)

Updates

Rather than create a new post, I’m just going to update this post with notes and stuff about the new site design..

Structural changes

Before, Perishable Press existed on two separate installations of WordPress. The old site (2005-2011) was located at https://perishablepress.com/press/ and hosted over 700 articles, demos, plugins, and so on. LOTS of files in the /press/ directory, including over 20 custom themes for skinning the site — each update was a major chore, and so in 2011 (when time was short), I decided to just lock that old /press/ site down and start afresh with entirely new WP installation. So the “new” site went into a subdirectory named /perish/, and then served the site from the root directory, so URLs didn’t show the subdirectory name. I knew splitting things up was a crazy strategy, but I really wanted to update the site and get on with it. I also knew that I would have to bite the bullet someday and merge these two sites together, and let me tell you it was no picnic.

Goal #1: simplify site structure — check.

Permalink changes

The old site’s permalinks remained the same since 2005 when the site was created. Back then honestly the “year-month-day” permalink format was considered optimal, so that’s what I went with. Here are a few examples of how crazy some of these URLs get:

https://perishablepress.com/press/2008/03/03/perishable-news-site-upgrades-upcoming-interview-and-pagerank-update/
https://perishablepress.com/press/2010/03/01/digging-into-wordpress-version-2-new-chapters-free-themes-and-site-redesign/
https://perishablepress.com/press/2008/10/13/wordpress-feedburner-htaccess-redirect-default-feeds/

With the subdirectory in there and the full dates, some of the URLs for this site were just ridiculous. So with the new design, permalinks are much cleaner and consistent throughout the site, with basically just post/page-name format, which really helps with the longer URLs:

https://perishablepress.com/perishable-news-site-upgrades-upcoming-interview-and-pagerank-update/
https://perishablepress.com/digging-into-wordpress-version-2-new-chapters-free-themes-and-site-redesign/
https://perishablepress.com/wordpress-feedburner-htaccess-redirect-default-feeds/

If I had time I would shorten the slugs on some of the longer posts, but actually most are quite reasonable and look great pretty much across the site (imo). In general changing URLs is not advised, but there are times when shorter links are worth the extra processing required for htaccess redirection.

Goal #2: clean up permalinks — check.

Category/Tag changes

Another part of the redesign involved restructuring the categories and cleaning up/reorganizing the tags for posts across the site. In 2005, the site had nearly 25 categories, including everything from websites and multimedia to nonsense and site news. The original categories made sense back in 2005, but no longer make sense given how things have gone for me online.

So now that I’m pretty much focused on web-design and not so much the other stuff (audio, video, etc.), I wanted the new categories to reflect this and thus reorganized/restructured things to better reflect the contents and direction of the site. Here are some examples of category changes:

Presentation → CSS
Structure → HTML
Behavior → JavaScript

..and so on, such that the web-design stuff is now organized primarily by the “featured” categories (seen in the main navigation menu), while other categories have been renamed and sort of relegated to their own downplayed existence. To see the new category structure, visit the the archives and scroll down a bit.

Cleaning up tags was also a big part of the redesign.. I had many weird, one-off tags that never really went anywhere, so those have been eliminated or merged in with other, healthier tags. Overall, the new tag cloud is better focused and indicative of the content here at Perishable Press. Yes it takes a lot of .htaccess work to keep the traffic flowing smoothly, but so far it’s been totally worth it.

..(working on 404 stuffz, will post more soon)

design

About the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.

28 responses to “Perishable Press 2012 Redesign”

H5N1 2012/03/12 9:22 am

PC. But Even on my Slackware 13.37 it looks good!

Jeff Starr 2012/03/12 9:26 am • Post Author

Yeah, I just tried with the mac parallels virtual windows and cannot seem to replicate the crazy gubmint lines.. hmm..

H5N1 2012/03/12 9:31 am

It’s better to tell which version of Chrome is running on that puters!

Jeff Starr 2012/03/12 9:37 am • Post Author

You’re probably right.. although everyone should be running the latest and greatest!

Jeff Starr 2012/03/12 4:14 pm • Post Author

Can anyone confirm/deny that the link-background-color issue has been fixed?

Links in non-featured posts (such as this one) should appear as sort of light-brown color, and links in featured posts should match the category color.. (example)

Make sure to clear the browser cache for this domain or the changes won’t show up.

dj 2012/03/12 4:31 pm

Hallelujah… finally another site (besides Chris Coyier’s) which doesn’t make me look at the background graphic for 30% of my screen! (i.e. responsive design all the way up to the desktop)

Although, the breakpoints could use a bit of tweaking, the sidebar overlaps for a bit on every breakpoint before it snaps and the min-size leaves a couple of the floated tabs squashed to a second line – all these on a desktop.

However, great look – and I really like the typography as well.

Jeff Starr 2012/03/12 4:36 pm • Post Author

Great feedback.. and spot on about the transition/breakpoints, they do need some fine-tuning for sure.. I thought I had quelched all the overlapping stuff and squashed tabs.. may I ask which browser/platform you’re looking at?

dj 2012/03/12 4:39 pm

One other thing… after re-reading I think I understand your pain. Are you saying that you’ve set up your htaccess to do redirects on your whole sites from what they were to what they are now? (i.e. not just changing them and hoping/praying Google might catch up?) If so, would you mind sharing some examples/methods – unfortunately, I’m in the same situation as you are/were and trying to minimize the amount of hair that gets ripped off along with the band-aid.

Jeff Starr 2012/03/12 4:45 pm • Post Author

Yes, it’s been an enormous amount of work.. but the good news in the end is that it’s done, and I managed to take detailed notes along the way to hopefully help others. Will be posting as much useful info as possible soon.

DJ 2012/03/12 4:41 pm

Yep… IE 9 on Window’s 7 with default (i.e. out of the box) type sizing and zooming.

Jeff Starr 2012/03/12 4:43 pm • Post Author

Okay will take a closer look at the breakpoints and mashed items, thx :)

Kyle 2012/03/12 5:43 pm

The text rendering is *terrible* on my Win7 Ultimate box. Body text hinting is completely effed and unreadable.

Also, I’m sorry to say it but I do like this design at all. Like, not even a little bit. It’s like you went back in time five years when grunge stuff was cool for a few minutes. :\

The grids, the “I just read a Photoshop tutorial!” brushes, the over-saturated colors that don’t make any sense, the terrible 3D-ish logo, the harsh gradients… It looks very unprofessional.

The code might be technically sound but it looks… bad.

Jeff Starr 2012/03/12 6:04 pm • Post Author

Thanks for the feedback – will continue to fine-tune the design after getting the 404/redirects cleaned up. Might tone down the colors, may swap out the CSS3-styled logo with the original graphical chunk, and may tone the gradients down as well..

The good news is that it only takes two clicks to change the design using any of my previous themes. Some actually look pretty good on Windows machines. Just click the “Switch Themes” link in the top nav menu and pick your favorite.

Greg 2012/03/13 1:34 am

The links under related articles are unreadable in Chrome 17.0.963.78 m on Win7. They’re covered up by a black bar.

Sorry to say this, but I think the new design is a mess. Too much clutter everywhere, maybe you should remove the grid in the background and use less colors.

Your articles are excellent though, keep up the good work.

Jeff Starr 2012/03/13 7:33 am • Post Author

Actually the main point of the redesign was to consolidate and streamline content.. the new design was needed to sew the two sites together into a single installation. Now that’s done, there’s plenty of room to fine-tune things for Windows users. Thanks for the feedback.

airoschou 2012/03/15 1:48 am

Oh,My goodness,Rich color in the page.

Comments are closed for this post. Something to add? Let me know.

H5N1 2012/03/12 9:22 am

PC. But Even on my Slackware 13.37 it looks good!
Jeff Starr 2012/03/12 9:26 am • Post Author

Yeah, I just tried with the mac parallels virtual windows and cannot seem to replicate the crazy gubmint lines.. hmm..
H5N1 2012/03/12 9:31 am

It’s better to tell which version of Chrome is running on that puters!
Jeff Starr 2012/03/12 9:37 am • Post Author

You’re probably right.. although everyone should be running the latest and greatest!
Jeff Starr 2012/03/12 4:14 pm • Post Author

Can anyone confirm/deny that the link-background-color issue has been fixed?

Links in non-featured posts (such as this one) should appear as sort of light-brown color, and links in featured posts should match the category color.. (example)

Make sure to clear the browser cache for this domain or the changes won’t show up.
dj 2012/03/12 4:31 pm

Hallelujah… finally another site (besides Chris Coyier’s) which doesn’t make me look at the background graphic for 30% of my screen! (i.e. responsive design all the way up to the desktop)

Although, the breakpoints could use a bit of tweaking, the sidebar overlaps for a bit on every breakpoint before it snaps and the min-size leaves a couple of the floated tabs squashed to a second line – all these on a desktop.

However, great look – and I really like the typography as well.
- Jeff Starr 2012/03/12 4:36 pm • Post Author
  
  Great feedback.. and spot on about the transition/breakpoints, they do need some fine-tuning for sure.. I thought I had quelched all the overlapping stuff and squashed tabs.. may I ask which browser/platform you’re looking at?
dj 2012/03/12 4:39 pm

One other thing… after re-reading I think I understand your pain. Are you saying that you’ve set up your htaccess to do redirects on your whole sites from what they were to what they are now? (i.e. not just changing them and hoping/praying Google might catch up?) If so, would you mind sharing some examples/methods – unfortunately, I’m in the same situation as you are/were and trying to minimize the amount of hair that gets ripped off along with the band-aid.
- Jeff Starr 2012/03/12 4:45 pm • Post Author
  
  Yes, it’s been an enormous amount of work.. but the good news in the end is that it’s done, and I managed to take detailed notes along the way to hopefully help others. Will be posting as much useful info as possible soon.
DJ 2012/03/12 4:41 pm

Yep… IE 9 on Window’s 7 with default (i.e. out of the box) type sizing and zooming.
- Jeff Starr 2012/03/12 4:43 pm • Post Author
  
  Okay will take a closer look at the breakpoints and mashed items, thx :)
Kyle 2012/03/12 5:43 pm

The text rendering is *terrible* on my Win7 Ultimate box. Body text hinting is completely effed and unreadable.

Also, I’m sorry to say it but I do like this design at all. Like, not even a little bit. It’s like you went back in time five years when grunge stuff was cool for a few minutes. :\

The grids, the “I just read a Photoshop tutorial!” brushes, the over-saturated colors that don’t make any sense, the terrible 3D-ish logo, the harsh gradients… It looks very unprofessional.

The code might be technically sound but it looks… bad.
- Jeff Starr 2012/03/12 6:04 pm • Post Author
  
  Thanks for the feedback – will continue to fine-tune the design after getting the 404/redirects cleaned up. Might tone down the colors, may swap out the CSS3-styled logo with the original graphical chunk, and may tone the gradients down as well..
  
  The good news is that it only takes two clicks to change the design using any of my previous themes. Some actually look pretty good on Windows machines. Just click the “Switch Themes” link in the top nav menu and pick your favorite.
Greg 2012/03/13 1:34 am

The links under related articles are unreadable in Chrome 17.0.963.78 m on Win7. They’re covered up by a black bar.

Sorry to say this, but I think the new design is a mess. Too much clutter everywhere, maybe you should remove the grid in the background and use less colors.

Your articles are excellent though, keep up the good work.
- Jeff Starr 2012/03/13 7:33 am • Post Author
  
  Actually the main point of the redesign was to consolidate and streamline content.. the new design was needed to sew the two sites together into a single installation. Now that’s done, there’s plenty of room to fine-tune things for Windows users. Thanks for the feedback.
airoschou 2012/03/15 1:48 am

Oh,My goodness,Rich color in the page.

« Previous Comments • 12