My First Website - Some Feedback Please?

Neodymium

Hi Everyone,

I spent the last couple of months learning html,javascript,css and php to make my website studyscience.ie I just got it online today (9 Aug) and am still working out a few bugs but its most of the way there. The website is just something I made during my summer holidays as a place for people who doing leaving cert science subjects (physics,chemistry and biology) to get notes etc. for studying. I made everything for the site myself including the code, graphics and notes, if people could give me some feedback about any improvements I could make that would be great.:)

Thanks

bryaner

I don't know a whole lot dude but it looks good to me..

Hank Scorpio

i think it looks fine, you can improve it as you learn more. your hosting provider should be able to sort you with a more professional email, like @studyscience.ie , you can even set it up to redirect to your gmail a/c to make life easier

Neodymium

nuxxx wrote: »

i think it looks fine, you can improve it as you learn more. your hosting provider should be able to sort you with a more professional email, like @studyscience.ie , you can even set it up to redirect to your gmail a/c to make life easier

Ya I actually have one of them (mail@studyscience.ie) I must just add it to the page. I didn't know I would get one, I just made that one before I had the site online.

[EDIT] Have the proper email address added now [EDIT]

tricky D

This is a super resource for students. However I reckon there's a load of improvements you could make. Hopefully you'll regard these as constructive criticisms.

First the logo: try to make it simpler; I would drop the rounded button (the corners have graphic 'problems'), put all the text on a single line, keep the atom bit and drop the blue stuff. Simpler, easier to remember and recognise as good logos should be.

You have put all the images in as backgrounds. You would be much better off putting these in as regular images with alt tags.

The tlog.png isn't really needed as it just repeats something already there and takes up valuable space.

bord.png doesn't really do much for its size, think about reducing or replacing it.

I would also replace all the Welcome to... text with something much more brief: 'Science notes and videos resources for Leaving Certificate Physics, Chemistry and Biology courses' or the text which is in your meta description tag. Make that a heading 1 for SEO purposes.

By removing most of the text, the repeated logo and moving the FB and Twitter links below the left hand nav menu, you can now fill that space with links straight to content like latest notes/videos and/or top notes or videos.

Make the email address, Twitter and FB URLs into active mailtos or links.

Try to get all the css into one external file for manageability reasons.

You can drop the Home button as the logo is linked. Also aligning the text in the left nav menu to the left is best for readability, but that's not a big deal here as your link text lengths are similar.

Grey text on grey backgrounds isn't good for readability, try something with more and better contrast.

Try to get some feedback from happy students.

Get a sitemap. Use this as your 404 page also as the existing one is this: http://studyscience.ie/fwsf which is not at all what is wanted.

All of your notes appear to be PDFs, this is not a good idea at all for usability or SEO. Ideally they should be regular html pages with the option of downloading the PDF. Users don't react well to PDFs being used like this and very importantly, your best content for SEO is invisible in PDF format so your SEO will be hammered and your great resource won't get found.
See http://www.jenniferslegg.com/2007/09/14/usability-tips-for-using-pdfs-on-websites/ (read the comment) and http://www.useit.com/alertbox/20010610.html for info on this.

I know you have lots of content you'd rather not have to convert but have a search for some PDF to html tools to help you. See: http://www.google.ie/search?q=htm+to+pdf or similar.

Put your page headings into the title tag on each page for usability and SEO.

On the exam papers page you use JavaScript to get the paper, again this is invisible to search engines, so try to get a regular old html listing in addition to the JS.

Did you hand code this? If you did, more power to you, but get yourself something like http://users.skynet.be/mgueury/mozilla/ add-on for FireFox and fix some of the coding errors to get it up to 100% valid html strict which would be quite an achievement.

line-height in reset.css is set to '1' with no units, change it to something like 90% or leave as 100% for a bit more spacing.

Recent News area takes up a lot of valuable space. You might think about putting top/recent videos or something else in there instead. A few reasons: adds some visual element to the layout, is there enough news flow to justify so much space, you can link to news using a button at the bottom of the left nav menu.

good luck and hope that helps

Tomas18

Hi, You answered my leaving cert chemistry question today and i really appreciate that:) so yeah i had a look at your website and I really like it. The notes are good but i do hope you do put up more like you said ! I think it's great the way you put time and effort into it and by making it free is all the better as students will not want to pay for notes unless it's a revision book. well at least I wouldn't. The only thing I would say is that the logo is a little big for my liking.Oh and PDF is a good way that people don't re-brand your notes although i do find PDF a little annoying but hey i still print it:) Your website really is top class! Thanks so much from a 5th year student.:D

