Need some feedback on a website (not fully completed yet)

[Lumier]

Hey guys,

I'll start off with a small introduction about myself. I am Lumier here although I go by the name Luminous in other forums/games/etc.. I'm 16(as of April 3rd 2013) and working(hobbywise) as the web developer and graphics designer for Forgotten Lore(game community that hosts servers etc..) and I'm designing and creating the new site. I need feedback from other web developers/enthusiasts other than my father on design and even ideas I could try and mess around with.

The original site is under this address: [url]http://www.forgottenlore.co.uk[/url] and is pretty bland, it was my first site I ever created and I was happy with it but I believe I need to modernize and reconstruct a new website. Here's a link to the new address: [url]http://www.forgottenlore.co.uk/beta[/url] (make sure to read the text as it explains what you can and can't do on the site, it is only in its beta stages now, there is a lot missing).

I'll be posting update logs here as I work so that I can get feedback on everything I do; if you can take the time to do that I would be very grateful to you, thanks.

Reference images on site as of 1/4/2013 (optimized for a 1920x1080 screen resolution):

[IMG]http://i742.photobucket.com/albums/xx65/luminosity2/refer1_zps44b62181.png[/IMG]

[IMG]http://i742.photobucket.com/albums/xx65/luminosity2/Untitled-1-4_zps232098eb.png[/IMG]

[IMG]http://i742.photobucket.com/albums/xx65/luminosity2/refer2_zpscd1d148a.png[/IMG]

-------------------------------------------------------------------------------------

Yours,
Lumier

[Maloof?]

If the site's optimised for that resolution, how does it look at lower resolutions?

Sites are generally developed to be a lot slimmer than that to cater fro those with smaller resolution screens. You can view a 1024-wide site in an HD screen easily - it can be difficult to view an HD-wide site on a 1024-wide screen though.

And make sure you have permission from the copyright holders to use the images you're using

It definitely needs a website title on every page of the site, both as a navigation tool (click to return to the root page) as well as a reminder of which site the user is on

[landocalrissian]

[QUOTE=Maloof?;40121561]If the site's optimised for that resolution, how does it look at lower resolutions?

Sites are generally developed to be a lot slimmer than that to cater fro those with smaller resolution screens. You can view a 1024-wide site in an HD screen easily - it can be difficult to view an HD-wide site on a 1024-wide screen though.

And make sure you have permission from the copyright holders to use the images you're using

It definitely needs a website title on every page of the site, both as a navigation tool (click to return to the root page) as well as a reminder of which site the user is on[/QUOTE]

When looking at most of the images on 1024x768 they look fine (sure some of the right hand side of the image is cut off, but nothing that makes you unable to see what game it is).

