Perishable Press Redesign 2008
New design in effect at Perishable Press. With this 17th incarnation of the site, I drew heavily upon psychedelic influences, spiked it with the essence of the previous dark minimalist theme, and mixed in a healthy dose of cutting-edge JavaScript and PHP functionality.
I will be writing more on the details of the new design very soon. In the meantime, I encourage you to check things out and let me know what you think. For this design, I went to great lengths to ensure pixel-perfect precision across platforms and on all browsers, so please let me know if something looks out of place on your particular configuration.
As you can see, the design employs a great deal of carefully positioned background images and other elements, so I wouldn’t be surprised to discover display issues on untested systems. Needless to say, for the next few weeks, I will be combing through the archives and checking old posts on different browsers to see if anything looks freaky, and will also be keeping an eye out for any inconsistencies, errors, etc. Please contact me (or leave a comment) with any reports of functional or aesthetic misconduct. ;)
Let me know what you think!
32 responses to “Perishable Press Redesign 2008”
All I can say is WOW! I love it! I don’t think it looks too girly!
reading a few more articles on the site, and i cam up with a few more points to note;
> its slower in firefox? for me when scrolling It super stagnated, it may be my army of plugins though i thought i’d mention it…it seems fine in IE though.
>gravtar / threaded comment support – always useful to have those two :p
>Big social media buttons – traffic is always nice to have currently im experimenting on thenexus by putting large icons to the big Social platforms and so far have got a good reaction. i feel having those in / near the post would make things easier to submitters who may not have the inclination to hit the ‘bookmark’ button and look for the social site.
>possibly have all the ‘perishable on’ tabbed like the above ares.
thats all for now :p
Thank you everyone for your excellent feedback! Overall, it sounds like the new design is an improvement over the previous one, but as many of you point out, there are some great ways to improve it. I am writing an article discussing many of these ideas and concerns in detail, and should have it posted here within the next couple of days. In the meantime, allow me to address some of my favorite points offered here in the comments of this post.
@Peter Wallhead: the width of the design is pretty much set for now (due to time constraints), but I love the idea of reducing the height of the header area by around 100 pixels or so. Great idea. I will be implementing it soon! :)
@Ryan Williams: thanks for the feedback; I am glad the design is to your liking. The width of the design was a conscious decision based upon my bias toward large screens. My bad. It will take a lot to change it, but eventually I probably will. Btw, flowers can be very psychedelic ;)
@Sumesh: yes, good call on the opacity of the content and sidebar panels; they actually display “just right” on my PC monitor, but they do seem a little too transparent on my Mac screen. In either case, I will definitely be working on this. Thank you!
@Bleyder: content versus sidebar width is another good call. The current column dimensions were intentional, but may have been prematurely calculated. As previously mentioned, changing the width of the site or of the columns will require a bit of work (i.e., time), but it is certainly on the list..
@Donace: thank you! I am beginning to think that I should share some WordPress/PHP code along with the new design! ;)
@archondigital: thanks for the feedback! I really like your site’s design as well — very inspiring!
@Erika: how much of a “hippy” did you think I was in the first place? ;)
@Kuntal: thanks for the kind words about my previous theme, Kuntal. Of course, it is still available via the “Switch theme” footer link (look for the “Dark minimalism” link). Either way, thanks for dropping by to check it out.
@sushant: “too girly”? I take that as a compliment! ;)
@Louis: Of course, I am glad you like the new design. As mentioned in previous comments, you are one of the fiercest critics I know, always taking the time to articulate a critical response. I remember thinking, at various points while redesigning, things like, “Oh no, Louis will hate that,” or “That’s probably good enough for Louis (I hope)..” So I am greatly pleased that you enjoy the new look and feel of the site. That said, permit me to address a few of your points..
The display/rendering latency while scrolling is something that I cannot control. I wish I could, but this design centers around transparency. If you (or anyone) has any workarounds for this, please share. As for the subscriber count, that decimal value represents you, Louis (just kidding!). Thanks for the heads up on the x/yClock JavaScript — I am fixing that after this comment. And, I realize that the sliding panels belong together, but the layout prevented a pleasing link arrangement, so I decided to segregate them. And, I will probably add a search submit button and comment quicktags as time allows (I think they would benefit the site).
For the CSS links, that is a bit trickier. There are certain design/display goals that I am trying to achieve — and I thought I had devised the best solution — but your comment made me think a little more about it, and I think I can accomplish my CSS-delivery goals without relying on the extra
@importdirective.And, I am glad that you don’t have my FTP/login information! You have got to be kidding me! I see how you might think that the sidebar is too much, but I will have to come to that realization myself after spending some time using the new design. The same is true for the fonts used in the design; I know that the boldface Trebuchet is too fat-looking, and plan on changing it soon (i.e.,
h3anddtheadings), but the body text is currently to my liking, so it stays (for now).And finally, I figured you would enjoy the footer — glad to hear that I was correct in that assumption. ;)
After posting that previous (long) comment, I notice something else that I need to improve: the readability of the comments paragraph text. I think more spacing between the paragraphs would help, as would a slightly (slightly!) darker font color. I would also like to add a span style to highlight the
@someones used for addressing specific commentators.I used your articles as basis for figuring out my loops on WordPress projects, very helpful.
Also your site plays very well on Chrome. I think the transparency works well in both Safari and Chrome.
@Trav: I used to have those dreams, er.. experiences all the time! And, I have to agree with you about how the site looks in IE6 — very inspiring!
@Kim: thank you! I am glad you like it! As for getting a design like this for your own site, you know I am for hire! ;)
@Todd: I have to agree, but not because there is anything wrong with teh “girly” stuff.. ;)
@Donace: you are correct that the site renders a little slower in Firefox. On Safari, IE, and other browsers, everything displays smoothly, but for some reason, Firefox chokes on heavy transparencies and fixed background images. Gravatars and threaded comments are great ideas; I will probably implement one or both of these features. As for the social-media buttons, that is another good idea, but I need to think carefully about where to place the icons. Thanks for the additional ideas! Cheers!
@archondigital: I am certainly glad to hear that you find my WordPress articles useful. Also, thanks for the input on Safari and Chrome transparency display. I have found the same to be true on my equipment here in the office. It just seems to be Firefox that chokes a little..
Aaah, I finally got my internet back! Damn provider took so long to mail me the box. So, here I am, looking at my 1274 unread RSS items, and thinking that I can finally have my regular dose of PP in the week :)
So Jeff, to respond to your response to my response to your design (very short response for today, as I don’t have much time right now).
– transparency: of course you don’t have to remove the transparency just because it’s laggy on some old computers: webdesign suffers from so many constraints already!! I was just pointing the fact so that you can know this sad reality. The great news here is that it’s absolutely fine here on my desktop PC (a Mac Mini).
– JS blocks: I don’t see the problem with a structure like this (please forgive the bad canvas; I don’t have your ASCII art skills ;)
| JavaScript XHTML CSS PHP SQL Apache| WordPress Tutorials Blogging Series Archive|| – item 1| – item 2| – item 3| tag archive for x– “CSS-delivery goals”: what is your evil plan exactly ? :d
– comments on steroids: I’ve seen something on a blog once, it was exactly what you need! A piece of JS, a quicktag thingy that would allow you to click on an icon next to the comment you wanted to react to. It would take you to the comment textarea, write
<a href="#id-of-the-responded-comment" title="See the responded comment">@xxx</a>:. Very clever, I would use that a lot if it was available. I think you would too.And finally, the footer: I hadn’t even seen that I was in your friends list! That’s very touching. I definitely have to see you in person one day :)
Wow Jeff – I dropped by to see what you’re up to and was litterally stunned for a minute. The safe black and white design I was expecting replaced by a wild but intricate psychedelic display! So cool! Makes my own site redesign look boring!
If you can’t tell from all those exclamation marks in my previous paragraph, I’m seriously impressed.
As for suggestions, I agree with Peter about reducing the height of the header to get more content about the fold. Also, at times, I have slight difficulty reading the text because the background is a little strong – I find it easier to read this comment form which has the grey background than it is to read the post body. It might be my laptop display and you wouldn’t want to weaken the background image much because that’s what makes the impact. It’s a tricky thing to balance.
@Stephen: I am slow these days, aren’t I? :P I am stoked that you dropped by to see the new design, and even more so to hear your excellent feedback. Great call on reducing the header height a bit to bring the content up.. I will hopefully be getting to that later this weekend. I will also be working on “toning down” the intensity of the background image, either directly or by increasing the opacity of the various content panels. You are absolutely correct that finding the right balance is tricky — I spent hours trying to fine-tune the display to what it is now.. Hopefully my next stab at it will prove more successful! ;)
another redisgn?! if you have that much spare time come help (read DO) my new theme idea.
Though im intrigued to say the least…if this redesign was this good (baring louis’s critque)…how will the next be?
I can’t believe you! That’s insane :p
Oh, by the way, I like the new comment form. The big Name, Email and Website headers are great, and the textarea is restful and large enough. Tough, I would put a little JS on the “Read official comment policy” link, so that it slides down the information, instead of making you load another page, and lose what you have already written.
You have an example of what I mean on my archives page. Try clicking on the “Syntaxe autorisée” link. My implementation is obstrusive (because I don’t care :D), but you could add a
hrefattribute to make it point the full page, so that it doesn’t break with JS off, and it’s more semantic.About Gravatar support, I have to say that I think it’s a bad idea. Gravatar, like ads, is a tiers service. That means that you (a) depends on them to deliver your content (the images here), and (b) add a tremedous delay to your pages loading, because the visitor has to get all the images from Gravatar servers.
What’s the aim of having done such a sexy work on your HTTP request, using images sprites and co, if you destroy the performance of your pages by adding 25 new HTTP requests on another server you don’t control, to show a small image that’s often ugly.
Or you can get them asynchronously with JS, but then, you depend on JS.
(that may be the worst structured comment I’ve ever dared to post here, but I think it contains some reflexion within)