Fanny Cradock

I've had a quick look through the site and I must say that it's an impressive attempt overall. It needs a bit of work in terms of the layout (e.g. a horizontal menu would give you more screen space), visuals (e.g. grey text on grey background is generally not a good idea) and there are quite a number of validation errors (example). Nevertheless, good job. It's a super resource.

TonyStark

tricky D wrote: »

Make the email address, Twitter and FB URLs into active mailtos or links.

Personally I would try to not use a mailto: hyperlink on the page. Link it to a contact form... very easy for spammers to harvest mails when they are coded like that. You really don't want to be hammered with spam from the start.

Neodymium

Thanks for the replies everyone,

I'm going to take all of your advice into consideration, I'm working on it right now to implement some of the improvements that you all have suggested, thanks especially to trick D for the detailed reply.

• Im going to change to logo to something simpler as you have suggested and I will remove the large logo from the front page and put some links there or maybe something else.

• When I first started making the website I didn't really know any php. What I am thinking now is should I include the general site 'template' using php into each page so if I ever want to add something to the 'template', I won't have to manually code it into every single page. With this it will also be easier for me to change the images from being backgrounds in a div.

• I will shorten up the text on the homepage to something more to the point like you have suggested tricky D. I will also change the colour to something with a bit more contrast maybe something like a dark graphite.

• I think I am going to remove the text beside the twitter and facebook images, make the images a bit smaller and move them underneath the menu on the left hand side and keeping the images as links. I don't really want to make the email address a link because when you click on it it will open the windows email program (I think its called outlook) and I don't think anyone really uses this.

• I'll work on getting a sitemap and making it my 404 error page.

• I agree with you saying that people don't like being forced to read pdf's online. I going to change the pdf's to html and give people the option of downloading them as pdf's aswell like you have suggested. I only tried one html to pdf converter, the text turned out fine but all of the pictures turned out weird with different colours. I'll try some more html to pdf converters and if they don't fare any better I'll just add the pictures manually into the html that the pdf to html converter supplies.

• I will move the extra css on each page into an external file.

• To the question did I hand code the site - yes. I will work on the validation errors to try and get it w3c compliant.

• For the recent news section I haven't added anything to it yet but as soon as I go back to school I'll be uploading notes and adding videos fairly regularly. When I convert the pdf's to html I will remove it from the html notes pages to give me a bit more space. If I include the recent news in my 'template' file which I will include with php I won't have to add it each page individually also.

Thanks you very much to everyone again, this is exactly the sort of constructive criticism which I wanted to make the site better.

tricky D

TonyStark wrote: »

Personally I would try to not use a mailto: hyperlink on the page. Link it to a contact form... very easy for spammers to harvest mails when they are coded like that. You really don't want to be hammered with spam from the start.

It's easy for a scraper to grab an email address without the mailto. A form in addition to an email address is a good practice though.

tricky D

Neodymium wrote: »

I think I am going to remove the text beside the twitter and facebook images, make the images a bit smaller and move them underneath the menu on the left hand side and keeping the images as links. I don't really want to make the email address a link because when you click on it it will open the windows email program (I think its called outlook) and I don't think anyone really uses this.

It opens whatever default email client is specified. The reason for having a form is that a user might not have their default client available for a host of reasons so best to have both options.

Neodymium wrote: »

I agree with you saying that people don't like being forced to read pdf's online. I going to change the pdf's to html and give people the option of downloading them as pdf's aswell like you have suggested. I only tried one html to pdf converter, the text turned out fine but all of the pictures turned out weird with different colours. I'll try some more html to pdf converters and if they don't fare any better I'll just add the pictures manually into the html that the pdf to html converter supplies.

PDF converters are a very mixed bag, many of them are plain rubbish, some are good for text heavy docs, some for graphic heavy ones. You just have to plug away until you find the one which works best.

Neodymium wrote: »

To the question did I hand code the site - yes. I will work on the validation errors to try and get it w3c compliant.

Kudos to you.

Neodymium wrote: »

Thanks you very much to everyone again, this is exactly the sort of constructive criticism which I wanted to make the site better.

PrzemoF

