...

View Full Version : Initial thoughts on home page?



tspek
04-29-2010, 09:57 PM
www.pelotonpoints.com

Fumigator
04-29-2010, 11:27 PM
Do you want comments on the design, or the functionality, or bugs/problems, or what?

Design is sweet, not really Web 2.0 but who cares, looks good.

I get this on the teams.php page:

Warning: Unknown: Your script possibly relies on a session side-effect which existed until PHP 4.2.3. Please be advised that the session extension does not consider global variables as a source of data, unless register_globals is enabled. You can disable this functionality and this warning by setting session.bug_compat_42 or session.bug_compat_warn to off, respectively in Unknown on line 0

tspek
04-30-2010, 12:51 AM
Do you want comments on the design, or the functionality, or bugs/problems, or what?

Design is sweet, not really Web 2.0 but who cares, looks good.

I get this on the teams.php page:

Warning: Unknown: Your script possibly relies on a session side-effect which existed until PHP 4.2.3. Please be advised that the session extension does not consider global variables as a source of data, unless register_globals is enabled. You can disable this functionality and this warning by setting session.bug_compat_42 or session.bug_compat_warn to off, respectively in Unknown on line 0

Right now, from you guys, i'm looking more for layout/design etc. There are some functionality things that need to be worked out.

I find it interesting that you get that warning on that page, I see it every time I log in and go to "my races", but only once per login, always that page, and it never returns, nor can I figure out what exactly is causing it.

VIPStephan
04-30-2010, 04:42 AM
OK, indeed, it looks a little – uhm – “historic” (in the range of internet history), a little plain yet. Something could happen with the background. Currently the content is just “hanging” there in the middle without being concretely explicit as to how it should end or continue at the sides. Plus the white space above the header makes it look a little “unfinished”, like you didn’t care to reset the default body padding/margin.

One of the current things in web design is a header and footer that seemingly stretches across the entire viewport although the content is a fixed width nevertheless. A nice example would be the twitter website (http://twitter.com/). Another thing is that photos in the header draw to much attention to that area when you actually want people to look at the content. Therefore you’ll see relatively few great sites with such a busy header. Rather, the great sites often have a big image right in the middle on the home page to promote what they find most important. Good examples of such would be http://globalspendsolutions.com/ or http://getmediacore.com/. So rather than putting the photo of the cyclists in the header you could put it in the content – a little bigger then, of course – and have the header free for the logo (?) and the navigation. Speaking of a logo: Your site could have a little more than just that text. Maybe a stylized bicycle or something like that?

In the last two example websites above you see another thing: The horizontal separation of different sections. It’s like structuring your text with paragraphs to get some rhythm and make the content easy to oversee. Another important thing is the alignment of sections/elements on your site. The left and right edges of the content are currently relatively inconsistent with the header image being wider than the content and the headlines sticking out at the sides. Would look better if it was a straight edge. Although I should rather get some sleep I couldn’t resist to create a quick mock-up of what I could imagine (attached).

Basically: Some more subtlety helps a lot. Don’t use black text on white background or similar strong differences (like strong gradients – make them subtle, barely noticeable). Watch out for alignment and vertical rhythm. Use effects like drop shadows or different background colors for elements you want to draw attention to. But use them sparingly and wisely, and don’t overdo.

Have fun. :)

SB65
04-30-2010, 11:14 AM
That's a really nice analysis of web layout from VIPStephan. :thumbsup:

tspek
04-30-2010, 02:16 PM
OK, indeed, it looks a little – uhm – “historic” (in the range of internet history), a little plain yet. Something could happen with the background. Currently the content is just “hanging” there in the middle without being concretely explicit as to how it should end or continue at the sides. Plus the white space above the header makes it look a little “unfinished”, like you didn’t care to reset the default body padding/margin.

One of the current things in web design is a header and footer that seemingly stretches across the entire viewport although the content is a fixed width nevertheless. A nice example would be the twitter website (http://twitter.com/). Another thing is that photos in the header draw to much attention to that area when you actually want people to look at the content. Therefore you’ll see relatively few great sites with such a busy header. Rather, the great sites often have a big image right in the middle on the home page to promote what they find most important. Good examples of such would be http://globalspendsolutions.com/ or http://getmediacore.com/. So rather than putting the photo of the cyclists in the header you could put it in the content – a little bigger then, of course – and have the header free for the logo (?) and the navigation. Speaking of a logo: Your site could have a little more than just that text. Maybe a stylized bicycle or something like that?

In the last two example websites above you see another thing: The horizontal separation of different sections. It’s like structuring your text with paragraphs to get some rhythm and make the content easy to oversee. Another important thing is the alignment of sections/elements on your site. The left and right edges of the content are currently relatively inconsistent with the header image being wider than the content and the headlines sticking out at the sides. Would look better if it was a straight edge. Although I should rather get some sleep I couldn’t resist to create a quick mock-up of what I could imagine (attached).

Basically: Some more subtlety helps a lot. Don’t use black text on white background or similar strong differences (like strong gradients – make them subtle, barely noticeable). Watch out for alignment and vertical rhythm. Use effects like drop shadows or different background colors for elements you want to draw attention to. But use them sparingly and wisely, and don’t overdo.

Have fun. :)