[url=http://puu.sh/2s3V1]Garry's Mod[/url]
[url=http://puu.sh/2s3ZU]Battlefield 3[/url]

Overall I rather like the site, good job. The chat/contact could do with a little work though.
[img]http://puu.sh/2s43E[/img]

[Maloof?]

[QUOTE=Adzter;40121732]When looking at most of the images on 1024x768 they look fine (sure some of the right hand side of the image is cut off, but nothing that makes you unable to see what game it is).

[url=http://puu.sh/2s3V1]Garry's Mod[/url]
[url=http://puu.sh/2s3ZU]Battlefield 3[/url]

Overall I rather like the site, good job[/QUOTE]

I'm more talking about the buttons and menus and everything

All the content should be visible at a lower resolution without having to scroll left and right to see it. I'm not sure what the standard width used in the industry for web design is, but it'll become apparent through a little bit of research

[Lumier]

Thanks a lot for your reply Maloof, I've tried them on lower resolutions, and it looks abysmal for 1024 screens. With 1280x768 screens it doesn't look to bad in all honesty, it just involves a bit of scrolling. Most people in our community are gamers however with higher res screens and that's why I wanted to optimize this site to look nice on those screens and to make it feel cinematic.

At the moment I'm using the home button to root back to the main page, I didn't want to put in a title for it as the logo didn't look to great at the top.

The copyright I'll have to contact everyone about, but at the moment its just there for filler purposes until I either made my own backgrounds or even commissioned someone on Facepunch to make me some(if there were copyright infringements for these backgrounds).

I'll try to think of something to remind people what site they are on, but I originally thought the background would be the biggest pointer.

Thanks again!

Yours,
Lumier

****EDIT***
After posting this I noticed new posts come in. Thank you for your replies again. I am more than aware of the horrible look of the live help window, however I don't believe I can style that, I can only change the background picture (which I really must do as it doesn't go well). I was unaware at first what you meant about the sizing, the navigation and buttons all work fine without needing to scroll left and right. Its only the fact that at lower resolutions you need to scroll up and down more instead of being able to view it all without scrolling up and down.

Yours,
Lumier

[Shadow801]

[QUOTE=Lumier;40121802]Thanks a lot for your reply Maloof, I've tried them on lower resolutions, and it looks abysmal for 1024 screens. With 1280x768 screens it doesn't look to bad in all honesty, it just involves a bit of scrolling. Most people in our community are gamers however with higher res screens and that's why I wanted to optimize this site to look nice on those screens and to make it feel cinematic.

At the moment I'm using the home button to root back to the main page, I didn't want to put in a title for it as the logo didn't look to great at the top.

The copyright I'll have to contact everyone about, but at the moment its just there for filler purposes until I either made my own backgrounds or even commissioned someone on Facepunch to make me some(if there were copyright infringements for these backgrounds).

I'll try to think of something to remind people what site they are on, but I originally thought the background would be the biggest pointer.

Thanks again!

Yours,
Lumier

****EDIT***
After posting this I noticed new posts come in. Thank you for your replies again. I am more than aware of the horrible look of the live help window, however I don't believe I can style that, I can only change the background picture (which I really must do as it doesn't go well). I was unaware at first what you meant about the sizing, the navigation and buttons all work fine without needing to scroll left and right. Its only the fact that at lower resolutions you need to scroll up and down more instead of being able to view it all without scrolling up and down.

Yours,
Luminar[/QUOTE]

Well done, the site is vastly improved over the old version. There is obviously much that can be improved, but it is a good start. What I might suggest for now is to add a minimum width to your navigation bar, perhaps at a with of 960px. Right now, at smaller resolutions it completely breaks.

Also, this is something that I really hate in designs. See below an updated picture. Sorry for the size.

In my version, I have removed the width property from your section div and given it a single margin property of 20 pixels, which is a very common margin. This makes the gaps from the edge of the wrapper div equal on all sides equal and makes life much much easier if you ever want to introduce multiple columns. I used a margin because that will not show the background color.

Next what I have done is changed the border radius of the section div to be 20 pixels less than the wrapper div. (EDIT: Note, the reasoning behind 20 pixels less is because the inner border radius should always be the outer border radius minus the border width) Why? Because it makes sure the gap between the wrapper and the content is exactly the same at all points, including the curves edges. You can see in the image below it looks far more professional and polished this way. This is a kind of pet peeve of mine and is something I always notice.

[IMG]http://oi49.tinypic.com/2lk8s3a.jpg[/IMG]

If you really wanted to improve future versions, you could look into 'responsive web design'. I will warn you however (as much as many will deny this), responsive web design is much harder to do well than your fixed width website. But perhaps something to look into in the future.

[Lumier]

[QUOTE=Shadow801;40124272]Well done, the site is vastly improved over the old version. There is obviously much that can be improved, but it is a good start. What I might suggest for now is to add a minimum width to your navigation bar, perhaps at a with of 960px. Right now, at smaller resolutions it completely breaks.

Also, this is something that I really hate in designs. See below an updated picture. Sorry for the size.

In my version, I have removed the width property from your section div and given it a single margin property of 20 pixels, which is a very common margin. This makes the gaps from the edge of the wrapper div equal on all sides equal and makes life much much easier if you ever want to introduce multiple columns. I used a margin because that will not show the background color.

Next what I have done is changed the border radius of the section div to be 20 pixels less than the wrapper div. (EDIT: Note, the reasoning behind 20 pixels less is because the inner border radius should always be the outer border radius minus the border width) Why? Because it makes sure the gap between the wrapper and the content is exactly the same at all points, including the curves edges. You can see in the image below it looks far more professional and polished this way. This is a kind of pet peeve of mine and is something I always notice.

[IMG]http://oi49.tinypic.com/2lk8s3a.jpg[/IMG]

If you really wanted to improve future versions, you could look into 'responsive web design'. I will warn you however (as much as many will deny this), responsive web design is much harder to do well than your fixed width website. But perhaps something to look into in the future.[/QUOTE]

First off, I would like to thank you very much in taking time to review my site and to even tinker with it and give me such informative feedback. It has been a pleasure to read your reply and I took to making some of the smaller suggestions of yours.

I, as you said, have set the width to 960 on the navigation bar. Originally this stopped the background at 960 too but I just transferred it over to a div and a small tinkering with the CSS file solved the problem. It no longer collapses on itself when you drag the browser smaller(or view it on low resolution screens).

I also tried to modify the wrapper like the way you have made it. However, I was completely puzzled by how you managed to take away the width and keep it wrapped around the section div with only a 20px margin change to the css.. I couldn't replicate that result. Therefore I tried to emulate the widths and style it to look similar to your version, although I'm a few pixels out so it doesn't keep that constant professionalist equal distance between the edges. Even so, it is still a vast improvement over the previous chunky feel of the older edges. I was already planning to over haul the design of the content viewer anyway, to a more modern thin black(css3 gradient) header/footer sandwiching a semi-transparent white middle where the content will be housed.

[IMG]http://i742.photobucket.com/albums/xx65/luminosity2/Untitled-1-4_zpsc2456155.png[/IMG]

As for your final idea of Responsive web design, I looked into it a little and would say that there is a lot I want to learn before I dig deeper into that field. Thanks again for your help!

Yours,
Lumier

[Shadow801]

[QUOTE=Lumier;40125712]First off, I would like to thank you very much in taking time to review my site and to even tinker with it and give me such informative feedback. It has been a pleasure to read your reply and I took to making some of the smaller suggestions of yours.

I, as you said, have set the width to 960 on the navigation bar. Originally this stopped the background at 960 too but I just transferred it over to a div and a small tinkering with the CSS file solved the problem. It no longer collapses on itself when you drag the browser smaller(or view it on low resolution screens).

I also tried to modify the wrapper like the way you have made it. However, I was completely puzzled by how you managed to take away the width and keep it wrapped around the section div with only a 20px margin change to the css.. I couldn't replicate that result. Therefore I tried to emulate the widths and style it to look similar to your version, although I'm a few pixels out so it doesn't keep that constant professionalist equal distance between the edges. Even so, it is still a vast improvement over the previous chunky feel of the older edges. I was already planning to over haul the design of the content viewer anyway, to a more modern thin black(css3 gradient) header/footer sandwiching a semi-transparent white middle where the content will be housed.

[IMG]http://i742.photobucket.com/albums/xx65/luminosity2/Untitled-1-4_zpsc2456155.png[/IMG]

As for your final idea of Responsive web design, I looked into it a little and would say that there is a lot I want to learn before I dig deeper into that field. Thanks again for your help!

Yours,
Lumier[/QUOTE]

Quite simply remove the width property from #section and use the margin shorthand to 20px.

So #section would change from:

#section {
background: rgba(0, 0, 0, 0.5);
width: 960px;
margin-left: 18px;
margin-right: 0px;
margin-top: 20px;
-webkit-border-radius: 30px;
border-radius: 50px;
border: solid 2px rgba(0, 0, 0, 1);
margin-bottom: 20px;
}

to

#section {
background: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 30px;
border-radius: 50px;
border: solid 2px rgba(0, 0, 0, 1);
margin-bottom: 20px;
}

