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:
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?
![[feed]](/images/feed.gif)
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.
Comment added: June 21st, 07 @ 6:25 pm1. 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.
Comment added: June 21st, 07 @ 6:27 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!
Comment added: June 21st, 07 @ 6:30 pmYes, 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…
Comment added: June 21st, 07 @ 6:33 pmI disagree re: drop-shadows.
Plus, like I said, I don’t want to move away from the fluid layout.
Comment added: June 21st, 07 @ 6:38 pmNo 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
Comment added: June 21st, 07 @ 6:47 pmI like it. What would it look like if the pink section was 100% wide though?..
Comment added: June 21st, 07 @ 6:50 pmAlso disagree with drop shadows. It might look overdone. As it goes, I quite like it. Ignore Matthew.
Comment added: June 21st, 07 @ 6:51 pm@Daz: http://www.jemjabella.co.uk/junk/june-mods-two.png
Comment added: June 21st, 07 @ 6:54 pmNO 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
Restart simple two column layouts!
Comment added: June 21st, 07 @ 7:01 pmI 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.
Comment added: June 21st, 07 @ 7:03 pmI like it. I looks very nice. The only thing I can maybe suggest is to justify the text. ?
Comment added: June 21st, 07 @ 7:10 pmI think you should add tons of dropshadow just to annoy Becky >:P How about a flashing glitter sparkly background? *Dodges rocks*
Comment added: June 21st, 07 @ 7:11 pmv2 - I like it. Even more! (I’ve had a penchant for that kind of look lately)
Comment added: June 21st, 07 @ 7:12 pmI like the new idea a lot! What you already have is good, but that is great!
Comment added: June 21st, 07 @ 7:28 pm*chucks rocks at Amelie* Don’t you dare start biotch! You want I should come over there?
Comment added: June 21st, 07 @ 7:31 pmI like the colors of that one more than the current one, but my favorite part of this is how wide everything is.
Comment added: June 21st, 07 @ 7:50 pmJem, 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.
Comment added: June 21st, 07 @ 7:55 pmI 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.
Listen to me talking like I know anything. lol.
Comment added: June 21st, 07 @ 8:03 pmI 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?)
Comment added: June 21st, 07 @ 8:23 pmI 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.
Comment added: June 21st, 07 @ 8:28 pmI 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… [quote] *chucks rocks at Amelie* Don’t you dare start biotch! You want I should come over there?[/quote] Yahuh. Whatcha gonna do? *Arms self with dropshadows and flashing backgrounds*
Comment added: June 21st, 07 @ 8:48 pmI vote june-mods-two.png. That’s how I want to see my Jemjabella. Fluid layouts ftw!
Comment added: June 21st, 07 @ 8:50 pmeh, 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
Comment added: June 21st, 07 @ 8:51 pmhttp://www.jemjabella.co.uk/junk/june-mods-three.png http://www.jemjabella.co.uk/junk/june-mods-four.png
Comment added: June 21st, 07 @ 9:08 pmFour!
Comment added: June 21st, 07 @ 9:16 pmI 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….*
Comment added: June 21st, 07 @ 9:26 pmNumber one. Definitely number one. I like contained stuff, and I don’t like the header stretching wider than the content.
Comment added: June 21st, 07 @ 9:35 pmI 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.
Comment added: June 21st, 07 @ 10:00 pmI honestly can’t decide between 1 and 4. Would it look bad if the space between the sidebar and the right border was omitted?
Comment added: June 21st, 07 @ 10:34 pmThose 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.
Comment added: June 21st, 07 @ 11:14 pmI 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!
Comment added: June 22nd, 07 @ 12:33 amI’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.
Comment added: June 22nd, 07 @ 1:03 amIf 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.
Comment added: June 22nd, 07 @ 1:56 amI’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…
Comment added: June 22nd, 07 @ 2:02 amI’m partial to number 1, but if you must choose another, I’d pick the second one.
Comment added: June 22nd, 07 @ 2:10 amTruthfully, 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.
Comment added: June 22nd, 07 @ 3:06 amI 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.
Comment added: June 22nd, 07 @ 3:29 amI love it, honestly. http://www.jemjabella.co.uk/junk/june-mods-four.png That one, especially.
Comment added: June 22nd, 07 @ 3:32 amI actually like your idea, Jem. The colors are wonderful together, and the new look proves to show unity and simplicity. I really like it.
Comment added: June 22nd, 07 @ 3:53 am[quote] 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[/quote] 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.
Comment added: June 22nd, 07 @ 3:55 amI quite like four, myself. I also seem to be alone in that I like the thicker black borders with the rest of the layout.
Comment added: June 22nd, 07 @ 4:40 amI 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.
Comment added: June 22nd, 07 @ 4:56 amI like it a lot.
Comment added: June 22nd, 07 @ 7:43 amThe layout looks really good. The ultimately better than you has just depressed me… I never noticed that before
Comment added: June 22nd, 07 @ 9:21 amlmao this is too funny… Why don’t you just ’skin’ your site and let people choose their own layout that way?
Comment added: June 22nd, 07 @ 9:27 am[quote]Why don’t you just ’skin’ your site and let people choose their own layout that way?[/quote] 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.
Comment added: June 22nd, 07 @ 9:52 amAbsolutely love it
Can’t wait to see i in action.
Comment added: June 22nd, 07 @ 11:21 am@Jem. You coulda just said “no…” lol. I was just trying to help!
Comment added: June 22nd, 07 @ 12:27 pmHi there. This is my 1st time commenting..anyway I like layout 2 the best =D
Comment added: June 22nd, 07 @ 12:37 pmI like it alot! The layout will still be fluid though, won’t it?
Comment added: June 22nd, 07 @ 3:34 pmThe 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.
Comment added: June 22nd, 07 @ 3:40 pmI 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
Comment added: June 22nd, 07 @ 4:30 pmOMG I love it!
:D looks so good Jem ! Great job!
Comment added: June 22nd, 07 @ 7:20 pmI’m boring and dull, i still prefer the chocolate lime version as it was.
Comment added: June 22nd, 07 @ 7:31 pmI 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!
Comment added: June 22nd, 07 @ 9:01 pm[quote]Yahuh. Whatcha gonna do? *Arms self with dropshadows and flashing backgrounds*[/quote] *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.
Comment added: June 22nd, 07 @ 10:09 pmI 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!
Comment added: June 22nd, 07 @ 10:58 pmIn 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!
Comment added: June 22nd, 07 @ 11:01 pmYou 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.
Comment added: June 23rd, 07 @ 3:45 amI personally prefer the first one. Really like the style - will look great.
Comment added: June 23rd, 07 @ 12:58 pmBlack border doesn’t match the layout but what about a darker blue instad of black?
Comment added: June 23rd, 07 @ 3:12 pmWait a sec. Damn you high-contrasted screen! I can’t see if it’s grey or black! But I insist on a darker blue.
Comment added: June 23rd, 07 @ 3:15 pmI 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.
Comment added: June 23rd, 07 @ 5:38 pmI think I like number three the most.
Comment added: June 23rd, 07 @ 7:16 pm