ok, i need your serious critique.

[tomtefan]

i have just completed my homepage where iam going to try and sell some of the pictures i have made. pictures that works for about anything.


http://eldain-tatoo.dyndns.org/


to view it best, use firefox.
(iam about to work on the explorer compatibility. and auto-scaling for bigger than 1024).

so, tell me what you think.
and dont be shy, i can take it. =)


btw valhalla, do you have a banner-link you distribute ?
or should i make one myself ?

i figure since i get help from this community, i should atleast put up a link on my page.

[Jackolantern]

It looks very "imagey" (I can't think of a better way to say it). It looks like an image that was scanned and turned into a website (brochureware). I think it may look better if you turn it into a proper 3-column layout and use actual, styled text for the navigation buttons and "hot"/"cold" tags. You will also get better cross-browser compatibility by adding in the proper HTML page structure with a doctype, HTML open/close tags, head and body tags, etc.

Honestly, this is how a lot of design-oriented people's sites I have seen turn out. You have an idea of how you want it and how you want it to look, and instead of trying to fight HTML and CSS, you go with images instead so you can have your exact design. Not that that is a terrible thing, as it is half the battle that you have a design in your mind's eye. But your site will come out much better by actually using text for text content and images only for non-content and creating a true HTML page structure. It will make your site much more indexable by search engines, more accessible for handicapped users, and will make it much more maintainable.

[PaxBritannia]

Nice, your very own site.

First of all, white text on black background. It doesn't work well. I would either increase font size or bold all the text to make it easier to read, or switch to a white background.

To preserve with the tattoo theme of the site, you could use a white background, black text, and a black design border which fills the browser window. Sort of a tattoo themed frame around the site.You could also spend more time on your menu buttons, maybe separate them with a small tattoo design (no more that 30-50px high). That would have a nice effect.

And I'm sorry for the news, but 'tattoo' is spelt wrong: there are two 't's' in tattoo. You might also want to check the spelling of 'Bilder' in your pictures url.

Placing a 'pay with pay-pall' image somewhere more visible would certainly get more purchases. You might also thing of making the designs have a larger watermark, or obscure more of it: there is nothing in the way of people just coping your designs as the watermark is barely visible. A few minutes of photoshop could remove it.

And on HTML structure: take the time to learn it and slowly convert your site into html and css: it will save you a lot of time in the long run updating and maintaing your site.

All in all, not bad of an effort, just remember to not fall into the trap of stopping here: we should always continue improving. Keep up the good work!

pax.

p.s. I'm working on a secret project right now that perfectly suits what your doing on your site right now. It will allow you to upload your designs and set up the billing system easily. It's still in development, but if you want me to contact you when it's in Beta, let me know.
edit: oopps... spelt tattoo wrong as well!

[tomtefan]

good good. nice info, so i know what i have to work with =)

iam not a real programer, so yes, i took the way i understood best.
But now its time to tweak and bend some of the stuff.

[PaxBritannia]

Great! If you have any questions, we're always here to help.

pax.

[Chris]

Doesn't validate:
http://validator.w3.org/check?uri=http% ... ne&group=0

And when I look at the source I can see why.

Why do you use a background image for something that CSS should be doing:
http://eldain-tatoo.dyndns.org/images/svartovit.jpg

The layout is good. But the way it's made surprises me that it actually works. Try this:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Eldian Tattoo</title>
	<style type="text/css">
	#container {
		border: #000 4px solid;
		width: 1000px;
	}
	#header {
		background: url(http://eldain-tatoo.dyndns.org/images/Eldaintattoo.png);
		height: 130px;
	}
	#navigation {
		border-bottom: #F00 4px solid;
		background: #000;
		height: 40px;
	}
	#navigation ul {
		margin: 0;
		padding: 0px 150px;
	}
	#navigation ul li {
		float: left;
		list-style: none;
	}
	#navigation ul li a {
		padding: 0px 10px 0px 10px;
		text-transform: uppercase;
		color: #FFF;
		font-size: 24px;
		text-decoration: none;
		
	}
	#footer {
		clear: both;
		background: #000;
		border-top: #F00 4px solid;
		color: #F00;
		padding: 5px;
	}
	#footer span {
		padding-left: 200px;
	}
	.width-33 {
		width: 30%;
		padding: 1%;
		float: left;
	}
	.width-33 img {
		width: 100%;
	}
	</style>
</head>

<body>

	<div id="container">
	
		<div id="header">
		</div>
		
		<div id="navigation">
			<ul>
				<li><a href="#">about me</a></li>
				<li><a href="#">home</a></li>
				<li><a href="#">pictures</a></li>
				<li><a href="#">links</a></li>
				<li><a href="#">information</a></li>
			</ul>
		</div>
		
		<div id="content">
			<div class="width-33">
				<h1>Heading 1</h1>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus, turpis eget hendrerit suscipit, nisi odio pharetra nisl, vel posuere velit lacus sed quam. Ut porta, neque a adipiscing ultricies, elit diam tempus neque, in tincidunt magna est ut ligula. Donec porttitor eleifend urna, at placerat lacus tristique venenatis. Duis porttitor placerat neque eu eleifend. Nulla dictum, erat eu dignissim ultricies, purus enim placerat nulla, ac laoreet eros erat vel nisi. Nulla egestas tristique odio eget tempor. Cras mattis velit vitae purus dapibus rutrum. Nunc et orci quam, sed aliquet enim. Donec nisi lorem, posuere eget blandit quis, dapibus sed ligula. Phasellus ut tortor a turpis lacinia feugiat vitae vitae mauris. Ut dictum lectus et nulla varius laoreet. Aliquam erat volutpat. Maecenas lacinia, libero quis placerat ultricies, nisl turpis mollis massa, eget pellentesque ipsum diam id metus. Praesent posuere aliquam augue, id fermentum purus pretium eu.
			</div>
			<div class="width-33">
			<h1>Heading 2</h1>
				<img src="http://eldain-tatoo.dyndns.org/images/Tatoo52.png" alt="" />
			</div>
			<div class="width-33">
			<h1>Heading 3</h1>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce porttitor porta dui, vel dictum lectus molestie venenatis. Phasellus in dolor purus. Vivamus ut neque justo, nec mollis enim. Donec condimentum iaculis neque, vel mattis neque varius a. Nulla enim nisi, consectetur eget ornare nec, accumsan vestibulum ante. Nullam fringilla est eu arcu dictum vitae faucibus risus euismod. Proin iaculis mauris non massa interdum hendrerit. Nam mattis, purus non consequat sagittis, enim elit volutpat orci, sit amet adipiscing tortor dolor at sem. Nunc non tortor turpis, sed aliquam quam. Nunc dictum augue a neque pellentesque bibendum. Aliquam nec justo eu odio eleifend gravida. Proin ornare adipiscing fringilla.
			</div>
		</div>
		
		<div id="footer">
		Copyright - Eldain Games<span>Contact info - Daniel_stenlund@hotmail.com</span>
		</div>
		
	</div>

</body>
</html>

[tomtefan]

ok, ty chris, i will try get my head into that =)

i just build the site of the things i know.

iam trying to learn more real html coding, and to code it dynamic.