New to web designing

[gardengirl]

I have been reading the forums for months but never registered to post until today.

I have just recently learned (or am still learning to be more accurate) to do websites.

A friend of mine owns this Scrapbooking Kit site and doesnt make enough of a profit yet to pay a webmaster so I am learning as I go and receiving compensation in goods.

Anyway.... I know this latest attempt isnt perfect, I have some issues with the tables not lining up perfectly but tell me what you think.

Be honest!!

http://www.scrappygiraffekits.com

[Builder]

I'm not a scrapbooker (is that what they call them?), but I like your overall design. I tend to make up my mind about a website based on the opening, or home page. I didn't have time this morning to look beyond yours so the following is based on that page alone. Realize that most of these quibbles are minor in nature...

1) The last I saw, the most common screen/monitor resolution in use right now is 1024x768. Your page is too wide to fit in that window size by just a bit. It doesn't cut off any content, yet it does cause a horizontal scrollbar to appear at the bottom. I believe that the container table width of 1016px is the reason. If it could be reduced to 1010px or even 1000px without destroying anything that would probably remove the scrolling.

2) One "rule of thumb" that many designers go by is to try to make each web page no more than 3 "screens" long. Your most important content on your home page is just about that much. What causes the page to be much longer is the Mothers Day quotes, the slide show, and the large amount of blank space at the bottom. Perhaps finding a "rotating quote" script would help some. Having the slide show be a separate page would help there as well (as well as cutting down on page load time).

3) The text link hover color in your right column practically disappears on my screen. I always find that a bit disconcerting. A little more contrast between it and the background color would be nice.

4) "Click Here" is somewhat of a no-no:
Need to contact us?

CLICK HERE
A better solution is to make "Contact us" into a link to your contact page and not make it a question.

Enough from me. We'll wait for Yvette to come along. :D

Good luck,
Kevin

[Croc Hunter]

I only looked at your homepage after making sure you're Powweb hosted. So in short, do you have permision to use the Giraffe's head and other images I know are copyrighted? Your main 'monthly image' is pretty confusing. Perhaps cut them into 8 or so small images and link each to a bigger picture. Baby blue and Nappy brown aren't aesthetically appealing to me.

[gardengirl]

Thank you for your suggestions and I agree with almost all said. I will work on these points. yes I have permission to use all the images I have used. And Scrapbookers LOVE baby blue and nappy brown together. The color scheme will be more appealing in a revision to come. I am going to make the whole site more uniform in color once the owner decides what colors she wants.
Maybe because my main image is confusing to you I need to put up some information for a NEW visitor to the site that doesnt know already what they are seeing. This site will update once a month with new content. Its a monthly kit club and the new kit is featured on the home page each month. THANK YOU!!!

[YvetteKuhns]

We'll wait for Yvette to come along.

You rang?

I am using 800x600 screen resolution, so I have to scroll to see the column on the right side that actually tells the website purpose. I don't know what giraffes have to do with scrapbooking and I couldn't find an explanation. The site explanation should appear in the center, so first time visitors can see it and decide if they want to stay or go.

There are horizontal links on the top and vertical links on the left. One link on the left went to a blog with a different domain name. That confused me since the link did not open in a new window, but I felt like I was visiting a different website. The monthly contest link goes to a forum. Everything has different colors and did not seem consistent.

I don't know if that is a peace sign, victory sign or scissors for the Rock, Paper, Scissors game that appears in the circle in the top left corner. If the giraffe is the logo, a nice image of a giraffe should appear there instead. If I scroll to the right, I can see an image of a giraffe. How about a picture of a scrapbook? That would seem more appropriate.

There are large images, a lot of text with plenty of space between lines and below and a slideshow that force viewers to scroll down a lot. You could make a link to Mother's Day Quotes instead of listing them all on the home page. The images could be smaller and the home page should consist mostly of contents about scrapbooks. If you could read and not see images, you should still know what the topic of the site is. And if you could see images, but not read English, you should still have an idea what the topic of the site is.

The news on the left mentions Memorial Day. You can link to a web page that explains holidays instead of including that entire article there. Use a brief paragraph for a few topics of news instead. You may want to mention your contest there. The website is not completed and inconsistent, but some organization of contents is there. In Firefox, the graphic design shows a tiny gap. The website needs some tweaking, but it has original contents.

I recall seeing a slideshow (http://www.dynamicdrive.com/dynamicindex14/bookflip.htm) that looked like someone was paging through a book. That would look neat on this website. I know there was a nicer one somewhere, but I just don't remember where. What do people see if they do not have Flash enabled or installed? Just curious. My sister still has dial up Internet, so she doesn't use Flash players.

Scrapbookers LOVE baby blue and nappy brown together. The color scheme will be more appealing in a revision to come. I am going to make the whole site more uniform in color once the owner decides what colors she wants.

The paper bag brown color is very scrapbookish and the baby blue looks nice and makes me think of little boys. I have so many books with photos of my son. The blue matches the color of the walls in his first bedroom. The salmon pink on the site now is icky. Try not to use more than two or three colors besides black and/or white. Leafy green would be nice.

Since the website is not completed, I will stop here and give gardengirl a chance to make comments or changes.

[gardengirl]

Ok have a look now. I emplimented many of your suggestions and complaints and I think that it looks better. I will continue to work with what you suggested. Thank you I actually learned some things because of this section.

[YvetteKuhns]

I see that you moved the site description paragraph from the right to the top center. Great! You moved the Mother's Day article to the right and you still have the Memorial Day article on the left. You should have a Holidays link that goes to a list of holidays and brief descriptions. Don't clutter your pages too much. You may want to lose the right column, since I can't see it without scrolling anyway. ;)

May's Kit shows two images, one on top of the other, in 800x600 screen resolution. If you make the images a bit smaller, they should fit side by side. They could be thumbnails that click to enlarged images, if you wanted to add images.

<font face="Constantia">

Not everyone has this font. You may want to find similar fonts to list in addition to this one.

You used h2 for big bold text, but you could use the next size down (h3) to reduce vertical scrolling.

Keep working at it! :)