Looks ok, however I'd go with joomla/wordpress if it's a project that is going to stay on line for long. Another thing:

<li><a href="[URL="http://www.boards.ie/vbulletin/view-source:http://studyscience.ie/index.html"]index.html[/URL]" class="button1">Home</a></li> 
        <li><a href="[URL="http://www.boards.ie/vbulletin/view-source:http://studyscience.ie/physics.html"]physics.html[/URL]" class="button2">Physics Notes</a></li>         <li><a href="[URL="http://www.boards.ie/vbulletin/view-source:http://studyscience.ie/chemistry.html"]chemistry.html[/URL]" class="button3">Chemistry Notes</a></li>         <li><a href="[URL="http://www.boards.ie/vbulletin/view-source:http://studyscience.ie/biology.html"]biology.html[/URL]" class="button4">Biology Notes</a></li>

Names like button1,2,3,4... are IMHO bad idea and you could use just one class for all of them.

I like the idea that "clickable" elements (like menu) have different colour, so it's very easy to navigate.

Neodymium

Hi everyone, its me again.

I've been busy the past day or so fixing up the site, I have one test page done which I will use as the home page once I have the changes made to the rest of the pages. The link to the new page is: studyscience.ie/test.html

I've changed alot firstly I made a new logo to something like what tricky D suggested, I think it looks much better.



I re-wrote pretty much all of the html and css and I included alot of css3 this time.

I removed the big awful looking logo I put in some examples of the notes with some css3 animations and made each image a link to their respective notes section. I got rid of the big long paragraph and replaced it with a simple title in <h1> tags for SEO.

I removed the text beside the twitter and facebook logo's and moved them under the menu.

I made the menu button's text go white when you click on them and named their classes properly - thanks PrzemoF

I changed the "Recent News" to "Latest Videos" and added some links to the videos in there. I used some css3 to scale up the picture slightly when you mouse over them. I made the column narrower also.

I added some kind of thumbnails of the latest physics, chemistry and biology notes and again added a slight scale up of the images using css3 when moused over. For the time being I just have them linked to the pdf's but when I have these converted to html I will link to the html pages.

I made a template php file that I'm going to include in the rest of the pages, I just haven't got around to changing all the other pages yet.

I think I'm going to make a "contact me" page with a contact form and the email address without the 'mailto'.

Tomas18

wow that looks great! i really love the way you have laid out the notes and the recent notes and of course the logo is much nicer now:D great job!

PrzemoF

It looks really cool now!! I'm waiting for the final version!

Neodymium

PrzemoF wrote: »

It looks really cool now!! I'm waiting for the final version!

Thanks, I'm still making the changes to the rest of the pages, and changing the navigation of the video section.

The css3 stuff works better in chrome or firefox, especially firefox as it smoothens the edge of the rotated images better. In internet explorer css3 isn't supported at all before IE9. IE9 doesn't support box shadows or transitions so when you hover over the pages they don't come out gradually and they don't show a shadow around them either.

Tomas18

I've just got a question. why does that annoying black square always come up when it's printed, Is there anyway to get rid of it?

Neodymium

Tomas18 wrote: »

I've just got a question. why does that annoying black square always come up when it's printed, Is there anyway to get rid of it?

I put them in there so that if you have an iphone/android app you can take a picture of the square thing (they're called qr codes) it will bring you to a youtube video explaining something that they are beside on the notes, the link under them takes you to the video too.

I'll see what I can do to fix it.

[Edit] Yep, it appears your right they print off fine on my printer but I tried them on another printer and they don't print off properly. It just depends on the printer. I'll take them off for now anyway until I can find a better way of doing it. Sorry about that.[/Edit]

VMotion

Neodymium, it looks really good, especially for the first attempt. Thumbs up!
The only thing I can think of changing is the rollover of the menu. White font colour would be much better, red's a bit awkward.

You could also use your footer for some direct contextual links on your website.
Like direct links to the content "Biology Notes: The Scientific Method" etc.

But this is really good and very much usable!

Trojan

On the logo, how about changing it so the electron paths are around the word science like this:



?

You could contrast the colours a bit to have the text stand out more.

Neodymium

Trojan wrote: »

On the logo, how about changing it so the electron paths are around the word science like this:



?

You could contrast the colours a bit to have the text stand out more.

Thanks Trojan, that's a good idea. What would you think of something like this