BFA Continued

[jcombs_31]

I'm finally moving ahead for the content pages for the Broward Fire Academy.

 

You can see the home page here -> http://jcombs.net/bfa/

 

Here is the design for a content page  -> http://jcombs.net/bfa/layout1.jpg

 

What I want if feedback on the content page design.  I'm getting ready to send to the client so I want to make any necessary fixes first.

[nrg_alpha]

Looking good, jcombs. I see you kept the metal plate footer background. Good man

 

As for the content page, Not really much to critique that I can personally think of. Seems like an efficient use of space.. things line up nicely.

Only two aspects for me are:

 

• The main menu backgrounds (the panels which 'Fire Academy', 'EMT School', 'Certification', etc.. sits on) could look perhaps a tad more crisp and vibrant..By this I mean, the beveled edges look too soft / dull (then again, maybe if it was too pronounced, it wouldn't be good.. a comfortable middle ground perhaps?) The top and bottom of those panels don't seem to have a beveled effect... so the panels seems kind of at odds.. on one hand, it looks 3d, but on the other hand, flat. Perhaps adding a nice upper edge highlight and sharpening the edges a bit?
   
  
• The icons (like for the 'Latest News' section.. which look like small calenders) as well as the 'News Letter' globe and envelope seem low key.. this may be intentional.. I'm just wondering if those can be 'beautified' a bit.. It's a minor thing though. Nothing worth losing sleep over.

 

All in all though.. looks good to me. Aside from those issues, looks good. (on a side note, I love how the top and bottom metal panels fall off into darkness... Will that effect be replicated on the home page?

 

I know you are not looking for feedback on the home page. But I would look into two things:

 

• 
  About SEO.. I noticed you are using 3 h1 tags.. The recommendation is one h1 tag.. (but can have multiples of the others). I would consider making them h2's and perhaps using the main top 'Welcome to the Broward Fire Academy' graphic as the h1 background (with the actual h1 text indented off the page (say -999px for example) so people won't see it (but search engines will). As well, there is the lack of the meta description tag.

 

I'm not sure how important SEO is for the client.. but if they want to get better page rankings, I would consider something along those lines.

 

• Pushing your images through smushit.. The home page can shave off ~13.09 KB. Granted, if the site will not receive high traffic, it may not be an issue.. Just as a matter of reducing unnecessary kilobytes..

 

Looking good though. Good job, as usual.

[Axeia]

Although I do like the looks, I think the current page link should differ from the others.

 

You could use a definition list <dl><dt><dd> on the front page for those 'read more' blocks, at least going by the headers it looks like it would make sense (can't really tell with the current text )

 

I see you used CSS sprites for the hover effect, why not for the <h1>'s you got there as well. 1 page request instead 3 is always nice. (although I agree with nrg_alpha that they shouldn't be h1's in the first place)

[jcombs_31]

Looking good, jcombs. I see you kept the metal plate footer background. Good man

 

 

As for the content page, Not really much to critique that I can personally think of. Seems like an efficient use of space.. things line up nicely.

Only two aspects for me are:

 

• The main menu backgrounds (the panels which 'Fire Academy', 'EMT School', 'Certification', etc.. sits on) could look perhaps a tad more crisp and vibrant..By this I mean, the beveled edges look too soft / dull (then again, maybe if it was too pronounced, it wouldn't be good.. a comfortable middle ground perhaps?) The top and bottom of those panels don't seem to have a beveled effect... so the panels seems kind of at odds.. on one hand, it looks 3d, but on the other hand, flat. Perhaps adding a nice upper edge highlight and sharpening the edges a bit?
   
  
• The icons (like for the 'Latest News' section.. which look like small calenders) as well as the 'News Letter' globe and envelope seem low key.. this may be intentional.. I'm just wondering if those can be 'beautified' a bit.. It's a minor thing though. Nothing worth losing sleep over.

 

I agree I need to sharpen up the main menu a little bit.  This was the first draft I put together and I'll have to into some revisions.  Even looking back now at the home page, i want to make adjustments as it doesn't look polished.

 

For the calendar icons, I played with a few from icon packs but they just didn't fit in with the layout, they all look a little cartooney which I didn't like. 

 

All in all though.. looks good to me. Aside from those issues, looks good. (on a side note, I love how the top and bottom metal panels fall off into darkness... Will that effect be replicated on the home page?

 

 

yes

 

 

I know you are not looking for feedback on the home page. But I would look into two things:

 

• 
  About SEO.. I noticed you are using 3 h1 tags.. The recommendation is one h1 tag.. (but can have multiples of the others). I would consider making them h2's and perhaps using the main top 'Welcome to the Broward Fire Academy' graphic as the h1 background (with the actual h1 text indented off the page (say -999px for example) so people won't see it (but search engines will). As well, there is the lack of the meta description tag.

 

 

Point taken, I can fix the markup issues.

 

I'm not sure how important SEO is for the client.. but if they want to get better page rankings, I would consider something along those lines.

 

• Pushing your images through smushit.. The home page can shave off ~13.09 KB. Granted, if the site will not receive high traffic, it may not be an issue.. Just as a matter of reducing unnecessary kilobytes..

 

Looking good though. Good job, as usual.

 

I don't think this will be a major issue, but I'll optimize where i can.

 

Thanks for the feedback.

[jcombs_31]

Although I do like the looks, I think the current page link should differ from the others.

 

You could use a definition list <dl><dt><dd> on the front page for those 'read more' blocks, at least going by the headers it looks like it would make sense (can't really tell with the current text )

 

I see you used CSS sprites for the hover effect, why not for the <h1>'s you got there as well. 1 page request instead 3 is always nice. (although I agree with nrg_alpha that they shouldn't be h1's in the first place)

 

There is currently a subtle difference in the current page link, but I'm going to be making adjustments to the main menu.

 

I can see the use of a definition list, but don't think it is necessary, the container works fine and it is not a true definition list.  Good catch though.

 

I only uses sprites for hovers so there is no flicker, otherwise I think it is overkill.

[jcombs_31]

I made changes to both the home page and the content page mockup.  Let me know what you think now.  I'm happy with the direction it is going.

 

http://jcombs.net/bfa/

http://jcombs.net/bfa/layout1.jpg

[Daniel0]

I only uses sprites for hovers so there is no flicker, otherwise I think it is overkill.

 

I think it can make a difference. On the recent templates you sent me* I cut off about 20 HTTP requests. That's quite a lot considering that it's 20 requests less on each page view. It's 20 times less the browser will have to check with the server if there is anything new going on. Around 80% of the load time is network activity and execution on the on the client side, so performance wise that is where optimization efforts should be primarily focused at.

 

_________

* Sorry those of you who don't know what I'm talking about. I suppose you'll find out soon enough.

[jcombs_31]

Don't get fresh with me Daniel!  To be honest I've never focused too much on performance because I haven't really had the privilege of building very high traffic sites.  I imagine I can probably do some things better.

 

The reason for my response is that I've seen some sprites that have so many images it looks like chaos, but in the end I suppose the server likes it. 

 

I remember reading this http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/ not that long ago.

[Daniel0]

There are a few tools that will make sprites easier for you. E.g. http://csssprites.com/ or http://spritegen.website-performance.org/

[nrg_alpha]

I made changes to both the home page and the content page mockup.  Let me know what you think now.  I'm happy with the direction it is going.

 

Oh, I've liked the direction it was going since you first showed the mockup a while back.

 

Home page:

 

I see you implemented the h1 tag and used h2 tags for the other subheadings.. good stuff. Just needs a meta 'description' tag with a good, short concise sentence that accurately describes the current page (this tag's content is what shows up in search results). Other than that.. the only other crit I can think of is optimizing image file sizes (home page ran through Yslow's smushit chops off ~7.29 KB).

 

http://jcombs.net/bfa/layout1.jpg - Much better menu background panels (more presentable).

 

Well done