Good stuff.

I'm far from an artist, unfortunately. I'd like to span the website the width of the page but one thing I can't figure out how to do is to do that while incorporating the current image. There is no more of the photograph to utilize so it may come down to coming up with something different (which you seem to think I need to do) unless I can manage to work it into a red background, I'll give it a go...

I like the mockup, lots...

tspek
04-30-2010, 02:24 PM
Good stuff.

I'm far from an artist, unfortunately. I'd like to span the website the width of the page but one thing I can't figure out how to do is to do that while incorporating the current image. There is no more of the photograph to utilize so it may come down to coming up with something different (which you seem to think I need to do) unless I can manage to work it into a red background, I'll give it a go...

I like the mockup, lots...

This brings up a side topic. I've been teaching myself the technical aspects to this (html, CSS, php, mysql, etc). I've got people around me that say "You should try and make money off of this" but I know that there is an artistic aspect to web design that I currently (perhaps always) lack. Where does one look for some motivation, insight, etc?

SB65
04-30-2010, 02:30 PM
Have a look at Css Zen Garden (http://www.csszengarden.com/) for some inspiration.

tspek
04-30-2010, 02:40 PM
My work-day has officially been filled with stuff to do. :thumbsup:

Perhaps i'll get work done too.

Fumigator
04-30-2010, 04:13 PM
This brings up a side topic. I've been teaching myself the technical aspects to this (html, CSS, php, mysql, etc). I've got people around me that say "You should try and make money off of this" but I know that there is an artistic aspect to web design that I currently (perhaps always) lack. Where does one look for some motivation, insight, etc?

This is exactly the position I'm in. My situation is even worse, though-- I have a delusion that I do have some artistic ability, which is not actually true, but because of the delusion I think I can do my own designs, and then I end up with an ugly mess in the end!

I've taken to using templates from any of those free template websites as a starting point and then at least I have a decent foundation.

tspek
04-30-2010, 05:13 PM
This is exactly the position I'm in. My situation is even worse, though-- I have a delusion that I do have some artistic ability, which is not actually true, but because of the delusion I think I can do my own designs, and then I end up with an ugly mess in the end!

I've taken to using templates from any of those free template websites as a starting point and then at least I have a decent foundation.

Well that's good to hear. I know what looks good when I see it, I just lack the spark right now to come up with it on my own. I think i'm going to use your layout as a jumping point, if you don't mind (which I suspect you don't). Pelotonpoints needs some glitter.

MattF
04-30-2010, 05:27 PM
This is exactly the position I'm in. My situation is even worse, though-- I have a delusion that I do have some artistic ability, which is not actually true, but because of the delusion I think I can do my own designs, and then I end up with an ugly mess in the end!

No problems here in that regard. I know full well that I have zero artistic flair, hence don't even attempt anything fancy. :D

tspek
05-07-2010, 10:03 PM
I'm redoing it from the ground up...I'm hosting it on the misspelled domain name that I bought.

Discuss pleeeeease

http://www.peletonpoints.com

http://www.peletonpoints.com?user=123 for logged in

_Aerospace_Eng_
05-07-2010, 10:41 PM
Your footer overlaps the content in Firefox 3.6.3. I feel like your nav tabs should do something on mouse over like raise up or something. The text in your footer needs some padding too.

tspek
05-07-2010, 10:54 PM
Your footer overlaps the content in Firefox 3.6.3. I feel like your nav tabs should do something on mouse over like raise up or something. The text in your footer needs some padding too.

Agree on the nav tabs--will play with that. FWIW when you select one of them it turns white and blends into the body.

That image doesn't look like it does on the screen I was working on all day, the ground is supposed to fade into white more than it actually does.

Any suggestion about why the footer is doing that? I'm noticing it on my home PC's as well.


#footer {
width:100%;
height:91px;
background-image:url(../images/site-images/banner-bg.png);
background-repeat:repeat-x;
position:absolute;
bottom:0;

/*Text*/
color:#CCC;
text-align:center;
}

_Aerospace_Eng_
05-08-2010, 04:20 PM
Add position:relative; to the CSS for #container. Remove the padding-bottom on #container. Remove the height on #wrap and add a bottom padding of 91px. Change the height of your footer to 86px. Your background image for your footer is only 91px tall so if you add a top padding of 5px plus 91px it is 96px high. There are a lot of sticky footer examples but what I've told you to do seems to work best and is the simplest.

tspek
05-14-2010, 12:21 PM
Add position:relative; to the CSS for #container. Remove the padding-bottom on #container. Remove the height on #wrap and add a bottom padding of 91px. Change the height of your footer to 86px. Your background image for your footer is only 91px tall so if you add a top padding of 5px plus 91px it is 96px high. There are a lot of sticky footer examples but what I've told you to do seems to work best and is the simplest.

I missed this but in reading it the other day that did lead me to this solution which appears to be working just as I need it to. http://www.cssstickyfooter.com/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum