Help with design needed

They have: 38 posts

Joined: Sep 2001

Hi all ,

this is my very first post here, I have registered domain an i am planning to host it soon

i am currently doing the design and i am working on a soocer site, I want to make it look professional to high extent but i am novice in design and can't find someone thyat have the time and dedication to help me.

i am testing my work at:

egyptianplayers.f2s.com

I have only few graphics and incomplete layout, plz advice me and evaluate my efforts

They have: 58 posts

Joined: May 2001

Hey, a soccer site... RIGHT ON!

I will be happy to help you out here.

The site blends well and looks pretty good. Something that I think would make this look a little better, is to set the margin size to "0" and size the table to 100%. This will take out that white around the content of your page.

Also, do you use a program to create your pages or do you type out all the HTML coding? If you do use a program, what do you use?

Zimbabwe

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Hello zoz! Welcome to TWF.

The first thing that I notice about your site is that it's very green! A little bitt too green in my opinion. I am guessing that you are planning on puting some text content on the right side there where that big green box is (which looks like a pale minty green in NS 6.1 but more of a bright emerald green in IE 6! weird...) I would make that white instead. I also think that those greenish-yellow headlines you have on the right side could be improved. They look too bright to me. I would re-do them using green taken from the grass in the header. That blue "enter" button definitely needs to go too - it doesn't fit in with the rest of the design at all.

I do really like what you've done with the header - it looks very nice and gets the point across right away. Another good idea would be to include a photo of a player on the front page.

TheGizmoid's picture

They have: 168 posts

Joined: Apr 2001

You've got a good start, but I would emphasize that one of the keys to having a professional looking site is consistency.

If you go with the look on the front page, I'd suggest making the soccer ball the "dot" in the .com instead of filler in the "c". If you go with the look on the "professionals" page, I'd suggest making the word "Players" in the round logo be right side up. And the logo on the "survey" page I didn't much care for. Superimposing a player's face onto the mask of Tutankamen seems a little sacreligous to me. Then again, I'm guessing you're Egyptian and I'm not, so perhaps Egyptians wouldn't see it that way.

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

Welcome aboard zoz,

Very good start I'd say but have to agree that it is too green & far too many shades thereof.

I agree with Megan make the content area of the right hand box white and change the yellowish/green headers making them the actual links to those pages then you can loose the enter button.

Keep the tables the same size but center them so it looks better at larger resolutions.

The box with the links at the top is ever so slightly shorter looking than the others, fix that.

It is, as I said, a very good start which can only get better taking on board what the others have said as well.

Remember to keep us posted on progress and have a look at some of the other's sites that have posted for critiques, it is a very good way to learn by looking at & commenting on other sites.

Julia - if life was meant to be easy Michael Angelo would have painted the floor....

They have: 38 posts

Joined: Sep 2001

Hi friends:)

I just came back from work and read ur analysis about my site, Thankx alot for your valuable support.

Zimbabwe: I am using Dreamweaver 4 as html editor, but frankly i don;t know how to do code, I will check how to change margin to zero anfd table to 100% (i agree with ur point but i couldn't do it)

Megan: I agree to ur point, I just cannot decide what will be better , leave the main title green and make the entire page on white background with black text? or make the site greeny and use white text?Black background will let me do some cool light effects (I am using Adobe Photoshop for graphics and image editing).

The right part will include the latest news, it will include the article title, a picture (small one) and brief text describing the event so it won't be very green, only the background(which won't be much)though, i will make it white for now.

I don't have netscape for now cuz it crashes alot, i am testing using IE5.5

I will try to improve the titles on the left tonight, for the button I was just happy that I made a glassy button ..hehe, I will try to make it greenish or remove it, I can't make those headers linked cuz some of them will contain sponsors banners, hot buttons, as well as the partners/affiliates buttons so the heeader must not link to other page.
For now, I don't have sponsors(i have only one), and i am contacting some webmasters for partnership programs.

The Gizmoid: Both live chat page and Survey corner page will be redisigned, i made that desin weeks ago and i was just learning. I will have a consistent scheme from now on.

U r right about Tut's mask, hehe, after i made it the player looked more a pharaoh than a player, as if Tut came out of his tomb:)

and yes, it will be better to write the players word again .

Webmistress: i will fix the one pixel shortness Smiling as u noticed it, other will Smiling so i will fix it.

