I have a new website!

It just had to happen one of these days, so I finally put it online:

ERICK - Webdesigner werkend vanuit Amsterdam | Website nodig? Website make-over? Webshop of Weblog? Van Concept tot Online ben ik u graag van dienst!

It is my personal portfolio with information about what I could do for you as a webdesigner/webdeveloper. It is in dutch but I guess people get the picture...

What I would like to know is what people here think of the website in general.

__________________
Erick Schluter
Linkage, a nice websites portal
Amsterdam . Netherlands
http://www.linkage.nl

No one? That's oke...

__________________
Erick Schluter
Linkage, a nice websites portal
Amsterdam . Netherlands
http://www.linkage.nl

People generally think website mean a online shop or online information store thats it. I don't understand what your expecting by posting this kind of question in this forum??

The red is way too much and too hot for my taste.
Some of the alignment on mouseovers is off.
I get the feeling of too much movement even though there actually isn't any.

Question: What are the demographics of your target audience?

__________________
Dave Barnes
+1.303.744.9024
http://www.marketingtactics.com
sitting in my basement with my iMac

Wow. That's very ... red.

Luckily I know a smattering of Dutch, so I was able to navigate and figure out the gist of things.

I like some subtle hover effects, but these were very much in your face. Over the top.

Here's what it looks like you have on your front page: your complete portfolio, some copy that seems to be yelling at me (sorry), and a contact form. It's all rather overwhelming.

Hovering over the portfolio links was a bit confusing. I hovered, thought that the large screenshot was also a link, and moved away from the real link to the screenshot which promptly disappeared. After doing that a couple of times, I realized I should click on the link over which I was hovering.

The portfolio itself shows that you're a very "edgy" designer. I would imagine nightclubs would seek you out. More traditional brick and mortar businesses may not, though.

Good luck, and I hope this helps.

I personally like it a lot, but I know from personal experience that when you use so much of a STRONG color like red, people are either going to love it or hate it. You might want to run it through the colorblind filters though, I have a feeling that black on red is going to be a problem for some.

Colorblind Web Page Filter

You might find it helpful, as I did, to actually have two business identities/websites. One that appeals to folks who will love the edgier stuff (this one is in that arena.) And one that is more traditional and maybe less "in your face" that will appeal to the business crowd.

__________________
Custom WordPress Themes, CubeCart templates, ModX templates, Movable Type templates. ~ B1tchslappin Political Blog ~ GreenSpeak Community Action

Your site is optimized for 1024x768 resolution, but what if someone using that resolution visited your page with the browser window not maximized? Did you have a look at the page using a lower resolution or with the window not maximized? Also no horizontal scrollbar appears at lower resolutions. This needs to be looked into.

__________________
My Nook | My Biz | My Photos

I dont know what is there coz i cant understand that language but however nice site but you should change the background color . i don't know why but red is not looking well. but if you don't want do not do.

__________________
Web Development Company | free web templates | website designers

Hey there all,

Like all the constructive critisism, will look into all of it...And I am afraid the red is indeed too much...

Back to the old drawingboard it is!

Thanks a million so far!

__________________
Erick Schluter
Linkage, a nice websites portal
Amsterdam . Netherlands
http://www.linkage.nl

I never get the right screensize...Whatever I do?!

If I keep them with 'older' screens in mind my website will look like a 'stamp' on a modern screen. But If I neglect this, a lot of people seem to have problems with the website.

It is never oke...So why bother about the screensize anyhow? 9 out of 10 screens I have visited my website on behave like I want them to, just sometimes I encounter a screensize that isn't sufficient for my website.

And when I explore this and visit other websites...They all have the problems that people complain about. Scrolling-issues and so...

So aren't actually the only one's complaining about these kinds of issues the people that know this kind of subject excists? Like the people on this forum and other really webrelated people...?

My mother for example would just scroll down a bit...Never thinking 'Oh my, what a bad website!'.

I will never get this screensize issue I guess.

What is the size in pixels I should design for? Still 800x600?

And subhzash...What do you mean with this:
"People generally think website mean a online shop or online information store thats it. I don't understand what your expecting by posting this kind of question in this forum?"

