Please critique - first site for a client (Full Version)

All Forums >> [Web Development] >> Site Critiques



Message

iisassi -> Please critique - first site for a client (3/11/2005 17:36:29)

Hello.. I'm new to this forum and thought I would start off by submitting a site for critique.. I'm fairly new to building websites and this is the first one for a client.

Shelly's Photography

I don't take critiques as a personal attack so feel free to tell me what you really think..

P.S.. I'm aware that it doesn't work with FireFox yet..

Thanks,
Israel



Brandon -> RE: Please critique - first site for a client (3/11/2005 19:14:53)

Background is repeating on 1280x1024 res. Also just a suggestion don't unline anything that isn't a link....use bold or Italic. I like the nice clean layout. Very easy to find my way around. Keep up the good work.



iisassi -> RE: Please critique - first site for a client (3/11/2005 19:22:12)

Thanks for the feedback.. The underlined text kept bugging me but for some reason I left it in..

The repeating background should be a hint as to how new I am at this, which leads me to ask for a recommendation on how to handle that.. I could make it larger but what would be a good size??

Thanks again.. Israel



jaybee -> RE: Please critique - first site for a client (3/12/2005 4:36:48)

width=100% height=100%



iisassi -> RE: Please critique - first site for a client (3/12/2005 10:58:26)

thanks for the feedback.. this doesn't seem to work with the "background" tag, which tells me I need to learn a better way to display a background image.. Time to hit the books..


Later,
Israel



anderskorte -> RE: Please critique - first site for a client (3/12/2005 11:16:27)

Why do you use such a huge image for the background? It's 1024x768 in pixels and the filetype is GIF. That means a monster amount of lost bandwidth and over a minute of waiting for viewers on slow connections. Of course, this isn't a personal attack towards you, but I hope your client never gets aware of this.

And you shouldn't use images as text this way. HTML is a hypertext language. HTML documents are marked up text documents that can be styled up with a stylesheet language. Images are just extra, you can get this and even more wonderful results with styled text. Trust me, it's not difficult at all to do it properly.

Your website is over 170KB in size! But you could easily shrink it to, say, 30 or 40KB, if you want to keep the title "Shelly's Photography" as an image.

I also suggest that you didn't use Microsoft Office to build websites. That's probably the biggest problem this website has. It's not that much of your fault, of course: MS Office just generates very sloppy code and in return you have no control over how the website behaves.

By the way, it does work in Firefox. I think the website looks pretty good and is very clear.



iisassi -> RE: Please critique - first site for a client (3/12/2005 12:05:07)

I do appreciate the honest feedback. I really don't take offense to anything anyone can say about my web development. This is all fairly new to me so some of what you said was way over my head but not for long. I'm not easily discouraged.

The site was built using FrontPage 2003. I'm sure most of the sloppiness was due to my use of click & drag technology instead of hand coding. I am committed to learning how to do this better but I had to get started somewhere. Now that I have some code to work with I can reverse engineer it. I learn faster that way.

The reason for the background image being so big is that I wanted to use a diagonal gradient to match her business card. I didn't know of another way to do it on a short time frame.

The "Shelly's Photography" logo is a graphic because that's the only way I know to make the text look smooth. I assume you are recommending CSS to handle this and the background issue. Time to hit the books.

The FireFox comment I made was a result of trying on two different XP-based computers. The home page displays completely but none of the buttons and links work. The FF status bar says "Read www.shellysphotos.com". This was tested over cable and DSL connections. I'm new to FireFox so I don't know how to troubleshoot this yet.

Thanks again for the open honesty.

Israel




jaybee -> RE: Please critique - first site for a client (3/12/2005 15:15:27)

quote:

I assume you are recommending CSS to handle this and the background issue.


You can use css to handle a vertical or horizontal gradients but I can't think of a way to do the diagonal one without using a large pic. You could try a smaller one with the %ages I mentioned above but it depends on the quality of your graphic as to what it will look like.

If you go horizontal or vertical though, you only need to make a background image the length or width of your page and 1 pixel high or wide then use the repeat command and the image will just spread across the page. The advantage here id the image is small so loads fast but then just gets reused to fill the page.

For example if you want purple to the left fading to white on the right you could use the gif below which comes in at around 1kb. Your centre box background would have to be done separately as a background image to the table, div or whatever you use to layout the page.