Thanks all for ur valuable contribution Smiling

Plz just tell me what i have to do in dreamweaver to make the margin= zero and the table 100%

Many thankx in advance

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

In DW4 click Modify Page Properties then you will see 4 margin boxes near the bottom of the panel, put 0 in them & hey presto, no margins.

I would personally center the tables though, as at larger resolutions everything looks lopsided.

If you have any other problems/queries with DW4 then there are quite a few of us here that use it so post your queries in the relevent forum and you'll get plenty of help.

Julia - if life was meant to be easy Michael Angelo would have painted the floor....

They have: 38 posts

Joined: Sep 2001

Thankx:)

in DW4 ...how can I add black boarder for the entire page?

and how i can put a vertical line to separate content?

I always wanted to know:)

They have: 29 posts

Joined: Sep 2001

I think the sites good. It took me a while to work out why so much green and then the whole grass thing kicked in !!!! It's to the point, doesn't take too long to load (my pet peave), so I like it. The only thing I would comment on are that I thing that I wonder why you need the left hand headers (EP SURVEY CORNER, etc) have to firstly in bold and secondly graphics (back yo my pet peave of load time), also on the second graphic header "Egyptian players partners", you are missing a space. Lastly and obviously on someone from Britain would say this, it's football, not soccer Smiling

They have: 38 posts

Joined: Sep 2001

http://egyptiansoccer.netfirms.com/

i have made some improvements

i typed egyptianplayers one word as it is the name of the site and the domain

yeah, u r British so it is football

For Americans it is soccer

for Egyptians it is kora:)

but the right word is football asin FIFA F stands for football;)

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

Zoz, looking much better already. I think you still need to decide about table alignment as on a larger screen the top banner is centralised but the main table isn't so that looks odd. Id center the main table as I think it'd look better at larger res.

To put borders around the whole page you'd be looking at having something like a table 100% x 100% with a border of 1 in black but I don't think that'd do anything for the page and may cause some scrolling problems. To get a verticle line to separate content will depend on how the contant is laid out??? Probably use a graphic inserted between the two lots.

Julia - if life was meant to be easy Michael Angelo would have painted the floor....

They have: 38 posts

Joined: Sep 2001

Hi again:)

http://www.egyptianplayers.f2s.com/SurveyCenter.htm

I have designed this page, i have large white area which will need to be filled I guess..

at the bottom(below the table) i want 2 pics for football pitches, as i want to place player names on both pictures to describe the formation....where can i find such football pitch pic?

