Blog Layout - Critical Comments

AliClifton · May 3, 2012

Hi guys,

I run music blog called The HotBox, the design of which i've recently overhauled (using a little amateur html/css and javascript knowledge).
Although I am pleased with many of the changes, i'm still a bit unhappy with the layout (feels too text heavy) I can't quite put my finger on it.
If any of you wouldn't mind sharing your opinions/giving constructive criticism then i'd be very grateful.
Of course, i'm not looking to try and get professional web consulting for free, but some friendly advice would be very welcome - naturally if you want to check out the content and/or subscribe, then please be my guest

AlexCC · May 27, 2012

The first thing I noticed when I opened your blog was that it took me a few seconds to understand how what's what.

The two outer columns are quite dominant and the middle one with all the actual content feels a bit squeezed.
What you could do is ditch the left column and make the content column. That will mean you are losing the advert space on the left. Maybe you can create a advert space in the right column, because stuff like the tag cloud and the archive don't have to be near the top of the page anyway and you can save space by making the advert space square like the merchandise link.

What you can also do is make the entire blog wider. At the moment you blog is 940px wide. You can easily go to 1000px or 1020px and still fit on a 13" MBP.

Furthermore, I would put about 5px of padding on the left of each entry in the Popular Posts segment. That way it is now it almost looks like the text begin outside the box (even though it doesn't of course, but when you just glance at it, it appears so.)

For the rest, I like the header/menu and the color scheme.

AliClifton · Jun 2, 2012

Thanks alot for the feedback Alex, it's extremely helpful.
I've made the page bigger overall and tweaked a few other settings.
I see what you mean about the popular posts section, i've tried padding the text but it doesn't seem to be formatting correctly, il continue playing with it to see if i can improve things - including considering whether to drop one column altogether or not.

In the meantime any further thoughts and feedback are very welcome

MOFS · Jun 3, 2012

I like the style, although I do agree with the above comments. As a non-web designer, I do wonder whether having the entire blog post on the front page is a good idea. I don't know whether you want to consider using article summaries and maybe just keep a picture and a blurb on the front page. I have a 2 GHz Mac mini with 8GB RAM and there was a bit of lag on loading the page, I suspect because of the number of videos/ audio clips on the front page.

AliClifton · Jun 7, 2012

Thanks MOFS appreciate the opinions, the page does lag a bit occasionally, i've never been able to determine exactly if the problem is to do with the way certain browsers handle all the javascript/html5 or whether it's on bloggers end. At one point i did have a 'read more' function but felt it encourage alot of tl;dr behavior in my subscribers, but i might go back to it with if i can figure out a way to make it a little more appealling

manueld · Jun 7, 2012

Kinda an odd total width of 900px. Increase the width of your main content column by 60 if your targeting for a resolution of less than 1024. I'd also increase the size of the fonts for the headlines and copy to make it stand out more from your sidebars.

clemsonhomerun · Jun 11, 2012

AliClifton said:
Thanks MOFS appreciate the opinions, the page does lag a bit occasionally, i've never been able to determine exactly if the problem is to do with the way certain browsers handle all the javascript/html5 or whether it's on bloggers end. At one point i did have a 'read more' function but felt it encourage alot of tl;dr behavior in my subscribers, but i might go back to it with if i can figure out a way to make it a little more appealling

Appears to be on bloggers end and where some of your content is hosted. Check out Chrome/Safari's inspector or Firefox's firebug to see what all is causing the lag.

AliClifton · Jun 19, 2012

clemsonhomerun said:
Appears to be on bloggers end and where some of your content is hosted. Check out Chrome/Safari's inspector or Firefox's firebug to see what all is causing the lag.

Ahh thanks mate, thought it might be. Hopefully soon il be able to get my own .com and switch to a better host

AliClifton · Jul 3, 2012

I've updated the layout significantly and i've gone with suggestion of removing a column, havent lost too much ad space and on the whole i think it looks less cluttered now.

What do you guys think?

fig · Jul 3, 2012

I'm a bit confused when I hit the page to be honest. The first thing I notice is a giant MERCH cube that's a button but I don't actually realize is a button at first glance. Depending on my browser size the album graphic also seems a bit oddly sized, it sort of floats there in the middle of some empty space.

Things feel a bit cramped because of the lack of vertical space, everything sort of butts up against what's above it or below it. You can also widen out your content area, there's a lot of empty space between columns that isn't used.

I took the liberty of some quick photoshop scaling and realignment, hope you don't mind:

This is built on a 960 grid, I widened out both the left and right columns to use the space a bit better and added some more space between the ad and the now larger title so I could tell they were separate elements. (You could even go a bit wider on the columns.)

In the post itself I left aligned the album which leaves plenty of room for text next to it (you could even go a bit smaller for the cover) and made the post title bigger. Added some hard returns just to make things more readable and also added a solid line on the bottom to differentiate it from the next post a bit. On the right I changed up the Merch button graphic to indicate it can be clicked.

You've also got this nice bold pink color, so USE it. Styling the twitter box a bit and getting rid of the unneeded borders, for example, could be really striking.

Hope that helps.

AliClifton · Jul 3, 2012

Thanks alot for the feedback and notes fig that's really helpful. I like those ideas about moving the art and text around and the widening in general. Il also have a go at redoing the merch button to make it more obvious what it is.
By the 'hard returns' do you mean double line spacing between paragraphs? I can see how that would aid readability. A line breaker seems like a great idea for splitting things up, any of the best way of doing this, I can think of a few 'manual' ways but there must be a html code i can place into my 'posts' coding.
The colour was an intended bold choice, thanks for picking that one up. I've tried to be restrictive with it to avoid the page looking (for want of a better word) 'tacky' which i fear might happen if I make the twitter box stand out more, what are your thoughts?

fig · Jul 3, 2012

Glad to help. And yes, hard returns means two spaces between paragraphs.

There is a return (or <br> tag) between this line.
And this line.

This one has a hard return (or <p> tag).

That pink bar on the twitter section may very be too much, selective use of the pink is probably best but that doesn't mean don't use it. You could always just do a thin solid color header or horizontal line or something.

One other thought that might help it feel less cramped, could you find a slimmer audio player? The one on there is kinda bulky.

AliClifton · Jul 3, 2012

A solid line separating each post could work well, any idea of the best way of doing this, I can think of a few 'manual' ways but there must be a html code i can place into my 'posts' coding?

fig · Jul 10, 2012

AliClifton said:
A solid line separating each post could work well, any idea of the best way of doing this, I can think of a few 'manual' ways but there must be a html code i can place into my 'posts' coding?

Sorry, I totally missed this a while back.

For the code you could include something like this style in the CSS for your post:

border-bottom: solid 2px #00000;

Which would give you a solid black 2 pixel line at the bottom of your post.

jtara · Jul 10, 2012

1. Way too much space between the columns.

2. Tiny text.

3. That ugly font used for the site name.

4. Can you trim the tags at some reasonable percentage? Way too many.

AliClifton · Jul 11, 2012

I've been playing with the look and feel once again based on the suggestions here. It looks nice, seems to scale well and nice and readable, overall i think it's improved but is yet to be perfected, can't quite put my finger on it.

jtara said:
3. That ugly font used for the site name.

4. Can you trim the tags at some reasonable percentage? Way too many.

That's a shame you don't like the font, it's my own edit of a freely available one, I personally like it, but made sure not to over do it.

The tags are a bit of an issue, but come with the territory of covering so many artists/genres, they do warrant some attention though, so i'l look into it....thanks for the feedback

AliClifton · Jul 16, 2012

not sure about the readability of the new text arrangement, any thoughts?

radug · Jul 16, 2012

still too wordy.

//////// technical issues :
your site has over 750 requests for the homepage. That is bordering completely impractical. Good practice is under 100, even feature-rich ones stay under 200. This is your first major problem.
Further, a standard page load gave me quite a few errors : 5 3xx (redirecting) errors, 12 4xx (client) errors, 5 5xx (server) errors and 5 connection errors.
At the end, JS scripts become unresponsive :

Code:

Warning : script on this page may be busy, or it may have stopped responding. 
Script: http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js:2

The size of the page is a whopping 3MB as well, with some elements taking more than 4s to fetch.
use something like this to check : http://tools.pingdom.com/fpt/
//// design
your instincts are right : it is too wordy. i suggest you follow your gut and use the <read more> solution, limiting the frontpage to an excerpt and 1 image. This should also take care of most of the technical issues.
This will vastly improve the layout as well. Also, limit that tag cloud to about half of what it is right now, as most of it is unreadable anyway.

hope this helps.

----------

as an addition, i recently built an image-heavy site, on the wordpress platform and managed to keep it at averagely 70 requests & a page-load time of 600ms, with a page size of 1.2 MB.
just for comparison.

AliClifton · Jul 17, 2012

radug said:
//////// technical issues :
your site has over 750 requests for the homepage. That is bordering completely impractical. Good practice is under 100, even feature-rich ones stay under 200. This is your first major problem.
Further, a standard page load gave me quite a few errors : 5 3xx (redirecting) errors, 12 4xx (client) errors, 5 5xx (server) errors and 5 connection errors.
At the end, JS scripts become unresponsive :

Code:

Warning : script on this page may be busy, or it may have stopped responding. Script: http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js:2

The size of the page is a whopping 3MB as well, with some elements taking more than 4s to fetch.
use something like this to check : http://tools.pingdom.com/fpt/
//// design
your instincts are right : it is too wordy. i suggest you follow your gut and use the <read more> solution, limiting the frontpage to an excerpt and 1 image. This should also take care of most of the technical issues.
This will vastly improve the layout as well. Also, limit that tag cloud to about half of what it is right now, as most of it is unreadable anyway.

hope this helps.

----------

as an addition, i recently built an image-heavy site, on the wordpress platform and managed to keep it at averagely 70 requests & a page-load time of 600ms, with a page size of 1.2 MB.
just for comparison.

Thanks for the technical feedback, this is really useful stuff, if a little above my learning curve (incentive to learn more though)

I've rehashed the design again with the aim of reducing overall page size and implemented a rather neat 'read more' solution - overall it's reduce the size of the page down to 1.2MB with 90 requests - still some work to be done, but a vast improvement nonetheless.

Tag cloud has been comprehensively limited and im in the process of clearing that up further.

Regarding the errors, the redirecting ones a solvable but the client/scripting errors may be a little out of my league but il start investigating with chrome's developer tools and see if i can find the source of all these errors.....in the meantime i'd appreciate any hints in terms of where's the best place to start looking/typical sources for such things

Otherwise thanks for the feedback, and of course any further suggestions are still more than welcome

radug · Jul 17, 2012

extras

AliClifton said:
Thanks for the technical feedback, this is really useful stuff

you are most welcome

AliClifton said:
I've rehashed the design again with the aim of reducing overall page size and implemented a rather neat 'read more' solution - overall it's reduce the size of the page down to 1.2MB with 90 requests

well done, this is exactly what i had in mind : the new layout is orders of magnitude better.

a few more pointers :

- overall, i still feel you should take everybody's advice and enlarge the layout, particularly the text. Try pressing "⌘ +" to zoom in twice (or once) to get a feel of what it should be like.
- if not, at the very least, increase the font sizes : main text +2, heading +4.
Personally, i can't read it without getting closer or zooming in, which i would not bother doing and just leave the website.

- enlarge the menu : i would make it fit the entire width of the layout
- i would rename "Merch" to merchandise and make its text a bit smaller : it's competing (and winning) with the main logo, which should not happen.
- can you find a way so that the archives widget opens minimised ? it's unnecessary to have it all rolled out.
- can you remove the timestamp from under the menu ? it's not needed.
- can you move the tag cloud of each post from under the title to after the Read More sign ? aligned with the bottom of the text ?

Code:

TagListCssClass {
vertical-align: bottom;
}

MOFS · Jul 17, 2012

AliClifton said:
Thanks MOFS appreciate the opinions, the page does lag a bit occasionally, i've never been able to determine exactly if the problem is to do with the way certain browsers handle all the javascript/html5 or whether it's on bloggers end. At one point i did have a 'read more' function but felt it encourage alot of tl;dr behavior in my subscribers, but i might go back to it with if i can figure out a way to make it a little more appealling

No problem. You're certainly heading in the right direction - the page doesn't notably lag at all now. There is a lot of white space below the last post on the page and to the left of the right hand side vertical "your ad here now". I wonder whether it's worth setting up a separate page for potential advertisers to preview, otherwise there is a lot of empty white space saying "your ad here". In my defence I'm no web designer [just run my own blog] so I don't know what people with a web designing background think.

RE the "Merch" thing - you could try calling it "Hot buy" or merchandise, depending how you want to go with the branding. I read the Brand New design critique site a bit and recommend it if you're looking to expand your identity.

AliClifton · Jul 19, 2012

Going to sort the merch button out soon and make it a bit clearer, it's needed doing for a while.

The ad/white space is an issue and really i need to switch to a better ad provider if i can find one, since my current provider, 'Project Wonderful', is fairly unreliable in terms of selling my real-estate efficiently and also sells ads on a traffic by region basis (so while there may be plenty of white space for readers in the US and EU, those outside will just see ads currently). Then again, i dont get huge traffic and im not looking to make a load of money, but enough to cover the yearly lease for my own .whatever would be great.

Found a nice code for keeping the archive collapsed too, anyone interested can grab it here

AliClifton · Jul 21, 2012

I've just very quickly and roughly re-hashed the 'Merch' logo/button, it's an improvement but still just a very rough/1min fix for now...need to have a think about what would be best regarding colour and text arrangement.
Any thoughts as always are appreciated regarding the button and the blog appearance as a whole

On a slightly different note, i'm wondering what your thoughts might be regarding the content - I've managed to build a relatively decent and slowly growing following since starting just under a year ago and though i'm aware the blog's very narrow subject area won't appeal to everybody, it would still be useful to see who it appeals to in this community and whether or not I could broaden my audience without drastic changes.

Blog Layout - Critical Comments

macrumors member

macrumors newbie

macrumors member

macrumors 65816

macrumors member

macrumors 6502

macrumors newbie

macrumors member

macrumors member

macrumors 6502a

macrumors member

macrumors 6502a

macrumors member

macrumors 6502a

macrumors 68020

macrumors member

macrumors member

macrumors member

macrumors member

macrumors member

macrumors 65816

macrumors member

macrumors member

Our Staff