Website critique.

[ksimm]

Ok, I will stick to coding then.

Looking at the content rather than the design of the old site, what more do you think needs to be added/changed? My hands are nearly destroyed from removing superfluous capitalisation.

That's much better already. I would say it needs more than one font colour to break it up so it's easier to read. Perhaps a lighter colour for the headings.
How about grouping those menus, and have the site float with the browser rather than having it a fixed width.

Oh and is that the only logo they have, it really needs a better copy... also is it me or is the horses head look like it's hit one too many walls, a bit flat?

 

[Energize]

I agree about the logo. I asked the owner and she says that's the only copy she knows of, but surely the logo designer would have given her a vector image? I've already had to remove artefacts in GIMP.

When you say menus do you mean the divs? Also is there an easy way to force the footer to the bottom of the page?

 

[Sherbs]

So you used tables instead of a list?!

 

[Energize]

So you used tables instead of a list?!

That's just temporary, I'd already put that there before I asked.

 

[Sherbs]

I see

Can you redesign the whole site using the same content? Or won't they allow it.

 

[Energize]

The owners are on holiday at the moment so I can't contact them, but the fact that they created it themselves makes me think they might not like that suggestion. I thought maybe slowly phasing in a new design piecemeal?

 

[Sherbs]

Well now you've tidied the code up. It'll be easy as hell to style..

Not sure you can really say they have a design already

 

[Energize]

Well now you've tidied the code up. It'll be easy as hell to style..

Not sure you can really say they have a design already

Touché.


Regarding the code that I've created, does it conform to the typical standards? It validates properly at least.

 

[Sherbs]

Yeah there are a couple of niggles.

Your use of attributes while fine and valid are semantically best left in the CSS file.

instead of

<div class="header">	
		<img src="images/logo.jpg" height="145" width="406" alt="Logo"/>
		
....snip....
		</div>

You could have:

<div class="header">	
		<img src="images/logo.jpg" alt="Logo"/>
		
....snip....
		</div>

With the CSS file

div.header img {
height: 145px;
width: 406px;
}

The idea is that anything to do with looks and positioning are kept in the CSS and just the pure content in the X/HTML

 

[Energize]

So for every image I should specify the width and height in the css file then? Is it important to specify the width and height if an image is being displayed at native resolution? And if a website scales to the resolution of the browser won't that result in people with say 1024x768 monitors being served larger image file sizes than necessary?

 

[Sherbs]

You don't need to display a size if its the native resolution of the image. That was just an example

As long as your images are no bigger than there container then they should be fine.

 

[Energize]

I ask because I read somewhere that specifying the size in the html allows browsers to size the image element before the image has loaded which speeds page rendering up.

 

[Sin_Chase]

So you want to code some websites. Do you want to do it more than once? Do you want to be able to fix it when/if it breaks?

Learn at least some HTML and CSS, just enough to get you by. WYSIWYG is great and all in a fully fledged CMS which codes properly based on what you show it within the realms of loosely predefined templates. A WYSIWYG editor however, like Dreamweaver for example...avoid.

You can pick up what you need in a few days, approach us here or other resources online for things you get stuck on.

Once you code your own base layouts it becomes childsplay to re-jig graphics and CSS code and have an entirely different site appearance from a cross browser compliant, validated 'template' base.

I have re-used the same core code 5 times for simple 3 column fixed width layout sites.

It's worth putting the effort in to learn. Even if you go onto a Wordpress site or otherwise the knowledge will help you

 

[Energize]

I already know quite a bit of html, css, js, jsp, the website I linked to a few posts ago was hand coded, the difficulty for me is creating a nice design, most of the stuff I've learnt at uni has really focused on the back end, with the most basic of front end design.

At the moment given the small amount of content on the website I was thinking of something like this. Yes, I know there's a typo.

 

[Sherbs]

Well thats better than what you have, design wise you should aim for between 7-12 words on a line. You have far more

 

[Sherbs]

I ask because I read somewhere that specifying the size in the html allows browsers to size the image element before the image has loaded which speeds page rendering up.

Old advice really. The below is quite old:

http://ask.metafilter.com/90822/Dis...cified-in-image-tags-as-opposed-to-in-the-css


More up to date:
http://stackoverflow.com/questions/...ge-dimensions-in-html-vs-css-for-page-loading
http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions

I feel CSS comes out on top.

 

[Energize]

That's good to know.

How should capitalisation be done in a table with regards to headings and individual cells and should there be a full stop at the end of each line of a list?

 

[3dcandy]

tables are really frowned upon these days though

 

[MarcLister]

tables are really frowned upon these days though

Unless its for tabular data. Then, frankly, they are all the rage.

Exam results, delivery costs for different countries, comparisons of product specifications etc could all be show in a table.

 

[Energize]

tables are really frowned upon these days though

What else does one use for tabular data?