I tried to be more consistent with the design, I aligned the table centrally but in netscape it was shofted to the left:(

browswer compatibilitiy is always causing me headache

Busy's picture

He has: 6,151 posts

Joined: May 2001

try topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" in the body tag and if you want the main table centered, added align="center" to the main table tag, this aligns the table, not the table cells contents.

the first link (index) you gave aligns in netscape 4.7 pretty close to center on 800x600 but you have a BIG lime green square where the text or whatever would go. For netscape backgrounds in table can be graphic-color-graphic but not color-graphic-color etc so a way around this is to make a small white (or color wanted) and use this plain small image as a background tile.
Your mouseovers dont work either, looking at your code your using images for the "FP Forums, chat ..." these could easily be made from text (use stylesheet a:hover {text-decoration:none;} for same effect as you have in IE, this will also speed your loading time up.

maybe make the logo a link back to the main page or make a "home" link to get back to the first page

you have what looks like some very confused coding between your html and head tag, mentions tables, iframe, graphics, links (netfirms advert) ,shouldnt this be at least in the body? the animated banner and netfirms buttons ruins your nice layout, if you could, try remove them or at least place them at the bottom of the page.

second link you gave displays the same in Net 4.7 as it does in IE 5

Busy's picture

He has: 6,151 posts

Joined: May 2001

cont ...

at the bottom of that page you have way to much blank space, looking at your code i found:

<?php
           
<!-- End Sparklit.com HTML Code -->
          </
td>
        </
tr>
      </
table>
    </
td>
        <
td></td>
    <
td></td>
  </
tr>
  <
tr>
    <
td height=\"1332\" valign=\"top\">
      <div align=\"center\"></div>
    </td>
    <td></td>
    <td></td>
?>
- (ignore the php, the code tag didnt work)-

Netscape and others dont like blank table cells, add a &nbsp; (blank space) if you cell is small (less than 10x10) add a font tag with size = -2 with the &nbsp;

but the main thing is the table vell with a height of 1332 - wow.
I think i saw you mention you used DW, this like most editors add so much wasted code that increases your file size which in turns slows down your loading time, DW and FP are bad for this (may have improved in newer versions). All that code shown above could be deletd (except the end table tags, may have to change your upper tables if they are used to colspan and/or rowspan.

the big blank space under web sites contents looks so cheap and nasty that these editors make, to me it looks like they couldnt be bothered to clean up the code - lazy, so wonder what short cuts they take in the information supplied, presntation is very important (much so as content)

They have: 38 posts

Joined: Sep 2001

Hi Busy:)

Thanks for ur analysis, I got some points but some other pionts were above my head..hehe:)

don't look at the netfirms site, as their r placing rotating banners that definately ruin any good design.

egyptianplayers.f2s.com

Use the above link instead, they don't place banners so I can test my site better there, I have a registered domain:

egyptianplayers.com

I have a host too, but i didn't setup my account with them yet.

bach to design:

I am using DW4 (latest version) and the reason beyond using it is my ignorance about code:(

I have designed all my pages using it so far, but i am not DW4 expert too

I will link my titles to the url of the homepage (good idea)

I was thinking of applying thick greenish frame for all other pages, but i don't know how to place it with DW4

I think my rollover effect is working, abit slower loading but it works, in DW4 I have to insert rollover image (2 pics) to make the rollover effect) or i can insert flash buttons (but i don't like to use flash buttons).

I can alter table height anytime, I wanted just to finish the layout , add content then modify table and cell heights...etc.

The polls work fine, i prefer to make my own though, but i don't know good CGI-scripts to make similar polls, also i am novice in CGI scripts installation:(

I will design other pages today and will upload them so u can give me ur opinion..

Busy's picture

He has: 6,151 posts

Joined: May 2001

Quote: I was thinking of applying thick greenish frame for all other pages, but i don't know how to place it with DW4

when you say frame do you mean border? this can be done with nested tables (a table inside a table), make all your margins = 0 in the body tag, make the first table 100% aligned to center with only one td cell, inside that place your main table which holds your contents.

If your new to DW and dont know any HTML then I reckon you can pat yourself on the back.
I know HTML backwards but actually had trouble learning how to use DW and FP. I have never been able to make a site with DW or FP without doing at least some hand coding to it.

but the reason for this extra post is ... learning HTML isnt hard, and even if you dont make your pages with a text editor you can still use DW but the best thing is you can edit its mistakes and know what its doing.

think about it, you'll be suprised how easy it is to do, I had a how-to HTML web site (on a free server) and the opening line was something like "Anyone can make a web site - and they do."

no matter what you do, the TWF is the best place to be, to learn, to share, to advise ....

They have: 38 posts

Joined: Sep 2001

u r right about learning code..i just have no time for it:(

i have made different navigation menu instead of pics, it loads faster now, and i have cancelled the rollover effect

egyptianplayers.f2s.com

still in need of color scheme to be used for the rest of my site

Busy's picture

He has: 6,151 posts

Joined: May 2001

Colour scheme - could use the field colours, the ball colours, or even the flags colors ....

you have the first table at "780" and also the first td cell, if you make these both 100% you wont have the slight sideways scroll in a 800x600 screen.

your image is 780 wide, so you could make the flag part one image, make the name another (transparent gif) and the grass effect an actual background image for that table (seperate table for top than for contents) that way it will expand and extract for most screen sizes.

If you want the mouse over effects on those links use something like

<?php
<head>
<
style type=\"text/css\">
<!--
A:link {
color:#99FFCC;
text-decoration:underline;
background-color: transparent;
}

A:active {
color:#C00000;
text-decoration:underline;
background-color: transparent;
}

A:visited {
color:#CC000;
text-decoration:underline;
background-color: transparent;
}

A:hover{
color:#99FFCC;
text-decoration:none;
background-color: transparent;
}
-->
</style>
</head>
?>
ignore the "php"

change the link colours to suit, the "text-decoration:??" part affects the link itself, if you want no underline change it to "text-decoration: none", the a:hover one is the 'mouseover' effect

keep up the good work

They have: 38 posts

Joined: Sep 2001

Busy..Thankx alot for ur help..u really provided me with some useful information:)

I have nearly complated the design of the professionals page:

http://www.egyptianplayers.f2s.com/Professionals.htm

forget about the ad banner as i will do it again, i was sleepy and just wanted to fill the space:)

i cant do better than the current design..hope u all like it:)