Isn't this a website review area? And am I not talking about reviewing my website? Or am I in the wrong categorie? Is this the online shop/information store category?

BJ, I have checked out the colorblind website...And in many cases the colorblind people would see my website far nicer that I intended... Thanks for mentioning this website, very interesting stuff!

Stabilpa I have decided to make another 'projecten' section, not with all the screenshots in MouseOvers...I have seen this on a 'old screen' and this was very irritating and slow.

So...In short: I will make a lot of changes and report back a.s.a.p.! Thanks so far...

__________________
Erick Schluter
Linkage, a nice websites portal
Amsterdam . Netherlands
http://www.linkage.nl

I never did say the site was bad, but just that the issue needs to be looked into. If after careful consideration you feel it is not worth the trouble, no problems. But the horizontal scrollbar is disabled and I see no good reason for this considering the page layout.

__________________
My Nook | My Biz | My Photos

I disabled it Sands,...The 'horizontal scrollbar'...But you are right, I should not have done this. I am busy with a newer version that will not need to be scrolled at all. Not vertical, not horzontal, just 'centered'!

At least...That is what I am intending to do :worried:

__________________
Erick Schluter
Linkage, a nice websites portal
Amsterdam . Netherlands
http://www.linkage.nl

Sounds interesting........... all the best!

__________________
My Nook | My Biz | My Photos

Like I said I...I have changed a lot:
ERICK - Webdesigner werkend vanuit Amsterdam | Website nodig? Van Concept tot Online!

How ya like me now?

__________________
Erick Schluter
Linkage, a nice websites portal
Amsterdam . Netherlands
http://www.linkage.nl

Yep, this does look like the work of a pro, but as the others pointed out, there are doubts about the colours used. I did like the Sitemap hover effect. Overall a good makeover, cheerio!

__________________
My Nook | My Biz | My Photos

Unless the client requests a design that won't allow it, I design websites to flex width between around 780 wide and 1100 wide, making the content column the flex width, and fixing the nav column widths. You have to hack IE6 to get that to work, but it's worth it. You might also find these layouts helpful, with the addition of another mainwrapper around all.

Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!

I like the rework! It is a tiny bit more subdued in tone, though as you can see from Sands' reaction, you're still going to get the either love it or hate it reaction. Also, fixing heights is rarely a good idea, especially when you have text blocks. Not everyone uses default text size in their browser. If, in firefox, you view/text size/increase your layout starts to fall apart immediately. I usually harden mine to withstand three increase clicks and still be usable.

__________________
Custom WordPress Themes, CubeCart templates, ModX templates, Movable Type templates. ~ B1tchslappin Political Blog ~ GreenSpeak Community Action

A very good point.

__________________
My Nook | My Biz | My Photos

Slowly but surely...

The fixed heights combined with textsize-increasing indeed is a problem!

But with no heights...Is that possible in this case? The 'footer' is absolute positioned at the bottom like following:

#footer{
position: absolute;
top:568px;
width:757px;
height:32px;
padding:0;
background:#a32025;
color:#ffffff;
text-align:left;
}

The 'top:568px' takes care of the footer being at the bottom.

When I remove this the footer just drops down a little...But will not move down with increased text sizes?

How do I take care of the footer, so that it goes down when someone increases their browsers text-size? At the moment the text goes beneath the footer...?!

Also, when I do not tell the CSS that a textarea is a certain height...How am I able to make it a specific size? Because not every page contains the same amount of lines of text. So without telling what the height is, every page looks different...Dependent on the text a page presents.

Without a height?! How is that possible?

Thanks for all your advice, it is keeping me awake! :worried:

__________________
Erick Schluter
Linkage, a nice websites portal
Amsterdam . Netherlands
http://www.linkage.nl

If you absolutely must define a height, then when using text in a box, define all the heights in ems. That defines the height proportional to the text size. If you define heights in pixels it will always be a problem in boxes with text. You might need to define the widths with ems also. Though a side scroll may appear in the largest text sizes, that at least gives a page that is usable.

Also, abs positioning is not a good way to define that footer position. Abs positioning says this div of this dimension will go HERE no matter what else might be there. Abs positioned items will overlap other stuff. That's what you're seeing.

