RE: Help me with my new website!
December 5, 2017 at 8:31 pm
(This post was last modified: December 5, 2017 at 8:40 pm by 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.
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.
