PDA

View Full Version : Code Critique Volunteers Needed


Blue_Vision
02-15-2010, 06:22 AM
I'm hoping for a couple of experienced volunteers who I could PM my homepage files too so that I can get some general critique on the code before I go on to other pages. Please let me know if you are able and willing : )

Much appreciated as always! Thanks!

Corrosive
02-15-2010, 07:03 AM
Why don't you put it up on line for a couple of days and post a link? That way anyone who has the time can pass some comments.

Blue_Vision
02-16-2010, 01:21 AM
ok, here goes. Corrosive, I really loved the look of your nav bar so I kind of ripped off the whole shiny button/nav bar idea from you so I hope thats cool :)

http://bluevisionweb.com/

If you simply go to my /images folder then you will see a screenshot of my desired result as it appears in Safari to compare. I've only checked this site on Safari and FF on the mac so it may have alot of problems otherwise.

My biggest concerns are not only decent css but also how it resizes when zoomed in/out in a browser or if text sizes change. I realize it can't be perfect and stay the same in that regard but I'd like to have it be the best it can. I'm going to change px's to ems as I hear that can help but I wasn't sure if I should only resize the text px's or every px property I have to an em?

I can tell from my Firefox the wifi logo appears in the wrong height. I can also tell in both browsers that when I resize the text only then the nav bar resizes to the left instead of the words staying centered. Any idea's on fixing those things would be nice.

I'll go back through and reduce my image sizes once I'm past this stage so excuse the slow loading.

Thanks and sorry for the yellow eye sore color but I don't have a choice...

Blue_Vision
02-16-2010, 02:03 AM
ok, got a couple fixes on another forum but can't update my site for a few hours. I got the nav resizing thing figured out though. I'll post again in a few hours once I have fixed it.

Corrosive
02-16-2010, 06:58 AM
ok, here goes. Corrosive, I really loved the look of your nav bar so I kind of ripped off the whole shiny button/nav bar idea from you so I hope thats cool :)



That's fine. I stole the idea from the BBC ;)

Corrosive
02-16-2010, 07:03 AM
I really like it mate. It's well laid out and the code is very tidy indeed. The links in the footer are light grey on a lighter grey which makes them hard to read but that is about it. The site displays well (in Chrome anyway) and the look is nice and pro. I really couldn't find anything to crit!

Blue_Vision
02-16-2010, 08:58 AM
Thanks! The links were actually a good crit as they are not meant to be that way. I guess I never clicked on them to check but they are supposed to stay black.

Lame part is my lack of images. I'm gonna have to use stand-in images or placeholders for other pages I think until a photographer gets me some images to work with.

