Portfolio- Alec Moody- layout critique

AlecMoody

Check out this new layout and tell me what you think of the page scaling with small windows/lower resolutions.

www.alecmoody.com/newsite

According to my google analytics ~ 15% of my traffic uses a resolution small enough to cause the page scaling. Additionally, 4% use a browser that can't run run the css3 code to perform the scaling. From a functional standpoint a user needs to be deficient in both categories for the layout to not work as intended. My hope is that this reduces the number of visitors with layout issues into the 2-3% range without having to compromise the large images. Additionally, of that 2-3% probably none are employers.

I'm not really interested in content critique as I have a bunch of new stuff coming in the fall.

Snader

You don't need CSS3 to do this?

Just a simple CSS2 thing will suffice

Have a width: 100% for the container and then a max-width of 1430px for the container. No idea why you're using them backwards right now...

Aside from that, IMO it's better to have the small-screen version load as default, and then use the CSS to make a large-screen version for those with better hardware. It's probably safe to assume that those non CSS3 devices are phones or older PC's, and as such also have the smaller screens.

Isaiah Sherman

That's pretty snazzy. I'd suggest some cushioning on the sides, though, feels a bit claustrophobic. From changing the size of the window, it appears to work nicely.

Shoy333

Don't really know much about website layouts but I just wanted to mention how absolutely beautiful your texture work is by any chance have you ever done any breakdowns or tutorials on your texturing process? Really impressive stuff man!!!

polygoo

oh awesome you added dynamic re sizing, only crit is to add some padding around the whole thing to give it some breathing room

ZacD

Shoy333 wrote: »

Don't really know much about website layouts but I just wanted to mention how absolutely beautiful your texture work is by any chance have you ever done any breakdowns or tutorials on your texturing process? Really impressive stuff man!!!

http://www.3dmotive.com/training/photoshop/hard-surface-vehicle-texturing/
http://www.3dmotive.com/training/3ds-max/asset-workflow-series-the-briefcase-part-1/

AlecMoody

Shoy- I have one texture painting video out on 3dmotive at the moment with another coming at the end of the month. Both videos teach different aspects of texture painting- the first is more focused on providing a flexible approach you can apply to your work where as the second is more focused of speeding up your workflow.

Haiasi- Yeah a few pixels of padding on the scaled down version helps a lot.

Snader- I guess the only css3 I am using is for the image rollovers. So browser compatibility is a non issue


Edit:
Hey Alan-

Yeah, padding is definitely coming. I think ~ 20 pixels on each side will help a lot without totally killing the image sizes

mr_ace

the layout and presentation is great, i think your name and the menu buttons and email are far too big, they take up about a 7th of the vertical space, which seems way too much, i also don't really like the font, tho that's personal preference. Same with the about section, all of that should definately fit on the screen without me having to scroll down just so i can finish reading the list of games you've worked on and see the game logos on the right.

Awesome work though, really nice stuff, i'm going to go save a whole bunch of it for my inspiration folder now

EDIT: here's what i mean about the title. I know it leaves you with a good bit of dead space, but i think it looks far nicer

AlecMoody

hmm- If I go smaller with the header text I will have to do something tricky with the scaling so it doesn't become too small after being scaled on mobile devices. Maybe I could have them slide first and then scale after they ran out of space?

AlecMoody

I cleaned up some code and added padding for when it scales.
www.alecmoody.com/newsite


Im messing with header text sizes now.

Jungsik

Oo yea i like the website better with the borders on the side makes it better to look at

AlecMoody

Smaller text now


One thing I cant seem to fix is that either my container div or grid row wrapper is cutting off a few pixels on the right hand side. Its pretty small and mostly only noticeable on the text up top.



Also, I added a large spacer under the new/smaller about content. This prevents the page from shifting if there isn't a scroll bar. If anyone knows a better way to force the scroll bar i'm all for it.

Mike Yevin

im not sure if this is what you were talking about in your last post, but while looking at your site on my phone, i always have a horizontal scrollbar and there is quite a bit being cut off from the right hand side. maybe im going beyond its smallest size?

if it helps, im using an htc inspire 4g

AlecMoody

hmm- I should probably implement a media query for mobile devices so It can load a different layout.

Mike- How much is being cut off? Can you still see all columns?

shinobix

Awesome job on your portfolio page Alec! The layout is nice and clean, super easy to browse... Plus your work on there is top notch! Really clean HP modeling, solid texturing. Great job on your presentation!

greevar

This may sound a bit boring, but I think the most effective layout is a simple vertical list of wide aspect thumbnails. Looking at those full-frame images just frustrates me. I think giving the viewer a full shot of the finished asset that hides nothing would be good and they can click to see the underlying structure (i.e. normal map, wire frame, textures/uv layout). Maybe even a PNG animated turnaround of the finished asset?

