...

View Full Version : I'd like an honest review



friscofrankie
11-02-2005, 11:08 AM
Give me your hoest opinion advice or impressions if you would.
At least all the pages validate

www.isaanimports.com

little_toaster
11-02-2005, 04:35 PM
i would have white as your background color, Then add some sharper looking graphics!, I do think you need to work on the typography alot!

Overall: everythings where its meant to be!, and it does validate!

Rocket Boy
11-02-2005, 05:54 PM
You could make the main background colour the same colour as the hills in your header pic. This would create a nice horizon effect near the top of the page. I'd be tempted to use a more welcoming picture though. Nice layout

PhotoJoe47
11-02-2005, 07:06 PM
I'm not an expert, but I like your page just the way it is.

The only thing that I would change would have the menu bar at the top also center like the title at the top. I quess I just like balance.

PhotoJoe

friscofrankie
11-02-2005, 08:47 PM
Thanks all for the kind words I appreciate it.

i would have white as your background color, Then add some sharper looking graphics!, I do think you need to work on the typography alot!

Overall: everythings where its meant to be!, and it does validate!
I wrote this thing to be self standig and coded every word. gettnig valid output frmthe php code was a snap but the overall feel of the page lacks something to my eye.
I'm an engineer, not a graphics designer. I appreciate your advice. Would you be able to be more specific about the typography? I look at the site and it is clean, yet I keep missing something and I think you may be on to what it is that's been eluding me.
Thanks

little_toaster
11-02-2005, 09:28 PM
I'll Try to help; I understand what your saying about the engineer perception, I also class myself as one of these.

I think you could visit here (http://www.wpdfd.com/wpdtypo.htm), just a little on typography, so you can get into that mindset.

Your headers for instance are quite unusually laid out; they are placed left aligned to the main paragraph, I dont think this look works unless a large amout of text is being used.

Whitespace;
You have odd amounts of white space, this and inconsistant page breaks have made the layout a little awkward.

I actually think it will look better with the header photo enlarged. add some height ot this, i think it will balance the page out a little.

and i still think the background color should be white;

Hope I helped a little, anthony:)

friscofrankie
11-03-2005, 06:41 AM
I'll Try to help; I understand what your saying about the engineer perception, I also class myself as one of these.

I think you could visit here (http://www.wpdfd.com/wpdtypo.htm), just a little on typography, so you can get into that mindset.

Your headers for instance are quite unusually laid out; they are placed left aligned to the main paragraph, I dont think this look works unless a large amout of text is being used.

Whitespace;
You have odd amounts of white space, this and inconsistant page breaks have made the layout a little awkward.

I actually think it will look better with the header photo enlarged. add some height ot this, i think it will balance the page out a little.

and i still think the background color should be white;

Hope I helped a little, anthony:)

Quite frankly, i've been lookig at the same things you mentioned. You may have noticed I changed the menu bar last night. The indent ofthe text bothered me. I want the page to load quick so I've kept grphics to a minimum. I also want some space for a cpersistent cart display that doesn;t look empty when it's not there ie. not selected anything for purchase.
Coincendently, I had the header image at 130px to begin. I think It's 110 tall now so I can just lower the menu. I keep givng it less space. Dropping the menu to 110 costs nothing in overhead.
I have made some changes to the layout according to your ideas and couple fo my own.
I've also fooled with the thought of a White background. This would involve rethinking font colors, the backgrounds on all my text boxes and recoloring the front images. Maybe an hour to fine tune. css is great stuff ain't it?
Thanks,
FF

little_toaster
11-03-2005, 07:51 AM
It looks alot better already, gotta dash late for work!

_com
11-03-2005, 01:21 PM
The header iamgery

The heading Isaan Imports has this Silver style, the image quality is poor since you have not applied any anti-aliasing technique, it looks to carved. Possible the easiest fix I see here, blend the Text Isaan Imports with the background in one image, preferable a jpeg. perhaps some shiny beams in a circular motion would be nice - could then make the text appear like a sunrise ... The background shows a dull gray day in the mountains, not that cloudy mountains cannot make a beautiful picture but it needs some editing

Tynan
11-03-2005, 01:50 PM
font is too plain for what should a sophisticated page, you're offering something special after all

