I've finally built a website...

Started by Technocrat, Tue 27/11/2012 04:21:31

Previous topic - Next topic

Technocrat

I think I've officially made the transition from "make-believe developer" to "cargo-cult developer" by finally cobbling together a new website for Technocrat Games! So, for all of your up-to-date information on those tedious affairs I make, and the new place to download games from, head over to the official site!

All feedback is appreciated. Also, I'm in the process of putting together a list of links on the left-hand side of the page, if anyone wants me to point visitors in the direction of their own site/blog.

MurrayL

#1
Oh god - tables :~(

You should have no problem creating all the nice menus you have there using just the images, and line breaks between them (
, not </br> as you've used in a few places. The
 form is only used in XHTML, and the slash comes at the end). There's no need to use tables, which are now almost-universally regarded as bad practice (except for, y'know, displaying tabulated data).

You can also create a gradient background much more easily (and with IE compatibility) by making a 1px wide gradient in the graphics editor of your choice, then tiling it horizontally with:
Code: CSS

background-image:url('bg_gradient.png');
background-repeat:repeat-x;


You can add a 'real' copyright symbol by using '&copy' in the text (it'll get replaced with ©).

Finally, try adding some CSS rules to your links so they match the rest of the colour scheme!
Code: CSS

// Example from my website
a:link,a:visited
{
	text-decoration:none;
	color:#c52b1a; // Prevents links from changing colour after they get clicked
}

a:active
{
	outline:none; // Removes the horrible dotted outline that some browsers add when you click a link
}

a:hover
{
	text-decoration:underline;
	color:#c52b1a;
}


Hope that helps, and doesn't sound too negative! The site looks great otherwise ;-D

selmiak

#2
The one screenshot from Technobablon 1 caught my eye immediately... looks like replay value just to see how the trance now looks like :D
There is a typo on the about page: Technocrat Games didn't began to release...
The facebook button on the left is always stretching over the rest of the layout, that looks very off.
interesting blogposts, but when I want to go farther back than the last post there is an error...

To add on what MurrayL said, it's &copy; not &copy , don't forget the semicolon, though you can let it out ;)
also
Code: css

background-attachment:fixed;

is what I prefer for gradient backgrounds that are very huge in height (higher than the biggest screens available at the moment). Another posibillity is to use
Code: css
background-attachment:scroll;
background-color:#rgbrgb;

and add the color of the bottom of the image as background color. But sometimes photoshop and firefox interpret rgb values differently, so there is a cut in the otherwise nice gradient, that's why I prefer fixed background images. And gradients in PS are strange anyways. You can use dithering on gradients, which looks better than undithered gradients, but only when using the gradient fill tool (hidden behind the fill bucket). There is a setting for dither on top of the screen then. Use the shift key for a straight line for the gradient and cut it like 3-5 pixels wide, not 1 px, so the dithered pixels actually work on the viewer. The filesize will be not that much bigger. Of course save as png. Maybe the dithering for gradients on objects was added in CS6 though, dunno...

In case you use a long bg image I'd suggest you add a section as high as you header image in the color of your header image to the top, that makes it look like the header is expanding and only in the middle there is something written on it. modern stuff and so...

maybe some php wouldn't hurt, it's way easier to manage your pages with php magic (includes work like a charm for reappearing stuff like the header with navigation and footer) and some SQL magic.

Anian

#3
Since the rest of the site uses pixelarty images, I'd change that smooth gradient into a dithered one. Also, when you get comfortable with basics of html, I suggest going for Wordpress and the big selection of free pre-made themes, with some basic understanding of html, css and php, which I'm sure would take you a day or two (actually you just have to understand what the code is about and modify it slightly). You'll get a blog type of site, that you can modify easily with news etc.

I suggest http://www.w3schools.com/html/default.asp as a really quick way to find what you want to do and modify on your page, it's a cheat sheet but with explanations (it's got HTML, CSS and Javascript/PHP instructions with great practical examples).

I agree with said background solution, it's better to use a smaller image that's 1-5px wide and then repeating it, it's not that important for users with fast connections, but it's better overall impression if it loads fast anywhere, it takes up less bandwidth and it's the professional way of doing it.
So make a transition in the image from black to blue and then make the background color blue - that way it'll seem like the image goes on forever downwards, but actually you make a rather small image.

Quote from: selmiak on Tue 27/11/2012 15:32:23
Code: css
background-attachment:scroll;
background-color:#rgbrgb;

*pedantic cough*it's actually #rrggbb since the codes are determined in a hexdecimal system from 0-F and so 2 digits (16*16 combinations) gets you the 256 colors you can use for each channel*pedantic cough*  :grin:
I don't want the world, I just want your half

selmiak

#4
Quote from: Anian on Tue 27/11/2012 17:16:32
Quote from: selmiak on Tue 27/11/2012 15:32:23
Code: css
background-attachment:scroll;
background-color:#colour;

*pedantic cough*it's actually #rrggbb since the codes are determined in a hexdecimal system from 0-F and so 2 digits (16*16 combinations) gets you the 256 colors you can use for each channel*pedantic cough*  :grin:
I thought about changing it to rrggbb actually, but then thought neither of it actually works and rrggbb sounds like an angry dog with a stick in its mouth offering you to throw it, but not giving it to you, so I thought screw it, nobody will point it out anyways and it is easier to understand, oh how wrong I was ;) :D

SMF spam blocked by CleanTalk