well?

[Astroflux]

just getting started on this layout for my portfolio site. all html.

not much to see but what do you think of the overall look?



building thirteen

[eightamrock]

The over state on the buttons takes too long. I wait like 2 secs before the text color changes. Is this done completely with Fireworks?? I had that problem when I made menu systems with it. Try lowering your quality setting in the export panel if thats the case. Other then that the simple design is nice. My only complaint is that I have to scroll to much. Try setting up the areas in a compass pattern. i think that would be pretty neat. up arrow on top left and right next to each other and down on bottom. that would be cool.

[Astroflux]

ok i see what you mean by the delay for the roll overs. on broadband its hardly noticable. i will play with the quality settings.

on the links i want them to open a new window -- opened at a certain size using java script. should i put the scrip on the link or in the new window html?

[junior_ab]

Looks good, got the fonts going!

[eightamrock]

both. You have to have the script that opens the window in the html of the original doc then a script to call it on the button.

[ZeroInspiration]

I dont understand why your using rool overs its possible to do that with normal text and not have to worry about people not having javascript on. You need to look into css if your using dreamweaver its as easy as clicking a few options, not only that but since there are no images involved there is no delay when using css. Here is a sample of what css looks like this is just one of my old style sheets so this wouldnt work for your document.

.body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #598C3F;
}
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #598C3F;
text-decoration: underline;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #598C3F;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #A45B6C;
text-decoration: underline;
}
a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #7DC547;
}
.header1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #A45B6C;
}
.header2 {

font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #A45B6C;
}

Other than that it has some potential but you need to fix that it makes no sence.

[Astroflux]

ok i am interested in css now. i have wanted to learn it for awhile but just never have. i am unclear as to why you say not to use roll overs. is it they are just called something else in css.

also i want to make sure that it looks the same on everyone elses computer. i want them to see the right fonts...not just what fonts they have on their system.

zero, could you expand a bit more on what you said?

thx

[ZeroInspiration]

Not a problem this is where I can shine a bit since my flash skills aren’t really anything to talk about. I went ahead and ripped the site so you can see what it would look like done in css and if you like you can use this also. Now before you look at it here is a little background. Css is absolute control for styling your web page, with the new standards for html or what will soon be know as xhtml you only need to set up a very basic page css is so powerful that it can do the rest. Css or cascading style sheets can do just about everything you need to form structure and style as far as your web pages are concerned. There are several ways you can use them:

#1 Through an embedded style sheetthat is located directly in the html, which can be handy but that is getting away from what makes css so useful.
#2 Though a linked style sheet, which is a file that will be located within your web spaces root directory, this for the obvious reason that it is accessible to any web page on your server makes it the preferred method of using them.
#3 Through an imported style sheet, now this does the same thing linked does but with one important option and that is it should be used in conjunction with a linked which by that I mean it can be specified in you linked style sheet that the rules set forth by another will be applied to any elements that are effected by the linked.

All you need to worry about right now is linked because you wont be doing allot of advanced css until you grasp all the options that are available. Now before we head into the modified layout I will address your other concerns and questions. Css along with all its glitz and glam is also very user friendly. Low end css is standard complaint all the way back to the IE 4.0 type browsers which in turn gives you a wide range of users that your site will display as intended. For what your doing this provides you with more user-friendly roll over effect since some users might not have JavaScript enabled. Now as far as how it looks well css not only defines a font it defines a font family that is usually a set of 3 fonts. This ensures that final product will display no matter what system fonts are present whether it be Mac or windows based viewer.

The font family tag looks something like this (font-family: Arial, Helvetica, sans-serif). Now the first being the Arial font, which I would assume, is what you used already if not it looks just like it, as would the other fonts. The Arial font comes with all windows systems, Helvetica is a Mac standard, and I believe sans serif is present on both platforms. So the idea is that if one isn’t present the browser moves onto the next. In more advanced cases you can even make an actual button with css so that when the user rolls over it will act like a roll over that uses JavaScript. This look can be achieved without using images or in the cases were you need a look that cant be achieved without using images you can link the images into the css and it will perform a roll over with images. Here are 3 examples of css navigation:

#1 This uses a very basic roll over effect that is applied to a html link and don’t worry about clicking the link since the effect will work just by rolling over the following > -LINK--LINK--LINK- <
#2 This next one uses an effect that not only changes the font color but also changes the background behind the link go HERE to see the resulting effect.
#3 Finally this last one is a little more advanced it uses css with an image go HERE to see the resulting effect.

Ok so you have an idea of how it all works lets move onto your site and how we could use some css. Not only will this simplify the layout but also it will drastically improve the file size. I rebuilt your layout in Photoshop re-sliced it and exported you are now at 9kb for the entire site instead of 80kb. Here is a link for what I did (LINK) and here are the source files(SOURCE FILES) so you can get an idea of how you should slice and also be able to really look at the code. One more thing this file is in xhtml, which is pretty much the same thing as html just with better structure and more control. For more information on web standards check out this link. Speaking of web standards this site also validatas woot CSS XHTML

[LuxFX]

I'm not a big fan of having an 'enter' page load a new window. And I'm not a big fan of having to scroll to see the whole menu. But I like the design -- it feels very smooth and professional.

I wasn't getting any of the slow rollovers other mentioned, but than again I'm on broadband. But it also sounds like maybe before you didn't have an image preloader built in, but I see that you do now. Is that a recent change?

[Astroflux]

ZERO THANK YOU VERY MUCH FOR THE EXTENSIVE REPLY!!!

I am going through those files and setting up a new page.

Lux, not sure what you mean about the image preloader. I did add an image to the splash page but not sure about the loader. Maybe the enter page could just open into itself, instead of a new page.

[LuxFX]

Lux, not sure what you mean about the image preloader. I did add an image to the splash page but not sure about the loader. Maybe the enter page could just open into itself, instead of a new page. [/B]

I was talking about your "preloadImages()" function, being called in the BODY tag. This is pre-loading your images for you. The response about your images taking a long time to change color made me think maybe this function wasn't there at the time. Oh well. At least it works now, right?

I would say that loading into the main page instead of a new page would be a good option.

[ctranter]

i think the smaller text - links to teh actual content should be a differnt colour, maybe just a very slightly darkred. so it looks like they are slighly transparent to the bg

[moot]

good work. couple things i'd change.

i don't think anybody should use popup windows anymore. too many popup blockers out there. if you're using popups, you gotta get a focus() on the popup window every time somebody hits the front page button so the window refocuses.

i think the text on the left in the portfolio is too dim or dark. i understand it may look good but you have to be functional first.

in the white space of the portfolio, have something there when it opens, leaving it blank makes user feel like it hasn't loaded yet

font on front page is blurry, don't use anti-aliasing on small fonts (16 or lower for me). use html font if you can. if you're in flash use system fonts or a pixel font. in photoshop change the aa to none.

[drew_hytt]

html good, works on all browsers.. flash bad, lol, stick with html its basic.. and looks half decent.

[Astroflux]

ok, i changed the whole site design.

I am curious what you think of the navigation. The goal of the site is to be as simple and minimal as possible to keep the focus on the content and not the site itself.

let me know what you think. im going to bed.

building thirteen

[ojc1]

>Nice clean, minimal, stylish layout
>It reminds me a little of the mediatemple site you link to
>can I ask why you link to this site - just curious
+

[RhameJ]

Damit! I hate it when people don't warn me that Im going to open a pdf file.

[Astroflux]

ojc1- i can see some similarities. never thought of that. i link there because they are my host, they rock, and they have a referal program. Its also a bit trendy, i guess.

RhameJ- good call about the warning. i need to let people know that. thanks

[RhameJ]

Sorry, woke up on the wrong side of the bed this morning. It's just that pdf's take sooo long to open on my PC and basicly kills everything until it loads.

[Astroflux]

do you use firefox?