[phlembol]

You may want to lose the right column, since I can't see it without scrolling anyway.

It does only squish down to about 860 before you start losing text off the side. (And you lose the end of the menu before that.) How important is that to your users?

Anyone have a link to a free webtool that displays your page at the various sizes? I could use that myself.

[YvetteKuhns]

displays your page at the various sizes?

Right-click on your Desktop, select Properties, then Settings. You can adjust the screen resolution temporarily to view.

You can put all of your menu choices on the left side. Or you can simplify your horizontal links menu to fit. I like fluid design that will adjust to different screen resolutions.

[Doc C]

You even get a little countdown timer to boot when doing it Yvette's way. :)

[YvetteKuhns]

You even get a little countdown timer to boot when doing it Yvette's way.

I didn't mean for anyone to use that stupid timer. I just meant that the display properties can be changed temporarily to view the website, then changed back. It isn't a permanent change unless you want it to be. You can be such a stinker!

[phlembol]

Right-click on your Desktop, select Properties, then Settings. You can adjust the screen resolution temporarily to view.

That messes up my icons.

Here's what I was looking for:
http://www.webconfs.com/web-page-screen-resolution.php
.
I see not everyone supports 640x480.

[phlembol]

Would it not be easier to use a standard throughout the site? Your Zencart module uses:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

[Doc C]

I didn't mean for anyone to use that stupid timer. I just meant that the display properties can be changed temporarily to view the website, then changed back. It isn't a permanent change unless you want it to be. You can be such a stinker!

Me and Bugs Bunny, Yvette. :)

[phlembol]

I did notice that Zencart always violates this XHTML rule:

Using the ampersand outside of entities in URLs (use &amp; instead of & in links also)
* Incorrect: <a href="index.php?page=news&style=5">News</a>
* Correct: <a href="index.php?page=news&amp;style=5">News</a>

[Kitchensink108]

Sorry, I didn't read any of this thread beside the first post. The only things I have to say:
-Make the leftnav wider (like 50px wider)
-The topnav is too long: http://kyle.barr.name/files/faq_onmouseover.jpg
-The image that's supposed to display when you mouseover Contact Us is broken.

Other than that, looks good.

[ffholy]

Just basing it browsing the first 10 seconds, it's looks professional and clean. Something about the dark red and black lettering bothered me slightly. The colors to the forum matched well and everything else appears in order. I know coming up with the right colors is a pain. It's just the darker red and black font hurt my eyes abit... well, brighter red is no good either :p Anyways, works for me :)

[phlembol]

Zencart is written in XHTML while the rest of the site is written in HTML so they each need their own respective DOCTYPE declarations.

I think it is worth pointing out (for us beginners), when you are composing standard content for Zencart, you are obliged to do so in XHTML. Here is a good beginning source to see the differences: http://www.w3schools.com/xhtml/xhtml_html.asp

[gardengirl]

Ummmm I wont pretened to know what all of the things you all said mean but I will find out! Thanks for the tips and I will work on those 92 errors. HA HA!

The site has come a long way in just a few tries. I have NO experience in this field at all so I am just learning as I go and I really appricate the tips.

[gardengirl]

http://scrappygiraffekits.com/

Ive changed the page design again and wonder if you would take a look and let me know if you like this better? Does it seem too simple or just right as far as how much is on the front page? We are currently in the process of designing a header to go where our title is now. Thanks!! Oh and I just saw the info on the Doctype... will fix.

[jblack]

http://www.webconfs.com/web-page-screen-resolution.php is very cool.

As for the The Scrappy Giraffe, it's visually smooth and I was even drawn to many of the scrapbook images with interest. I couldn't look too long, though, because it reminded me too much of my first attempt at web designs--Microsoft Publisher borrowed code from slideshow.com. A freind told me it looked like a second-grader from the early 90's had built it. I was quite proud all the same.

This site is infinitely better. In fact, it's ton't better than the one I am struggling with right now. :p

I know little about this web site thing, but I can tell you are working hard. It will pay off, especially with some of the expert advice you are receiving. The same folks have helped me quite a bit.

My partner and girlfriend will find this of great interest; she is a scap-booking fool.

I know I have not added much value, but I thank you for letting me join in.

James
www.a3vsigns.com

[gardengirl]

Thank you James you said some great things that have given me a boost to keep learning and moving ahead!!!

[troycawley]

...Anyone have a link to a free webtool that displays your page at the various sizes? I could use that myself.

Use Firefox...with the Web Developer (https://addons.mozilla.org/en-US/firefox/addon/60) Plugin.

[YvetteKuhns]

Use Firefox...with the Web Developer Plugin.

Select Tools > Validate Local HTML for web pages on your computer and Tools > Display Page Validation for web pages on the Internet. Also use Error Console to check JavaScript, if you have JavaScript in your website. The other tools are useful, but these (and CSS if you use it) are most helpful.

[wtjr]

i think the Opera webbrowser does the screen size thing with no plug ins?!

[phlembol]

Use Firefox...with the Web Developer Plugin.

I use the ruler the most I think. And viewing the various infos when trouble shooting.