Been working on a new site. Comments, Opinions?

Hawk Tuah

Hawk Tuah

Hawk Tuah

Soldato
Joined
18 Oct 2002
Posts
14,259
Location
Sandwich, Kent
Ok, the customer has asked to have a site that they are going to be able to update themselves, however they have absolutely no clue with computers. :rolleyes:

So what I've done is make a site that reads plain html files for the main content pages, and they can also add new images by just dropping them into specific folders.

Incidently, does anyone know of a way to create thumbnails server side, instead of just resizing the images on the front end?

Anyhoo, here is the 'first draft'. Oh, I know the font is rather simple, but the customers business cards, adverts and van are all done in Times Italic, so its probably best I stick with the company image.

http://www.customis.co.uk/
 
OK, just a few points:
  • You're using tables for layout, could do with being re-done with CSS
  • The blue title/links look a bit odd against the brown/beige of the site. Could it be made black/gray instead?
  • The whole site needs padding left & right
  • If you must stick with that font then the text needs some line spacing to make it more readable
  • The blocks of text are too big, nobody will ever read them as they are, split them up into managable chunks
  • The about us page is too text heavy, it could do with a couple of images in there next to the text
  • The menu text could do with being bold
  • There's quite a bit of space wasted in the header, maybe show more of the image

For the image resizing, just google PHP image resize scripts, there's a million of them.


Mick.
 
Just a bit of usability on the Bathroom pages I think "Before" Photos should come before the "After" Photos, feels more natural that way.
 
JamesU2005 said:
Just a bit of usability on the Bathroom pages I think "Before" Photos should come before the "After" Photos, feels more natural that way.
Click to expand...
Good point, looks like it's because it's displaying them in alphabetical order though. A new naming scheme is needed (or re-write the page obviously ;) )
 
Thanks for the pointers.

The text in About us was provided by the customer. It is a bit bulky and I will have to get him to cut it down, or perhaps spread it over onto another page.

I've only ever used css for styles. I dont see whats so wronig with tables? I guess I'll have to look it up for more. :(

I forgot to mention, his company 'theme' is blue time roman italic text. Not much to go on.

vanqe5.jpg



The picture gallerys are alphabetically sorted, so A is before B. I think I'm going to get rid of the before images. They look a bit horrid and I dont really think they are nessecary. The pictures still need updating.
 
Mickey said:
Good point, looks like it's because it's displaying them in alphabetical order though. A new naming scheme is needed (or re-write the page obviously ;) )
Click to expand...

