Please critique my new website

[oliegirl]

I am starting a business creating/designing personalized stationery, birth announcement, shower invitations, etc...this is a web based business so I want to make sure the site looks great. Please check it out and give me your honest opinions. Thanks!

http://www.imprintsandimpressions.com

[stevew]

Maybe its just my browser, but it looks all jacked up.

[Radii]

I did the web design. I am a total novice in web design. A friend of mine who knows a ton more than I did pointed me towards CSS and showed me a lot of stuff that we like.

We haven't viewed it in numerous browsers, or in numerous resolutions, but it was designed for 800x600 in IE.

If you get a totally messed up look to the page plz let me know what browser/resolution/anything else useful you see.

Any other technical advice from web saavy people would be appreciated as well, I want this to look as professional as possible but i really am learning as I go. :D

[Radii]

Maybe its just my browser, but it looks all jacked up.

what browser?

[rkmsuf]

Maybe its just my browser, but it looks all jacked up.

jacked up?

[stevew]

Its probably just my browser and resolution.

[Maple Leafs]

http://www.imprintsandimpressions.com
Overall, looks pretty good.

General suggestions:
- Make the e-mail address a link (you want it to be as easy as possible for people to contact you)
- Avoid centered text -- left-justified is easer to read.
- Consider dropping the "clear" button on your order form. Very few forms actually need one, and if a user accidentally clears their form they rarely bother to go back and fill it out again.
- Might not be a bad idea on your order page to include a small note assuring visitors that you'll never sell or rent their addresses and will only use their info to contact them about their order.

[stevew]

Resolution is 1024*768. Browser is IE. I have large fonts enabled. This isnt my computer, so I dont know for sure what else might be the settings. A lot of the text is overlapped.

[Radii]

I use Opera to read FOFC and 2+2, never did try Oliegirl's site in it... looks like crap in Opera for me!

[Radii]

Resolution is 1024*768. Browser is IE. I have large fonts enabled. This isnt my computer, so I dont know for sure what else might be the settings. A lot of the text is overlapped.


Thanks, that is the problem I'm having in Opera as well at my work computer.

Any CSS/web design experts have any advice for handling this? All of this is set up using absolute position, is there a better way that is still powerful in terms of letting me set up how I want the page to look but isn't so messed up in different browsers under different settings?

[Maple Leafs]

Any CSS/web design experts have any advice for handling this? All of this is set up using absolute position, is there a better way that is still powerful in terms of letting me set up how I want the page to look but isn't so messed up in different browsers under different settings?Do you really need to control how the page looks?

Seems like the site is mostly content with some graphic examples, wouldn't it be easier to create a nice default layout (maybe set the table size to 770 or so and center it, for example) and then let the user's browser and settings dictate the final appearance?

[dixieflatline]

Nice site. I like the background color. That was a good choice. I like that the pictures open in a new page but some of the pictures were overlapping the words on a couple of the pages. This may be because of my old mozilla browser here at work but many people are surfing the web with old browsers these days. I noticed you were using [div] instead of tables and this could be the reason. It may not be worth rewriting the page though. The text mostly seemed fine but I am not sure about the add in of "(perhaps the same theme as your nursery?)" on the birth announcements page. Not that I have a lot of experience with birth announcements. And I agree make the email a link.

[sachmo71]

I would center the title, and maybe add a few more colors?

[Franklinnoble]

Hey man, pix pls, thx.

[Fritz]

just a thought from my late uncle Earl: A little cameltoe can go a long way.

[mckerney]

Better than anything Eli Manning could do.

[Franklinnoble]

just a thought from my late uncle Earl: A little cameltoe can go a long way.
Uncle Earl was a genius. Didn't he invent an early version of edible underwear?

[WSUCougar]

A couple comments on the home page:

> Change the font/background color of the links
> The title at the top does not have enough separation from the text just below it. Perhaps a line or border of some kind would do.
> Add an image or two. Perhaps a calligraphy pen?

[Huckleberry]

Stationery

Correct in your post. Incorrect on your website.

[Radii]

Better than anything Eli Manning could do.

:D I feel like all of our work has been validated now.

Maybe we can add a philip rivers-esque link to beer somewhere.

[Swaggs]

I did the web design. I am a total novice in web design. A friend of mine who knows a ton more than I did pointed me towards CSS and showed me a lot of stuff that we like.

We haven't viewed it in numerous browsers, or in numerous resolutions, but it was designed for 800x600 in IE.

