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?
I’m having an opinion about that, so I’ll chip in again.
Generally, I think dynamic width is better, but I wouldn’t set margins to em. In this case I would think pixels are better. If you use em, the margins get bigger when you increase the font size, which I find very annoying, because it decreases the space for the text.
Of course, too large pixel margins are bad for devices with small screen width.
Fixed width sites are fine too and generally easier to design, but fluid design scales better for different output devices, as you already said. In the end it is you who decides.
(i’ll begin with an apology for being so verbose. always feel free to totally ignore what doesn’t suit you or isn’t helpful.)
you’re welcome! my first reaction is yes, but i always think good to mix personal and professional life very deliberately. lots of people post very personal information on the Web, and don’t worry much about their present or future employers finding it. this seems to work for most people, but for me that’s giving too much information to people who don’t need it. so, that’s my bias.
on the less biased side, i’d say you either need to make two sites or really tightly architecture the one site so that you can suit both audiences. the same way no employer reads a third page of a resume (and probably not a second), no employer is going to leaf through a gallery that’s, say 100 images. if someone’s reviewing your work, you’re probably not the only one they’re reviewing. reviewing your work is their job, the grunt work they have to do to get something they actually want to do done. so making it fun and easy for them is paramount, as is making the experience as immersive as possible. you want them to go look at the next picture without thinking about it. my big advice in this case would be to eliminate the need to switch galleries to keep looking at your work.
on the other hand, you don’t want an employer interested in animation skills leafing through examples of how you built materials. in the long term for a professional site, i’d suggest having one gallery you can browse in different ways, so that employers can always choose what they want to look at and remain in the gallery experience. that would mean a more dynamic site and more scripting, but i’m sure you could do it if you wanted and had time.
basically, if you’re doing a professional site, you’re selling yourself. think of the web site as a cross between an advertisement and a physical gallery. you want your best work out front, where it can grab people. you want to tailor what they see so they get the best impression. and despite how it might feel, it’s always better to well-crafted and brief rather than overwhelmingly large. that isn’t to say you shouldn’t make it clear when you’re presenting a subset of your work, or provide a way for them to see more. my suggestion is choose a reasonable amount of time for someone to review your work, and design for that experience.
i do think a more informal site can (and should) play an important role professionally as well, because community and contacts are so hugely important. in that case, the more frequently you update the site, the better. community members like to see works in progress, find out more about how you work and what makes you tick. instead of an advertisement, the content is more like one side of a conversation. i definitely think you should try to reach both goals, but done in one site that might be complicated. it’s probably easier to manage in one’s head as separate sites, rather than various areas in one site with different purposes, audiences and traffic flow.
it’s very hard for me to say because i’m not sure what type of work you’ll be doing in the next few months. are school and my projects meaningful divisions? for the audience i mean (they of course make a huge difference to you). if your course work isn’t very different from the type of work you do on your own, i wouldn’t make that distinction to visitors because it’s just an unnecessary complication. i’m guessing most employers would just want to know what tools you use and how good you were at using them. i’m also guessing that a more casual audience would likewise be focused on your tools, techniques and demonstration of skill rather than whether a project was assigned to you or not.
i also think it matters what you want to do. if you want to do cg illustration, for instance, i’m not sure medium matters enough to make the division, and genre might be more important. if you want to work in movies/media, portion of workflow might matter more than tool (modeling, rigging, animating, scripting/physics, etc.). if you don’t have a specific focus yet, tools work fine, but as you hone in on your target audience, adjust your architecture to meet their needs. i’d bet people here would be great at giving you advice on what specific types of employers are looking for.
i’m very much a Web person, so i think dynamic sizing is better. print people cite many studies that beyond 30 characters or so wide, readability goes down. my answer to that is that people can size their window smaller, but many users want everything to adjust to them without changing their setup at all (especially browsing full screen). monitor sizes go up to 2560 x 1600 (for editing HD), and on laptops and tablets go down pretty far. i wish i had a silver bullet for that kind of range. it’s true that sizing your margins in ems would have a sort of inverse of what many would want as you size your font up, but some designers would argue that this would put the necessary amount of whitespace between text and edge of the page. you can specify the margin (or the content) in percentage, which would base layout off of window size. also, setting a min and max width (there’s a script called minmax.js to make those work in IE 6, though i forget where to get it) could give you some control over the extremes.
right now, the design appears to have been made mainly with text in mind. i realize that’s probably not true (especially after glancing at the test-01 and -02 css files), but the main image i’ve seen so far (the dalek; are there more?) seems a little less deliberately placed than, say, the text of the home page… you can use the image to take up more horizontal space, but keep the text a reasonable width.
the benefit of using CSS is that you can place your objects pretty much where you want them. you can use freestanding renders to violate the typical web rectangle and make your design a little unexpected. or add faded elements to backgrounds. you could even just make a spotlighted image and place it prominently on each page. but if sharing your work is the main point of the site, get visitors hooked on it immediately you probably already have plans for this (hence the empty divs), but i thought it worth mentioning. again, not so important for social purposes, but the design of a professional site should promote and enhance your work.
Hmm… How about (and by the way, I don’t know how this would work) I use that “Dr. Strangeswitcher” on HTML Dog to make it all one page, and just set all the galleries in different divs, which can be turned to display: none; by default, and when you click a link, it turns to display: block;? And I can use the Suckerfish:target (or whatever it was that was used) to get it to work in IE?
if you don’t mean the same navigation, and you mean a sort of highlights gallery on the homepage with an interface to advance, go back, etc., then that would help a lot .if you mean with the same navigation with different functionality, that would make it more trendy (which can be very good and help show you’re on top of new technologies), but less usable (no bookmarking individual elements) and still the same experience. it’s not the load time. think of it this way: instead of surfing the channels, every time you want to look at the next show you have to go to the guide. how many channels before you decide it’s not worth it? now imagine you’re doing this for work and not entertainment.
Well, you’re making me think of something else now, so ignore my last post, and read this one.
How about using exactly the same method as I have now, but providing alternate links in an organized matter. For instance, on the Index page, linking directly to the gallery (and have this as a separate page that has all my stuff on it at once, in an organized array), and then, on that page of the gallery (possibly above each section), link to each page separately, so people can browse that way, or through the dropdowns. Or, perhaps, having the main Gallary page to have only my greatest work on it from each category, and then let them browse to the other stuff as well.
As far as the dynamic layout, maybe I could try to have each paragraph 30-50 ems wide, and then have the content longer, so possibly the paragraphs form collumns… Or, something like that… I tried to make it go into collumns once, and I could only get it to work in Firefox.
now you’re basically proposing what i was thinking of an eventual solution: multiple ways to browse your gallery. the more efficient way to handle that is scripting of some sort that handles tags, so that one image could have, for instance, the tags portfolio (for chosen best), Blender, and scifi. there are free gallery tools out there that will do this, but most will probably need a database backend. technically, though, you could probably do it all in one page of xhtml and DOM scripting.
either way, it’s a big enough project you might want to put it off or develop it in stages, depending on your work load and when you need your portfolio published.
i couldn’t say about Firefox. i think it’s still gaining ground, but browser stats seem to be getting more and more site dependent. i can say that i believe there is a free javascript to implement columns like the CSS 3 standard Firefox supports.
the one piece of general advice i’d give you is not to marry a single solution yet. brainstorm, and if you have the time, make some mock ups and designs. put the experience you want peolpe to have first and let everything progress from there. look at the sites of professionals you admire, and maybe check out the personal sites of others you admire. there’s a lot of technologies that you can use to solve this design problem, and even more techniques you can use.
Trouble is, I don’t understand DOM or Java scripting. That bit of javascript I have is just the Suckerfish:hover from HTML Dog. I don’t even know how to customize it, like getting it to hover over other page elements.
Or, perhaps, maybe that’s all I need? Perhaps the Suckerfish:Shoal will work all my needs with some clever Javascript…
Although, one thing I know I can’t have is anything server-side. Already tried includes, and it doesn’t work. The site I’m using as a host is not meant to be a host, but I’m able to use it because my Dad has access to the server. he works for the Salvation Army, as you could find out by going to the base site, qso.com.
Hello I stopped by because I am just starting my own website. Anyway your sites background of where the text is go with a white or black. Then just make a fixed background of blue maybe put in a grid pattern there and you got a much nicer looking website. Do whatever you want I’m still figuring out stuff on my website. The reason for white or black is it’s easier to read. Plus making all that so blue will kind of have an effect on people considering it might hurt there eyes and make them spend less time on your website. If you add a white background to where there reading it will make it more inviting kind of contrast the colours. For example BA.org uses basically all white and orange. White prevents eye sores and orange adds the sights color. The perfect balance of color and black and white is one of the many secrets to the websites. Well at least that’s my estimate of things I am noob though so please if anyone disagrees contradict.
I find black on white to be too much contrast, like trying to read red on blue. A bit less contrast seems to be easier on the eyes. The text is dark blue, almost black, and the background is light blue, with the back-background even lighter blue. This makes it so there is a bit less contrast, but not so much that its blindingly light or hard to see dark.
I posted on your thread, I find yours kind of ugly with the white on black. Looks unnatural, like writing in white crayon on dark grey paper. Not something you would normally do.
Pardon me for asking but did I piss you off or something? I just stated some simple advice and your telling me my site is ugly? Now if you weren’t insulted by my previous post or something I said I reccomend a little more politness in your posts. Now from what I can tell I didn’t say anything that should offend you I even stated my stance in this world of web designers by calling myself a noob. Now please if I offended you in anyway please say so. I just don’t think it’s very polite to call someone’s site ugly.
Argh, I had a good post for this, but I pressed F5 and it was deleted, so I’m sorry I sound rather mad right now.
Long post short, I didn’t mean to sound mad, and I was only stating my opinion. I don’t feel like typing out an apology for the third time, so just know that I didn’t entirely mean it the way it came out. Not so much ugly as noobish, really. Or, as I think I said in my original post, “Naive web design.” Learn proper use of code, trash Frontpage, and separate layout/look from the content.
Sorry, I’m pissed off because of my F5 button, but beleive me when I say I’m not mad in any way at you.
Alright, I’ve been working on the layout, but so far I can’t figure out how to get the page width to be dynamic, and at the same time only have 30em width text areas, without screwing with the rest of the layout. Any ideas?
i’d let go of the 30em width text areas. after looking for a particular JS/DOM scripting solution i had come across once (for some reason i can’t seem to find it), i’ve read enough opinions on the topic to feel that it’s a misguided attempt by designers to apply print standards to the web. for one thing, people look at sites on lots of different devices, with screen sizes and resolutions that have a huge range. the column solution only works if you have content that precisely fits 1 screen. text columns work in print because you don’t need to scroll up, then down, then up again, then down again to read.
my suggestion is to make a flexible layout that uses part of the width for one or more images, and that those images show vertically in line with the text if the window is too small. that way you show off your work, create a layout that’s readable at most resolutions and font sizes, and don’t aggravate visitors on cinema displays or HD editing resolution monitors who are used to resizing their window to suit their own comfort. if at standard font size, it stacks at 640, is optimally readable from 1200 to 1600 wide, and people with window sizes (not resolutions) above that can make their window smaller, i think you’ve covered all the best practices basis.
Alright. Try it now. I haven’t updated the menus, though I’ve updated the layout and also made sure it works on all sizes (tested the range of 640x480 to 1440x900).
Ok, I’ve updated again. Code is now cleaned up with the Suckerfish in a separate file.
Also, I’ve made a testing page for a possible feature of my gallery. The testing page also has my newest idea for the menu layout.
Edit: I hate to quadruple post, but I have one more thing to add, so I’ll just put it in here. I’m still looking for critique, as most people I ask here just say something along the lines of “Oh, that looks good!” and nothing else. So, smite me with your judgment!
i like the by tool or by genre choice, but i would strongly advise against Blender being a label for two different categories. labels in your navigation should always be unique, unless you’re talking about repeating sections (like title, date, etc.). i also don’t see a need for your navigation to go more than two levels deep. don’t think about a complex structure before you need to. again, you want employers and other professionals to see all of your best work as quickly as possible.
So, I should disable or simply delete the third dropdown level, and put my best artwork on the front page? Or should I have a main Gallery page to put my best artwork on, and then they can get into the sub-galleries easily from the main gallery page? But would that not be very good, because they would have to view the main page and then go to the gallery page, so should my mainpage act as a gallery page?
Or, should my gallery be a very complex intance of those targets?
