So I've been working for a day on the website for my upcoming game, HAVOC. All the graphics, the layout, the design, etc are by yours truly.
Head on over, see what you think! Thanks!!http://www.havocfps.net/
So I've been working for a day on the website for my upcoming game, HAVOC. All the graphics, the layout, the design, etc are by yours truly.
Head on over, see what you think! Thanks!!http://www.havocfps.net/
All of the images are upscaled.
Could you take a screenshot, please?
I'm not going to take a screenshot when you can just go right to your own website and look for yourself.
Look at the envelope icon (contact), or the papers (blog). Every image here is upscaled at around 2x, *with* interpolation (probably cubic, at that). It makes every edge blurry. Its pretty obvious, and the images themselves were upsampled - it wasn't the browser.Rule of thumb - upsampling something (whether it be audio or image) is usually a bad idea (especially for a final version of something), because you can't create new data from nothing. When you scale an image up (or set an audio clip to a higher sample rate) you are creating no new information - you are only manipulating what you already have, to create a best-guess. There are very few exceptions to this rule.As DesertFox said, the images do look blurry/upscaled. Might wanna redo them if you like that size.. otherwise go with the smaller size.
Overall it LOOKS nice, but as a web developer, I see a lot of things that wouldn't work:- No tooltips/alt attributes for the buttons - if images were disabled, you can't find the links (IIRC it's also harder for the internet to find your info a la search engines).- So many things can be done with CSS… including spacing (instead of a ".") to space the navbar, and I THINK I see what people mean by the page loading slower - cause my own page(s) loads pretty quick even on other people's computers.- I'm only just beginning to get into PHP and javascript (to the point I really still don't know anything to critique it) but from what I've done in CSS and HTML, it looks a LOT easier to just use CSS and HTML to create everything and much quicker at that.- Are you coding this on your own (like in notepad/Notepad++) or are you using a program to make it (doesn't seem like dreamweaver or something like it so yeah…)?- Despite my nitpicking, I do find the source of the page interesting enough that I might try something for the sole purpose of working with it but overall it seems as if it'd be easier the other way.Sorry, I wasn't sure what you meant. I thought maybe your browser was causing problems as in my mind, the images look fine. The scale of the icons was changed a little, but when you said ALL images, I was a bit lost as to what you were referring to. Thanks for your tips, DesertFox!
Thanks for your hints as well, avl1991. HTML and CSS can only get you so far. Javascript and .php are required for dynamic pages.Just redrew all the icons. They shouldn't scale anymore :)
They look a lot better npw :3
I understand that. Not quite sure why you'd need dynamic pages for stuff like this though. It looks as if it's a waste of code at the moment. And by that, I'm comparing the impression I get from your site versus say… 64Digits or Facebook for instance.
You don't need javascript for dynamic pages. But anyways, you should use CSS for the rollovers on those images. Notice that if you don't have the rollover cached yet, it takes forever to load when you mouseover. A solution is to have them in the same image, the hover image below the normal one, and then just make the element big enough for one. Then, you use the CSS :hover pseudoclass thingy to make the image's position change to -32px or whatever, and 0 on the normal class. That way it doesn't break in javascriptless browsers :3
What CoolGamrSms is saying is to use CSS sprites. all icons and other elements are used in one single image file, and you work with them like that. There's loads of tutorials on it (basically you make elements of a specific size (the size of the image), and you specifiy how far to shift the "background image" to be used - the result is what appears to be "separate" images, but it's all being derived from a single file. Faster loading, and fewer queries sent to the server (something I'm looking to eventually implement in my own page).