Sports Local League Website

[richie19rich77]

Hi Everyone,

 

Been working on this a couple of hours a week for the past month, at a stage now where I have some content which makes the design a bit better.

 

Still quite a lot to do with the league table and backend php coding to work out players ratings and averages.

 

Site uses javascript for ajax, I know I have to put a warning page if javascript is not found.

 

php is not supported by ntlworld, so some featues like the venue maps don't work corectly. (In need of a free hosting sites for testing).

 

url: http://homepage.ntlworld.com/richard.farthing/Testing/Live.html

 

Thanks

 

 

[JonnoTheDev]

The fact that you have used AJAX meaning all pages are on the same URL means that your site has 0 change of being indexed by a search engine. Also there is no way for a user to bookmark an individual page.

[richie19rich77]

Yes I understand the problems related to ajax, which is one of the reasons I used a crumbbar. If it comes to it I can change it back to pure html.

 

Thanks

[Axeia]

That sounds awfully odd to me, you say you have a fully functional page where no javascript is required, but you implemented it in such a way that they can't get to it?

If you have the option I'd simply load a normal html page by default and then trough javascript add the eventlisteners to the links 'transforming' it into an ajax page, that way search engines can index it just fine and people with javascript disabled can make use of the page.

 

Oh well, leaving the javascript aside, the image on the blue corner images need some work (topleft, topright, topleft beneath the image with a net) they're a slightly different shade of blue than the bar next to it, also seems to be a slight white'ish line between them.

If you can't see it you might want to check it on another monitor or simply make a screenshot and use the 'dropper' tool in an image creation program and compare the colors. The corners seem to be #14346c and the bar connecting them #13346c. (White'ish border is #1a3970).

 

I see <h4> tags, but no h1/h2/h3? If you're simply after the font-size of a h4 then apply that styling to a h1/h2 so the document makes sense.

You're styling regular tablecells to look like a caption, use a <th> for those.

<div id="DynamicContainerLine"></div> ? again wrong tag, use a <hr>

Information on the "Club info" page looks a bit cramped, maybe put a bunch of links at the top as an index with the link jumping to the part of the site with the relevant info? If you're pulling the info on that page from a database I would change the way it's put out to a table, or at least multiple lines so it's easier to read the information you're after.

 

Perhaps spice the two topright links up a bit with small icons?

 

Overall, not too shabby but I do think a couple of changes are in order.

 

(As for a free host supporting PHP, try freehostia (just google it, not sure if I'm allowed to link their site on these boards))

 

[richie19rich77]

Thanks for the reply, I haven't done the javascript checking yet as I need to add it.

 

All your other comments are very useful, as you can tell I am very new to html coding, I will go through your post and try to change what you have stated.

 

Thanks again.

[nrg_alpha]

Site uses javascript for ajax, I know I have to put a warning page if javascript is not found.

 

To be honest, I'm not sure why there is javascript in the first place. There is nothing like sliding panels or such that would use javascript. So as a result, when javascript is disabled, *poof*, page content is gone. What you should realise is that javascript should 'enhance' a feature, not be the feature in and of itself (think in terms of graceful degradation).

 

My strong advice is

a) don't make base content only accessible in javascript. Again, javascript should enhance something instead...

b) When using javascript, make use of <noscript>....</noscript> and place your non javascript stuff between those tags to ensure that your content is accessable even if javascript is disabled. At the end of the day, relying on javascript for your site's content is bad design.

[richie19rich77]

Thanks for replying, I have taken your comments on board and will look to changing and using javascript to enchance features that are not critical to viewing.

 

Regarding the faint white lines next to the header pictures, Yes I see them but not quite sure why they appear.  In Photoshop they look fine before I save the picture, then I save the picture as jpg, quality 12,  baseline (Standard), and the it seems to change the border of the image.

 

Any ideas?

 

Thanks

[nrg_alpha]

Regarding the faint white lines next to the header pictures, Yes I see them but not quite sure why they appear.  In Photoshop they look fine before I save the picture, then I save the picture as jpg, quality 12,  baseline (Standard), and the it seems to change the border of the image.

 

What you can do with those faint border-like lines those images is to open them up in Photoshop, and simply pick the solid main colour that they are, and using the Pen Tool, simply draw over those borders and resave. A few things to consider about images...

 

If you are saving using 'Save As..', this is not the most optimal way. It is best to 'Save for Web' instead. Once in the Save for Web panel, pick the format, number of colours or compression levels.

 

Additional things to consider... Images that can be merged and loaded as a css image (css sprite) instead is preferable. For example, I am seeing these four images as examples:

 

Image Sample 1 - Image Sample 2 - Image Sample 3 - Image Sample 4

 

These by example can be merged into one image and loaded as a css image. The combined image when optimized correctly will be less in size than all those four separate files. You will also shave those 4 http request headers down to 1. I would consider combing through images that can be merged.

 

Also, to further optimise, consider passing your images through smushit. This does some 'under the hood' optimizations that can shave off additional sizes that apps like Photoshop cannot. By example, just you home page can have 9.79 KB shaved off doing this.

[nrg_alpha]

b) When using javascript, make use of <noscript>....</noscript> and place your non javascript stuff between those tags to ensure that your content is accessable even if javascript is disabled. At the end of the day, relying on javascript for your site's content is bad design.

 

I'm not on the ball today to be sure. Best to put your javascript in a separate file for ease of maintenance. If you do embed javascript, do so in some include file by example, as this too offers you the ability to change it once, and have it propagate site wide (assuming every page includes this file...my head has been stuck in <script><noscript> mode for some reason).

[TheFilmGod]

The problem with css sprites is that CSS 2.1 specification does not have background-crop. You can't crop a piece of the puzzle and position it in a div as you wish. You could either:

 

1) crop the background image and put it right where your div is

2) don't use a css sprite and position the background image wherever you like.

 

That should help a bit. CSS 3.0 does have background-crop, thank god. 

[nrg_alpha]

The problem with css sprites is that CSS 2.1 specification does not have background-crop. You can't crop a piece of the puzzle and position it in a div as you wish.

 

Actually, it is possible to crop a portion of a sprite sheet (with help from an anchor tag). In css, simply create a class that loads the sprite sheet as a background with no-repeat, then when you want to load only a portion of that image to position somewhere in a div, simply create an empty anchor that shares dual css class attributes, one which is the first class I just mentioned, the second that focuses on setting the width/height (dimensions of the graphic you wish to isolate within the css sprite sheet) as well as using background-position (which basically sets the x,y offset from the top left as coordinates to grab the portion of the image within the sprite sheet) coupled with margin settings (if needed). Done.

 

EDIT - You don't only have to use anchor tags, this can be applied to <h1>, <h2> tags as another example (say to add text to an background image representing text for SEO purposes and offset the actual text using text-indent).

[Axeia]

If you're using the 'select' rectangle tool to create slices, make sure you turn off the anti-aliasing feature or whatever it's called. It makes the pixels close to the border of your selection semi-transparent.

[richie19rich77]

Ok new link: http://www.richardrfarthing.org/testing/live.html

 

I am now looking at some of the design problems (Use of Ajax).  Is there any way I can still use dynamic content without using Javascript or stopping the indexing of my pages within search engines?

 

The only reason I want to use dynamic content is because only part of my page content changes, and if I change the design of the header or footer I do not want to then change 20 odd pages.

 

I have looked at iframes but it leaves a scrollbar down the page, and I have also looked at <object type="text/html" which again is a bit messy.

 

Any ideas.

 

Thanks

 

 

[richie19rich77]

Ok I think I am starting to understand this,  I have created a front page that uses php include to include a seperate header, sidebar and footer. By doing this I then only need to modify the content page everytime.

 

Let me know if this is the bext way to do it.

 

Thanks

[Axeia]

Use an editor with template capabilities or use PHP and require_once().

Keeping things maintainable doesn't require ajax nor iframes.

 

On the summer league page (and that's why ajax isn't all that good.. can't provide a direct link) I'm quite sure the alt="Angry face" should be "Big Ron's"

And the

<table style="font-size: 13px; font-family: Verdana;" align="center" border="1" bordercolor="#666666">
<tbody><tr>
<td align="center" bgcolor="#ffff66"><strong>POS</strong></td>
<td align="left" bgcolor="#ffff66" width="160"><strong>TEAM</strong></td>
<td align="center" bgcolor="#ffff66"><strong>PLD</strong></td>

<td align="center" bgcolor="#ffff66"><strong>WON</strong></td>
<td align="center" bgcolor="#ffff66"><strong>LOST</strong></td>
<td align="center" bgcolor="#ffff66"><strong>PTS</strong></td>
    <td align="center" bgcolor="#ffff66"><strong>DBL PTS</strong></td>
</tr>

should all be <th>'s instead of <td>'s.... why all the inline code anyways? If you worry about maintainability I would rewrite this to:

<style type="text/css">
.week { font-size: 13px; font-family: Verdana, sans-seriff; text-align: center; border: 1px solid #666; }
.week th { background: #ffff66; }
.week th.team { width: 160px; }

</style>

<table summary="Scoreboard of the Table Tennis Summer League">
<thead>
<tr>
<th>POS</th>
<th class="team">TEAM</th>
<th>PLD</th>

<th>WON</th>
<th>LOST></th>
<th>PTS</th>
<th>DBL PTS</th>
</tr>
</thead>
<tbody>

 

[edit]

Yes include is fine (same thing as require_once I suggested, but without the it only happens once check.. which really doesn't matter in this case).

[TheFilmGod]

Axeia - require_once shouldn't be used in this situation.

 

Require will puke out an error if the server can't find the php file you are "including". You could just use include(). Require is used for key files that MUST be loaded every single time. A good example is a database connection file. If you can't find that file, the page might as well not load because there will be no

data extracted from the database, but on the other hand, a footer should use an include. - If the server can't find the footer, it should still render the rest of the page, as the footer's absence would not be detrimental to the overall rendering.

 

 

[Axeia]

If part of my 'expectation' is missing from the whole I'd want the whole thing to fall on it's ass.

But yeah go with whatever you already have working in this case.

[richie19rich77]

I have changed to <object> tags instead of AJAX.  Still need to re do some of my old pages but at least the back button works and my site will be indexed by search engines.

 

www.richardrfarthing.org/test/live.php

 

A few problems with CSS in IE, but I will go through the coding of everypage after I have decided on what route I am going to take.

 

Thanks

[Axeia]

Umm thought you settled for PHP includes?

Ok I think I am starting to understand this,  I have created a front page that uses php include to include a seperate header, sidebar and footer. By doing this I then only need to modify the content page everytime.

although iframes (okay in this case <object>'s) are a bit more accessible they're still inferior to includes.

[richie19rich77]

I have done abit of both Object tags for the "League & Result" content, and the rest uses a generic page with php includes., I am just playing around trying to understand what I feel I like best.

 

As I have never done any kind of web programming, I am learning something new and then changing my page code 

 

I think once I have this working I will settle with it until I have all the content finished then look at the page design again.  You have to remember before this I have never touched any kind of web programming so this is all new.

 

Thanks for your comments.

 

Rich