I would very much appreciate any comments or pointers for my new website. This is my first time using CSS and am unsure about browser compatability.
Moonhare (JRW)
Moonhare (JRW)
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Site review requested 2
- Thread starter MoonHare
- Start date
-
1
- #2
Looks like a good start, but would definatly used what I had learned from this comp and kept working on and adding to the design and general layout..The navigation needs some work, looks very out of place..The black text on the grey header, not so good..And maybe not have the beige or pink area that the navigation is in so wide, no need since all of your links could fit in half of the width of that area..
Great start I think, but needs some work..
Have fun
carlsatterwhite@orlandomediasolutions.com
Great start I think, but needs some work..
Have fun
carlsatterwhite@orlandomediasolutions.com
- Thread starter
- #3
Thanks Virt2002,
What kind of OS/computer are you viewing it with? I am keen to know if it looks okay on a Mac. Do you normally look at sites with the browser the screen width? I wrote the page with "lithograph" as the first font choice, but I suspect it might be a rare font out there. The navigation issue... do you mean the link style having a white background for unvisited links? I will change that and the navigation bar frame width. If you mean something else about the navigation, could you let me know? Maybe it's not working as intended. Anyway, I appreciate the feedback. The black letters on gray.... well, that's about as humble as I could make it and "humble" is the feeling I wanted to get across. Any other humble suggestions will be appreciated.
Moonhare
What kind of OS/computer are you viewing it with? I am keen to know if it looks okay on a Mac. Do you normally look at sites with the browser the screen width? I wrote the page with "lithograph" as the first font choice, but I suspect it might be a rare font out there. The navigation issue... do you mean the link style having a white background for unvisited links? I will change that and the navigation bar frame width. If you mean something else about the navigation, could you let me know? Maybe it's not working as intended. Anyway, I appreciate the feedback. The black letters on gray.... well, that's about as humble as I could make it and "humble" is the feeling I wanted to get across. Any other humble suggestions will be appreciated.
Moonhare
Hey, a newbie !
We were all newbies at some time.
Okay, a few ideas.
I agree with virt2002, the navbar is too wide.
Try to avoid such a strong contrast in your colours (eg)orange, gray and white, unless you're going to blend them or fuse some pictures together within. Maybe make your front picture a little smaller and add alittle text about the site or company.
If I may make a suggestion. Frames, although seemingly easy to start out with, can cause you problems down the road. If you're hoping to get listed on search engines, sites done in frames tend to be at a disadvantage.
One thing I find helps when starting a site is start with just one page, it doesn't have to be your home page, but keep playing with it and experimenting with styles, images until you get just the right look.
Then go to google and type in SSI (server side includes), make sure your host supports them.
With SSI you will copy the source code. Copy and save the top part (sometimes top AND left) as header.htm and then copy the bottom as footer.htm.
What you have left (the middle) will be your actual pages, contact.shtml, index.shtml, etc. so your pages will look something like this.
<html>
<body>
<! include "header.htm">
<table><tr><td></td></tr></table>
bla bla all your info and pics
<table><tr><td></td></tr></table>
<! include "footer.htm">
</body>
</html>
** sorry, I forgot the exact syntax for the includes. I program in php which utilizes a very similar include.
In a short while I will be posting my site for review, so it'll be your turn to critique.
Best of luck
Later, Skater
We were all newbies at some time.
Okay, a few ideas.
I agree with virt2002, the navbar is too wide.
Try to avoid such a strong contrast in your colours (eg)orange, gray and white, unless you're going to blend them or fuse some pictures together within. Maybe make your front picture a little smaller and add alittle text about the site or company.
If I may make a suggestion. Frames, although seemingly easy to start out with, can cause you problems down the road. If you're hoping to get listed on search engines, sites done in frames tend to be at a disadvantage.
One thing I find helps when starting a site is start with just one page, it doesn't have to be your home page, but keep playing with it and experimenting with styles, images until you get just the right look.
Then go to google and type in SSI (server side includes), make sure your host supports them.
With SSI you will copy the source code. Copy and save the top part (sometimes top AND left) as header.htm and then copy the bottom as footer.htm.
What you have left (the middle) will be your actual pages, contact.shtml, index.shtml, etc. so your pages will look something like this.
<html>
<body>
<! include "header.htm">
<table><tr><td></td></tr></table>
bla bla all your info and pics
<table><tr><td></td></tr></table>
<! include "footer.htm">
</body>
</html>
** sorry, I forgot the exact syntax for the includes. I program in php which utilizes a very similar include.
In a short while I will be posting my site for review, so it'll be your turn to critique.
Best of luck
Later, Skater
- Thread starter
- #5
in re:
Thanks for the feedback!
It took me a long time to figure out that I had to change the properties of the UL to allow the navigation bar to be narrower. A few other things I learned on the way - the pseudoclass element for a visted link is not a:vlink! I love this CSS stuff. I feel sooooooo empowered!!!
As for the frame vs. search engine issue.... hmmm. That is a really good point, Skater, but for now, given the nature of this set of pages (allowing one to navigate off into the depths of my non-css webpages) I think I will just load it down with metatag keywords, and let the search engines miss all the backpages. I am not quite ready to tackle the question of SSI... maybe when I am looking for my next challenge.
I really vacillated about having an "escape frames" link to make the menu-bar page the "top". It was too funky in the end. Is there some other code (maybe javascript?) I can add to keep other people's webpages from getting in my frames? (confine the frame content to within my domain)
As per the color scheme, I am beginning to suspect that it is a monitor question. I love my colors on my monitor but clearly the apricot/gray/black looks icky in your distant corners of cyberspace. Hmmmm. Is the apricot too orange? Would anyone care to suggest a replacement for #ffcc99. Should the gray be lighter?
It is really nice to be able to ask for help! Thanks in advance.
Yrs,
JRW (Moonhare)
Thanks for the feedback!
It took me a long time to figure out that I had to change the properties of the UL to allow the navigation bar to be narrower. A few other things I learned on the way - the pseudoclass element for a visted link is not a:vlink! I love this CSS stuff. I feel sooooooo empowered!!!
As for the frame vs. search engine issue.... hmmm. That is a really good point, Skater, but for now, given the nature of this set of pages (allowing one to navigate off into the depths of my non-css webpages) I think I will just load it down with metatag keywords, and let the search engines miss all the backpages. I am not quite ready to tackle the question of SSI... maybe when I am looking for my next challenge.
I really vacillated about having an "escape frames" link to make the menu-bar page the "top". It was too funky in the end. Is there some other code (maybe javascript?) I can add to keep other people's webpages from getting in my frames? (confine the frame content to within my domain)
As per the color scheme, I am beginning to suspect that it is a monitor question. I love my colors on my monitor but clearly the apricot/gray/black looks icky in your distant corners of cyberspace. Hmmmm. Is the apricot too orange? Would anyone care to suggest a replacement for #ffcc99. Should the gray be lighter?
It is really nice to be able to ask for help! Thanks in advance.
Yrs,
JRW (Moonhare)
I personally think a darker shade of the appricot would work well in the header, with a white line on the bottom of the header to accent and seperate the two appricots..And maybe try a different font for the header, something to give it a little spice..
Have fun..
carlsatterwhite@orlandomediasolutions.com
Have fun..
carlsatterwhite@orlandomediasolutions.com
- Thread starter
- #7
Dear Virt2002,
Since you are so kind as to review my page, I humored you with a color adjustment. It's a bit sparky now!
My CSS font-family is: lithograph, arial, helvetica, san-serif on these pages. Your comments about jazzing up the fonts suggest that you are getting it in arial or helvetica. Maybe you would pick out a good blocky font from your system that might be common and I will add that to the family.
Finally about the line under the logo area.... I did this by adding a 2px frame (no color, no nothing) I could write a page to load either with javascript or a blank document of some appropriate background color, but maybe there is a way to do it more simply? Any ideas? Does it look okay just blank?
I have been writing this page using only IE6 and just looked at it with Nav 4.7 and Mozilla. Gee, it sure looked good with IE6! Compensating for these other browsers might be a bit tedious. Sigh.....
Yours,
Patricia (moonhare, JRW, or ol'whats-her-name)
moonhare@largocanyon.org
Since you are so kind as to review my page, I humored you with a color adjustment. It's a bit sparky now!
My CSS font-family is: lithograph, arial, helvetica, san-serif on these pages. Your comments about jazzing up the fonts suggest that you are getting it in arial or helvetica. Maybe you would pick out a good blocky font from your system that might be common and I will add that to the family.
Finally about the line under the logo area.... I did this by adding a 2px frame (no color, no nothing) I could write a page to load either with javascript or a blank document of some appropriate background color, but maybe there is a way to do it more simply? Any ideas? Does it look okay just blank?
I have been writing this page using only IE6 and just looked at it with Nav 4.7 and Mozilla. Gee, it sure looked good with IE6! Compensating for these other browsers might be a bit tedious. Sigh.....
Yours,
Patricia (moonhare, JRW, or ol'whats-her-name)
moonhare@largocanyon.org
-
1
- #8
Hi MoonHare,
I like the basic color scheme - not garish and a mild contrast - but on one page: Links to Partners - I personally found that the shade of the blue background you used behind the text clashed - not so much with the page color - but it made the text/back color look out of sync. Perhaps keeping the blue - as it is in itself indicative of the culture your site is promoting - but changing the text color - maybe white text or a cream? I have several ICC profiles and checked with each and the color scheme did not alter overmuch.
Your site loaded quickly - with pictures turned off - but with pictures on, your homepage was very slow to complete. Granted with the links to the 'info' on your site immediately available there was no need to wait for 'the rock.gif' to load but as I assume you have the picture there for a reason it seems a shame to have it either bypassed immediatley or make a visitor wait so long (over a minute on my system - ADSL, win98, ie5.5, 1024x768 on a 17", Geforce 4 - 6:50pm Sunday my time so no drain on our ISP and thus 4:50 am Sunday your time so presumably no drain there either).
I took your gif out of my temp file - to where it wrote without asking me (a mild dig in reference to another thread![[wink]](/data/assets/smilies/wink.gif "[wink] [wink]")
) and ran it through a graphics program, changed it to a jpeg and knocked it down from 144KB to 70KB without any loss of quality so perhaps that may improve load times.
I don't believe I had any problems with your font selection as I have far too many fonts on my system anyway and Lithograph is one of them - as are many ttf conversions of mac fonts. You mentioned your interest in having your site appear good on a Mac and for a blocky font a lot of macs us the Frutiger family. A free download of ttf versions of about 13 of the family is available at:
There is one thing though that I would like to suggest you amend and that is your lack of using Alt/text for your pictures. Personally, I am of the opinion that all pictures - including logos - should be identified by Alt/text and not just for those of us who surf with pictures off but also for those who need to use extra tools for accessibility. I am not completely informed about WWC standards (check with wullie) but I believe that providing such info for visually impaired visitors is recommended.
As an added 'benefit' and as an addition to fxcolin's comments about search engines, it is speculated that perhaps having a little extra descriptive text -in the Alt/text vein and especially as the text can be quite descriptive and include valid keywords in a non-spamming way - is useful in the care and feeding of spiders.
HTH
I like the basic color scheme - not garish and a mild contrast - but on one page: Links to Partners - I personally found that the shade of the blue background you used behind the text clashed - not so much with the page color - but it made the text/back color look out of sync. Perhaps keeping the blue - as it is in itself indicative of the culture your site is promoting - but changing the text color - maybe white text or a cream? I have several ICC profiles and checked with each and the color scheme did not alter overmuch.
Your site loaded quickly - with pictures turned off - but with pictures on, your homepage was very slow to complete. Granted with the links to the 'info' on your site immediately available there was no need to wait for 'the rock.gif' to load but as I assume you have the picture there for a reason it seems a shame to have it either bypassed immediatley or make a visitor wait so long (over a minute on my system - ADSL, win98, ie5.5, 1024x768 on a 17", Geforce 4 - 6:50pm Sunday my time so no drain on our ISP and thus 4:50 am Sunday your time so presumably no drain there either).
I took your gif out of my temp file - to where it wrote without asking me (a mild dig in reference to another thread
) and ran it through a graphics program, changed it to a jpeg and knocked it down from 144KB to 70KB without any loss of quality so perhaps that may improve load times.I don't believe I had any problems with your font selection as I have far too many fonts on my system anyway and Lithograph is one of them - as are many ttf conversions of mac fonts. You mentioned your interest in having your site appear good on a Mac and for a blocky font a lot of macs us the Frutiger family. A free download of ttf versions of about 13 of the family is available at:
There is one thing though that I would like to suggest you amend and that is your lack of using Alt/text for your pictures. Personally, I am of the opinion that all pictures - including logos - should be identified by Alt/text and not just for those of us who surf with pictures off but also for those who need to use extra tools for accessibility. I am not completely informed about WWC standards (check with wullie) but I believe that providing such info for visually impaired visitors is recommended.
As an added 'benefit' and as an addition to fxcolin's comments about search engines, it is speculated that perhaps having a little extra descriptive text -in the Alt/text vein and especially as the text can be quite descriptive and include valid keywords in a non-spamming way - is useful in the care and feeding of spiders.
HTH
- Thread starter
- #9
colcrys
To expand on your comments about the alt text, not all images should actually have an alt attribute.
If an image is used for layout, then it should not have any alt text as this would cause problems for screen readers. A layout image should have an alt attribute of alt="" this tells the screen reader that the image is used for layout and is not a part of the content. Simply not adding any alt tag, even though the it contains nothing is not valid.
If you use a logo image, then the alt text for that should not say alt="Logo" as that is totally pointless to a disabled user, a better alt tag would be alt="Company name".
MoonHare
The only comment I can make about the site is the size of the images, I just brought the size of a 131k image from your site down to 11k without any noticable quality reduction, you really need to optimise the images.
Hope this helps Wullie
sales@freshlookdesign.co.uk
The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell
To expand on your comments about the alt text, not all images should actually have an alt attribute.
If an image is used for layout, then it should not have any alt text as this would cause problems for screen readers. A layout image should have an alt attribute of alt="" this tells the screen reader that the image is used for layout and is not a part of the content. Simply not adding any alt tag, even though the it contains nothing is not valid.
If you use a logo image, then the alt text for that should not say alt="Logo" as that is totally pointless to a disabled user, a better alt tag would be alt="Company name".
MoonHare
The only comment I can make about the site is the size of the images, I just brought the size of a 131k image from your site down to 11k without any noticable quality reduction, you really need to optimise the images.
Hope this helps Wullie
sales@freshlookdesign.co.uk
The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell
- Thread starter
- #11
I reduced the size of almost all the graphics, but I am wondering if the fact that most are fetched from another domain (same ISP) is making it slower....hmmmm. Please let me know if it any of them are still slow.... but unless you find a slow graphic, I would just like to thank you all for your assistance in really improving my website!
Thanks!!
The Moonhare (Patricia)
Thanks!!
The Moonhare (Patricia)
Hello MoonHare,
I have revisted and note the changes made.
As I was the one that suggested you amend the text on the Partners page I would not want to think I was responsible for what was done. The 'new' text design must be excised I feel. It just reaches out and grabs one by the throat and screams - and not a nice sound. The previous version was art in itself in comparison.
On another page - Facilities - perhaps also the different text size under the pictures causes the page to look unbalanced - what do you think?
In a note to wullie - should you be reading mate - I noticed in MoonHare's cource code the following in her tags:
META HTTLI-EQUIV.....
I have never seen HTTLI before - am I missing something?
colcrys
I have revisted and note the changes made.
As I was the one that suggested you amend the text on the Partners page I would not want to think I was responsible for what was done. The 'new' text design must be excised I feel. It just reaches out and grabs one by the throat and screams - and not a nice sound. The previous version was art in itself in comparison.
On another page - Facilities - perhaps also the different text size under the pictures causes the page to look unbalanced - what do you think?
In a note to wullie - should you be reading mate - I noticed in MoonHare's cource code the following in her tags:
META HTTLI-EQUIV.....
I have never seen HTTLI before - am I missing something?
colcrys
Hi mate,
It should be http-equiv, not httli.
After quickly checking the source, I noticed that the following line:
of the world seem very far away.</h4></center>
That /center tag should not be there.
Hope this helps Wullie
sales@freshlookdesign.co.uk
The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell
It should be http-equiv, not httli.
After quickly checking the source, I noticed that the following line:
of the world seem very far away.</h4></center>
That /center tag should not be there.
Hope this helps Wullie
sales@freshlookdesign.co.uk
The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell
One thing I forgot to mention, the following image is still huge:
s016i001.jpg = 134746b
and the other images could still be drastically reduced in size without any noticable quality reduction.
Hope this helps Wullie
sales@freshlookdesign.co.uk
The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell
s016i001.jpg = 134746b
and the other images could still be drastically reduced in size without any noticable quality reduction.
Hope this helps Wullie
sales@freshlookdesign.co.uk
The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell
try something that matches a little more with the color of the site when you hover the links in the nav. the yellow doesn't look quite right. alos try and use a mouseover that suites the multiple lined words better then a highlite.
what I mean.
this being one link
Connecting with
the ancient
peoples
Does not look right with a mouseover that highlites it. try a simple underlining. A language that doesn't affect the way you think about programming is not worth knowing.
admin@onpntwebdesigns.com
what I mean.
this being one link
Connecting with
the ancient
peoples
Does not look right with a mouseover that highlites it. try a simple underlining. A language that doesn't affect the way you think about programming is not worth knowing.
admin@onpntwebdesigns.com
- Thread starter
- #16
Colcrys,
It must really look different on your screen than mine, but what the heck, I toned it down and added bullets graphics between the items. Hope you are relieved.
Wullie,
I am always afraid to get too drastic with my graphics. Give me some advice on optimizing resolution vs. bytes.... I use various graphics programs: Paint-shop pro, Corel, and Irfan. I have only rarely succeeded in getting something I liked at 75ppi. What do you aim for and when do you choose gifs over jpgs, and when you do jpgs what kind of compression do you use? Maybe there is a faq on this or maybe your answer could turn into a faq?
OnPnt,
I liked the yellow hover better than an underline. Hovers are so ephemeral! I could do a turquoise hover, but Colcrys would faint. I will keep the problem in the back of my mind and maybe some happy resolution will emerge.
Thank you all for your input,
The Moonhare
It must really look different on your screen than mine, but what the heck, I toned it down and added bullets graphics between the items. Hope you are relieved.
Wullie,
I am always afraid to get too drastic with my graphics. Give me some advice on optimizing resolution vs. bytes.... I use various graphics programs: Paint-shop pro, Corel, and Irfan. I have only rarely succeeded in getting something I liked at 75ppi. What do you aim for and when do you choose gifs over jpgs, and when you do jpgs what kind of compression do you use? Maybe there is a faq on this or maybe your answer could turn into a faq?
OnPnt,
I liked the yellow hover better than an underline. Hovers are so ephemeral! I could do a turquoise hover, but Colcrys would faint. I will keep the problem in the back of my mind and maybe some happy resolution will emerge.
Thank you all for your input,
The Moonhare
Try this moonhare, I think something like this would be alot better..You would have to use some graphic elements, but might not be so bad..
carlsatterwhite@orlandomediasolutions.com
carlsatterwhite@orlandomediasolutions.com
- Thread starter
- #19
WOW!!!!!!
Very pretty indeed, but you know, its not about pretty. Its about things being funky but authentic. I do like the fawn color, though.... hmmmmmm......hmmmmm....
Obviously the menu bar has to be a mapped graphic. But the part I don't know how to do is create the shadows: along the dividing line, behind the photo, etc. The title would have to be a graphic as well to have that nice font and highlight/shading. If the shadows aren't done in a graphic, this is a trick I must learn! Teach me! Teach me!
I think I will go paint the world with that lovely fawn color and contemplate the shadows.
Yrs,
The Moonhare
Very pretty indeed, but you know, its not about pretty. Its about things being funky but authentic. I do like the fawn color, though.... hmmmmmm......hmmmmm....
Obviously the menu bar has to be a mapped graphic. But the part I don't know how to do is create the shadows: along the dividing line, behind the photo, etc. The title would have to be a graphic as well to have that nice font and highlight/shading. If the shadows aren't done in a graphic, this is a trick I must learn! Teach me! Teach me!
I think I will go paint the world with that lovely fawn color and contemplate the shadows.
Yrs,
The Moonhare
- Status
Similar threads