If you get a totally messed up look to the page plz let me know what browser/resolution/anything else useful you see.

Any other technical advice from web saavy people would be appreciated as well, I want this to look as professional as possible but i really am learning as I go. :D

Go update your Cubs dynasty! :)

[Radii]

Do you really need to control how the page looks?

Seems like the site is mostly content with some graphic examples, wouldn't it be easier to create a nice default layout (maybe set the table size to 770 or so and center it, for example) and then let the user's browser and settings dictate the final appearance?


Hmm, that's how I started, Dreamweaver was absolutely kicking my ass when it came to making stuff like 8x2x1 tables(8 for the links, then 2 for images, then 1 for text, etc) and that's when the CSS suggestions came up.

Looks like I might need to go back to that though, that makes a lot of sense.

[Radii]

Stationery

Correct in your post. Incorrect on your website.

wow. Really? Oops. :) Stationary. Looks so right! Thanks.

[Radii]

Go update your Cubs dynasty! :)

Hopefully I can get the season underway tonight. :D No promises though.

[Fritz]

okay, seriously

1.) Hate centering. It is amaturish
2.) Hate background colors unless they serve a purpose. Hate background images even more.
3.) all the images used should make use of the alt tag

The product itself looks nice. I will pass the link on to some friends.

Best of luck.

[Fritz]

dola

dont forget the wisdom of the camel toe

[Radii]

okay, seriously
1.) Hate centering. It is amaturish
2.) Hate background colors unless they serve a purpose. Hate background images even more.
3.) all the images used should make use of the alt tag



#3 brings memories of intro to computing at Ga Tech(see Eli Manning's website, we all had to make one too). Definite will-do.

I agree on the background images, but I think I would argue that the background color in this case helps to highlight many of the images which are done themselves on white paper(to me that rules out a white background). Any comments there?

Many seem to agree on the centering, when I start playing with table layout stuff in the near future, I will make everything left justified and see how that looks.

Thanks a bunch for the comments.


The product itself looks nice. I will pass the link on to some friends.

Best of luck.

Much appreciated! :)

[mckerney]

:D I feel like all of our work has been validated now.

Maybe we can add a philip rivers-esque link to beer somewhere.

Make sure you have a chart showing that your numbers will reach 300 by 2006.

[Zippo]

nice work on the portfolio, the site is just ok though. I think suffiicent to do the job. I am sure your customers care more about yoru potfolio than the website itself anyways.

[Fritz]

#3 brings memories of intro to computing at Ga Tech(see Eli Manning's website, we all had to make one too). Definite will-do.

I agree on the background images, but I think I would argue that the background color in this case helps to highlight many of the images which are done themselves on white paper(to me that rules out a white background). Any comments there?



Sure, you want to frame the images, just like you want to use a mat around a photo you hang on the wall. I am pressed for time or I would go into greater detail. If you like the concept, perhaps someone here will lend a hand.

More on why I would suggest a different approach to the background later as well.

[Radii]

Sure, you want to frame the images, just like you want to use a mat around a photo you hang on the wall. I am pressed for time or I would go into greater detail. If you like the concept, perhaps someone here will lend a hand.

More on why I would suggest a different approach to the background later as well.


Definitely interested in hearing your thoughts, I don't promise to use any ideas of course but I know I'm not the greatest at this by a long shot so any ideas and details I am more than open to :)

I have no idea on how to do that sort of framing you're talking about, a poitner to a website would be good too, thanks!

[Swaggs]

I would be more inclined to recommend your product if you made one of the examples a congratulations to the 2009 San Francisco Giants: RWBL Champions.

That would be sweet. :)

[Router Help]

I noticed you were using [div] instead of tables and this could be the reason.

Using a [div] is correct. Tables aren't really meant to be a layout tool.

The title graphic and the cursive signature on the homepage have some compression artifacts that really show up with that background.

On this page: http://www.imprintsandimpressions.com/Wed_Accessories.htm "make your day perfect" is partially covered by the last picture. (In Firefox .91)

When you import your stylesheet, you need to lose the "/" before the > This shouldn't cause any problems, but this and the absence of ALT tags on your images cause the page to not validate.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.imprintsandimpressions.com%2Findex.htm

[Radii]

Using a [div] is correct. Tables aren't really meant to be a layout tool.


If I stick with the div tags and do not use tables to do the layout, how do I go about avoiding the problems with the other browsers that others are bringing up with text overlapping the images, etc.

