Shiny Layout Modifications

You know, I have grown quite fond of this layout. Considering it started out as something completely other and within a month of having it up I noticed I was the last person to jump on the wide header bandwagon, it has served me well. I say “served” past tense, because I want to give it a polish… tidy up the corners and stuff.

You can see my general idea here:

thumbnail of modifications

Bear in mind a few things:

  • This is based on the dark blue override, but the general style and shape would be the same for all ‘themes’
  • I’ve cut this about in Paint Shop Pro, so it’ll be a bit rough around the edges
  • The sidebar has simply been brightened using the Brightness/Contrast tool so text colours may differ from finished version

For me, the proposed changes give me back some of my “screen real estate” (that’s the trendy term for space) that I’m losing with the ridiculous height of the header. I also gain a tidier sidebar because the solid edges gives it a sense of unity and distinctiveness that I’m currently lacking. So… thoughts? Suggestions? “OMG I HATE IT!”s?

65 Comments

  1. The best part of it is how the sidebar is given a different background and it really actually looks like a bar rather than just more content on the right hand side. That’ll help with not only reduce overwhelming the reader with the amount of text that looks like content (as some would be clearly distinguished as menu text) but as you said, it’ll look tidier.

  2. 1. Don’t like the thick black borders, dropshadows plz. 2. Love the sidebar, yes please. 3. Not sure about the header. Maybe the header should stay wide while the content has the borders? I think the navigation looks a bit squashed as it is in your preview and the background of the header looks a bit weird.

  3. Jem

    21 Jun at 5:30 pm

    @Amelie: 1. MORE drop-shadows? Don’t you think the gradient of the navigation, under the header and the grey background would “fight” with further shadowing? Not to mention that would involve having to create a fixed width border when the site is fluid… 3. I don’t know why the navigation looks squashed, I’ve not changed the height of that – only reduced the superfluous colouring above and below Jemjabella + the tagline!

  4. Yes, MORE dropshadows! I dislike the chunky borders, it doesn’t fit the general style of the layout. I think a thin border with a very slight dropshadow would work well enough not to “fight” with the gradients and all that. :) Oh, and I meant that the navigation looked squashed horizontally, not vertically…

  5. Jem

    21 Jun at 5:38 pm

    I disagree re: drop-shadows. :P Plus, like I said, I don’t want to move away from the fluid layout.

  6. No no no. It looks like a standard, boring two column layout. Okay not boring, but…standard. I fell in love with your current design because it was different to your other layouts. I like the header and I like the sidebar and I generally like everything about it. To me, the new version seems more like stepping backwards :S

  7. I like it. What would it look like if the pink section was 100% wide though?..

  8. Also disagree with drop shadows. It might look overdone. As it goes, I quite like it. Ignore Matthew. :P

  9. NO DROPSHADOWS FOR THE LOVE OF GOD! PEOPLE ARE OVERUSING BEVEL AND EMBOSS, GRADIENTS AND DROPSHADOWS. Sorry for the shouting, I just feel strongly about it. I like the last version you posted, with the wide header and the well defined content areas. I also prefer the dark blue colour scheme to the current colour scheme. I disagree about stepping backwards, big headers are trendy at the moment so if you want to stand out then you should consider not going for the trends :P Restart simple two column layouts!

  10. Stephanie

    21 Jun at 6:03 pm

    I thinkkk… that if you do that stuff, it’ll end up looking like your other layouts. This particular design is different from your standard repertiore, but I know I’ve seen all of the mods you’re suggesting before in several previous layouts, and I think that once you add them, this will become another standard “Jem” layout. Not that that’s a bad thing, just that this is a different direction for you, personally. But hey ho, what do I know? I’ve been out of the web design game for a while now, focusing more on posters and adverts for local events and the like. I just think it’ll end up looking… typical. So eh. My two cents.

  11. I like it. I looks very nice. The only thing I can maybe suggest is to justify the text. ?

  12. I think you should add tons of dropshadow just to annoy Becky >:P How about a flashing glitter sparkly background? *Dodges rocks*

  13. v2 – I like it. Even more! (I’ve had a penchant for that kind of look lately)

  14. I like the new idea a lot! What you already have is good, but that is great!

  15. *chucks rocks at Amelie* Don’t you dare start biotch! You want I should come over there?

  16. I like the colors of that one more than the current one, but my favorite part of this is how wide everything is.

  17. Jem, I really like the modifications. I especially love how the sidebar has a different background color so it’s more distinguishable. I always thinks it looks a bit messy when the sidebar is hard to tell apart from the navigation. I also think it’s nice that the layout does not take up the whole screen. I like the header with the site name and slogan better when it is fitting right over the area with the content and sidebar, rather than across the whole screen.

  18. I like the second version much more. It looks not so squashed up top. Unless you change the header & navi completely you should go with the second version. :D Listen to me talking like I know anything. lol.

  19. I prefer the top one more, I’d also try and sort out the link/background contrast on the sidebar, i’m having trouble reading it (or it could be just the brightness?)

  20. I like some things about both, but I’d have to say I like the new one better! I like the width. Less brightness/contrast in the sidebar, imo.

  21. I don’t like the second version (with the full-width pink banner thing). I say make the entire header full width or none of it… *chucks rocks at Amelie* Don’t you dare start biotch! You want I should come over there? Yahuh. Whatcha gonna do? *Arms self with dropshadows and flashing backgrounds*

  22. I vote june-mods-two.png. That’s how I want to see my Jemjabella. Fluid layouts ftw!

  23. eh, I like the current full width layout rather than shoving it in a box (column?) sidebar is nice though, and a slightly shorter header won’t do any harm :)

  24. I really like number two. I was split between two and four, but I think that two is more unique because only half of the header spans the entire screen. That’s hot. It’s hard to see how many px wide the side borders are, but I think you should bring it down to two px instead of the three or four that it looks like. *silently laughs at the person up there who suggested justified text….*

  25. Number one. Definitely number one. I like contained stuff, and I don’t like the header stretching wider than the content.

  26. I really love two and four. I liked how three just added the sidebar so the layout stayed pretty much the same, but you should sitck with something like two or four. I can’t choose which I like more, though.

  27. I honestly can’t decide between 1 and 4. Would it look bad if the space between the sidebar and the right border was omitted?

  28. Those thick black borders are wrong… you should make the sides look like they taper off with the same 3D effect that you have between sections.

  29. I really like 1 and 3. Personally I don’t like the header stretching across the whole width of the screen in 2 and 4 without everything else stretching. I’d love to see that layout up here soon!

  30. I’m liking it when I see the little picture of it, but perhaps offer it as merely a style override at first, get some comments, then implement it if you like it? Four is my favourite.

  31. If it’s going to be rough around the edges, then I’d avoid curving them because it’d look ugly. The sidebar part looks great, as long as the lighter color doesn’t stop at the bottom of the sidebar.

  32. I’m stuck between liking your 3rd/4th mod… But I just have to say something really odd. The colors used for the main content font, and the background color fit perfectly. and Holy hell I really have an odd obsession with Verdana…

  33. I’m partial to number 1, but if you must choose another, I’d pick the second one.

  34. Truthfully, I think it’s a bit too common. Be unique! The one you’ve put up seems all too similar to one’s you’ve had in the past, and ones that EVERYONE uses.

  35. I love the first one the best. I like having space on the sides, i.e. the header and content not taking up the whole screen. I don’t like having everything stretched out so far. That color scheme is great. The sidebar goes really well with it. The dates and links in the sidebar are a little hard for me to read. I think the pattern at the top goes great with the colors. I think it’d look good to have that same patterned background in the footer too, or somewhere at the bottom.

  36. I actually like your idea, Jem. The colors are wonderful together, and the new look proves to show unity and simplicity. I really like it.

  37. Those thick black borders are wrong… you should make the sides look like they taper off with the same 3D effect that you have between sections Thats what I think, the thick black borders are ugly, the rest of the layout is gorgeous. i cant decide between 1 and 3. I like 3 the best I think.

  38. I quite like four, myself. I also seem to be alone in that I like the thicker black borders with the rest of the layout.

  39. I love the colours you’ll be using. I wish I could “join the crowd” and give you some creative input but alas, I like the whole look. The very one you have showing on your post. I think the borders help give it a centered, contained yet “jumping out” affect. Removing them would just… I just think you should go with the first.

  40. I like it a lot.

  41. The layout looks really good. The ultimately better than you has just depressed me… I never noticed that before

  42. lmao this is too funny… Why don’t you just ‘skin’ your site and let people choose their own layout that way?

  43. Jem

    22 Jun at 8:52 am

    Why don’t you just ‘skin’ your site and let people choose their own layout that way? Because I don’t want to, because of the time and hassle involved in updating every skin if I add something new or changing a page styling about, because I want to keep a common appearance for everybody with the simple option of changing the colour scheme.

  44. Absolutely love it :) Can’t wait to see i in action.

  45. @Jem. You coulda just said “no…” lol. I was just trying to help!

  46. Hi there. This is my 1st time commenting..anyway I like layout 2 the best =D

  47. I like it alot! The layout will still be fluid though, won’t it?

  48. The thing I like about your themes are that they’re pretty much flexible when it comes to altering them – and they look fantastic to boot. I like it. :) I’ve become slightly accustomed to seeing magenta (fuchsia? a nice shade of pink?) stretch across the screen, but the new mods still make it look cool.

  49. I like the first version, except for the links color in the sidebar. lol I don’t know why, I just don’t. And there’s something about the gray color that’s bothering me. Something a little darker perhaps? I don’t know. lol You may now ignore me after this ridiculous, non-sensical comment lol

  50. OMG I love it! :D :D looks so good Jem ! Great job!

  51. I’m boring and dull, i still prefer the chocolate lime version as it was.

  52. I like the definition of the sidebar, however I don’t like the black borders at all. I prefer the current full width layout too. Keep it like it is, but with a defined sidebar area!

  53. Yahuh. Whatcha gonna do? *Arms self with dropshadows and flashing backgrounds* *raises eyebrow* I am Becky The Magnificent, you really think that’s gonna stop me? I laugh at you HAHA. HA! I still prefer the second one, the third and forth don’t look as good in my opinion. I like that the content area is separate from the background. #4 isn’t that bad, just not a fan of the pattern going all the way :) Suggestion for the borders: Why not darken the background colour slightly and use that colour for the borders? That gives it a bit of a shadow-y feel without the disgusting hassle of too many gradients/dropshadows.

  54. I personally like number four.. Not quite sure why, I just do! It stands out to me and it would be the one that I would choose!

  55. In a very short space of time I have changed my mind. I now like number 2 the best =D and I’m sticking this time!

  56. You know, Jem. You may decide that you hate me for this, but I really can’t see where you need to make changes. I like your site. I honestly can say I wouldn’t change a thing about your site. I think that is the first time I have said that about a site. ;)

  57. I personally prefer the first one. Really like the style – will look great.

  58. Black border doesn’t match the layout but what about a darker blue instad of black?

  59. Wait a sec. Damn you high-contrasted screen! I can’t see if it’s grey or black! But I insist on a darker blue.

  60. I always like layouts with a cool, dark gray in wide use, so I like this idea, too. The pink header is a nice offset from the gray. I think the background color should be slightly darker, or otherwise somehow more different, from the gray background of the container.

  61. I think I like number three the most. :D