Perishable Press Redesign 2008

Peter Wallhead – #1

Hi there,

My only comment would be that it might be a good idea to shrink your header element by around 100pixels in height. This will make it easier and simpler for readers to reach your content with scrolling down the page so much.

You could also possibly reduce the total page width by around 30pixels (or set the page width to 100% instead of a particular pixel dimension) to reduce the need for some users with smaller screens having to scroll across the page to reach the sidebar content.

Ryan Williams – #2

Yes, unfortunately the site does have a horizontal scrollbar on 1024×768 — shouldn’t need to reduce it by much to fix this, but of course I have no idea what’s going on beneath the hood. ;)

Great job, though. I’m too tired to elaborate, but this just generally looks nice; I actually thought flowers rather than psychedelia when I first saw it. It’s much more readable than the previous design IMO, and you’ve made excellent use of the space — have to love the JavaScript horizontal thingy. :)

Sumesh – #3

Beautiful redesign, Jeff.

Just one thing- make the content and sidebar columns more opaque - right now, the background is showing through, a bit too much….

Bleyder – #4

Yes, great design!!!

I agree with Sumesh, make content and sidebar columns more opaque. And you would change the width of the columns: 70% main column and 30% side column.

Donace – #5

Very nice man, only issues i could see were as mentioned, stretches width by ‘ ‘ that much.

Looks get though and woud love to see the engine :p

archondigital – #6

The new design is great and plays well on my screen which is pretty wide.

My only concern is for viewing at 1024 screen width other than that the whole thing rocks!

Also just did a redesign of my theme but not as elegant as what you just did here.

Erika – #7

Oh, Jeff! I love it!!! Maybe you’re more hippy than I thought. LOL.

Kuntal – #8

Hey Jeff,
This is Kuntal. Hi, Congrats on implementing the new look n feel. :-)
However, i loved the previous design, that was one of the unique ones (the day-night feature of that theme.

Hmm yeah this new theme give you a lot of scope and space to use other widgets. thats the nice thing about this one.

sushant – #9

Hi Jeff, That’s good work here, but original one had it’s own feel ;
No doubt on that one.
No this one is good too, but looks too girly :)
By d way Great Job Only u could do this.

Louis – #10

Gosh, what a shock! I came here to respond to a commenter, and BAM, the new design hits me in the face.

I like it :)

I like how it fits with the image I have of yourself. It’s both impressive and mysterious; it’s like fractals indeed: it’s melting contemplation and reflexion. The background is always visible because of the transparency, but the best moment is when you scroll to the top, and the logo is onto the background. Then, it’s fantastic. I do love that moment. Also, it’s evoking something mystic or religious to me — I always thought that PP was some kind of temple.

Now, I wouldn’t be doing my job if I didn’t criticise this new design, so here comes the technical comment.

—

— the first thing that I noticed once the first shock was over, is that the transparency of everything makes the scrolling laggy. It’s a common issue I guess; I’ve noticed it many times on many websites: a fixed background + numerous transparencies = slow and laggy scroll down. I’m on a laptop at the moment, and that sure adds to the problem, but I think it will still be laggy on my real computer, alas. It’s very unpleasing, but the website remains readable though.

— a little detail now that is bothering me a lot: the RSS readers count is not rounded! What exactly is “701.74 Subscribers”? That’s scandalous coming from you Jeff :p

— a very good point now: the rapid access navigational blocks. I love these! Very nice idea and perfect implementation. You should’ve used Mootools though, but I forgive you :)
Also, I would group the two “useful stuff” blocks together: they belong together.

— without JS, the search page URL are not pretty as when JS is on. http://perishablepress.com/press/search/xwc/ becomes http://perishablepress.com/press/index.php?s=xwc. Really a detail. Also, I miss a validation button; I don’t like typing a search phrase, then taking my mouse to validate, only to find that there’s no “OK” or “Send” button. Would be more accessible.

— another little thing: Firebugs throw me this error on this very page: “document.getElementById(”xClock”) is null”. Seems like you don’t test the existence of this element before applying JS on it :p

— the comments area is correct, but where are my quicktags!? Grrrr!

— I’m really, really proud of what you did about the images optimisation — I just read your Tumblr post about that. You make very few HTTP requests, that’s awesome. Though, I wonder why you are making an extra request just to load a comment-only CSS file (http://perishablepress.com/press/…/mobile.css), and another extra request using the awful @import for the main CSS file. I don’t get it.

— on the “sidebar” again. Though I like the navigational blocks a lot, I have to say that I find the rest of the bar annoying. It creates a lot of noise while reading a post. I would remove everything below the Twitter statut block (I would meaning “I would if I got your FTP login informations” :D)

— a final note, but not the least: I do not like the type used on the main content. I find this font very bold and ugly. In the contrary, your Tumblr blog has a neat typography – though I find the contrast between the background and the font colour too violent.

— oh, and the footer is very classy =)

