Design v7

I rolled out a new design this weekend! As usual it’s a bit of an aesthetic overhaul (blue!). I’m going to cover the why, the new aspects, and some of the new technology involved. RSS readers, you’ll have to make the jump and look around =).

And now, a note about critiquing: I love critiques! If you want to rip this design to shreds, please do so. I have my bachelors in Art and part of that was getting torn apart in critiques when deserved. It makes us better. I am accepting all criticism, and I am also open to changes if I see a trend in comments or something is said that resonates with me. That said, I’m not open to generically negative comments like “I liked the old design better.” I’ve even already heard nonsense from people who have “lost respect” for me. All that does is hurt my feelings and in turn, make me lose respect for them. Comments like these are often fear-induced who-moved-my-cheese reactions, not careful considerations. Like all comment threads on this site, this one will be moderated. I spend a lot of time with this site and this design reflects what I consider to be improvements across many aspects. Please take the time you need to let the design sink in and consider it, and comment below with your thoughts. Thanks =)

Why?

This isn’t the type of design that ends up in CSS galleries. It has ads on it. It’s very utilitarian. It just delivers the type of content that this site has in a (hopefully) very findable and easily digestible way. The font size of body text in articles in this new design is up to a fairly large 16px. My eyesight is fine and I I haven’t heard any big complaints about readability before, but lately I’ve been finding myself bumping up webpages a few notches because I find large type easier to read quickly with higher comprehension. Or maybe it’s in my head, I dunno.

I also felt the need to rejigger some of the advertising on the site. I dropped some of the zones I felt were awkwardly placed. I added a few new ones and adjusted others. There is about the same amount as there ever was, I just feel like it’s integrated nicer. If anyone is interested, there are zones still open on BuySellAds.

Speed is also a factor. There are less images in this theme which helps speed things up a tad. I tried to sprite things as much as I could of course. I’m rocking about a 2 second page load time on average, which isn’t amazing but I think is decent for a site with this much stuff on it. Some of the slowest stuff is external, so we’ll see what happens there…

History

For longevity’s sake, I’m keeping my archive of old embarrassing designs on a new Design History page.

New Stuff

• Linkage has returned!
• Site is running WordPress 3.0.1
• The site now fluid width for the first time ever. It fits into 1024px screens with no horizontal scroll and spreads up to 1200px. Not a huge spread. One of the things I like the least about fluid width designs is when all that changes is the line length of text. There are line length changes here, but they are fairly reigned in and there are subtle layout adjustments where needed.
• There are the new official twitter buttons on posts. I’ve always been a little sour on social media buttons. For example, if you are a Delicious user, you know the tools added to your browser are 10x better than a link on a website. However, 1) I kind of like how these buttons work 2) Twitter is my favorite social site and 3) I can now feel like I’m not throwing away potential traffic from some ideological stand.

Removed Stuff

• The latest tweet bubble is gone. That was in the last two or three designs and I’m now over it. I feel like many times just seeing my latest tweet was weirdly out of place. More importantly, it was slow to load (I never did any caching). There are still social media links in the footer (including some new ones!)
• A long time ago I used to allow people to “register” for the site through WordPress. It was short lived as it ended up having very little purpose. There were about 1,000 registered users, half or more of them spam. I have always wanted to get rid of those users to clean up the database. The problem is, deleting a user in WordPress means you need to attribute their comments to someone else or delete them. I didn’t want to delete potentially valuable comments. So… there is one generic user left called “Old Registered User” to which those comments are attributed. Kinda sucks, but it’s all stuff that is years old and there isn’t all that much of it.

Technology Notes

What would a redesign be on a site like this without newfangled technology?

CSS3

• There are CSS Triangles in use. The main navigation uses them to help indicate current location and the voting question bubble uses them as well. The voting bubble even uses two of them on top of each other to achieve a sort of triangle-with-border effect.

  

  

• The VOTE section features a question bubble which uses a gradient background as well as rounded corners (as do many other elements).

  

• The various list-of-links in the sidebar for helping explore this site and others have a link nudge effect done with CSS3.

  

• The PROPS section features little cards which perform a 3D flipping effect in WebKit browsers.

  

• The boxes in the right of the footer also have an animation effect where information about that subject will slide up from below when moused over.

  

  If you don’t have access to a WebKit browser, you can see a screencast. Safari 5 users, are you seeing lots of “blinking” and awkward flashing when using some of the interactive things in the footer? Chrome is fine. Weird.

• There is a small use of CSS media queries where the footer rearranges slightly if the design is at it’s widest.

  

  

  The 125×125 ads in the sidebar also do a bit of a shuffle via @media queries. When the design is at it’s widest they are arranged 3×2 and any narrower, 2×3.

• Part of dealing with fluid width meant making multi-column designs utilize percentages. That means the images in those columns need to use img { max-width: 100%; } so they can shrink/grow with the column as needed.

  

  

All of these effects I would consider progressive enhancement in that browsers that don’t support any particular feature fall back to a plainer but acceptable experience. For instance, the 3D flip cards just instantly show their “backs” upon rollover.

HTML5

• New DOCTYPE, use of new elements, etc. Basically it just feels good to be using the simplification that HTML5 offers and the more semantic elements. I probably didn’t do a totally perfect job on using all the new elements. This will likely evolve over time.
• The video pages (example) now use HTML5 <video> tags to display video. They will play natively in WebKit browsers which support H.264. Browsers which don’t will fall back to Silverlight first, then to Flash using mediaelement.js. The UI controls remain consistent no matter which technology is in use. I would have liked to go fluid width with the video but there were many problems with that (which I may post about). Particularly nice is the jump-forward abilities of these new players (without requiring preload) that the old player could never do.
• The search form is now literally just a styled input, meaning there isn’t the weird line-height issues I had with the old designs image based background. HTML5 helps out in WebKit browsers with <input type=search results=5 placeholder=Search... name=s> allowing this look and functionality:

  

  

  

  What’s with that awkward outline highlight? Might be a WebKit bug.

• The comment form features additional HTML5 form features. The fields have placeholder values and also use the “required” attribute meaning modern browsers won’t even attempt to submit the comment without the required values (which can lead to an ugly WordPress error page).

  

  

jQuery

• Anything that jQuery does that it used to do in the old design (organic tabs, toggling the search limiter, etc) it still does, but has been rewritten to be more efficient. For example the code now handles both organic tabs sections with one block of code instead of having it split up like it was before.
• The homepage does “fadeouts” on the recent articles. I hoped it would help remove some repetitive page clutter while adding some visual interest. I had it working by using an :after pseudo element absolutely positioned to the bottom of each post, which would disappear on hover. I wanted the fading effect though, and CSS does not yet allow transitions/animations on pseudo elements. So I went with jQuery.

  

• I’m having jQuery look for buttons on the page that contain the text “View Demo” or “Download Files” and do a little HTML manipulation and styling. Perhaps not an ideal method, but this makes it backwards compatible with my whole backlog of posts while keeping the button markup really simple.

  

• Notice the sidebar has a background color to it that stretches from bottom to top of the white main content area. In early iterations of this design, I made the sidebar of a static width and used faux columns to fake the equal heights. But ultimately I decided that a fluid width sidebar would be cooler, which makes faux columns not possible. So to accomplish the equal heights, I have a simple resizing function which tests the height of the main content and if it’s larger than the height of the sidebar, grow the sidebar to match. It’s a bit janky… it has to run the resizer 2 seconds after the page load to account for third party content in the sidebar which may not be there on DOM ready or window load. It also runs it on window resize in case reflow affects the situation. It doesn’t work perfectly and it warrents a re-think at some point.

To Come

I’m working through some ideas for the forums to make them more awesome than they already are, so watch for that in maybe the next few months.