Science blog

[ignat]

Hello everyone,

I recently launched a science blog:

http://www.hawaiistreets.com/sciencenews

Just wondering if I could get some feedback on layout, especially concerning the Ads. I would like to make it kinda of "newspaper-like" if that makes sence. Thanks for your feedback

 

[music_man]

Hey

The Google ads at the top are quite tricksy. People may expect it to be a navigation bar and instead it is an ad. I'm not quite sure whether you should have it there.

The title of the page does not line up... why not have it along the top and not on the right. The content is immediate and clear with a good sized font, which is good.

The grey box on the left goes over the dotted line that seperates it from the content. you may want to add "category:" next to the topic name next to "comment on this story".

You are using a CMS so I am not sure how easy it is to edit.. Perhaps add some texture to your boxes. Maybe even some faint typed lines that fade into white.

The adsense at the top goes over the title. you have no footer... nor a sitemap (which you may want) nor a copyright.

The content looks good. Unfortunately your HTML has some errors: http://validator.w3.org/check?uri=http://www.hawaiistreets.com/sciencenews/.

Try aligning the boxes up and add some background images to them and perhaps some images to connect them with the content... maybe a type writer?

 

[ignat]

Hi,
thanks for such a great feedback. I aligned the title a little bit, but for now I want to leave it where it is. I also removed those ads from the top. I agree with you that they can be tricky. I don't want that.

I looked at the hml includes that I'm using to build the site with CMS, and html is definately right. I think the reason for all those errors is that html uses some tags that are read and processed by CMS. Not sure though.

I also don't really know what you mean by saying that the left box goes over the dotted line that separates it from the content. I'm using 1024 resolution(my screen doesn't go higher than that). Maybe your resolution is larger. If so, I definately have to find a way to fix that. I tested the site in IE and Firefox under 1024 resolution. It seems to look fine.

I will definately add a footer and so on. As well as a few graphical aspects. Not too much though.

If you could specify the alignment problem alittle bit more, that would be great. Thanks alot for all that feedback.

 

[music_man]

Hi

Sure. I was on a 1280x1024 resolution and on IE 6. using Firefox on 1024x768 aligns properly. That's quite odd, but then again so is IE 6. On Firefox now the site looks much cleaner.

About the images. Take a look at some other news sites and see how they use images. The grey boxes are a little bland, so what I think you could do is mind map what images a news press would have, find or make some pictures accordingly (windings - the font has some interesting stuff) and play around with fades and fonts. The title of each menu could be an image or have an image next to it.

I am not sure about the header being to the right... I know there is an image on the left but to make it more newslike you could align it in the middle and change the font - even use a large image and remove the grey box - in fact you could remove the grey box and the image. I have seen a site where the top corner of the content box has a curled page or a folded page corner.

As for validation, right click on the page and you will see the includes put together as a single page. Are you sure you checked all the pages? There may be some core pages you missed. External links may cause problems with validation.

 

[ignat]

Hi,

I ended up changing the entire site haha. I used a few tables and mostly divs to make sure 100% that the site will display properly in all browsers and with all resolutions. I will look around for images to spice up the boxes. I think that's a great idea. Please let me know if the site looks ok on your screen. NameBucks donated

 

[music_man]

Whoa what a change! It aligns fine in the 1280x768 resolution. In fact you could get a statistic counter from http://statcounter.com/ to show how many visitors use what resolution and others. It's free I think and invisible.

I like the new boxes with CSS styling, it is clear, concise and easy to look at. The top picture looks good even if the title text is a little too small - thinking of people with bad eyesight here. For the search box you could format the button to make it more seemless like:

input { 

background-color: #fff;
border: 1px solid #999999;

}

which would change all the inputs to that, or you could make classes and apply them to the appropriate tag like so:

.form {

background-color: #fff; /* I think this is an IE bug fix */
border: 1px solid #999999; /* #ccc and #eee are good too */

}

and in your form you just add class="form".

You can apply different attributes to the textfield and the submit button by adding classes and linking to them from within the tag.

I'm not sure you can have the "related links" text above the adsense as this may be a breach of their policy. Your META description is brief: "Science News Daily" for good SEO tips (which I have applied myself) check out www.wordsinarow.com and look for SEO tutorial.

The rollovers are effective but im a little wary of the red and the bunched up nature of the links. I think if you formatted the CSS using an list "ul" and "li" then it would probably be a little easier to use. For good css navigation techniques take a look at www.alistapart.com under CSS for ideas of navigation.

I visited the page "http://www.hawaiistreets.com/sciencenews/ScienceNews.php?catid=7&blogid=4" and there was no adsense on the left side. Also the title of the page does not reflect what page you are on. Seeing as I am in "Computers and Software" category you could put in your title tag (automated of course, using php) Science News Daily : Computers and Software.

On this page: http://hawaiistreets.com/sciencenews/?itemid=28 you have 3 adsense codes...

You have added a footer! Good work perhaps you can add a

 ©

before copyright?

Where is the link back to the main page when you are looking at an article? The image at the top is a link - which is good. What about a link before "submit an article" or somewhere for people to go back.

Thank for the NB's

 

[ignat]

Once again, great feedback!

I fixed some style sheets and added the Home link. I think I'm gonna keep the link rollovers as they are for now. I'm gonna experiment with a few lighter colors perhaps.

Sometimes Google can't serve ads to your page. Especially if it's a dynamic page like mine is. In that case Google displays Public Service Ads. I configured the Adsense code so that if Google can't serve ads to any of the sites, it will automatically collapse and not display anything.

Also I'm pretty sure that Related Links tag doesn't really violate Google policies. I think that as long as you don't encourage directly your visitors to click on the links, Google is content. I'll still think of something. I wouldn't want Google shutting down my account.

Again, thanks a whole lot for such a great feedback and tips.

 

[Muneeb2Good]

But i dont like the background color its fully WHITE you should change it to something else you like !

 

[ignat]

Do you mean the background for the page or for the button? I think I'll stick with white background for the page since in the future I'm planning on using a few small images to spice up the look. As far as the button goes. I might change it to a really light color. I don't want it to stand out too much. Thanks for your feedback.

 

[ammo]

I think you need some colour throughout your design, its just white, people need something to look at!

 

[Muneeb2Good]

ignat ok if you want ...then its your choice ....

 

[Damo-Online]

I agree with Muneeb2Good

 

[ignat]

Thanks guys for all of your feedback. I will get on adding some graphics to the design, but I want to keep it as simple as possible. If you look at boingboing.net, their design is quite simple. That's what i'm shooting for. Keep those comments comming

 

[toplevel]

Crisp, clear, to the point. It's a good design in my opinion. Nothing to distract you from the content.

(I have google ads blocked, so I might have missed those :P)

 

[ignat]

Thanks a ton, toplevel, I'll keep working on it