__________________
Custom WordPress Themes, CubeCart templates, ModX templates, Movable Type templates. ~ B1tchslappin Political Blog ~ GreenSpeak Community Action

Everything is EMs...Oke...Is there a easy way to do this? For example: 10px = 1.3em or something like this.

When I remove the 'absolute' or change this with another position-posibility everthing goes wrong. So how do I work around the 'absolute' without losing it's functionality?

__________________
Erick Schluter
Linkage, a nice websites portal
Amsterdam . Netherlands
http://www.linkage.nl

Hi Erik.
If I'm brutally honest I don't think that I would hire you to build a website for me on the back of your site and portfolio.
I don't like the overall "look" of you website - that could be down to personal taste but I reckon that potential clients may feel the same way. I think that the deep red is too-much and the general design of the site, as far as Aesthetics is concerned, is well below par.

Had I been looking for a webdesigner I would have loooked elswhere I'm affraid. I think that potential clients judge webdesigners on their website since thats the service being sold. If you went to get a haircut and the stylist had cut her own hair and it was a mess what would you do?

I think you should redesign your site.
Respectfully,
C64.

Mmhh...Oke...

I have changed a lot...But my portfolio is my portfolio.

Everything you see there are things I have done personally while I also have worked for design agencies with 'real' webdesign mock-ups and all. So I must say I partially agree with you, it could use a few more 'professional' looking projects.

It is a shame projects done for agencies cannot really be mentioned in a portfolio like this.

And BJ please have a look again:
ERICK - Webdesigner werkend vanuit Amsterdam | Website nodig? Van Concept tot Online!

I have changed a lot regarding text and so...How ya like it now?

Thanks!

__________________
Erick Schluter
Linkage, a nice websites portal
Amsterdam . Netherlands
http://www.linkage.nl

The right side is adjusting better. It's not a solution I would use, but it is one that allows usability at larger font sizes. The left side, however, is still very problematical.

I think you need to rethink how those boxes are set up. What I would do is make those iconic images with transparent backgrounds and layer them in such a way that they'd "slide" with the height of the box, and be anchored to the bottom. Right now at two clicks increase in Firefox, you're still getting a lot of overlap and squished text.

For instance, on .webdesign_butt a you've got the height set for 121px. You should never have a height set in a box that needs to expand with text size. So get RID of that height. Then get creative in layering images and using borders so that you don't have the problem.

I have a feeling that you're thinking like a PRINT designer. Print designers always have an exact dimension in which they put the contents and design elements. On the web, we don't have that luxury. Every computer, every screen, every default setting in a browser, every resolution, EVERYTHING can affect the way the page will be viewed. There is no such thing as a fixed dimension on the web. So we have to get creative in how we use backgrounds and such so that they will adjust to what our viewers (using their particular combo of monitor, browser, opsys and defaults) throw at them. Think LAYERS.

An article about this concept (but for another use) is here:
A List Apart: Articles: Sliding Doors of CSS

And just to drive you crazy, I'll say it. I miss the red!

__________________
Custom WordPress Themes, CubeCart templates, ModX templates, Movable Type templates. ~ B1tchslappin Political Blog ~ GreenSpeak Community Action

Yes you drive me crazy...:worried:

No, I like all the advice and as you see follow up on it.

What I never seem to get is what you are saying about the 'boxes'...I use this technique because there is a mouseover FX without javascript, as follows:

/* WEBDESIGN BUTTON */
.webdesign_butt a {
display:block;
background: url("images/webdesignbutt.jpg") 0 0 no-repeat;
text-decoration: none;
width: 333px;
height:121px;
text-align: left;
padding:28px 0 0 34px;
font-size: 1.2em;
font-weight:normal;
letter-spacing:-1px;
color:#000000;
cursor: pointer;
}
.webdesign_butt a:hover {
background-position: 0 -149px;
color: #c72525;
}
.webdesign_butt a:active {
background-position: 0 -298px;
color:#000000;
}

This is a image that has a height of 447px that 'moves vertically' on MouseOver and on MouseClick.

This is the image:
http://www.ericks.nl/images/webdesignbutt.jpg

At the moment the three stages are the same...Nice isn't it? This technique, not the image...

