Help me with my new website!

[KevinM1]

Taking time out of my little forum vacation to answer this:

You have at least three different main font colors going.. perhaps four (it's difficult to tell if the blueish color you use in the header is the same as the purpleish color you use in the right column).  WHY?  What made you think this was appealing or attractive?

You use gradients everywhere, including for each of your navigation items.  WHY?

You use gold font, at times over a gradient gray background, for your navigation.  WHY?  Can you not see that it's incredibly difficult to read?

It's possible to do a dark layout well.  Look at Ars Technica.  When in dark mode, they use the following colors:

Dark gray for the main background
White for main text
Medium gray for secondary text
A slightly darker gray for tertiary text
Orange and green accents (logo, main navigation items)

The bulk of it is dark gray, white, orange, and green.  Four colors, with two of them being black/dark gray and white for readability (even though it's not 'cool', black and white are the best colors to use for text you expect people to read).

Regarding fonts, sites typically use two or three, with one each of serif and sans-serif.  Again, look at Ars Technica.  The bulk of it is an assortment of sans-serif fonts, but the headlines are serif.  This makes the headlines stand out from the rest.  It draws the eye.  You use the same font everywhere, and inexplicably have your navigation links bold while the category names (like "The HTML5 stuff") are a normal weight, which, really, is backwards from what it should be.

With sites aimed at Western audiences (meaning, people who read left-to-right, top-to-bottom), the audience's eyes will always start at the upper left of the screen.  What does a rotating color wheel have to do with your site?  Why did you add it?  This is an example of the 90s design we've been chuckling about... it's a flashy-yet-cheap looking addition that was plopped down on a page just because.  It serves no obvious purpose.  It doesn't look good.  It's inexplicable and confusing and doesn't belong there.  Similarly with the other animation at the top right of the screen.

A website's design is its UI.  And if you're interested in making software - whether it's desktop apps, mobile apps, games, websites, whatever - the UI matters.  And the things that are wrong/bad with your site's design aren't website-specific.  You can't just wave this away because it's a site, and you're not interested in making more sites in the future.  If this was an example you used in a school presentation, or work presentation (think: Powerpoint), or as part of a portfolio you were showing to a potential employer - for any line of work - you'd be laughed out of the building.

I'm not saying that to pick on you, or to be mean, or to somehow elevate myself above you.  Your website has no bearing on my day-to-day life.  But as a person who has learned a ton from programming related forums, I do my best to pay it forward.  I was a moderator at PHPFreaks for several years, which was one of the most popular web development forums on the web before Stack Overflow became a thing.  It was an unpaid, volunteer position that I dedicated a ton of time to because other people spent that kind of time helping me.  And that kind of effort includes being blunt and honest when it comes to site critique, because far too often amateurs ask their friends and family what they think, and those people don't have the heart to say it sucks.

It sucks.  

But, we've given you hints/ideas/suggestions on how to fix it.  The real question is whether you're going to sit there and deflect while trying to play at being a telepath and thinking you have our motivations figured out (hint: you don't), or if you're going to actually listen to what we've said and attempt to fix it.

Now, I'm going back on my vacation.

PS: your webhost sucks, too.  I tried accessing your Pacman game, and it tells me your website is 'asleep'.

[FlatAssembler]

Look at Ars Technica.

I've looked into the Ars Technica website. Well, yes, it look pretty good. It's a bit illogical to fix a div with a white title and no background on the top of the browser window when the background is mostly brighter and makes the title unreadable when you scroll, but it doesn't make the content difficult to read.
I've never actually thought that the light-green color can be used to drive attention to a part of a text.

A website's design is its UI. And if you're interested in making software - whether it's desktop apps, mobile apps, games, websites, whatever - the UI matters. And the things that are wrong/bad with your site's design aren't website-specific. You can't just wave this away because it's a site, and you're not interested in making more sites in the future. If this was an example you used in a school presentation, or work presentation (think: Powerpoint), or as part of a portfolio you were showing to a potential employer - for any line of work - you'd be laughed out of the building.

Look, I come from the world of competitive programming. I learned programming to basically be able to make a program that works as quickly as possible, and the efficiency isn't valued much and the design isn't valued at all. Obviously, the skills I learned there are counter-productive in real-world programming.

PS: your webhost sucks, too. I tried accessing your Pacman game, and it tells me your website is 'asleep'.

A similar thing appears to happen with your website. Sometimes the webpages load very fast. But every now and then it takes some 20 seconds to load a page or it doesn't load at all (the browser says that the connection to the server can't be established or that the connection timed out). Is it possible that your server-side scripts run into an infinite loop sometimes?

[KevinM1]

Look at Ars Technica.

I've looked into the Ars Technica website. Well, yes, it look pretty good. It's a bit illogical to fix a div with a white title and no background on the top of the browser window when the background is mostly brighter and makes the title unreadable when you scroll, but it doesn't make the content difficult to read.
I've never actually thought that the light-green color can be used to drive attention to a part of a text.

You'll note that I didn't say copy Ars, but rather to look at it.  It does a lot of things right, specifically for readability.  Doesn't mean it's perfect.

A website's design is its UI.  And if you're interested in making software - whether it's desktop apps, mobile apps, games, websites, whatever - the UI matters.  And the things that are wrong/bad with your site's design aren't website-specific.  You can't just wave this away because it's a site, and you're not interested in making more sites in the future.  If this was an example you used in a school presentation, or work presentation (think: Powerpoint), or as part of a portfolio you were showing to a potential employer - for any line of work - you'd be laughed out of the building.

Look, I come from the world of competitive programming. I learned programming to basically be able to make a program that works as quickly as possible, and the efficiency isn't valued much and the design isn't valued at all. Obviously, the skills I learned there are counter-productive in real-world programming.

Yup.  While being able to solve problems quickly is nice, those kinds of competitions are typically pointless dick waving competitions that have no benefit to real world programming.  Readability isn't just an important consideration with UI, but with code itself.  Good code is self-documenting.  Unless you're writing code for a rocket going into space, no one cares if you can shave off a few ms here or there from its execution time.  What they will care about is whether or not your code can be read and understood easily, so other people (people on your team, strangers you're asking on Stack Overflow) can actually follow along and do what they need to do.

PS: your webhost sucks, too.  I tried accessing your Pacman game, and it tells me your website is 'asleep'.

A similar thing appears to happen with your website. Sometimes the webpages load very fast. But every now and then it takes some 20 seconds to load a page or it doesn't load at all (the browser says that the connection to the server can't be established or that the connection timed out). Is it possible that your server-side scripts run into an infinite loop sometimes?

I don't know.  This isn't my site.  I'm not a member of staff here.  A purple name merely means someone who has donated some money to address site maintenance costs.  If you've noticed something that isn't quite right from a technical standpoint, talk to someone with a red name.

[FlatAssembler]

The way I've written the code, I can't really change the design easily. I've set the style partly using CSS in the head, partly using some dirty JavaScript tricks, partly using inline CSS and partly using the deprecated HTML tags. That's going to slow me down quite a bit. Nevertheless, I will try when I find some time.

In the meantime, when do you think it's right to use gradients? The anchor to the top in form of the jumping ball at the bottom right of the page looks a lot better if the gradients are used than if they aren't, right?

[bennyboy]

The way I've written the code, I can't really change the design easily. 

This is a fundamental rule in web design: separate the design from the content, and never the twain shall meet.

The first thing you do is make a "shell:" something that looks like your site but with no content.  That's why when you go to website design tutorials, the text is often in Latin-- it's to show that the content will be whatever you want.

The background should be light colors of low saturation, i.e. white or pastels, and the font color should be dark: black or maybe navy blue.  I STRONGLY recommend starting a new site. Build the visual appearance entirely using CSS. Doing the site right from the start will save you many dozens of hours of your life later.

[FlatAssembler]

I've build some template:
http://flatassembler.000webhostapp.com/template.html
Does it look good to you?
One problem I've encountered is that I suppose the lines would be too long to read on a wider display than the one of mine. However, if I try to center the webpage, the bouncing ball runs off of the screen.

[bennyboy]

Okay, first of all, I think the general appearance looks a LOT better. I'd still lose the black/gray gradients, though. And the main body really should be white rather than black, with dark text, like your style #3. If you add a couple inline images to that white wall of text, then you'll have a much more presentable looking page.

I can see that the divs for your navigation are done in % width. That's good, but for a very wide screen, you don't really need like a 1000-width navigation bar. In addition to width: 25%, I suggest you also add max-width: 300px (or whatever). This will leave more real estate for the text. The problem you mentioned with wide screens is pretty common: that's why until recently, most websites were maybe 1200px wide centered in a column, with nothing but white space on the sides. But now, most companies are making use of the full screen size, and people are getting used to that. Websites no longer look like online magazines with column layouts, but more like documents that you'd usually work with on a home computer.

Also. . . kill the bouncing ball. Its only function is to distract.\

One more thing: I like your svg gradient corners, but in my browser (Chrome), when I resize the window, the left corner ends up looking gimpy; something about the polygon calculations isn't working when the div changes shape. I can say 100% that instead of .svg you should just use a .png image, of a size maybe 512x512. You can make something like this in Photoshop very easily. In fact, you could just do a screen capture of your existing .svg graphic, and put that in there as a background image for your corner divs.

Normally, you'd want to use .svg only if you have a scaling logo or something that needs to keep perfectly pure lines, or a font that you want to do a zoom effect on without it looking pixellated or whatever.

[Catholic_Lady]

Better, but still looks a bit old fashioned to me. I'd stick with a cleaner look using white, black, grey, and blue.

[SteelCurtain]

Dude. Use Bootstrap or something. Jaysus. And you should not be using inline styling. Making wholesale changes is awful. Create a .css file and include it in your html header.

Why do you need to use color gradients at all? They do not look good. Ditch color gradients. Download a bootstrap library (Bootswatch has decent, free ones) and keep your style constant, simple, and consistent. Also, drop the animations. They are not cool. They are corny.

As far as the OP, the PacMan game is unplayable, but I mean, good on you. I sure couldn't (and wouldn't) make svg games. The clock is cool as hell. These seem like school projects rather than something that is useful or timely, but I think they're at least interesting.

[FlatAssembler]

Okay, first of all, I think the general appearance looks a LOT better.

Thanks. It took me hours to do that.

And the main body really should be white rather than black, with dark text, like your style #3.

Well, light gray Verdana on a black background looks quite legible. It's not hard to set #3 to be the default stile if you think it's better.

In addition to width: 25%, I suggest you also add max-width: 300px (or whatever).

The way I've written the scripts, I think I'd have to change most of the code to do that. I can't both set the scrolling of the overflow in the main and width of it to be 100%, the main just floats below the navigation bar if I try to.

Also. . . kill the bouncing ball. Its only function is to distract.\

Really? I thought it was quite popular once to have an anchor to the top in the form of some arrow moving up and down. I've decreased the initial speed, so it doesn't cover the text in the section of any of my pages, I think that's enough.

I like your svg gradient corners, but in my browser (Chrome), when I resize the window, the left corner ends up looking gimpy; something about the polygon calculations isn't working when the div changes shape.

I've also noticed that, and I believe I fixed it now. Can you test it again in your browser please (I don't have Chrome on my computer.)?
I've also dodged it to work in Firefox (where the clientWidth method apparently doesn't work for SVG elements).
It still doesn't work in Opera, but I think it has to do with CSS rather than JavaScript or SVG. But that's the fact of life, if you aren't using table layout, it doesn't look the same in all browsers.

I can say 100% that instead of .svg you should just use a .png image, of a size maybe 512x512. You can make something like this in Photoshop very easily. In fact, you could just do a screen capture of your existing .svg graphic, and put that in there as a background image for your corner divs.

Well, the webpage already takes like 5 seconds to load on my computer (my Internet speed is 3Mb/s), so I don't think using PNGs is a good idea.

As far as the OP, the PacMan game is unplayable, but I mean, good on you.

What exactly does it do on your smartphone? I've tested it on Samsung Galaxy SIII Mini and it works there.