yeah to a white background, or at least a white box for the pictures, you want those pics to look good and the background colour effects the perception of the jewellery, pictures of jewellery, spec for sale, have to be top class, well lit and pin sharp, clean and crisp

get the menu text centered vertically, it look plain sloppy to me to me at present

and what the last fella said about the picture and the text for the header

a nicer sharper font

sort out the runaround/margin on the first picture, text running onto a picture always looks hammy

general smarteining up really and apologies for repeating what others have already said

good luck

_com
11-03-2005, 03:48 PM
It is best you use one header image since you wont have any advantage of a better looking silvery company text, I made this header.jpg which has both text centered and background in one image. This seems the best way to achieve a attractive header. You can use the attached header image for the background of <div class="header">. What you did to center the text when stretching the window has no benfit what so ever since one will make the window big enough to see your entire nav.

For further info about anti-aliasing: <http://www.phong.com/tutorials/anti-alias/>

friscofrankie
11-03-2005, 04:10 PM
Getting that margin was easy. I noticed it after the last upload. Fonts? trying to get the best for all browsers and OS's. Not sure There's a happy medium. maybe veranda for wndows? helvetica for linux and what for Mac? Right now I'm getting almost 75% traffic from Win users, about 18% from Linux very few macs. about 45% hit me with Firefox. Figure as the site gets a higher percentage of non-tech users i'm going to see more like 85% IE and windows. I develop on linux and check and tweak in Windows. So choosing a font can be a pain. right now the style sheet lists; arial, helvetica and sans-serif;
Recommendations?
I've heard this term anti-alias bandied about for the last 12 years or so, being an engineer I usually went deaf when these things were discussed. I mean, I was thinking, what is it? Where you want it? and is it a risk? Does it integrate? Now, I haven't a clue as to what it can do and how i appy it, buy it or d/l it.
I like the misty mountains Took that from my desk, well outside on the balcony. had a sunset but I prefered the moodiness of the impending rain. I liked the simple approach of a name butwanted it to look like silver.
BTW - I really do buy silver up in those hills.

Tynan
11-03-2005, 04:41 PM
antialiasing is a graphics function that softens the edge of images where they join somethig else graphic, it prevents a hrd jagged edge, works very well as long as the values used are correct, any vaguely decent graphics programme will let you do that

hear what you say re font but arial is so over exposed, default font basically

appreciate you love that pic but it what it conveys to joe scmoe customer that counts init, if it makes them feel moody, negative, downbeat then thats not good

fwiw, 'silver' effect lettering is going to be tricky, the variation in monitirs alone is going to mean a lot of people seeing steel, lead, iron and plain gray, I'd be minded to leave it alone and go for some simple reliable colours, let the jewellery do the silvering

and again, make those jewellery picture the best they can be, sharp sharp sharp and bright bright bright, see what the other commercial jewellery sites are doing, if I was buying soome I'd want a bigger picture when I clicked on it so I could really squint at the detail of it

_com
11-03-2005, 04:43 PM
antialiasing is a graphics function that softens the edge of images where they join somethig else graphic, it prevents a hrd jagged edge, works very well as long as the values used are correct, any vaguely decent graphics programme will let you do that


a transparent gif with a shadow applied to it will always be jagged , one can use matting to set a sort of
outer color that matches tha background but in the lay-out as is, the transparent gif shifts when stretching the windows thus the transparent gif will reveal its boundaries


hear what you say re font but arial is so over exposed, default font basically

This style applied works well accross win,mac and linux since the Lucida font is sort of default on their machines:


body {
font: 76% "Lucida Grande", "Lucida Sans Unicode", "Verdana", Sans-Serif;
line-height:1.3;
}



fwiw, 'silver' effect lettering is going to be tricky, the variation in monitirs alone is going to mean a lot of people seeing steel, lead, iron and plain gray, I'd be minded to leave it alone and go for some simple reliable colours, let the jewellery do the silvering

See this reworked image:

friscofrankie
11-03-2005, 06:08 PM
Like the look of the title. I liked the title centered when resizing I'll figure out how to keep the backround centered.
The photos are an issue. Had real sharp pics at 1280X960 wanted to conserve bandwidth. Here in Thailand I'm having a tough time locating pure white bulbs many of hte photos have a gold cast. The ability to view a larger closeup of the items is on the list of to-dos totaly agree this inlut just fores me to "get on it". this stuff has such fantastic detail i think that would be major selling point. I am finding I overestimated the bandwidth my site would use. I've really kept everything lean as possible and now will implement the higher res photos as links. Want to retake everything with whiter bulbs in my floods 'though.

I tried the fonts you listed, thanks! not sure how I like it but seems to render better in Opera than the other fonts did. In FF it's not such a big improvement coping the stuff to my windows parition now gotta see how IE digests this stuff.
ot sure when the font change will be up.
You folks are helping imensely and actually giving me alot of confidence in what I've done. with the input everyone is giving I begin to think I am on the right track and with some more tweaking by me and peeking by the community I'll have zip-zam fine lookin' web site!

_com
11-04-2005, 05:56 AM
<?xml version="1.0" encoding="ISO-8859-1"?>

This xml prologue should be avoided otherwise IE will be in quirks mode and thus the IE box model will be wrongly applied. You dont need it. except you have coded your site (CSS) so it would work in the buggy quirks mode. So better start on the first line with your DOCTYPE.


<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"></meta>

In XHTML you do this like this:


<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type" />

Here you can do with one meta for the bots instead of 2:


<meta name="ROBOTS" content="ALL"></meta>

<meta name="ROBOTS" content="index, follow"></meta>

This will be sufficient:


<meta name="robots" content="all" />

For the screen thus the web you use px,em or %, for print media use pt
The font is verdana, if you want to check the css that verdana is installed, so that verdana is used first: use double quotes

Instead of this, you can use easily a shorthand for the fonts too, so instead of this

body
{ font-variant: normal;
font-style: normal;
font-weight: 400;
font-size: 12pt;
line-height: 14pt;
font-family: veranda, helvetica, sans-serif;
background-color: #d4d6ce;
/*background-color: #ffffff;*/
color: #5c0c1d;
}

Do this, which results to exact the same with the font shorthand:


body {

font: normal normal 400 12px/19px 1.4 "verdana", helvetica, sans-serif;
background-color: #d4d6ce;
color: #5c0c1d;

}

So change in your default.css all pt to px and you will be fine.

Also if you dont want to put margin:0, padding:0; I would highly recommend to remove all these from all styled elements
And just use


* {margin:0;padding:0} /* make zero all paddings and margins for all elements without being explicit set, this wont override eg when El {padding:2em} */

_com
11-04-2005, 06:40 AM
Will post a solution to use on header background-image which will keep the centered text in place, adds a min-width to IE so when resizing the browser window, the image will remain centered ... Will post the realted CSS and images

This is a cross-browser solution so the header image will remain centered including the heder text of the comapny name. Plus I set a minimum width of 760px so when resizing the browser window on a 800*600 resolution the image remains centered.


The CSS (replace all this code with the .header styles in the file default.css)




