JeffCroft.com

06.01.2005 // 35 Comments // Getting there.

The live redesign is coming along. I’ve been focusing mainly on the blog components of the site thus far. There are a number of pages left to overhaul — among them my portfolio (which is vastly out of date) and resumé. In the meantime, enjoy a short list of highlights, comments, and acknowledgments pertaining to what I’ve done here so far.

  • The colors: JeffCroft.com has featured orange about as long as it’s been here, and I wanted to keep it around for consistency. I call this particular shade J.Cro Always Orange. I also wanted to bring back the J.Cro Classic Green that I had used two designs ago. I am usually a two-color guy, so I thought I’d be fun to push myself into a third main color, and Jaredigital Electric Pink seemed to fit the bill. I like the scheme. Just about everything you see today is subject to change, but I think you can count on the colors being permanent.
  • The search: I wanted to implement a live search feature. “Live search” works something like Spotlight in OS X or a search in iTunes in that you don’t have to submit the form for it to start searching. Type a few letters, pause for a moment, and the search will start displaying results. I initially wrote my own Ajax-based function, which worked fine and was a great learning exercise, but lacked the feature-completness of the canned script that Bitflux offers. So, I switched to their version. Special thanks to Brent O’Connor, a fellow K-State employee, for his PHP help! The Bitflux Live Search is front-end only — you still have to create a server-side search script for it to read from. I’d created one, but Brent helped me optimize it and clean it up a lot. Note that you still can submit the search form for the full results on their own page.
  • The icons: I’m using some of Dan Cerderhom’s royalty-free stock icons on the buttons you see around the site. I like ‘em — they seem to give the buttons a little personality. Than to SimpleDan for the great set of icons!
  • The pulldown: It probably didn’t take you this long to figure out that I ripped the content-switcher on the home page straight from Mr. Blog himself, Jason Kottke. I loved the idea when I saw it on his site, and I knew I had to have it. Perhaps I’ll find a way to better visually differentiate my implementation from his as I move along in this redesign process. Since Jason was kind enough to include a short tutorial on how he did it, I figured he wouldn’t mind the obvious rip. :)
  • The comments form: Again, I can’t take credit for the idea. Jonathan Snook was the inspiration here, and Derek Featherstone also put together something similar before me. My implementation varies slightly from both of theirs, but the inspiration is clear. I believe this sidebar-based comments that scrolls with you is a definite interface enhancement, even if it is slightly shocking at first to those of us who spend lots of time on blogs and are used to the comments form being at the bottom. With the docked comments form, you can type as you read the article, taking notes for yourself as you prepare your comment. It’s also much simpler to copy-and-paste bits from the article or other comments, as you don’t have to constantly scroll from the top of the page to the bottom. Live preview is still in place (as it was before). The live preview occurs at the bottom, where your comment will appear, and clicking the “Preview” button will scroll your butt down there. Also, I finally fixed the long-standing problem of the “remember me” button not working.

So, what’s left for me to do? Well, I still expect a good deal of visual changes, though perhaps not drastic ones. I still need to convert many pages into the new layout and update the content on those pages. I’d like to add a Binary Bonsai-style “Live archive,” too (boy, Ajax is great fun). I need to get more categories listed under the front page pulldown. I’d also like to do some other fun things there — perhaps a selection of random posts, the most-commented on posts, etc.

Any other ideas for me? :)

Comments

There are currently 35 comments on this entry. If you have something to say, please consider adding your own.

You can also subscribe to an RSS feed of this entry’s comments.

Links in this entry
This entry’s tags
AuthenticJobs.com
AuthenticJobs.com
Web Designer
Covenant Communications
Orlando, FL
Senior Web Designer
GSI Interactive
King of Prussia, PA, US
Web Architect
Synacor
Buffalo, NY, US
Front-End Web Developer
Push.
Orlando, FL, US
AuthenticJobs.com »