(Also note how the updated code looks so much cleaner!)

Now that the margins are equal on all sides you can change border radius on #section to 30 pixels (50 pixels minus the margin) and you will get those nice equal widths the whole way around. Simples!

[buhbang]

I thought all browsers now support just border-radius and doesn't need -webkit-.

[editline]2nd April 2013[/editline]

btw that's wrong margin-bottom doesn't make it all 20px

use

margin: top right bottom left;

margin: 20px 0 20px 18px;

[editline]2nd April 2013[/editline]

you also might want to look at this
[url]http://stackoverflow.com/questions/4839613/how-to-make-round-corners-to-both-inside-of-a-box-and-its-border#answer-4839726[/url]

[Lumier]

[QUOTE=Shadow801;40129950]Quite simply remove the width property from #section and use the margin shorthand to 20px.

So #section would change from:

#section {
background: rgba(0, 0, 0, 0.5);
width: 960px;
margin-left: 18px;
margin-right: 0px;
margin-top: 20px;
-webkit-border-radius: 30px;
border-radius: 50px;
border: solid 2px rgba(0, 0, 0, 1);
margin-bottom: 20px;
}

to

#section {
background: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 30px;
border-radius: 50px;
border: solid 2px rgba(0, 0, 0, 1);
margin-bottom: 20px;
}