—

I hope these remarks help you make PP even better. I sure love this new design. I will miss the dark one, but not as much as I thought; you surprised me with this little wonder.

Congratz Jeff!

Trav – #11

Awesome Jeff!

It’s like a dream I had once- no wait, that was real… nevermind: )

Well done, and renders pretty nice even in IE6!

Trav

Kim Woodbridge – #12

I think it’s gorgeous - I am so impressed. And maybe I can convince you to design one for me ;-)

Todd – #13

All I can say is WOW! I love it! I don’t think it looks too girly!

Donace – #14

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

archondigital – #18

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.

Louis – #20

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

Stephen Cronin – #21

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.

Donace – #24

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?

Louis – #25

I am already in the process of another redesign..

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 href attribute 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)

Donace – #26

@ louis..nice and dirty JS indeed, though would a popup be a better option? i mean yes it obtrusive but it enforces th point…the again if they click the link they are not liekly to be here to spam…

Prehaps an alternative is to have a small pop when you click submit comment that says ‘have you followed our posting regualtions?’ and have your dity show hide thing there…

It could be controlled via usernames…ie a new commentor would get it or a commentor who has been marked as spam before gets it and not regualr commentors.

RE gravtars… Yes we ar in reliance with them…I suppose you could use ‘get()’ to grab the most used gravtars and store/cache them locally to combat the lag to a level. Then again JS heavy as this theme is a few extra gravtars if they are pulled via a iframe approach…ie the iframe loads and gravtars within the total loadng time would mirror ala gravtar usage but the ‘readability’ time would not be affected and if the iframe fails (ie gravtar doesnt load etc) it would hang or stall page load times and could be replaced by a default image….somehing lie if page=loaded then display gravtar otherwise default.sprite.ico etc.

Gravtars imo are good for communties and bran recongitions… each to his own

Thanks for all the sugeestion helping me mould ideas for m theme ;)

Donace – #28

yea i’ve been imagining the perfect theme in my head for a while now!

With your update i’ve actually started wrting up ideas etc and grabbing code scraps, due to my limited psd skills and coding skills it is gonna take a while.

Sure shoot me an email and i’ll mail you my 2 abstracts with checklists :p

Louis – #31

@Jeff:

Your “Archives” page is slick, although I would expect a cleaner implementation from such a vehement advocate of Web Standards.

I don’t maintain my blog anymore, from a technical point of view. I plan to switch from WordPress to MovableType, or, if I’m patient enough, write my own engine, as I already did1, but in a sexeh OO style.

So you see, though the code on my blog is pretty clean in general, I don’t garanty transcendant code on every page, as I haven’t updated it since a long time. Next version will be either in HTML5 or XHTML2 served as XML. In both case, it won’t be displayed correctly on IE6 I suppose, but did I say I don’t care?

—

Now, about Gravatar, I’ve thought a little, and I think that if you really like these little pictures, you should implement that feature, but as a bonus.

You would add a layer of JS that would download the pictures post-onload. No loading time added, and you get this little extra. For users without JS, or people without a Gravatar account, it would display the default picture as a CSS background.

—

On the “comment policy” thing, there are many ways to display an informationnal note. You can use a slider like I do, but you can also use a sexy looking tooltip bubble, or a lightbox-style overlay (shameless promotion :D), etc.

In my opinion, designing a webpage is primarly the reflexon around content organisation/visualisation. What information should I put on this particular page, how should I present it (interface). That’s the real design. The rest is graphic illustration and coding.

I shall backup my idea with a few examples:

what makes Google so great, so well designed ?
Great interface: one field that autofocus at loading, centered, no visual noise, instant loading.
what makes Apple website so cool?
Great content organisation: top menu, you-can-guess-em URLs, lickable huge photos of the products.

So, to come back to what I was saying, you should embrace all the possibilities before making your choice final. On my archive page, I have a potential user interaction on the slided content (he can select some options with radio buttons). In the contrary, the comment policy here is just an informative note, so it may be better to use, let’s say, a tooltip bubble. That’s just an example of course — I don’t like tooltips a lot.

PS: yep, a preview feature would really be nice. I hope that all my HTML will be okay :/

I can grant you access to the labs if you are curious. Mail me in that case :p

Randy – #32

“Too girly?” It looks like a great design. Define “too girly!”