.header {background: #586D6E url(images/header.jpg) no-repeat top center;height:110px; text-align:center}
h2 span.headerText
{
position:relative;
top:84px;
left:0;;
font-size:12px;
border-width:0;
white-space:nowrap;
height:14px;
text-align:center;
color:#C5CDD0;
z-index:3;
background-color: transparent;
}

/* hide logo image to accomodate non CSS browsers */
h2 span#logo {display:none;}

.width {
width: 100%;
min-width: 760px;
margin: 0 auto;
text-align: left;
background: #D6DCDD;
}
* html .minwidth {
border-left: 760px solid #D6DCDD;
}
* html .container {
margin-left: -760px;
position: relative;
}
/*\*/
* html .minwidth, * html .container, * html .content {
height: 1px;
}
/*/
.width {
display: inline-block;
}
/**/


The HTML (replace with <div class="header">...</div> plus <div class="add_bar"> ...</div>)



<div class="width">
<div class="minwidth">
<div class="container">
<div class="header">
<h2><span id="logo"><img src="/images/logo.jpg" width="760" height="110" alt="Isaan Imports" /></span><span class="headerText">Isaan Imports: Hilltribe and Sterling Silver Jewelry.<span></h2></div>
</div>
</div>
</div>
</div>


Images are made a touch lighter so the text underneath the logo contrasts better.

@ different color for subheadertext -> works best for me (blends well with image and improved readibility)

friscofrankie
11-04-2005, 09:49 AM
Actually the [pages wson't vaildate if I use this:


<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type" />

Or any other empty tag notation inside the <head> </head> element.
I submitted it for validation with those tags as empty and it failed. The validator came back with the note that the validator doesn;t like empty tags in the head. I added the close tags so it would. not really a big deal but If i say it's valid and someone checks? want it to validate.
I've just been reading more about quirks mode recently. This page was my first attempt at using PHP and was concentrating on that. after a few weeks imagine my surprise when I loaded the thing in IE!!!
it was a nightmare page!
I've setup a second site on my deve machine and am implementing alot of the changes and hints you guys are giving me. this is all great stuff!!
Gettng the menu text to center vertically is a wierd one when the menus were 24 with 12 pt they centered. now that i've chenged the colors of the menus and the size of the bar and fon they bumped up a pixel. I added a top border to them and in linux ff and moz it looks good but then in windows FF and IE they look too low. removed the border and viola! think I'm gong tohave to live with what i've got.
I applied the font changes suggested and am still wondering about it. by keeping san-serif for th menus it'll be Ok i think the aspect ratio of the fons is a bit lower and The appearance in all browser appeasr to be much closer. Opera really messed up my fonts with the other ss.
Funnily, I removed the text under the logo as it was just too lonely there and really had little importance.
I'm going to apply a good many of these mods to the "white site" Really like the logo. Will use it there as well.

I't really shaping up, thanks alot guys!
FF

_com
11-04-2005, 09:54 AM
This is only a IE thing, not needed it causes bugs. And is only needed if you would include some XML in your pages since you are using HTML and PHP : not needed. It simply causes bugs for IE 5 and up because you use CSS


<?xml version="1.0" encoding="ISO-8859-1"?>

Shoulds start the page with this doctype, this helps for IE WIN to not trigger any box model bugs.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">


Also note that pt is for print media and px, em and % for screen media thus the web

friscofrankie
11-04-2005, 11:37 AM
Forget why I added that bit. it's only in one file and you're absolutely right, I don't need it. Should remove it Was something I included at the beginning for some reason.
pt is something from the beginning as well. not too sure about using % i mean %of what? Going to play with the settings here. make the site white and add the lucinda fonts using the percentage figures. most of my margins and padding stmnts are in em so...
lot's to clean up I know what o do n PHP need to get alot my functions off into a lib file and call it from teh indiviual scripts. have to clean up the css. really like that headng file I think I'm gonna use it and al these details.

_com
11-04-2005, 11:38 AM
I made a testapge that includes the expandable header = one image!! plus the subtext all in one. I don recommend to leave out the textual phrase since non image browsers wont see anything - this is now taken care off. Note that I made some last changes to the CSS. See source! Enjoy! Test in any browser you want eg IE WIN Mozilla and Opera. I worked one hour on this, this is the testpage:

All valid XHTML and CSS

also note: that including a <h2> will improve that Google Rank (we hope of course but people I know do this so)

_com
11-04-2005, 01:47 PM
pt is something from the beginning as well. not too sure about using % i mean %of what?


percentage and ems work together

The default font-size would be varying from 12 to 16px.

You could style the body text to font-size: 100.01 % and then apply for the body-text, the <p> 98%, anything below 1em is not advisible since text would become really tiny.

1 em is basically the default font-size of your browser which may vary from browser to browser, even version to version. So 1em= 12px or 1em=16px is possible. So if I would apply to a <p> a bottom margin of 2em that would create a relation to the font-size when resizing. Percentage is similar, one could use 160% for a <h1> So that would be really big.

friscofrankie
11-05-2005, 11:12 AM
Thanks for all this free work you've put into the helping me. I don;t think I have ever seen anyone put so much work into helpng another poster you are to be commended.
By removing the xml doctype blew everything out of proportion in IE. This caused all the box model bugs you claimed having it would. Maybe it is because of the way I set up my style sheet when hacking a fix for both standards browsers and IE. Ah well IE, what we all have to work with. just not going to mess with the entire structure again The page renders very well in IE and otheres so I'm happy. if it ain;t broke,...I will find the article and table listing the different doctype headings and the affect on IE's quirks/Std modes i used to trouble shoot this and maybe can even figure out why I did what i did.
I implemented your changes with the idea to check in windoze and IE and at 4:00 AM this morning uploaded all with the edits you recommended. Very stupid of me. I didn't validate it in IE. My fault for working too many hours then posting without sleeping on it. The divs were all over the map. about 15 people checked the site last night while I was sleeping I'll be hearing from a few of them I'm sure. This was totally my responsibility. I knew That I had a good doctype that worked with IE quite well. Will do some reading on that but overall i'm pretty happy with the improvements
I don't know where you validate your code but you might want to try http://www.w3.org/QA/Tools/#validators
Straight from the "horses mouth" it is the only site I ever use. they wrote the spec I figure their the ones to check he code.

I really loved the look of the logo the Words "Isaan Imports" took up a bit more room than I had hoped. i did get into Gimp and make an attempt at anti-aliasing the original title.gif though; I think it's a bit better. I really need to work on my graphics skills. I'm going to try and fnd some nicer fonts for my Linux machine and mess about with the title a bit.

I also used the lower aspect ratio fonts for my headings and stuck with veranda/helvetica/sans-serif for my body text.
Thanks to little_toaster for all your very good advice and input on typography & layout I hope that you will check on the subtle changes I made and give me feed back.
The site really looks a lot better by implementing much of the tips and advice from you folks.
I appreciate every single tip and try out most of them. I am always open to suggestions. Even when I disagree. AS I mentioned I am an engineer and my baliwick is back-end, not front-end design.
Thanks all again. and if you'd be so kind to check the changes I'd love to hear any follow up comments.

_com
11-05-2005, 07:00 PM
I have reworked the header image so the text-size of the header image matches the one you have:


I checked the new version, your header image is not expanding as a whole, I dont like the effect you have now, the header image should be one. my code will do just that. Also the min width setting will make sure the headerimage will remain centered.


Just use this CSS


* {margin:0;padding:0}
html,body {height:100%}
body {

font: normal normal 12px/19px "Verdana", Helvetica, Sans-serif;
line-height: 1.3;
background-color: #d4d6ce;
color: #5c0c1d;

}

.header {background: #586D6E url(../images/header.jpg) no-repeat top center;height:110px; text-align:center}
h2 span.headerText
{
position:relative;
top:84px;
left:0;;
font-size:12px;
border-width:0;
white-space:nowrap;
height:14px;
text-align:center;
color:#C5CDD0;
z-index:3;
background-color: transparent;
}


h2 span#logo {display:none;}

.width {
width: 100%;
min-width: 760px;
margin: 0 auto;
text-align: left;
background: #D6DCDD;
}
* html .minwidth {
border-left: 760px solid #D6DCDD;
}
* html .container {
margin-left: -760px;
position: relative;
}
/*\*/
* html .minwidth, * html .container, * html .content {
height: 1px;
}
/*/
.width {
display: inline-block;
}
/**/

This HTML


<div class="width">
<div class="minwidth">
<div class="container">
<div class="header">
<h2>
<span id="logo">
<img src="images/logo.jpg" width="760" height="110" alt="Isaan Imports" />
</span>
<span class="headerText">Isaan Imports: Hilltribe and Sterling Silver Jewelry.</span>

</h2></div>

</div>
</div>
</div>


Also you can remain in quirks mode with your current xml prologue and doctype, I would like to know if the above code works in the quirks mode, should work perfect.

_com
11-06-2005, 01:34 PM
Please: put back the mountain image: it was perfect

Also keep in mind: liquid layout with a min-width are a good combination

friscofrankie
11-08-2005, 07:18 PM
I'm looking at it with the current logo in place. it's not bad, and the new color scheme with the mountains might look nice. Using gimp I'm not getting the edges as crisp as I want, will play with it some more. I think I like the new layout and I miss the mountains too (see 'em every day) But I think I also want to integrate the shield type logo I to have get it crisper and then use the mountains as a background.
Makes the body of the document seem kind of plain though. Also slows down the load time, have to juggle functionality with aesthetics.
And add content
and build more back end functionality
And get all my php commented



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum