Grow your CSS skills. Land your dream job.

Sorry, the Boa has gotta GO! redesign

  • # October 19, 2009 at 12:30 pm

    First, I’m a relative noobie. This is the 4th site I’ve built or redesigned, the 3rd paying one.

    All markup validates except for one page, which has a target attribute for a PayPal purchases link. CSS validates.

    Some minor tweaking left to do (having trouble getting design centered in wide browser window, and pngfix.js not yet working to help IE6), but for the most part, I think we’re close enough to launch.

    Oh yeah–my CSS needs to be cleaned and reorganized. It got kind of out of control during the last couple days of hectic development.

    Anyway, here’s the original site: http://aroommatesurvivalguide.com/.

    And here’s the redesigned version on the staging area (it’s a little slow to load from here, but should be better when on the client’s server space): http://13squares.com/client_sites/In_Progress/aroommatesurvivalguide_Chase/working/

    I think it’s a big improvement over the original site, but I’m sure there’s lots I could have done better, so I’m open to any comments, positive or negative, on anything: the general visual design, the information architecture, specific XHTML and CSS details, anything at all.

    Thanks,

    # October 19, 2009 at 2:50 pm

    A much needed improvement. You’re giving it some structure, which it really needed.

    I would suggest centering the content area. try margin: 30px auto 0 auto;

    place the text higher up in boxes of the menu they blend in to the green bar very easily. I also would have the menu stay that pink color when your on the page you selected. This change really tells the user "you selected a menu item and you are where you selected". Also, the menu looks much better without the underline. text-decoration: none;

    This is probably a personal suggestion but I’ve never been a huge fan of really bright backgrounds they seem to take away from the content. Keep the colors just tone down the brightness. I usually open the background in photoshop, place a white layer over it and play with the opacity till its a lighter tone.

    Is the text under the headings on the main page going to be links? If not don’t use blue. That’s a universal link color. Using blue like that may cause a user to think you have a broken link or unfinished site.

    Just some suggestions. This new site is leaps and bounds over the last one. Keep plugging away at it.

    # October 19, 2009 at 4:40 pm

    Thanks for taking the time to look and offer thoughtful comments, dcp.

    I agree that the design needs centering. I’ve tried the auto margin method (along with centering <body> then left-aligning the rest to keep IE happy), but haven’t gotten it to work yet. Probably just applying things to the wrong divs.

    A couple of your suggestions were things I wanted to do, but the client has another website for a different book (http://sbergthold.com/, and she wanted them quite similar. That’s why I placed the main nav text low in the boxes, and made the background gradient so bright. She’s an artist and loves color, so in this case I decided it best to adopt the "the customer is always right" mindset, so long as it wasn’t too detrimental. For my own tastes, I’d have a much more neutral background, to make the content itself really pop.

    Good suggestion about making the background of the current page’s nav item the reddish-pink. I used a "you-are-here" kind of style to make the text a different color. but that’s scarcely noticeable. Your way is much better.

    No, the text under the headings on the main page won’t be links; they’re just plain old content. Here again, the client loved the look of the bright blue color (she’s an artist as well as an author). But you make a good point about it being potentially confusing. I’ll try to convince her that the blue isn’t such a good idea.

    One thing both the client and I agree on is that we really like the "No Boas" graphics at top-right on the subpages. She loves the basic logo (the cartoon boa strangling the red-haired kid); in fact I think this was her own design. At first I repeated the book cover in place of the No Boas graphic, but decided that the subpages needed to be a bit more different than the home page and thought of superimposing the universal circle/slash symbol (using the same red we used elsewhere on the site, and getting a red/green complementary color interaction thing going at the same time–artists love complimentary colors).

    This job is somewhat of a "can’t lose" thing, since the current site, while fully functional, has so much room for improvement in the areas of content organization and visual design.

    Thanks again for your help.

    # October 19, 2009 at 7:39 pm

    I worked with a tshirt printing company. Both owners had art degrees. I ended up having a formal discussion about how art on canvas and paper is not the same as the web. It was a tough battle. One hard thing is getting the client to trust you.

    The first thing I did is try to click the blue text, lol. I even said out loud, "guess they want those as links and not finished yet."

    If your client likes the text at the bottom try putting that green bar behind the boxes at the top. The text needs to be balanced out somehow.

    for the centering, on your second #wrapper (why do you have 2?) change your margin to:

    margin: 30px auto;

    it will center the page. I tried it already on your css and it worked fine.

    # October 19, 2009 at 7:51 pm

    More good suggestions. Thanks again.

    Not sure why I have the 2nd wrapper. Guess I needed it at one time, or thought I might. (Now it’s just one more thing to clean up before we launch.)

    I already strongly proposed losing the blue text and why, now waiting for feedback. I think I have a good chance to convince her; she’s come to trust me more and more as this redesign progresses. Hope so, because she recently requested even more blue text for different items (like whenever a book title appears). If she insists on color maybe I can talk her into green — that’d be marginally better than the "I-know-you-think-this-is-a-link-but-it’s-not" blue.

    Yeah, I see that moving the green bar higher would make for better visual balance, especially if I moved the No Boas graphic along with it.

    # October 22, 2009 at 2:48 pm

    Dude, props to you for working on that awful looking site – that’s the ugliest thing I’ve seen in a long time. Add a couple of animated gifs and you’d be set!

    I’d push HARD to get rid of the blue text – you’re only going to frustrate your users, who expect those to be hyperlinks. Pull quotes without an actual name mean nothing to people – she could be making all that stuff up. She’d be much better off giving people some free advice on the FAQ page instead of telling them to see page 14, etc. Also, I’m not sure why the Safety and Security heading is so much larger than the rest.

    Only thing I’d add "under the hood" is to use contextual selectors in your CSS – no need to replicate class="color" on those ol’s. Define it in the CSS and keep it off the actual page.

    # October 22, 2009 at 3:25 pm

    Thanks for lookng and for the helpful suggestions, friendofpugs. (BTW, I see in your profile that you’re from Aurora Illinois. I spent a fair amount of time in that area in my college days in Beloit Wisconsin and on a dig in southern Illinois).

    I jumped at the chance to work on this site. How could I lose? Anything I did would be an improvement.

    Still pushing client to OK removing the blue.

    Good idea about the quotes; I’ll see if she has names to go with them. If not full names, maybe the ever popular "Barney R, Bedrock, Arizona" sort of thing. She’s made a number of international sales, and that might be a good thing to show ("W Shakespeare, London, England")

    I agree that "see page 14" comes across as more of a teaser/sales pitch, and that one or two free suggestions might result in more sales.

    Client wanted Safety and Security larger to emphasize it, as she felt it was likely to be the most compelling category to potential buyers. But I agree that it looks kinda odd that way. Probably better to put it first on the page than use the larger font. I’ll see if I can talk her into that.

    But the good news is that the client is absolutely, 100%, enthusiastically pleased with the redesign. And the site seems to be getting quite a few more visits than we expected. Hopefully more of these will show up as increased sales for her.

    Next thing is to add a favicon. I’m thinking of using the "No Boas" graphic.

    Lots of cleanup/optimization needed in the CSS; I’ll add more use of contextual selectors to that list.

    Thanks again.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".