Input on Term Project, Thanks.

[Ashley Weed]

I was assigned a Term Project for my Intro Web Design class. It was very broad based from making a page about your pet cat to designing a page for a business, I thought what better opportunity than do a page about Robotics! I haven't worked with my team in over a year now (retired/alumni), but I have thought about getting back into the swing of things and balancing school this year with FIRST.

I am just starting to learn how to use Java Script, so I tried to implement a few tools. I have also started to become familiar with Photoshop over the past couple of weeks, and tried to design a couple of buttons. All input would be appreciated on how to better design things, etc.

Also, I am interested in creating a calender. If anyone has any resources that I could read up on, or look into, please let me know, thanks.

Now, the link......
http://my.win.psu.edu/asw161/TermProject/index.html

[edit] General questions to the designing community: How do you "design" by standard? I design on a 17" widescreen using Firefox. However, when I load my projects onto the server, its a 19" screen using IE. What's the standard? Do you downsize to 14"? Always design using several browsers? Thanks! [/edit]

[Greg Marra]

Originally Posted by Ashley Weed

I was assigned a Term Project for my Intro Web Design class. It was very broad based from making a page about your pet cat to designing a page for a business, I thought what better opportunity than do a page about Robotics! I haven't worked with my team in over a year now (retired/alumni), but I have thought about getting back into the swing of things and balancing school this year with FIRST.

I am just starting to learn how to use Java Script, so I tried to implement a few tools. I have also started to become familiar with Photoshop over the past couple of weeks, and tried to design a couple of buttons. All input would be appreciated on how to better design things, etc.

Also, I am interested in creating a calender. If anyone has any resources that I could read up on, or look into, please let me know, thanks.

Now, the link......
http://my.win.psu.edu/asw161/TermProject/index.html

[edit] General questions to the designing community: How do you "design" by standard? I design on a 17" widescreen using Firefox. However, when I load my projects onto the server, its a 19" screen using IE. What's the standard? Do you downsize to 14"? Always design using several browsers? Thanks! [/edit]

OK, here we go:

The images there need a little bit of work. As you can see, around your pictures (the banner and buttons in particular) you have a number of white pixels. If you have the original .PSDs for these images, go back in and add a layer underneath everything else that is just solid the color you're using for a background. The easiest way to get this color is with print screen and then pasting it into Photoshop then using the eyedropper tool.

Now, the images you're using are much larger than the size you're putting them in your web page at. For example, one of your sidebar images, "mission.gif" is really 216x72 pixels, but you're making it 100x35 pixels in your website. Resizing an image this way is extremely unsightly, and explains the nasty blocking there. You want to go into photoshop and resize this image to be 100x35, because photoshop will do a much nicer job reducing the image than my web browser will. This is the main reason your images are looking bad.

That iframe there is kind of ugly. Personally I feel that this is a "bad" use of an iframe, and that you should researching using a SSI include or a PHP include (if your web server supports either). If you really want to keep the iframe, add a border="0" to it. I'm not really a fan of that javascript marquee either, it doesn't really go with the rest of the site's color scheme. Maybe you should add some styling to the text box using CSS. For more information about CSS go
here. This way you could make it match the background and color scheme you have going.

I know of a really awesome calendar PHP application called PHP Event Calendar. If you learn a little bit about PHP and your web server supports it, it would be an excellent way to include an easy to manage calendar system for your site. You can view a sample calendar at that site.

About designing to a standard: The size of the monitor has absolutely nothing to do with it. What does is what's called "resolution". Most computers these days display at 1024 by 768 pixels. Some older ones display at 800x600 and some really old ones only at 640x480. So it's not the number of inches that your site uses, it's the number of pixels. In general, if your site will display well at 800x600 then it will be accessible by almost everyone. As far as using browsers, make sure that your page displays well in Firefox and Internet Explorer. Firefox is better about following standards, but since so many people use IE you need to make sure it displays right in that too.

And while we're on standards, I took a peek at your source code. It wouldn't validate with the w3c. They're the organization that says what 'proper' web coding is. You might want to run your site through their validator and see what it says. For one, you don't have double-quotes around all the values inside of tags on your page.

<img height=500> is wrong.
<img height="500"> is correct.

Otherwise, not bad for a first website.

[HFWang]

Originally Posted by Greg Marra

<img height=500> is wrong.
<img height="500"> is correct.

Technically what she has done is legal. Until XHTML, all HTML documents allowed unquoted values... but only if they were numbers only. (Thus, height=100% would be wrong...)

But then again, no doctype has been specified, so we can't really say much about that to begin with. On a side note, if you are nitpicking on the height=500 thing, you should also point out that under XHTML, elements are lowercase and need to always be properly closed (<img /> as opposed to <img> and so on)

I'll stop my geekery here.