When I make a 'flexible' box of these 3 I loose the whole MouseOver FX (which isn't really used at the moment, but will be!)

I was thinking of the solution you mentioned earlier, but decided that I like the MouseOverFX.

Or am I crazy and should I just use Javascript for this? Because I was planning on slowly removing all Javascript from my website.

Also images are never 'resized'...Why is that? Isn't there a way to for example say:

if text-size increase = 1 then image size = 300x400
if text-size increase = 2 then image size = 400x500

etc. etc.
Because I am willing to make all texts 'flexible' and all...But if that means that images remain as small as I intended, why bother? Then the whole website isn't what you intended?

And no...I do not think like a print designer although I like the compliment. When being busy with all of this I wonder why I don't move my whole operation into Flash?! And yes I know, Flash is hell SEO wise, but (X)HTML and CSS are hell design wise.

Sometimes I wonder too much...

Now I will look into the boxes flexibility!

__________________
Erick Schluter
Linkage, a nice websites portal
Amsterdam . Netherlands
http://www.linkage.nl

Hi Erick,
I think the colour change to blue was a good move. It's alot easier on the eye. I wish I could understand the text! Oh well.
Regards
C64

Erick, there is a way to do it. You just have to be VERY clever! And move the images horizontally instead of vertically.

Read through this article:

CSS Rollover Background Images - Fast Rollovers Without Preload [1]

There are two examples in that article. One uses vertical positioning, the way you did, and the other example uses horizontal positioning.

The technique you use should work. You just have to think LAYERS, and anchoring the images to the bottom of the box. Currently your background only gives you exactly a certain amount of height on those areas that are white. Okay, let's take one of those left boxes. Think three layers-- a box within a box within a box (and maybe a 4th, depends on how your mechanics stack up.) The outermost box has a background that has your side borders on it. The next inner box has the top border. The third inner box has the bottom border AND your cutout guy on the transparent background. And that's the layer you can do the rollover on AND put the text in. Oh, and all the borders are done using images instead of css borders. That should give you what you need.

__________________
Custom WordPress Themes, CubeCart templates, ModX templates, Movable Type templates. ~ B1tchslappin Political Blog ~ GreenSpeak Community Action

Sorry for the lack of response...Busy!

'text-indent' to avoid errors with the box model hack when using 'padding'....Why didn't I think of this!?

Text-indent I always used for the 'first-letter' things and so, never expected this to be better (more logical) than 'padding'.

Will do the buttons a.s.a.p., it really bothers me that this isn't oke. So far only complaints on this issue are from WebProWorld, but I would like it to be in order.

The colors I will leave as they are for the moment, but I have some new ideas on this.

A little patience...Slowly but surely...

__________________
Erick Schluter
Linkage, a nice websites portal
Amsterdam . Netherlands
http://www.linkage.nl

Erick, re box model. I always use a class called .pad within any of my main structural divs which have the widths set. The .pad class has no width set and I put the inner padding on that. Constructing things this way avoids a lot of the box model problems.

Don't look at these things as complaints! Look at them as refinements and a great learning experience!

__________________
Custom WordPress Themes, CubeCart templates, ModX templates, Movable Type templates. ~ B1tchslappin Political Blog ~ GreenSpeak Community Action

You are right...From you people here it is advice and constructive critisism and not complaints! Excuse me...

I will look into the buttons with all your tips and tricks and hope to finally fix this!

__________________
Erick Schluter
Linkage, a nice websites portal
Amsterdam . Netherlands
http://www.linkage.nl

Sorry, my 'edit' period was over.

But...

I was snoopin' around looking for people doing the same as me in Amsterdam, the Netherlands and here a few I found:

Toiweb webdesign Amsterdam is betaalbaar maatwerk: PHP, MySQL database, consultancy, dynamische pagina's

Arch - Webdesign Amsterdam, website design, zoekmachine-optimalisatie in centrum Amsterdam

or

Creative Design - Webdesign Amsterdam

Of course I took a few 'not so brilliant' one's...But this is some of the competition I am up against. Compared to these three websites, is mine quite oke, or not?

There are of course websites in this same categorie that I think are nicer than mine, but oke...

__________________
Erick Schluter
Linkage, a nice websites portal
Amsterdam . Netherlands
http://www.linkage.nl