Comments

  1. 001 // Rob Mientjes // 06.01.2005 // 11:26 AM

    If I had anything to add, I’d have told you. Okay, one thing maybe. It feels like it’s graphics-heavy but it isn’t. That’s… good, I guess. I dunno. Getting used to it, so that’s okay.

    And I see you’re being all trend-whory with the angled recommendation ribbon ;)

  2. 002 // Jeff Croft // 06.01.2005 // 11:43 AM

    Yes, I’m a total trend-whore. I admit it. :)

  3. 003 // Jared Christensen // 06.01.2005 // 12:28 PM

    Pink is the new black! Huzzah!

  4. 004 // Brian Ford // 06.01.2005 // 12:30 PM

    I notice a comment tally isn’t available for any of the posts except the most recent… stylistic choice or just something you haven’t added yet? (Personally, I’d keep it on everything.)

  5. 005 // Jeremy Boles // 06.01.2005 // 12:40 PM

    I dig the static comment posting form. However, does there need to be a “Preview” button when you have a live preview? Seems sort-of redundant.

  6. 006 // Jeff Croft // 06.01.2005 // 12:41 PM

    Brian-

    I just haven’t gotten it into the display, yet. In fact, if you check the source code, you’ll see that it’s in there. I have it disabled in the CSS b/c I’m not sure where I want to put it yet…

  7. 007 // Jeff Croft // 06.01.2005 // 12:43 PM

    Jeremy-

    The preview button is necessitated by the fact that it’s possible to be typing at a point on the screen where you can’t see the preview box. The preview button scrolls you to the preview box if it’s off your screen.

  8. 008 // Dustin // 06.01.2005 // 3:31 PM

    i love dan’s set. i recognized them before i read that you were using them. good choice. i’ve used them in many-a backend applications. they suite well as standalone icons as well as slapping them on buttons the way you did.

  9. 009 // Jeff Wheeler // 06.01.2005 // 3:50 PM

    Quite a nice job, although I don’t think I’d show the comment preview box until I’ve started typing. Otherwise it just is a blank box sitting there with nothing in it.

    Also, I think there should be more contrast in the comment preview box, and it should have a number.

    Other than those things, it looks wonderful. I like the color scheme and the gradients are nice as well. I think I like how you did the comment box, even more than Derek Featherstone’s (w00t, used the copy and paste next to the form thing…), simply because it’s prettier.

    Also, there seems to be a problem in Safari where if you have the live search results on top of the comment box, and then scroll, it messes up the menu’s content.

    Looks great!

  10. 010 // Jeff Wheeler // 06.01.2005 // 3:51 PM

    Also, I think the yellow-fade (I suppose pink now…) technique would be nice to have after you submit a comment, not only when you preview one. It also looks like it could use a bit of padding.

  11. 011 // AkaXakA // 06.01.2005 // 3:57 PM

    Hey, looking good.

    I’m liking the big nav buttons, the live search and a gradient that isn’t nausiating (I won’t name names ;) but J.Cro? Isn’t miss Lopez going to sue you for that?

    Preview and post buttons still need a tabindex to sort the tab order, but that a trivial fix.

    A less trivial fix will be fixing the static post window, as if one’s window is lower than 768 then it’s a tad hard to actually click post…at least on Firefox/win.

  12. 012 // Jeff Croft // 06.01.2005 // 4:05 PM

    Jeff W:

    Quite a nice job, although I don’t think I’d show the comment preview box until I’ve started typing. Otherwise it just is a blank box sitting there with nothing in it.

    Good call. I’ll try to do that.

    Also, I think there should be more contrast in the comment preview box, and it should have a number.

    Good suggestions. I’d like for it to have a number, but I’m not quite sure how to get the next number out of an MT template — I’ll try to figure it out, though.

    Also, there seems to be a problem in Safari where if you have the live search results on top of the comment box, and then scroll, it messes up the menu’s content.

    Thanks! I’ll check it out!

  13. 013 // Jeff Croft // 06.01.2005 // 4:06 PM

    AkaXakA-

    J.Cro? Isn’t miss Lopez going to sue you for that?

    Ms. Lopez can kiss my J.Lo booty.

    A less trivial fix will be fixing the static post window, as if one’s window is lower than 768 then it’s a tad hard to actually click post’¦at least on Firefox/win.

    Doh! I’ll give it a look. Thanks! :)

  14. 014 // Jeff Croft // 06.01.2005 // 4:07 PM

    Brian-

    I notice a comment tally isn’t available for any of the posts except the most recent’¦

    Happy now?

    BTW, this has made me realize I need a new background image for blockquotes. :)

  15. 015 // Jeff Croft // 06.01.2005 // 5:05 PM

    Jeff W.-

    I’ve modified the behavior of the comment preview. It now doesn’t show up unless you start typing in either the Name or Comments field. It also appears if you click on the “Preview” button, whether or not you have typed anything.

  16. 016 // Adam Michela // 06.01.2005 // 5:18 PM

    Absolutely gorgeous, Jeff. Great work.

  17. 017 // Apollo // 06.01.2005 // 5:32 PM

    Looks awsome, Jeff!

  18. 018 // Jeff Croft // 06.01.2005 // 6:28 PM

    Jeff W.-

    Also, there seems to be a problem in Safari where if you have the live search results on top of the comment box, and then scroll, it messes up the menu’s content.

    I can’t seem to duplicate this one on Safari/Tiger. Are you on the Tiger version?

  19. 019 // Nathan Smith // 06.01.2005 // 10:01 PM

    I really like the new look, with the subtle gradient at the top, the large (but not oversized) navbar/header, and of course, gotta love the Snook-style comment form. All in all, very slick design.

  20. 020 // Yannick L. // 06.01.2005 // 10:21 PM

    I love the new look. The whole thing just looks beautiful. It also has this simple feel to it.

  21. 021 // Daniel // 06.02.2005 // 9:58 AM

    Nice change to the site man. If I keep looking at this I’ll be inspired to do my own.

    One problem. What happened to the CSS font increase you had before?

  22. 022 // Jeff Croft // 06.02.2005 // 10:05 AM

    Daniel-

    I ditched the size-changer since I switched to using ems for specifiying font sizes (instead of pixels). With ems, the browser’s built-in font size increase/decrease works fine, even in IE — so I ddecided it wasn’t necessary to have an additional size-changer.

  23. 023 // oneighturbo // 06.02.2005 // 11:25 AM

    nice jeff. logo really pops on the fade. palette plays nice together.

    couple of things im noticing on FF 1.0.4 is that its tremedously sticky/slow. what im typing now has huge delays. scrolling up and down is really slow. not sure if anyone else is experiencing this?

    also if i open up my bookmarks, this fixed comment box will break out of the site framework.

    i take a screenie if ya want.

  24. 024 // Jeff Croft // 06.02.2005 // 11:36 AM

    oneight-

    logo really pops on the fade

    That sounds hot. Sounds like a rap song! Add some drums and bass and that could be the hook. :)

    Thanks for the FF comments. I actually noticed this on my PC the other day. I think part of it may be the fixed body background. FF seems to get slow when you do that. So I’ll probably change it back and see if that helps. Definitely have to figure out some way to correct it…

    As for the bookmarks thing — I see what you mean. Maybe I can fix this with some clever javascript — I’m not sure.

    Thanks again!

  25. 025 // jake // 06.02.2005 // 7:52 PM

    I haven’t gotten to check everything out quite yet but I’m enjoying it so far.

    I still can’t believe that everyone just started using fixed width for comments. I feel so left out now. It’s one of those things my compadre (we have a symbiotic relationship like this) thought up a long time ago and I never implemented it. I kept telling myself I’ll do it when we redesign (it’s been the same since 2001 baby). I think instead of rushing to join the bandwagon I’ll just wait anyway. Then I might not have to think as hard on how to fix the browser window height problem.

    In any event, I’m gonna go have a little more of a look around. Good job Jeff. :)

  26. 026 // Joey // 06.03.2005 // 4:28 AM

    Coming along nicely. If you scroll down to the bottom, you can see the buttons have a white background.

  27. 027 // Jeff Croft // 06.03.2005 // 4:15 PM

    Corey (oneightturbo):

    If you get a chance, let me know if the slowness you see in Firefox is corrected or better…

    Thanks!

  28. 028 // action // 06.03.2005 // 4:29 PM

    I noticed that your new button images on your home page flicker the first time you hover over them. Probably isn’t a big deal for regular visitors with the images cached, but definitely is noticeable for first time visitors.

    You could always use the technique of using one image and just changing the background position. Just an opinion though.

    Very nice design BTW.

  29. 029 // Jeff Wheeler // 06.04.2005 // 12:06 AM

    Alright, the Safari scroll problem only happens in the main comment box if it already scrolls. Therefore, it has to be a fairly long comment (or have a lot of line-breaks…) Then, simply open the livesearch menu, and use the mousewheel to scroll the textbox from on top of the search menu.

    Also, the quotes seem to have a white background, even when the comment background is not.

  30. 030 // Jeff Croft // 06.04.2005 // 11:30 PM

    Jeff W.-

    Thanks for the tips on the Safari problem. When I get back to a Mac (on a friend’s PC right now) I’ll check it out.

    As for the quotes — that’s simply a case of me not having revised the blockquote style for the new site design yet. I’ll get to it. :)

  31. 031 // Jeff Croft // 06.05.2005 // 3:05 PM

    Jeff W.-

    I checked out the Safari bug, and I now see what you’re talking about. IM” not sure there’s anything I can do about it, though — just looks like a bug in Safari. Bummer — at least it happens in pretty unusual circumstances.

  32. 032 // Steve // 06.06.2005 // 1:41 AM

    Just noticed that in instances where your original post is brief, the ‘preview’ and ‘post’ buttons with their white backgrounds carry over into the black footer - as the following screen grab shows:

    > <a href=”http:/img.photobucket.com/albums/v32/ElGuardo1/JCroft.jpg” alt=”Jeff Croft Homepage”> (Click on above image for larger view)

  33. 033 // Steve // 06.06.2005 // 1:45 AM

    Also, when inserting a thumbnail and corresponding link in the comment section that has been formatted with html, the images and lnk appear correctly in the preview section but, when posted, they are nowhere to be seen. So here’s the link to the screen grab:

    img.photobucket.com/albums/v32/ElGuardo1/JCroft.jpg

  34. 034 // Jeff Croft // 06.06.2005 // 4:01 PM

    Thanks for the screengrab, Steve. I think i’ve got the issue fixed. :)

  35. 035 // Peter Back // 09.06.2005 // 3:48 PM

    It’s the first time i ran through your site and I found it very informative and interesting. Nicely done! Naked truth: http://anthony.ianniciello.net/blog/archives/000079.html , Small brain blog

Post your comment