I'll fix the validation problems, thanks for pointing that out!

[Maple Leafs]

I would be more inclined to recommend your product if you made one of the examples a congratulations to the 2009 San Francisco Giants: RWBL Champions.
Seconded.

I will perform a free usability analysis of your site if you make it for the 2006 Blue Jays instead.

[Router Help]

If I stick with the div tags and do not use tables to do the layout, how do I go about avoiding the problems with the other browsers that others are bringing up with text overlapping the images, etc.

I'll fix the validation problems, thanks for pointing that out!

Well, trial and error. :( IE 5/6 do some strange things when counting pixels that make absolute positioning a chore. I would scrap absolute positioning all together and go with a more fluid design. Take a look at the different 3 and 4 column layouts here: http://glish.com/css/ to get an idea on how to use floats.

[oliegirl]

I would be more inclined to recommend your product if you made one of the examples a congratulations to the 2009 San Francisco Giants: RWBL Champions.

I will perform a free usability analysis of your site if you make it for the 2006 Blue Jays instead.

If only I knew and understood what you were talking about, maybe I could help! Can I get a translation into plan english please? :)

[Fouts]

Spellcheck before posting (business). Linking the pics to another window looks real good.

[Radii]

If only I knew and understood what you were talking about, maybe I could help! Can I get a translation into plan english please? :)


I've explained the RWBL comments and put up with the necessary "You know they're not actually *real* players right?" comments. :D

[Radii]

Well, trial and error. :( IE 5/6 do some strange things when counting pixels that make absolute positioning a chore. I would scrap absolute positioning all together and go with a more fluid design. Take a look at the different 3 and 4 column layouts here: http://glish.com/css/ to get an idea on how to use floats.


SWEET. something to do at work tomorrow :D

[Alf]

What's the thing with baby showers ?

[oliegirl]

What's the thing with baby showers ?

Well, I am a girl...and a bunch of my friends have recently had babies so I have either helped host a shower or been asked to do the invitations for the showers. We are heading into wedding season now...3 coming up between now and May 2005. Girls do those kinds of things...guys play online games with pretend people and girls throw each other parties and give each other gifts :)

[Raiders Army]

Looks good to me. I'm glad you're a girl, because it would look pretty faggoty if you were a guy.

[Radii]

Girls do those kinds of things...guys play online games with pretend people and girls throw each other parties and give each other gifts :)


Thank god I'm a guy

[21C]

Forest for the trees . . .

I'm surprised nobody mentioned this little part:

We offer customized printing for any type of job; businses or social, large or small.

Wrong spelling is a pet hate of mine but especially on a website trying to sell something. It doesn't inspire any confidence.

[daedalus]

Hope y'all don't think I'm being rude or critical, just offering some opinions in the hope to help. As an aside, I'm running Opera 7.50 at 1024 X 768.

Using "font-family: "Bickley Script"" is very naughty and a big no-no. I realize that with a site such as this representing a product such as this, the look and appearance is very important. For anything where you want the look of that font to come through, use an image. Not everybody has that Bickley Script font so when they look at it, they get whatever standard font they have and not the look or appearance you're aiming for.

While using the DIV tag for formatting is probably a good idea, using absolute position is icky and a very bad move. On my screen, while the bottom section came out okay on the Baby Shower page, the sample pictures and the text are on top of each other. On the other hand, on the Personalized Stationary page the bottom section and the text are on top of each other while the sample pictures came out okay. If you REALLY, REALLY want to control the absolute location of where things come up then use layers within layers.

Remember web-safe palette. On my computer, the background in the logo picture does not match the colour of the background on the page. If you want that logo the way it looks, use a GIF and make it a transparent GIF to get rid of the background.

As has been mentioned, centering everything is a bad idea. Left justified is preferable. My personal preference is for justified.

Using x-large font size for everything is way too much. I would either leave it up to the user or, if controlling the appearance is important to you, use an actual font size ("font-size: 10pt"). The latter is not necessarily the "best" way nor is it very usability-friendly since it excludes those with vision problems but it's the best way to control the appearance and those users can also turn off your style sheet in their browsers, generally speaking. At the minimum, I'd bring the paragraph text down to medium and the contact information down to small to give some disctinction.

Having the footer is an EXCELLENT idea. It offers familiarity to the user as well as provide an easy way for them to find you. However, I would offer this as an alternative for you to consider:

Imprints and Impressions
3805 Tree Summit Parkway
Duluth, GA 30096
[email protected]
(678) 641-3484

[ Home (http://www.imprintsandimpressions.com/) | Ordering Information (http://www.imprintsandimpressions.com/OrderingInfo.htm) | Pricing Information (http://www.imprintsandimpressions.com/PricingInfo.htm) ]

In a smaller font - either small or x-small - it becomes unobtrusive, yet the user can easily find ways to contact you and ordering on every single page.

Put the underline appearance back into your pages. It's web-standard and most users are used to being able to locate a link at a glance. The ONLY place I would consider not having a link be underlined as a possible option is in the left-side navigation menu. By now, most users are familiar enough with navigation to understand the use of a navigation bar and won't get lost. However, I'd still consider having the underline come back on hover. As an aside, please do not have regular font as a link then having it be bold on hover. I see it occasionally and it's damned tacky.

Lastly, CSS is an excellent concept and quite a useful tool. But having a type for every single thing is kind of overkill - although if absolute position is important and you want to use their respective DIV tag to control the location then you don't have a choice. However, don't forget that the ordering and pricing page should share characteristics with the other pages. I shouldn't be going from one page to another within your site and having text size changing.

Sorry for the long winded comment. I think it's a great project that you guys are doing and I commend you for helping out Radii so I wanted to offer some thoughts. Good luck. :)

[Radii]

Using "font-family: "Bickley Script"" is very naughty and a big no-no. I realize that with a site such as this representing a product such as this, the look and appearance is very important. For anything where you want the look of that font to come through, use an image. Not everybody has that Bickley Script font so when they look at it, they get whatever standard font they have and not the look or appearance you're aiming for.

That's actually only in the .css file and needs to be removed, nowhere in the HTML are we actually trying to present that script anymore(that's one of the few things I figured out on my own).

use a GIF and make it a transparent GIF to get rid of the background.

Ahhhh, that's how you do that! thanks :)

Put the underline appearance back into your pages. It's web-standard and most users are used to being able to locate a link at a glance. The ONLY place I would consider not having a link be underlined as a possible option is in the left-side navigation menu.

I don't understand what you mean. Are there links that aren't underlined somehow?


I appreciate the critique, I have a lot to learn, I don't mind the opinions at all.


For those that mentioned spelling errors, I can't believe that got by me, a thorough spelling review is in order before any of these other changes that I may mess around with.

[hhiipp]

If I submit an order can you promise that oliegirl will be the representitive that calls. I just want to hear her voice. :D

[Airhog]

was I the only one dissapointed when I read this post??? :D

[Radii]

was I the only one dissapointed when I read this post??? :D

When I opened it up after oliegirl posted I commented that there were 11 people viewing it. I then commented "80% of the views are based on the off chance that this is an adult-oriented site".

Was I right? :D

[Radii]

BTW, spelling issues are hopefully all now corrected. I agree that immediately effects the professionalism of any site that I read.

[DanGarion]

just a thought from my late uncle Earl: A little cameltoe can go a long way.
You mean cowbell right?

[Zoetus]

Though tables have been officially deprecated by the W3C standard, I still think they're a little more reliable than css positioning if you're worried about cross-browser compatibility and different viewing resolutions. Css positioning, in my opinion, is best used in moderation. It can easily become much more trouble than it's worth. If you absolutely must use css, use relative positioning instead. When I design a website, I think it's a good rule of thumb to make sure all "mission-critical" content is viewable no matter how large or small the browser window is.
There are some neat tricks you can use with css, however, to add some bells and whistles to your site. For example: you can do rollover effects without writing any javascript and instead using css. If you write:

a.Example
{
font-family: Tahoma, Verdana;
color: black;
}

a.Example:hover
{
color: red;
}

You can do a simple rollover without any client-side scripting. This is a very basic example, but you see the possibilities.
You might also look into making the separation of different elements on the page (header, navigation sidebar, main content) more apparent to the user. I find that it's best when I design a website to look at some of the best sites out there (espn.com, microsoft.com, etc.) and really examine how their sites are laid out

[Zoetus]

Another thing I forgot to mention - some people would argue that Dreamweaver is overkill when designing simpler websites, but I would recommend at least trying the free trial of the MX 2004 version. It includes (among a long list of other features) a cross-browser validation checker, which even points out elements in your stylesheet(s) that may not render well with certain versions.