Isaiah Sherman

Greevar brings up an interesting point. Using horizontal thumbnails for your front page could potentially allow you to show off moar art right away. This would also eliminate empty thumbnails tailing at the end.

Would that be trickier for you to get with this scaling?

greevar

It would work better on mobile screens too given that most of them are about 800x480. Navigating that page on a phone would be difficult. I can't imagine anybody in the industry uses a 4:3 ratio display anymore.

Idea: Post a thumbnail of the asset in an easy to view size (like 480) that works for mobile and PC. Put links to various gallery sizes below the image: [480] [720] [1080]. Then you don't need media detection, they can just choose what size they want to view.

AlecMoody

My only mobile testing is on a first generation iphone and it works great. I am curious about how it comes across on an android. Wouldn't an android phone also use webkit for page rendering?

greevar

Android here. It's a bit annoying to pan through those thumbs. Since most mobiles use touch screens, it's easier to scroll on only one axis with a margin that allows you to avoid accidental click events.

AlecMoody

So on android you are scrolling on more than one axis?

greevar

Yes. It appears as a tiled sheet of images, just like on the PC and the images are too big to view on my display.

AlecMoody

Do android phones not do a zoom extents when the page loads like an iphone? I don't want to do horizontal orientation thumbnails. I like the look of the grided square thumbs. I do want to get android phones loading in it a way that is easy to use.

Ill look into this and hopefully I can find someone locally who was an android device.


Edit:
does anyone know of a good way to emulate mobile devices?

Snader

AlecMoody wrote: »

Smaller text now


One thing I cant seem to fix is that either my container div or grid row wrapper is cutting off a few pixels on the right hand side. Its pretty small and mostly only noticeable on the text up top.

I think the easiest and best way to solve the cutoff is to left-align the email address with the gutter space between the images, similar to how the About is aligned.

Also, while looking at the site scaled down (on a PC though) I noticed that the font itself becomes illegible:

I suggest using a slightly fatter font. (or not using images and letting the browser render text - but you risk the user not having the font you want to use)

AlecMoody

yeah, but phones use different re-sampling then windows browsers. I'm going to mess with having the header text slide before it scales so it's comparatively larger.

Yeah, I can move the email address in but if you look really closely the gutter is actually cutting off part of the right row of images. Its not a huge deal but something I would like to fix if possible. It seems to have something to do with how centering with auto margins works.

greevar

No, there's a full-screen scroll with a finder, but it doesn't zoom to extents.

brandoom

The only concern I have with the large images is how much bandwidth your going to end up using.

I like the layout though, nice and clean, easy to look at.. effective.

AlecMoody

I added a viewport meta tag
"<meta name="viewport" content="width=device-width">"

I don't have a way to test this. Could someone with an android device tell me if the website is now scaled to fit into their screen when they load it?


I have only implemented this as a test for the front page. Not the content pages yet. Also, I had someone test this on gingerbread 2.3 and they had the page zoomed to the content width by default.

greevar

It fits now, but the text is unreadable.

AlecMoody

yeah, I am going to address that soon. I can do custom fonts that will scale better than images but I think I would need to buy a separate font license for that.

Snader

Works (for me) on the Android default browser, and on Opera Mini. Phone is a LG GW620: 320x480 (slides out to a 480x320) screen, Android 1.5 Cupcake.

The text looks very very speckly on the default browser, though. Not on Opera, but it's still illegible (because the x-height is only 5 or 6 pixels, and because the text color doesn't contrast.)

Hmm. I've found an issue that's probably worse than the text. In the default browser, zooming doesn't work, because the wrapper-div is fixed to device width. So when you zoom in, the gutters get bigger and the images actually become SMALLER. On Opera the site DOES zoom in, but because it's a pre-rendered page, all it does is creaye large blurry pixels...

AlecMoody

Snader- so that is only on the front page where I used that meta tag? I can't test this stuff- any idea how to fix it?

I got the opera mobile emulator but everything works perfectly in it.

greevar

In my opinion, I think you're making a lot of effort to keep your layout. If you want it to work in mobile, I'd let go of the grid layout. Without the number of thumbnails in a multiple of the number of columns, you'll end up with an unbalanced looking page (i.e. 7 thumbnails on a 3x3 grid will leave a gap). For the mobile layout, just stick to one column and make it fill the window. That way you can see the thumbnails better because they won't be so heavily scaled on an already small display.

You really should make your thumbnails look like this:



Then just scale it to fit mobile (~400px high) and PC (As big as you can afford bandwidth for). This shows the viewer the whole asset all at once. Your thumbnails don't fill a mobile display, which means you're wasting space that could be showing off more of each asset.