[image]local://upfiles/9075/F3E8B858E3EC4D6F92518AA60DD02AA2.gif[/image]

Look carefully, it's only 1 pixel deep.



jaybee -> RE: Please critique - first site for a client (3/12/2005 15:17:46)

When you use the repeat command it duplicates it down the page giving you the following effect, but a lot deeper

[image]local://upfiles/9075/358C981BBD92406B9391FBE8C5F89E2C.gif[/image]



iisassi -> RE: Please critique - first site for a client (3/12/2005 16:16:34)

I think a vertical gradient would look better so I'll run it by the client.

It seems to me that there is still a limit on dimension at least. If I create a 1024 x 1 image, for example, then I'll still have the issues with larger screen resolutions. This leads me to believe it would be best to have a solid background. Then if I need gradients or graphics I could add them to that solid background.

Thanks for your patience and information..


Israel



anderskorte -> RE: Please critique - first site for a client (3/13/2005 13:46:02)

quote:

ORIGINAL: iisassi

I do appreciate the honest feedback. I really don't take offense to anything anyone can say about my web development. This is all fairly new to me so some of what you said was way over my head but not for long. I'm not easily discouraged.

That's very good since I didn't try to be offensive at any point. [:)] Instead, I'm putting extra weight to this thing I said in my previous post:

quote:

Trust me, it's not difficult at all to do it properly.

I mean that you really don't have to do much to make it a lot of better (regarding the problems I pointed out).

quote:

ORIGINAL: iisassi

The "Shelly's Photography" logo is a graphic because that's the only way I know to make the text look smooth.

Yes, that's a good point, and I recommend using an image for the logo. You can then give it "Shelly's Photography" alternative text. I'm pretty sure you can do it easily in Frontpage, too.

quote:

The home page displays completely but none of the buttons and links work.

I tried to troubleshoot this by looking at the code.

The "navigation" is a single image, so I'm waiting to find an image map. The code looks like this: 
<![if !vml]>
<span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:9px;top:201px;width:177px;height:349px'>
<img width=177
height=349 src="index_files/image002.gif" v:shapes="_x0000_s1028"></span>
<![endif]>

But there are no links or image maps defined here. It's no miracle they don't work.

But wait...! Right before it I see this: 
<!--[if gte vml 1]><v:shape
 id="_x0000_s1028" type="#_x0000_t202" alt="" style='position:absolute;left:6.75pt;
 top:150.75pt;width:129.75pt;height:258.75pt;z-index:1' filled="f" stroked="f">
 <v:textbox>
<table cellspacing="0" cellpadding="0" width="151" height="100%">
  <tr>
    <td align="center" valign="top" width="151">
    <p align="left" style="margin-bottom: -15px"><a href="index.htm">
    <img border="0" id="img25" src="button31.gif" height="29" width="139" alt="Home"
fp-style="fp-btn: Shellys Custom Buttons; fp-font: BrushScrD; fp-font-size: 18;
fp-font-color-hover: #FFFFFF; fp-font-color-press: #FFFFFF; fp-transparent: 1" fp-title="Home"
onmouseover="FP_swapImg(1,0,/*id*/'img25',/*url*/'button32.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img25',/*url*/'button31.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img25',/*url*/'button33.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img25',/*url*/'button32.gif')"></a></p>
    <p align="left" style="margin-bottom: -15px"><a href="children.htm">
    <img border="0" id="img26" src="button34.gif" height="29" width="139" alt="Children"
fp-style="fp-btn: Shellys Custom Buttons; fp-font: BrushScrD; fp-font-size: 18;
fp-font-color-hover: #FFFFFF; fp-font-color-press: #FFFFFF; fp-transparent: 1" fp-title="Children"
onmouseover="FP_swapImg(1,0,/*id*/'img26',/*url*/'button35.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img26',/*url*/'button34.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img26',/*url*/'button36.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img26',/*url*/'button35.gif')"></a>
<p align="left" style="margin-bottom: -15px">
    <a href="seniors.htm">
    <img border="0" id="img27" src="button37.gif" height="29" width="139" alt="Seniors"
fp-style="fp-btn: Shellys Custom Buttons; fp-font: BrushScrD; fp-font-size: 18;
fp-font-color-hover: #FFFFFF; fp-font-color-press: #FFFFFF; fp-transparent: 1" fp-title="Seniors"
onmouseover="FP_swapImg(1,0,/*id*/'img27',/*url*/'button38.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img27',/*url*/'button37.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img27',/*url*/'button39.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img27',/*url*/'button38.gif')"></a>
<p align="left" style="margin-bottom: -15px">
    <a href="portraits.htm">
    <img border="0" id="img28" src="button3A.gif" height="29" width="139" alt="Portraits"
fp-style="fp-btn: Shellys Custom Buttons; fp-font: BrushScrD; fp-font-size: 18;
fp-font-color-hover: #FFFFFF; fp-font-color-press: #FFFFFF; fp-transparent: 1"
fp-title="Portraits" onmouseover="FP_swapImg(1,0,/*id*/'img28',/*url*/'button3B.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img28',/*url*/'button3A.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img28',/*url*/'button3C.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img28',/*url*/'button3B.gif')"></a>
<p align="left" style="margin-bottom: -15px">
    <a href="events.htm">
    <img border="0" id="img29" src="button3D.gif" height="29" width="139" alt="Events"
fp-style="fp-btn: Shellys Custom Buttons; fp-font: BrushScrD; fp-font-size: 18;
fp-font-color-hover: #FFFFFF; fp-font-color-press: #FFFFFF; fp-transparent: 1"
fp-title="Events" onmouseover="FP_swapImg(1,0,/*id*/'img29',/*url*/'button3E.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img29',/*url*/'button3D.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img29',/*url*/'button3F.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img29',/*url*/'button3E.gif')"></a>
<p align="left" style="margin-bottom: -15px">
    <a href="weddings.htm">
    <img border="0" id="img30" src="button40.gif" height="29" width="139" alt="Weddings"
fp-style="fp-btn: Shellys Custom Buttons; fp-font: BrushScrD; fp-font-size: 18;
fp-font-color-hover: #FFFFFF; fp-font-color-press: #FFFFFF; fp-transparent: 1"
fp-title="Weddings" onmouseover="FP_swapImg(1,0,/*id*/'img30',/*url*/'button41.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img30',/*url*/'button40.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img30',/*url*/'button42.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img30',/*url*/'button41.gif')"></a>
</td>
  </tr>
</table>
 </v:textbox>
</v:shape><![endif]-->

Such a mess, but the navigation with links is there. The only problem is that the whole thing is commented out.

Looks like some heavily proprietary IF structure or something. I've never seen anything like that.



iisassi -> RE: Please critique - first site for a client (3/13/2005 15:59:43)

I knew going into this that I was going to make a lot of mistakes and have a lot to learn. A very long time ago I did what I call "utility" programming, which amounted to finding bugs in other peoples code and fixing it. I got out of it because I wanted to do other things. Back then I worked in assembly and C. Life has gone full circle for me and I'm back to trying out programming.

I saw the alternate text field in the image properties in FrontPage but I didn't realize that search engines would look at it, which is why I didn't use it. I will go back and update the site and use it in the future.

As for the navigation, it all works in IE but with FF it seems the page never finishes loading. I created the button image in Photoshop, and added the button using FP Interactive Buttons. When you do this, you can add the text labels and it creates the .gif image for you. The really bad part of doing it this way is that each page has it's own set of buttons. I'll fix this also.

I can understand the code being such a mess. When I first set up the navigation it kept wanting to reference my local hard drive. I got tired of fighting it, deleted it all and added it back in. So, I'm sure it left a lot of garbage. As part of my self-education I'm going to work on cleaning it up.

Thanks again..
Israel



jaybee -> RE: Please critique - first site for a client (3/14/2005 6:24:47)

quote:

FP Interactive Buttons.


Or you could save yourself a lot of grief and dump the FP buttons and go with Javascript or css which will work in FF.



anderskorte -> RE: Please critique - first site for a client (3/14/2005 6:34:12)

quote:


quote:

FP Interactive Buttons.

Or you could save yourself a lot of grief and dump the FP buttons and go with Javascript or css which will work in FF.

Yes, and if you use JavaScript and/or CSS you should make sure that they still work both of them disabled! [:)]

The point here is to use real links - whether they're made by hand or with Frontpage, it really doesn't matter. Frontpage isn't the prime evil here. Just as long as they're A elements that work, after that you really don't have to worry about browser compatibility regarding links!



iisassi -> RE: Please critique - first site for a client (3/14/2005 8:47:40)