Blue_Vision
02-17-2010, 12:49 AM
ok, yet another problem : (

I've found that on my macbook pro the gradient background shows fine. It's created by cropping a chunk out of the gradient in PS (being sure to get down to the solid primary color), then saving the image as a jpeg, reopening and using an eye dropper to be sure I get the exact primary color hex value for the background. Here is the code:


body{
background-color: #fcef00;
font-family:Arial, Helvetica, sans-serif;
margin: 0;
background-image:url(images/gradient.jpg);
background-repeat: repeat-x;
}




Anyways, when I view the website on one of our brand new imacs then it shows exactly where my gradient image stops and the background color begins because the background color seems to be appearing alot brighter of yellow. I took a screenshot on the imac in hopes to be able to show what I'm talking about but when I sent the screenshot to my macbook pro it appears nothing is wrong with it.

What am I doing wrong? Why the inconsistency?

Thanks!

Blue_Vision
02-17-2010, 08:49 AM
http://bluevisionweb.com/images/bad-gradient.jpg

Here is a picture of my screen to attempt to show what I'm seeing. The picture is obviously way darker then the site and doesn't pop quite as bad as looking at it live but it shows the problem. It's really quite potent outside the iphone picture. The problem is located exactly where my gradient image ends and the background color begins as if I have the wrong hex # for the background but I don't and it appears seamless at random browser/os/hardware.

I went to work and checked out every computer I could and here was the results:


iMac

Windows XP Firefox 2 shows good
Windows XP Internet Explorer 7 shows good
Windows XP Firefox 3 shows bad
Windows XP Internet Explorer 8 shows good
Windows XP Safari 4 shows bad

iMac

Leopard Firefox 2 shows good
Leopard Safari 3 shows bad
Leopard Firefox 3 shows bad
Leopard Safari 4 shows bad



Macbook Pro

Leopard Safari 3 shows good
Leopard Firefox 3 shows good
Leopard Safari 4 shows good



Mac Pro

Snow Leopard Safari 4 shows bad
Snow Leopard Firefox 3 shows bad



Why the heck does the hardware seem to be affecting things? This gradient is extremely evident when it shows/doesn't show. My macbook pro displays everything seamless but in the same browsers, same OS on the imac/mac pro has a big problem.

Is there any logic behind this? Work arounds? Thoughts?

Thanks!

Corrosive
02-17-2010, 09:09 AM
I've read about this issue on other forums. The common denomanator seems to be Apple. Odd really as they are the 'gradient kings'. Have you done any further searches on it?

Blue_Vision
02-17-2010, 10:02 AM
I searched but was not finding much as alot of the solutions were for png's in a different situation.

Finally figured it out. When I saved the jpegs in photoshop I didn't realize it and my displays color profile was being saved for the image. I re-saved without it and we are good to go 8-)

Well got to go back and fix the prior crits and things I had fixes for and then its on to my next set of issues : (

Corrosive
02-17-2010, 10:08 AM
and then its on to my next set of issues : ( That's the spirit dude :)

Blue_Vision
02-19-2010, 11:46 PM
Real quick, while I have attempted to fix some things I've screwed some others up browser compatability wise but in the mean time the design is just getting the best of me. I'm really happy with my content area's design but the whole background yellow gradient thing just sucks IMO. So I'm trying to get ideas on how to improve that.

Here is the original way:

http://bluevisionweb.com/index.html

and here was another idea:

http://bluevisionweb.com/index3.html


Do you like the original or the one with people better? When you look at the design then realize that the top banner will actually end up a rotating flash or java image and not just the static casino image (I just don't have the picts yet). The casino will actually be the second, third or fourth thing they see. Before that there will be local views of the mountains, the park itself, etc. The homepage will be the only one with the rotating images. The additional webpages will have static images of the related topic.

Anyways, opinions? Kill the gradient all together? Get rid of the people? Got another idea for a background? Only reason I chose people at the time was because I felt the site was looking more corporate and less fun which should really be a primary focus.


Thanks!

Blue_Vision
02-19-2010, 11:47 PM
oh, for the time being you will have the best bet if your using Safari or secondly Firefox is close while I work out the kinks...

domedia
02-20-2010, 06:52 PM
I think the gradient in itself is ok. The yellow is too bright imo. If you dim the yellow it might look bettger.

Blue_Vision
02-21-2010, 06:29 PM
Thanks! I've got another design idea almost ready so I'll post in a little bit and see if you guys think its any good.

In the meantime, I would like my right column to always stay the same height as my main content. How can I do that? The main content is set to auto and if I use inherit or anything it just copies the auto part instead of the actual height that the main content area currently is?

Reason why is that I'd like to try to find a way to keep this wifi logo on the bottom right of each page and I don't want to have to manually adjust the top margin each time or something. I figured if I made that entire right column always be the size of the main content area then I could set the wifi image to a background image and use "background bottom" or something like that?

Thanks! Sorry if this is 101 but believe it or not I think I'm getting better...

Blue_Vision
02-21-2010, 06:43 PM
Well, I found this:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

But seems kinda complex for just trying to keep that wifi logo on the bottom right of each page. Is there something easier?

domedia
02-21-2010, 10:53 PM
In the meantime, I would like my right column to always stay the same height as my main content. How can I do that?
If you're talking about it visually being the same height, just use a background for the parent element that has the two color column in it in it. It will grow with the tallest column. How tall the actual DIVs' are is not important.
The main content is set to auto and if I use inherit or anything it just copies the auto part instead of the actual height that the main content area currently is?
I don't understand the question, sorry.

Blue_Vision
02-21-2010, 11:37 PM
yeah, I think your missing me. Maybe this picture explains better?

http://bluevisionweb.com/images/issue.png

Thanks again!

Blue_Vision
02-22-2010, 11:22 AM
Any thoughts on this layout?
(different background schemes)

http://bluevisionweb.com/index2.html

http://bluevisionweb.com/index4.html

http://bluevisionweb.com/index5.html

They should all work fine in Safari and FF. Haven't checked anything else yet. Anyways, do you prefer the original design or something like this? Either-way is cool, I'm just experimenting and trying to gather opinions....

Corrosive
02-22-2010, 12:25 PM
I like the all yellow bg myself.

Blue_Vision
02-22-2010, 05:14 PM
with the newer main content layout I just posted or do you like the older one better?

Corrosive
02-22-2010, 07:19 PM
With the newer one. But, to be fair, I don't know who your target audience is.

Blue_Vision
02-22-2010, 07:42 PM
old, young, rich, poor, male, female while following corporate guidelines.

domedia
02-22-2010, 08:23 PM
Sometimes a graphics color, and the HTML color will not match. It's been like that forever.

Blue_Vision
02-22-2010, 08:27 PM
? Not sure what your referring too. Did I miss something? Are my colors not matching somewhere?

Blue_Vision
02-23-2010, 08:07 PM
I seemed to run into this IE 6 Double Margin on Floats bug. I found online the fix is to either change the margins to padding or to simply add the inline property to each float.

Is there any problems with doing the inline fix? Is there a way to make inline apply to all of my floats without having to add a line of code to each individual div?


Also, what is the favorite IE6 PNG fix?

Thanks!

domedia
02-23-2010, 11:09 PM
display inline works for me. I would just make a css class and apply it where needed.

Blue_Vision
02-23-2010, 11:46 PM
Its needed everywhere I have text. I hate IE6! I think I have every IE6 bug possible in this page...

Blue_Vision
02-24-2010, 02:38 AM
Alas... I've got what I believe to be a web friendly version

http://bluevisionweb.com/index4.html

According to that awesome adobe browser labs and my own chromes I am looking good with:

IE 8 XP - Perfect

Firefox 2.0 XP - Perfect

Firefox 3.0 XP - Perfect

Firefox 3.5 XP - Perfect

Firefox 2.0 Mac - Perfect

Firefox 3.0 Mac - Perfect

Firefox 3.5 Mac - Perfect

Chrome 4.0 XP - Perfect

Chrome Mac - Perfect


and of course I have a couple problem children which are:

IE 6 XP - Text under fishing image. Fishing Image Gaps.

IE 7 XP - Text under fishing image.

Chrome 3.0 XP - Large Gap.


I'm hoping to get some ideas of how to fix any of the bad 3. IE6 and 7 are my biggest concerns but if you want to help with chrome then that would be great too.

I've still got to shrink file sizes so sorry the pages load slow.

Here is a couple screenshots of the issues in IE:

http://bluevisionweb.com/images/Picture%2082.png

http://bluevisionweb.com/images/Picture%2083.png

Thanks!

Blue_Vision
02-24-2010, 07:10 PM
alright. It came down to IE 6 not liking the image div's under 20px so I had to reslice in photoshop. That fixed the gaps.

IE 6 and 7 didn't like large changes in width of those images so I had to reslice-reslice-reslice until I got it down smoother. That fixed most of it. Otherwise I had to reslice until I found a nice height as well so it didn't clip half lines.

So anyways, as far as I can see that last link to index4 should be working across the board with the exception of a single letter in IE7 getting hidden and chrome 3 being out of whack. I'm calling those acceptable losses.

What do you think? Does it appear correctly in your browsers?

domedia
02-25-2010, 03:57 PM
Just checked in one browser, Chrome 4.0.249.89, and it's definitely not right. Big gap in the middle of the page.

Blue_Vision
02-25-2010, 05:43 PM
Yes, sorry... I found that out last night. I'm trying to figure out whats causing this gap all of a sudden in all the browsers. It seems to appear normal and then after the page loads a gap pops in out of nowhere. Any ideas are welcomed but I'm definitely on it and trying to figure it out...

Blue_Vision
02-25-2010, 06:56 PM
found the problem. We should be good again. Let me know if I'm wrong on that...

Blue_Vision
03-07-2010, 12:42 AM
Here is the latest:

http://bluevisionweb.com/test2/index.html
(still have more banner images to add)

Trying to make it look more fun while looking pro at the same time.

The funky text I hoped would make it look more lively. It is the corporate used font so I didn't just pick it out of a hat... they appreciate if we keep with the KOA Inc themes.

I used a semi transparent menu bar because the other one stood out like a sore thumb on some monitor color profiles when matched to other images that I'll be adding. Semi transparent doesn't work well with visibility in the casino image due to all the darkness and lights but that will be the only one of those so.... all the other images will work as good as it does with the mountain image.

I haven't optimized for text resizing in all browsers but if kept at the normal size then everything should appear in the right positions and colors with every browser but IE 6. I used 1 PNG for the nav bar at the top which works with every browser except IE6 of course. I'll spare my code of the IE fix I think as they can deal with the full color image. Also my text around the fishing image is a little hidden in IE6 again but I think I'll be able to fix that pretty easy.

So, crits? Looking better or worse? I still need to go back and reduce/cleanup my code I realize...


Thanks!