i have made changes with the front page too, can't made it any better for now:

egyptiansoccer.netfirms.com

best regards

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

Good but just a couple of things - make sure on your professionals page that the same text is used for the player profiles. The second one is very hard to read.

The pages are definitely better viewed at 800*600 and any larger and they look lopsided.

Julia - if life was meant to be easy Michael Angelo would have painted the floor....

They have: 38 posts

Joined: Sep 2001

Thankx webmistress:)

I have changed the font to vardana bold size 1

the sitre looks perfect 800*600, average on 640*468 and shifted to left at higher ressolutions, i will type that the site is best viewed with 800*600 (even most professional sites mention that) hehe

some sites put pic that appear to fil the white space at higher resoultions...good idea but i have no idea how to make it:)

my rival site did so:

egyptiansoccer.com

they r optimised only to 640*468

Busy's picture

He has: 6,151 posts

Joined: May 2001

Your rivals site takes ages to load, keep to your layout and you should be on to a winner.

A lot of the big guys out there still make their sites for the small size screens, msn for one has only in the last year made it screen sizeable>
If you make your site with a main table width of 100% and allow the text to take up the access it should display pretty well in most browser sizes, however if this is based on 800x600 the smaller will look a little cramped and the bigger will look a little blank but is better than starting with the smaller size as the big sizes would look very wide spread.
There are freeware programs out there, one I use is called 'browser sizer' it displays 4 sizes - webtv, 640x480, 800x600 and 1024x768 on IE and Netscape (if you have both browsers),

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

Don't put on 'This site is best viewed.....' I don't think it is very professional as the visitor won't chnage their setting just to view your site. I don't like your rivals site with that extra bit at the side, it over-shadows the left side of the site. No keep yours as it is, people with larger screens will not leave the site just because of that!

Julia - if life was meant to be easy Michael Angelo would have painted the floor....

They have: 38 posts

Joined: Sep 2001

Okay:)

I will leave it as it is.

my rivals site is generating great traffic and always placed on the top of any searchengine and with multiple results too, when i type egyptian football, soccer, ...etc i find them on top of search results and on multiple results too...How can I compete with them and get better ranking???

most people now use 800*600 so i guess bigger screens only use higher resolutions.

My site loads pretty fast now, but I hope it remain loading fast after adding the content:)

Busy's picture

He has: 6,151 posts

Joined: May 2001

For better rankings takes time, can take up to 6 months to be ranked properly, unless you pay big bucks which speeds ot up.
Look at other soccer sites and see what keywords etc they use (don't steal theirs) but use the most common ones.

Listing on search engines has become a user pays thing lately, not sure how many have followed this but there must be some fre ones left.

Do a search for search engines, Google, Yahoo and Altavista would probaly be the main 3 or at least in the top 5, then search for soccer, players, fa cup, football, foot ball etc etc, the english soccer (football) sites would probably be a good market for keywords etc.

Not all search engines index by just the meta tags, they also index by your first pages content, use words from your meta tags in your first page somewhere, some how

dont list words at the bottom of your site as this is spamming the search bots and can and will get you taken off.

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

Search engines are not as easy to get into as they used to be. Apart from many of them being either pay-for-indexing (the inktomi based ones) or pay-per-click (goto) they have long standing databases that are hard to get into permanently. If you have any specific questions post them in the Search Engine Challenges forum.

As a rule of thumb, have good, relevant meta keywords & an interesting description with your main keywords in the first three words of it. A good title and content. Many search engines results pages will actually display your first line of text from the body of your page, so make sure that makes sense alone.

Julia - if life was meant to be easy Michael Angelo would have painted the floor....

They have: 38 posts

Joined: Sep 2001

Hello again..

I found my old site already listed on yahoo, I have typed...take alook at my post on search engines forum..

I have nearly completed the professionals page but the table is gigantic now and spans >2500 pixel:)

do u prefer that i divide the page into 2 or leave it as single page (may be longer loading in this case).?

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.