(Also note how the updated code looks so much cleaner!)

Now that the margins are equal on all sides you can change border radius on #section to 30 pixels (50 pixels minus the margin) and you will get those nice equal widths the whole way around. Simples![/QUOTE]

Aaah! I see! I must have read it wrong because I thought you meant take away the width value of the #wrapper div; but that was me just being incredibly silly, and I should have paid more attention sorry.

Now I see what you mean by making multiple columns with this way, and it will be very useful for separating out content on other pages so I am deeply grateful. It also certainly makes the code aesthetically pleasing too. :smile:

I thought something was wrong with the border radius.. it was me being incredibly silly again; as you can see the "-webkit-border-radius" was set to 30, but I had completely forgotten about the other one "border-radius".

Thank you for your time and effort in helping me out here Shadow801; I greatly appreciate it. It's fixed now and it's looking smooth!

P.S (I just realized while writing this that I broke the top navigation on the other game sites.. it's a quick fix though, just a class tag missing on a div in html so I'll get right to it!)

Yours,
Lumier

[B]****EDIT****[/B]

Thanks for your feedback Jung3o; I've already changed it from margin-bottom: 20px; to just margin: 20px; to affect all of it. I wasn't aware all browsers support just the border-radius, however I think there will be some out there that don't so I add in the webkit line as well in all of my work just in case. My code for #section looks like this now:

 #section {
	background: rgba(0, 0, 0, 0.5);
	margin: 20px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	border: solid 2px rgba(0, 0, 0, 1);
} 

Thanks again for your help guys!

Yours,
Lumier

[Shadow801]

[QUOTE=jung3o;40130574]I thought all browsers now support just border-radius and doesn't need -webkit-.

[editline]2nd April 2013[/editline]

btw that's wrong margin-bottom doesn't make it all 20px

use

margin: top right bottom left;

margin: 20px 0 20px 18px;

[editline]2nd April 2013[/editline]

you also might want to look at this
[url]http://stackoverflow.com/questions/4839613/how-to-make-round-corners-to-both-inside-of-a-box-and-its-border#answer-4839726[/url][/QUOTE]

That was an accident. It was supposed to be:

margin: 20px;

Which is shorthand for, add 20 pixels margin to every side.