14 Aug 2008 8 pm eastern

Books-a-Million

Pssst. New Happy Cog Studios design. Books-A-Million Online Bookstore. It looks even better when you start using it. Details soon at happycog.com.

Update: A Books-A-Million case study is now available for your reading pleasure at Happy Cog dot com.

[tags]books-a-million, happycog, design, webdesign[/tags]

Filed under: Design, Happy Cog™, links, Philadelphia, Web Design, work

26 Responses to “Books-a-Million”

  1. Martin Kuplens-Ewart said on

    Wow – very sweet. Especially enjoying the way product photos/covers have been treated on the item pages!

  2. Carl said on

    It must be said:

    “Errors found while checking this document as XHTML 1.0 Strict!
    645 Errors, 490 warning(s)”

    If Happy Cog can’t get it valid, what hope is there for the rest of us?

  3. Jason Campbell said on

    Books a Million shouldn’t look and operate that good. Kudos to the Happy Cog team. I have envy.

  4. Carissa said on

    Aha! Books a Million is a local company so I try to shop there as much as possible. I was at their site just last week and though it looked much better than the last time I was there. Congratulations!

  5. Dave S. said on

    Super slick! Well done guys (and gals).

    (Minor overexposure nitpick though: I’m wondering if maybe there ought to be a designer’s moratorium on blue gradients + Gotham till Jan 2009… I’m seeing it a LOT lately)

  6. Nate Klaiber said on

    Very well done. I created an account and have been playing around, and I really enjoy the interface. I love the easy pull down access to the shopping cart and the wish list. I also love the detail pages for books, nicely structure and organized – and very clean.

    Job well done to all involved.

  7. Joe said on

    Is there any way to eliminate the dotted outlines that show up when I click on the left and right arrow buttons on a page like http://www.booksamillion.com/books (using Firefox 3 on Vista)?

  8. Erik Peterson said on

    Looks great. I expect to see an increase in the conversion rate of the affiliate traffic I’m sending there.

    To answer Joe’s question:

    a:hover img, a:active img, a:focus img { outline: none; }
    a:active > img, a:focus > img { outline: none; }

  9. Steve Frost said on

    However, removing the dotted outline decreases usability for keyboard users.

  10. Gareth Trufitt said on

    Thought the sidebar looked a bit weird in FF so checked in IE and realised id switched JS off with the WD toolbar.. The amount of times I’ve made that mistake!

    Nice job, Looks Super Duper!

  11. Mike said on

    Nice and glossy.

    But also clunky. Still a long way to go compared to Amazon. The use of screen real estate is wasteful. Can’t comment on the actual buying process, just a fist impression (and those count in these days of information overload).

    Just my 2c.

    Mike

  12. Mike said on

    That should have been first impression. lol

  13. Kim said on

    Steve – wouldn’t using a:focus to produce an obvious change of state remove the need to have the outline? Personally I find it extremely distracting when the outline extends off the screen because of image replacement techniques.

    The ‘edit wishlist’ button retains the outline, but with it extending over the entire functional navigation bar I would question whether the average keyboard user would gain any usability from it.

    I like the clean lines of the design and the functionality is great – with the exception of the flash ‘more of’ area – really frustrating trying to read the hover info.

    cheers

    Kim

  14. Krystyn said on

    The Sci-Fi dude? He scares me a little bit.

    Crushing on the pretty transitions in those sidebar sections. Yum.

  15. Robert said on

    @Carl

    The most upsetting thing is that the body tag opens before the close head tag (especially when the correctly placed body tag is sitting right there commented out). The random table used for not-tabulated data but for Flash content (using embed instead of object, no less) is a little weird, and a definition list that has divs as direct children is a little weirder.

    Ignoring the markup, the site looks great. I’m curious about the statistics used when a fixed-width 1024 wide site was chosen. I am under the impression 800 wide screens are still very pervasive. Given the right setup, it’s a very pleasing site, though. I’ll be happy to use it next time I’m book shopping online.

  16. Josh Stodola said on

    Excuse me while I recover from my unfortunate exposure to Flash. That was the first thing that loaded. Ugh.

    Scriptaculous? Prototype? You’ve gotta be kidding me! jQuery stomps the colon of this wanna-be competitor. I’ll prove it, too. This stuff runs on the user’s machine (responsibility required).

    I’m not gonna fuss about the markup, I’m sure the majority of this garbage comes from the server-side code that you do not have control over.

    Ordered lists have a huge left margin in IE.

    The mouse-over animations are disorienting. Stick to the click.

    Other than that, bravo!

  17. Greg said on

    My first reaction was, “Why so SLOW!”.

    Maybe this is why.
    Total HTTP Requests: 60
    Total Size: 944849 bytes

  18. Dave said on

    Gee whiz, guys! Tough crowd here.

    For what it’s worth, I think it’s a well-designed site. I’m completely unconcerned about the odd table thrown in here or there. You should see what my XHTML/CSS looks like after it’s been sent through the ASP.NET wringer.

    Then again, no, you shouldn’t see it.

    Congrats to the folks at Happy Cog. Nice job.

  19. Josh said on

    Looking good!

    Could I suggest that Lucida Sans Unicode might be mentioned in the CSS, as well as Lucida Grande, since it is an extremely similar font, but comes with Windows machines?

  20. Steven said on

    Books a Million is by far the worst book store I’ve ever been to. They don’t even deserve your good works. Just sayin’.

  21. Jeffrey Zeldman said on

    Could I suggest that Lucida Sans Unicode might be mentioned in the CSS, as well as Lucida Grande

    Nice. I do that here, BTW, to correct for the lack of italics in Lucida Grande:

    em, cite { font-family: "Lucida Sans", "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; }

  22. phil said on

    I suppose you had to realise that people were immediately going to feed it to the validator – and if we’re honest, it’s mostly nit-picking since the vast majority of the errors are due to the lack of properly encoded URLs (ampersands primarily) and unescaped JavaScript. Although there are rather a lot of end tags missing too.

    Back in the real world, try finding the same item on Book-a-Million and Amazon, then disable all styles and JavaScript. It’s plain that a lot of effort was made to ensure that the site worked for the widest audience possible.

    It’d be useful to read a little about the compromises that were made in order to get to the finish line, and also about the reasoning behind those compromises.

    FWIW, my source-browsing 2c: double close tags for body and html at the end of the movie detail pages.

  23. Peter Principle said on

    @Carl: Z merely told us it was a Happy Cog design, not a breakout.

    Of 643 validation errors, most of them are because the body tag opens before the head tag closes. Clean that up and I suspect the site will validate rather quickly. I’ve seen this same error before with .NET (oddly, I never see this with PHP for some strange reason), so this might not be Happy Cog’s fault at all.

    Also, I’ve seen designs — to be implemented by the client or a third party — sail off to the client, complete with the most elegant CSS and a perfect XHTML breakout, only to have the client re-code the site into HTML4 Loose (or worse!) with borked table-based layout, font tags, and the lamest CSS ever written, because that was the level of Web code that they understood.

    It’s sad, but it happens — and I feel your frustration.

    @Robert: resolution depends, IMHO, on your traffic stats. No reason to use 760 if you’ve had only a declining handful of visitors using 800×600.

  24. Jeffrey Zeldman said on

    Sorry for not responding earlier on the validation point. Happy Cog’s work always validates when it leaves the shop, but we don’t always execute the back-end.

    Some CMS systems are better than others at delivering standards-compliant work intact. As vendors, we can recommend but not dictate which back-end systems our clients use when they do their own back-end work.

    Sometimes, because of legacy or e-commerce issues of one sort or another, a client needs to work with a system whose output is less than ideal from a standards point of view.

    Then, too, without referring to specific cases, sometimes clients change the work between delivery and launch.

    Sometimes the work comes out exactly the way you delivered it, and sometimes not. If the site is good anyway, and if you’re proud of the work you did, it’s okay to showcase the site, even if some details differ from what you delivered.

  25. Brade said on

    Huge props! I’ve been a member of books-a-million for years now, because most of the time they are cheaper. but I lamented the quality of their website, until now. Looks great, and I hope it helps their business grow. Some of their physical locations could still use a little help, but hey, one step at a time…

  26. Derek Pennycuff said on

    Holy crap. I worked at BAM in Knoxville way back in 2001-2002. I always hated their website and the corporate culture seemed to be pretty far removed from groking the importance of technology in general, to say nothing of specifics like web usability. I guess a lot can change in 7 years.

Comments off.