Nice site, better than some company makes which tryed to sell me a site.
Point that company to this thread/my site. I don’t hide my code. They can use it if they want. BUT… Only if they link back to my site :D.
Tynach! Send e-mails to companies and try to get some bucks by making sites, dont let them know your age if you are under 18, and make it all sound like legal money transaction in case you cannot legfaly do business.
… I was being sarcastic. There are better templates out there that are free to download, most of which were pointed to in this thread.
I’ve been working on my new design, and I’ve got a bit of a prototype working. It’s on the first page, and on my Blender page.
i checked the link again as you said y did an update, now the site is not uniform.
You should make it uniform or just give up making sites. Pro sites are uniform as you know
Which is why you read my previous post. Some pages have the new layout, some don’t. It’s so you can tell me which you prefer.
Yes, we know, but, like j said, pro sites are uniform, so you need to make it uniform.
Tynach,
generally I like sites with vertical navigation better, but that’s a matter of taste really. Seems you also mastered those tricky layouts with floated navigation already. 
In case you still want to read a bit about those, there’s this nice site with lots of info about floats and floated layouts, in case you haven’t found it already:
Also the other tutorials about lists and selectors and the listamatics are really good, helped me lots when I learned standard compliant HMTL and CSS.
Oh, and there’s also an irc channel #css on freenode (server: chat.freenode.net:8001) for live help. I always wanted to mention that one too.
Yes, the floating was a bit of a hassle, but in the end I found that I was trying to make it more complicated than it really is. I basically used the same technique described there, except both the sidebar and the content have left or right borders, respectively. I thought it would look like 2px width border, but it doesn’t. I did this because sometimes the navigation is longer than the content, and sometimes the content is longer.
I’m thinking of adding a third column for news, or RSS feed for Blendernation or something, and that can always be set to display: none; on the blue theme, or set below or above the content.
Thanks for the info on the IRC. I’ve used IRC before, so I think its great to see a good real time help source.
I’ve had lots of people at school and home tell me the blue theme was better, so I’m sticking to it. I’ve updated the site to fix some drawing problems (background colors of the header images didn’t match), and to upload some more content.
And, although you can’t see it, I’ve worked on the orange theme a lot.
It’s still not uniform Tynach, pro web designers make their stuff uniform.
I know. It’s because it isn’t finished yet, and I’m still testing out the designs. I’ll bet you’ll hate the site completely when I have four or five designs on the whole thing at once, all for testing purposes.
Hey Tynach,
so it’s the blue theme now that won :). It’s good work overall, but I’d like to mention two issues I’m having.
-
I would also really recommend to not use the strikethrough style for visited links, it’s really annoying and hard to read for me. I’d like it better if you use, for example, a different color, maybe slightly duller than the white you use now, to distinguish.
-
You might want to give the text in the content container some breathing room, like some pixels padding. Right now it hugs the rim of the blue content background which doesn’t look nice to me. Just about 5px room or so might look much better, maybe try it out?
Keep up the good work, you’re doing fine so far.
Alright, its all uniform now. And I got rid of the crossed out links for ya.
And, I’ve tried that, but in IE it messes up the round corners really badly. But I’ll have another go at it.
Now, I just need to figure out how to make the same theme/layout less bland. Any suggestions?
Edit 1: Figured out the padding, but the padding for the heading (the Welcome To… part) only works in IE.
Edit 2: Nevermind, I just took it out.
how much feedback do you want, and in what areas? usability, accessibility, design, information architecture, standards compliance (which you seem to have down pat btw), content, audience (defining, meeting their expectations, etc.) and/or professionalism?
Any and all. Be as harsh as you want.
Although, for the most part, its the code I’m wondering about.
ok, then my next questions are:
what do you want your site to accomplish? let community members know what you’re working on? show off your work for acceptance in programs or at jobs or what have you? the difference between design and art is functionality, and to analyze a design, purpose has to come first.
who’s your audience? i assume multiple audiences, so any ranking is good.
what do you want your site to communicate?
i realize these may be more in-depth than you’re thinking, so if you don’t want to go there, no biggie.
in terms of code, both your html and your css seem good and clean. points for using ems for measurement, but be careful because they nest. that is, they’re not an absolute measurement but relative to their container. there are some divs that are empty and seem to have no purpose (i haven’t taken a hard look, so i’m not sure know if you’re using those for spacing and/or directories), and your javascript doesn’t test for browser support of the getElementById and those types of functions (older browsers don’t). you use margin: auto; for your centering, which i’m fairly sure won’t work in IE. i know it won’t work in 6, and i can’t remember if they’ve fixed that for 7.
The javascript is only for IE, and I know it works. It’s only for mimicking the :hover CSS psuedoclass. The centering also seems to work in IE, even IE 6, which I have here to test it on.
Many of those divs are for the round corners, or for my other themes (in that directory, try downloading the files and switching the style to test-01 and test-02).
The site tells you what its for on the index page.
that makes sense, since IE 6 & 7 both support getElementById. W3Schools puts its support back to IE 5 and Firefox 1. it’s fairly uncommon to support earlier than that, but graceful degradation that doesn’t kickback errors is also common. every script i’ve come across that uses DOM scripting tests for support, including the ones i’ve seen at AListApart, which you cite. to quote them, “You already know to use object and method detection to determine if a script can run in a user’s browser.”
it’s not a big deal and probably not an issue for your site, but you seemed to be interested in best practices. that and the above is why i mentioned it.
i didn’t have IE 6 to test on, but i can see now that it is centered there. i can also say it’s not due to margin: auto; but the text-align: center you have on the body.
i thought it might be due to stylistic elements, or ones that weren’t there in this design. especially the invisible banner.
not for me to get into design, usability and other stuff (if you are interested). “This website is for basic information about myself, and my artwork,” tells me what you want to put there, not why or what you want that content to do. for instance, if what you want is to promote yourself as an artist, i’d suggest designing a homepage that showcases your best piece so people can see it right away. customize the design to suit both style of your work and the type of work you want to do. maybe make the blues more neutral, or choose a more neutral hue altogether, so that the design complements with a wider range of images. and assuming the audience is mostly other cg artists, i’d say rework the layout with larger monitors in mind. usability-wise, i’d say try to make it fewer steps to your artwork, and have one gallery someone can just click through, with your present categories either as tags (optimal) or as information with the image.
but if, perhaps, you just want a personal gallery so that friends and acquaintances can enjoy your work and learn more about you, then none of that is very relevant. the design works fine, and you don’t need to worry about grabbing and keeping people’s attention. the multiple gallery setup helps people narrow in on exactly what they’re interested in. with a more general audience, however, you might want to change the background graphic for the navigation to one that doesn’t put a line behind the text when someone has increased their font size. or change the code and css so the background is always at the bottom behind the nav. it already scales up better than 99% of the sites out there, which is great. also, since in this case the galleries would showcase all your work rather than selected best, you might want to consider categories more general than Dalek and Stargate so your menus can grow more easily. since you’re beginning a program, i’m assuming you’ll be producing tons of new works, and with a variety of subjects, so rapid gallery growth could be a consideration.
without knowing more, all i can say it’s a solid site with a clean design that works in modern browsers (i should have checked in Safari while i had the opportunity, but i’m sure it’s fine), validates great, and is very easy to use at this stage. if that’s all you wanted (no reason you should want more), you accomplished it superbly.
Please, post comments/critique on anything to do with the site.
Thanks, kobaltkween. I find that very insightful, and I’ll try to incorporate that into my site.
This site is supposed to be for both future employers, and for friends/family to look up my artwork. So, its more multipurpose than it might ought to be. Do you think I should have two different sites, one for professional use, and one for friends/family?
Do you think the menus should go somewhat like:
Home
3D
>School
>>3DS Max
>>Maya
>My Projects
>>Blender
>>Cinema 4D
>Other
2D
>Gimp
>Inkscape
About Me
Or, what do you suggest?
Also, instead of using width: 50em; should I use margin-left: 5em; margin-right: 5em; or something like that instead, so it fits with all screen sizes more dynamically?