I agree that I need to find a more standard method and I think I'll try the CSS route. I've started looking at Style Master 4 to help me get up to speed with CSS.

One thing I found is that FP is using VML for setting up the Interactive buttons, which Firefox does not support.


Thanks,
Israel



iisassi -> RE: Please critique - first site for a client (3/14/2005 8:51:38)


quote:


Yes, and if you use JavaScript and/or CSS you should make sure that they still work both of them disabled! [:)]


I'm not sure what is meant by this statement. In any case, I found that FireFox doesn't support VML, which is how FP implements Interactive Buttons. I'll be converting to CSS very soon.

Thanks,
Israel



anderskorte -> RE: Please critique - first site for a client (3/14/2005 12:21:49)

quote:

ORIGINAL: iisassi

quote:


Yes, and if you use JavaScript and/or CSS you should make sure that they still work both of them disabled! [:)]


I'm not sure what is meant by this statement.

I meant that if a viewer has JavaScript disabled the buttons should still work. You can use JavaScript with them, but you can't count on it alone. There's a wonderful method for making links, the most simple and standard one, and that is the A element. There are already enough all kinds of Javascript-only links used on websites.

The same thing applies to CSS. But as far as I know, there's no way to do CSS-only links. [:)]

quote:

ORIGINAL: iisassi

One thing I found is that FP is using VML for setting up the Interactive buttons, which Firefox does not support.

That's interesting. I have to admit I don't know that language. I seems to be some proprietary format, I didn't find anything about it on the W3C website, except some very old submissions.

All that proprietary and non-standard stuff is soon vanishing from web design. Luckily.

quote:

ORIGINAL: iisassi

As for the navigation, it all works in IE but with FF it seems the page never finishes loading.

I found the good old IE somwhere in the depths of my computer, fired it up and tried your website on it. None of the links work, no navigation there. I guess the viewer needs to have VML enabled through a plugin or something.

Note: SVG is a web standard for vector graphics, but none of the browsers support it by default either. You need a plugin to see it, too.



kurtgeer -> RE: Please critique - first site for a client (3/16/2005 21:31:09)

Israel
Nice site.

2 comments off topic from the rest of this thread.

1 - On your pages, ie weddings, portarits, etc
You have one large image and several small images,
but NO links to view those smaller images.
I think you should links those photos for folks to
check out as well. IMHO.

2 - I read about 5 posts before your site loaded on dial up.
This can be a hugh turn off for some folks.
FP 2000 has Image Composer with an option to save
images for the web. I heard it does not come in the newer
versions. Maybe someone here can tell you how to get your
image sizes down for a faster page load with FP 2003.

Nice work


________
Kurt
http://digitalart.chdiic.com



iisassi -> RE: Please critique - first site for a client (3/17/2005 9:08:34)

Thanks for the feedback. I am going to be re-working the site for a few reasons including image sizes.

The thumbnails images are rollovers that will swap out the center image for a larger view. Let me know what browser you are using if they aren't working for you.

One of the reasons for reworking the site is to make it handle better on dial-up. The main problem is the background gradient image size.

Thanks again,

Israel



jaybee -> RE: Please critique - first site for a client (3/17/2005 9:17:20)

Israel

go take a look at

http://css.maxdesign.com.au/listamatic/index.htm
That should give you plenty of ideas for css menus.

Javascript and stylesheets can be disabled in your browser. Although I have heard of a few people who disable JS I have never come across anyone disabling css, unless they are developers who are checking out what the result looks like for people using text readers i.e. the blind or visually impaired.

Text readers and accessibility is a whole other ball game. If you can do your menu in css rather than js you're a big chunk of the way there.



iisassi -> RE: Please critique - first site for a client (3/17/2005 15:59:04)

I'll take a close look at the site you recommended.

I decided to stick with CSS as much as possible mostly because it's easier to support one language than two. The other reason is that I have so much to learn that tackling two languages while running two businesses (freelance geek and pro photographer) is more than I want to take on. Your comments serve to reinforce that decision.

Thanks,
Israel



voxunity -> RE: Please critique - first site for a client (3/17/2005 18:02:01)

It's a good start



iisassi -> RE: Please critique - first site for a client (3/17/2005 23:02:17)

Thank you.. I have a lot to learn and so I'm doing a lot of self-study..

Israel



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375