I've created it like that so the customer can dump new photos into the website. He said he'd like to be able to update it. Therefore that page is all generated by reading all the photos in a directory, using the filename for the text (minus the extension and %20's).

Its hard to create a more logical sort without adding further complication to the customer, or adding additional complication like adding a sql database, upload function, passwords etc.
 
Bug One said:
I've only ever used css for styles. I dont see whats so wronig with tables? I guess I'll have to look it up for more. :(
Click to expand...

There's a whole wealth of reasons, but some of the more prominent ones are:
  • They're slow to render.
  • They require a lot of markup to do even simple things.
  • The markup is confusing to read.
  • They're unsemantic: you're not actually using them for their intended purpose when you use them for layout purposes. Tables should be used to display data in tabular form.
  • They increase coupling between the structure and presentation layers of the page; using tables locks you into having the site structured in a certain way (as determined by the way you set up rows and columns).

What you should be doing instead is using a combination of CSS and dividers (<div> tags) to lay your page out. That way you can have a single element for each logical part of the page, each with its own associated style information.

Also, avoid the use of tags like <u>, <i>, <b> and <font>. One of the key principles in good webdesign is to keep the structure and presentation of your website separate (as I said above); these tags introduce specific presentational information to your markup. Instead, use tags like <em> (for emphasis), <strong> (for increased weight), etc. to define how the text relates to the surrounding text, and then style these tags as you want using CSS.

For example, I noticed you used this:
Code: 
<i><b><font class=subtitle><center>About Us</center></font></b></i>
for your headings. This could be done far more succinctly like so:
Code: 
<h1>About Us</h1>
Code: 
h1
{
    font-weight: bold;
    font-style: italic;
    color: #074C8D;
    (etc.)
}

This way you've got no presentation information in your HTML and if you want to change how your page looks, you need only adjust the CSS :)
 
Thanks for the info. That actual part is interesting as its not in the 'site' coding as such. Its in the html file used which gets read by the main code. Funnily enough the subtitle class already is bold and italic so those tags are just left over from when I was trying stuff out.

I'll have to start using h tags as you say. Does look a bit neater than font class's. I just picked up that habit from working on phpnuke sites. ;)
 
Dang, considering you know nothing about computers, that is a really nice site.

I wouldn't use the full image size (scaled) in the thumbnails though, they take a few seconds to load - produce proper thumbnails and link to the images for popping up seperately.
 
If they want search engine rankings, you need to have contact information in the header (not as an image). Also, the use of < h1 > etc is a must before the 'fold'

Padding the text more would be nice too.

Also, when you roll over the email address in Contact Us, it disappears.

There is also no validation to speak of

http://validator.w3.org/

Get the guy to buy an 0800 number for professionalism. Its costs about £4.99 a year to have and he can get it diverted to a mobile.

Insert that, along with the email address above the header.
 
You have lots of thumbnails but absolutely no information!

If it were me I would have the thumbnails link to another page which will have a larger photo and some details concerning the new kitchen/bathroom.

That way I can go "ah, so it is a red oak effect worktop and rather charming brass handles for the cupboards. Cupboard doors and drawers are all built using no-slam hinges and rails for soft closing. Extras include blah blah blah"

Overall the design looks clean and simple, which is good. You just need to iron out the kinks. Moving over to pure CSS is a really good idea. Apart from all the reasons mentioned in a previous post you also have to think about maintenance. Tables are horrible, horrible things and even small changes can cause all manner of problems. If the site were in CSS layout changes can be made in one place. Since the whole site uses the same stylesheet you only need make the change once.

You also have to consider the possibility the client doesn't like your site [or gets bored with it down the line] changing a layout with tables is a mare. With CSS you can just change some values/add new images etc and hey presto, a whole new website and you haven't touched the content. Standards Complience is also important. If you write to set standards you are guaranteed to have the most compatability with most browsers. It's not perfect yet I know but no reason not to try!
 
Last edited:
Shoseki said:
Dang, considering you know nothing about computers, that is a really nice site.

I wouldn't use the full image size (scaled) in the thumbnails though, they take a few seconds to load - produce proper thumbnails and link to the images for popping up seperately.
Click to expand...
Sadly I do know a bit about computers. :o

I did have the thumbnails made properly initially, however it would have been more difficult for the customer to update the site if I tell him that he has to create thumnails for all his pictures, and they have to have matching names etc....
 
Bug One said:
Sadly I do know a bit about computers. :o

I did have the thumbnails made properly initially, however it would have been more difficult for the customer to update the site if I tell him that he has to create thumnails for all his pictures, and they have to have matching names etc....
Click to expand...

Write a quick page that he can use to upload new photos and generate the thumbnails and correct naming structure.
 
Ok, I've been putting the H1 tags in, but it makes the text have a huge space below it. How do I get rid of this.

I've tried

display: inline
margin: 0
Margin-top: 0
marign-bottom: 0

None of them make any difference.
 
You are already using PHP, I suggest you try to use the gd library. If you can automate it so that he can upload images and they will be automatically resized, that will work a treat.

Depending of course on whether you can install it, what rights you have on your server etc...
 
Bug One said:
Ok, I've been putting the H1 tags in, but it makes the text have a huge space below it. How do I get rid of this.

I've tried

display: inline
margin: 0
Margin-top: 0
marign-bottom: 0

None of them make any difference.
Click to expand...

margin: 0; padding: 0;
 
Mixeh said:
margin: 0; padding: 0;
Click to expand...

Thanks, that got it.

Shoseki said:
You are already using PHP, I suggest you try to use the gd library. If you can automate it so that he can upload images and they will be automatically resized, that will work a treat
Click to expand...
Just taken a look. Looks like I could make a little script that would add that functionality in. Thanks


I've made a few changes to the site following some of your comments. Some of the other changes you mentioned will take a bit longer. :p
 
You must log in or register to reply here.
Back
Top Bottom