site opinions

swordsinfo

Hi all me again hope all is well. Looking for some reviews on a new site - I like it at the start but think it may be off balance or something not sure. Only recently switched to tableless design so still trying to fix the little details

Take a peak and be brutal as you want - the more im critizised the more I can improve!

http://www.karlherbertgolfpro.com/

Any thoughts or ideas please let me know
THanks

drunkmonkey

it looks a little untidy around the edges, there's overlapping pictures and text, needs a little straightening...see attached snap from firefox...i'd also use a high res image for your own logo it looks a little flat....

pretty good besides that, nice use of colour and well layed out..

swordsinfo

cheers for such a quick response. Yea i find once you add in the padding to tableless designs it effects the margins elsewhere and can throw everything off . But appreciate the comments these things can be changesd handy enough (i hope) in the stylesheet.

Thanks again

Goodshape

I'm seeing some overlapping too, though not the same as drunkmonkey.

Screenshot attached. Using Firefox3 on Ubuntu (w/KDE).

Looks like there's some cross-browser and alignment issues to sort, but I do like the look of the site overall. I'd say if you tidied it up it'd look very well.

Quick look at the mark-up... not awful but certainly room for improvement (and getting it right in the mark-up might solve some of your rendering issues). A few empty elements (i.e. "<div style="clear:both "></div>" ...not good) and a good few unnecessary <br />'s. If you're throwing in line-breaks like that to clear space or push other elements down, then something has gone wrong somewhere.

As I said though, I do like the look of it. Would be a shame not to clear up the few issues because it could be a nice site indeed.

Goodshape

swordsinfo wrote: »

i find once you add in the padding to tableless designs it effects the margins elsewhere and can throw everything off .

Different browsers have different quirks like that and unfortunately there's a good bit of trial and error involved with learning CSS based designs.

A couple of rules I like to stick to :

• If you're giving an element a fixed width, don't give it padding. If both are required (they usually are) use nested elements instead
  
  i.e. <div style="fixed-width"><div style="padding">CONTENT HERE</div></div>
  --
  
• If you're floating an element within a container, add 'overflow : hidden;' to the container's CSS. This will stop the container element from collapsing behind the floated child element.
  
  i.e. <div class="container" style="overflow : hidden;"><div class="child" style="float : right;">CONTENT HERE</div><div>

Hope that makes some sense to you. Good luck with the site

Liam Byrne

There's a few elements overlapping their intended areas (prices on the right, text at the top) and what, may I ask, are "co-operate groups" ?

"Corporate", maybe ?

jhegarty

I don't get a submit on the contact us form , ff3

forbairt

as I said over on IWF ... it gets nasty in FF3

DJB

Doesn't look great on FF3 on a mac. Lots of overlapping of divs in the wrong areas.

swordsinfo

Cheers everyone - had a thinker about with the style sheet so should render correctly across the different browsers. What do think of the "feel" of the site. Thought I go the point across and the info can be found quick enough!

Re layout whats the best option for the use of padding in the styles so that it doesnt effect the margin spacing between floating divs?

http://www.karlherbertgolfpro.com/

swordsinfo

sorry just re read your comments there necer tried the nested div makes sence to nest it withing the element. I was trying to padd up the <p> tage but that causes a lot of un- necessary spacing

Tableless is the way forward for my future design but man it can be awkward!

Goodshape

Nice one, a solid improvement here. Mark-up looks nicer and it renders much better in FF3.

Still a bit of a problem towards the bottom of the page -- screenshot attached.

How about re-jigging the text in the gold band at the top ("Kinsealy Grange Driving Range | Chapel Road....")? Vertical bars ('|') don't look right in an address and initially made me think this was a row of links. There's also no padding on the right side of that line of text.

If it were me, I'd just have a play around with it (maybe split over two lines, center align?, right align?) because I'm sure some variation would look better.

swordsinfo wrote: »

What do think of the "feel" of the site. Thought I go the point across and the info can be found quick enough!

Yup, I like the page. Smart and professional looking and gets the info out in one go - without seeming too cluttered.

Some images seem a bit low-res though ('contact us', 'special offer', 'gift vouchers'). Keeping the size down is nice but for navigation elements and headers like that, you don't want pixilisation -- it just looks cheap. Try using uncompressed png images instead, or a less compressed jpg.

And how about a favicon?

swordsinfo wrote: »

Tableless is the way forward for my future design but man it can be awkward!

But great once you get used to it. The edit-ability and reuse-ablity are much much improved.

drunkmonkey

Mine looks a little better but it's still all over the place...see attached...

tricky D

Main title and main banner take up to much screen estate and has unnecessary duplication.

Instead of Karl began..., Karl has...., Karl's clients..., which is Karl talking about himself, talk about what Karl can do for you. Improve your swing..., Lower you handicap, Use the most up-to-date facilities.

Work on the english: Facilitys = Facilities, Karls clients = Karl's clients, Days and Times Instructions = Lesson Timetable

Gift vouchers should be available from the website. See McGuirks for example.

Special offer doesn't stand out enough.

Use your alt tags.

Some of the grey on greys just don't stand out/contrast enough for me. I'm colourblind along with ~10% of your male market.

No bg colour specified in css.

Consider using a map for location and directions.

Otherwise it does look very nice colour-wise, layout etc.

Keep up the good work

hth
\r

MOH

I also thought the bit in the gold bar was links (golf links? badum)

The contact page has three headings at the bottom for no reason:
Information/Lessons twice, with Days + Times/Instructions in the middle.

Found the text in the contact button to be a bit small, hard to read.

Obviously you need to add a contact number for the driving range when you get it.
And where you have the 3 options:
contact driving range reception, ring Karl, ring driving range
I think it might read better if you put the 'ring Karl' either first or last, rather than between the two driving range options. If that makes sense?

p

Design wise it's a bit of a mishmash. There's some good things in there, but overall it's not consistant. You've rounded corners at the top, and then hard edge elsewhere. You'd got a gap between the main band and the left edge of the browser for some reason.

Overall though, the problem is context. When I arrive I don't understand what the site is. "instructor of golf" is terrible english. You need to ask, who's visiting the site, and why are they there. The site needs to answer those questions explicitly. You're mixing up Karl and then have 'contact us' - is it an us or a him, you have to be consistant. How can the site talk about 'driving range facilities' if you're talking about a person. It's confusing, and confusion causes doubt in people's minds.

Read these two articles:
http://www.andyrutledge.com/eye-paths.php
http://www.thinkvitamin.com/features/design/turning-visitors-into-users

On a more positive note. Generally you're improving with each piece of work you're putting up. Just keep at it and you're clearly taking on board people's comments so if you keep this progress you'll improve dramatically over the next few months.

G'luck