JonJone's Info Dump on Portfolios & Resumes!

24

Replies

  • Jon Jones
    • Offline / Send Message
    • Joined
    • 20 Topics
    • 198 Replies
    Wow! Thanks so much for all the positive comments, everybody! :D I'm really glad the tips are of use. I haven't had such a concentrated pack of resumes and portfolios to review before, so it was fun taking notes and blasting all the info out all at once. Twitter is such a terrific format for focused thoughts.

    Since so many people have been asking about Blogspot, I'm going to give it its own post, then put replies in a separate one.

    So, Blogspot! Here's why I don't like it: It's way too easy to have one portfolio piece per post, and have 2 - 10 pages' worth of content I have to manually click through to see anything. Blogspot is for creating a timestamped archive of content, not a presentation of deliberately selected art. It's fundamentally a posting format that automatically archives your work and hides it behind multiple pages anytime you post something new. You really can't curate content or present your work that way. Imagine if every time you made a new piece of art, the 10th-latest piece of art you made before that was deleted forever. From an art director's point of view looking at a Blogspot page, that's how it is.

    Yesterday when I was posting these, I almost passed on giving a guy an art test because he had a Blogspot page with so-so work on the first page, and his actual reel with good work in it on the second page. Fortunately I was being thorough and caught it, but not everyone's going to do that. Make your art so easy to access I can see it accidentally!
  • Jon Jones
    • Offline / Send Message
    • Joined
    • 20 Topics
    • 198 Replies
    Onto replies!

    #10 dustinbrown: You're correct, it's 3DS MAX. I misspoke. I just go nutty when it's shortened to "Three-Dee Max" with nary a mention of "Studio" or even an "S." It's baffling, just losing a whole letter\word like that. "I'm proficient with Photosop, Zbush, Mudbo, Craybump, and Microsoft Wod." LETTERS EXIST FOR A REASON! Especially when they're an initialism! :) I'm not actually mad about it, it's just one of those teeny tiny annoyances that I've seen forever that never goes away.

    #24 stubs3d: For a portfolio, I really like Carbonmade. Simple, focused, to-the-point. For a reel, Vimeo is the best. High-resolution, passwordable, and controlled presentation -- no "If you liked this reel, Youtube Recommends horrible softcore fatty porn!" I also think Wordpress with a good theme and set of plugins is terrific.

    #25 BeefWatson: See my comment above about Blogspot. I dislike Wix because a) it's Flash, b) it's VERY easy to make a horrible slow-loading page, and c) it's VERY easy to make a horrible slow-loading page. I don't care about fancy templates or cool presentation. Think about it this way: As an artist with a portfolio, you're inclined to think of it as designing an experience to present your work and want it to look super polished and cool, and seeing flashy features and presentation is very tempting. As an art director, I have a list of portfolios to go through and I just want to see art IMMEDIATELY. I don't care about bells and whistles, I'm less inclined to be forgiving of load times, and Flash-heavy websites that bog down my browser just annoy me. I see Wix and I see a platform that makes it incredibly likely art will be harder and slower for me to see.

    #28 Sean VanGorder: Dunked, eh? I'll check it out! Thank you! I love learning about new tools and sites I can recommend for people. :)

    #30 dustinbrown (again!): I feel a little dumb for not thinking of CGHUB. I completely agree with you that it's a fantastic, standardized, simple platform. I honestly don't see anything wrong at all having a CGHUB portfolio versus hosting your own. I'm guaranteed a more streamlined experience!

    #32 m4dcow: Rolled your own Wordpress theme? Impressive!

    #33 Wrath: CHRISTOPHER BRUCE!!! How's it going, man?! I also agree 100% with everything you said.

    #36 Intervain: See my comments above. However, I'll summarize: Blogspot is for archived, non-curated content, and Wix's temptingly flashy themes and features make it very easy to have a super slow portfolio. Some artists can do absolutely great working within those constraints to make good portfolios, but, across hundreds to thousands of portfolios, in the literal sense of "on the average" over a data set that broad, they are more annoying and badly done than not. There are exceptions, but it usually sucks.

    #39 Snader: Fair enough. I always gravitate toward the simplest and easiest, and that particular tip about limiting the font sizes and typefaces was inspired by extreme edge cases where I'll see like 4 to 8 different ones on the same page.

    #40 Polyhertz: If Blogspot can have just one post that gets update with new work, then that's cool. It's just that most of the time people use it like a normal blog. Blogspot is fine as a work log, but not a professional portfolio.

    And again: All of my advice is about how to stand out in worst-case scenarios. Everything I say is stark and bombastic on purpose to emphasize the shortest, simplest path to reach your goal. That can be dressed up in a variety of different ways, but I always hammer in the idea "remember your only goal."
  • cholden
    • Offline / Send Message
    • Joined
    • 101 Topics
    • 3.4K Replies
    It's brutal how you have to keep telling everyone the SAME THING every year, but I'm glad you do. Wix is death.
  • Shanthosa
    • Offline / Send Message
    • Joined
    • 4 Topics
    • 202 Replies
    Thank you for concentrating all this in one place! And thanks Jon, for doing this.
  • easterislandnick
    • Offline / Send Message
    • Joined
    • 29 Topics
    • 283 Replies
    Resume tip #1: Including your location is a must. Home address isn't necessary.

    This is so important, I am recruiting 3 positions at the moment and unless you can come in for interview easily and work without us having to get you a visa then it's not going to happen!
  • Farfarer
    • Offline / Send Message
    • Joined
    • 23 Topics
    • 2.3K Replies
    Farfarer card carrying polycounter
    Can we stop using that lightbox image viewer thing, too? Drives me mad. Just link to the big images, it's cool, I have a browser with tabs, I can handle it...
  • Mathew O
    • Offline / Send Message
    • Joined
    • 41 Topics
    • 753 Replies
    Mathew O polycounter
    Farfarer wrote: »
    Can we stop using that lightbox image viewer thing, too?

    Seconding this.
  • Alphavader
    • Offline / Send Message
    • Joined
    • 27 Topics
    • 703 Replies
    Mathew O wrote: »
    Seconding this.

    why ? i think going to big pictures and then have to go back
    via click or backspace is more annoying then just clicking in the dark area..

    i agree with having just big images and scrolling down is the easiest way to show your pictures
  • JohnnyRaptor
    • Offline / Send Message
    • Joined
    • 27 Topics
    • 1.7K Replies
    Alphavader wrote: »
    i agree with having just big images and scrolling down is the easiest way to show your pictures

    isnt that just like blogspot etc then ?
  • Mathew O
    • Offline / Send Message
    • Joined
    • 41 Topics
    • 753 Replies
    Mathew O polycounter
    It's probably just personal preference but I think the light boxes are just nasty, I also find that they don't always allow for right click save and they are still constrained to the size of your browser screen. So If I want to view someone's image in all its glory on my Ipad I can't as it still won't go bigger than the screen size I'm using. Some artists have huge shots when you click on their smaller image and it's great.

    I also think that a wall of large images just allows for sluggish website.
  • Xoliul
    • Offline / Send Message
    • Joined
    • 59 Topics
    • 3K Replies
    Alphavader wrote: »
    why ? i think going to big pictures and then have to go back
    via click or backspace is more annoying then just clicking in the dark area..

    i agree with having just big images and scrolling down is the easiest way to show your pictures

    But it takes over your screen and you're forced to wait until the image loads during some silly loading bar anim. At least with tabs you can just middle click a bunch so they load in another tab while you keep viewing the website...
  • seth.
    • Offline / Send Message
    • Joined
    • 62 Topics
    • 1.1K Replies
    seth. polycounter
    blogspot did me ok for a few years you just have to not "blog" on it and it can be bent to your will, I would change the lightbox viewer if I were going to tinker with it but I am switching to dunked pretty soon..i've been on the beta too and its really nice to use....just waiting for the catch :)

    *edit* switched to dunked...the only thing I'm not keen on is that I haven't figured out how to retain the name of the image in the right click save name yet, cos I always put my folio address in the image title.
  • Snader
    • Offline / Send Message
    • Joined
    • 75 Topics
    • 2.6K Replies
    Snader veteran polycounter
    I...

    I had to.

    Sorry.

    CrayBump.jpg
  • Meteora
    • Offline / Send Message
    • Joined
    • 7 Topics
    • 117 Replies
    I don't know if it's wix in general that makes it how it is, but your site is pretty horrible to navigate.

    Takes quite a while to load.
    Unnecessary transition animations.
    Multiple clicks to get to your work.
    Work pops up in awful viewer boxes that take even longer to load.
    Images cant be right click > saved.

    Yeah I thought my site was alright to navigate before until I looked at some other examples and they get straight to the art directly. I didn't consider the potential load time and everything else.

    Also yes Wix doesn't allow you to save images, it took me a while to figure that out. I wasn't aware that recruiters will be saving images so I didn't really think of it as a problem. I was in the process of redesigning my portfolio site, but I don't even anything worthwhile to show. I'll probably change it in a week or something and onto something other than Wix.
  • Farfarer
    • Offline / Send Message
    • Joined
    • 23 Topics
    • 2.3K Replies
    Farfarer card carrying polycounter
    Alphavader wrote: »
    why ? i think going to big pictures and then have to go back
    via click or backspace is more annoying then just clicking in the dark area..

    i agree with having just big images and scrolling down is the easiest way to show your pictures
    I want to look at one beauty shot and then at wireframes, high res and maybe texture flats - preferably with them all loading at the same time.

    Not wait for every image in someone's gallery to load, one at a time, resized in some floating window that they've customised the buttons on to be non-standard...

    It feels like "hey look, my website's fancy" rather than "here's all my awesome art".
  • BeefWatson
    m4dcow wrote: »
    Sites like blogspot aren't setup properly for game art portfolios, they are primarily blogs. Someone that is hiring just wants to see your work efficiently and quickly. While there are some themes that make it better I have seen very few that don't have you digging through a bunch of older posts to see work.

    Wix actually isn't so bad once you choose the right style, however it has gotten a bad rap for the slow to load flash templates (an even some non flash ones) that many choose to use which are more about how the content is presented rather than the content itself.

    Carbonmade is cool and simple, but some people complain that there is little customization and stuff, but I think it does a good job for game art portfolios.

    I just rolled my own wordpress theme, but many don't have the skills or the time to bother with this, in retrospect my time could have been spent actually doing art.

    I feel this is fixed with a little knowledge of HTML

    for examply, on my blog/portfolio I used tables to make it easier to navigate my images , and this is with a VERY limited knowledge of HTML

    http://andrewseverson.blogspot.com
  • m4dcow
    • Offline / Send Message
    • Joined
    • 54 Topics
    • 1.4K Replies
    m4dcow dedicated polycounter
    BeefWatson wrote: »
    I feel this is fixed with a little knowledge of HTML

    for examply, on my blog/portfolio I used tables to make it easier to navigate my images , and this is with a VERY limited knowledge of HTML

    http://andrewseverson.blogspot.com

    You made a conscious effort to have 2 posts, one with your Halo stuff and one with your reel and other portfolio stuff which is good (though a design with the larger thumbs would be better). I have also seen a few people that posted in this thread that have a blogspot portfolio that is setup really nicely, like http://mathewo-3d.blogspot.com/ if it weren't for the domain on the links, you wouldn't know it was a blogspot site, no timestamps, dates or any of that bloggy stuff.

    The problem is most will just change the header of their BlogSpot site, and post work to it like a blog. So someone that is hiring ends up having to hunt for stuff, or worse doesn't even bother going to page 2.
  • Evil raz
    • Offline / Send Message
    • Joined
    • 18 Topics
    • 75 Replies
    Lee3dee wrote: »
    Jon Jones

    Portfolio tip #6: I prefer seeing reels on Vimeo instead of Youtube. I just saw a full length softcore Indian porn movie as a Recommended Video.

    Aren't recommended videos based on your YouTube video history?
  • Overlord
    • Offline / Send Message
    • Joined
    • 11 Topics
    • 425 Replies
    BeefWatson wrote: »
    I feel this is fixed with a little knowledge of HTML

    for examply, on my blog/portfolio I used tables to make it easier to navigate my images , and this is with a VERY limited knowledge of HTML

    http://andrewseverson.blogspot.com

    Web Design Rule #1: Never use tables for layout. Tables are for tabular data. Try viewing a table layout on a smartphone, you'll see why it's bad for layout and file size matters on mobile networks. CSS also allows for a more fluid layout that adapts to the screen it's being viewed on, tables do not. Tables add bloat code that will slow your page loads and if you have a data cap on your hosting, you want to keep file size low. Tables also makes your site harder to index on search engines because they ignore anything in within tables.
  • AlexCatMasterSupreme
    • Offline / Send Message
    • Joined
    • 73 Topics
    • 1.8K Replies
    AlexCatMasterSupreme dedicated polycounter
    Evil raz wrote: »
    Aren't recommended videos based on your YouTube video history?

    That's what I was thinking, which begs the question what is he watching?
  • Justin Meisse
    • Offline / Send Message
    • Joined
    • 329 Topics
    • 8.5K Replies
    Justin Meisse I love typing
    I've seen the anti-table crowd show up plenty of times on Polycount but I haven't actually seen it hurt anyone. I had Andrew's portfolio open on my computer and a passing coworker stopped to look at it, job done!

    Best portfolio ever that probably melts smartphones and people with datacaps: B1ll's wall of art
  • Bibendum
    • Offline / Send Message
    • Joined
    • 5 Topics
    • 746 Replies
    http://johngotch.blogspot.com/

    Really solid blogspot portfolio in my opinion.

    I think the problem with blogspot though is that if you need to know HTML to design a decent layout it starts to beg the question why even use Blogspot? I suppose not costing anything to host is always a plus though.
  • Jon Jones
    • Offline / Send Message
    • Joined
    • 20 Topics
    • 198 Replies
    Man, this is a great discussion. I'm really surprised my Blogspot comment is getting that much attention, and I think it's awesome that all these other websites (including CGHub and Weebly) as portfolio alternatives are coming up! I'm also learning more about the free vs premium constraints of some of my other recommendations, like Vimeo and Carbonmade. Thanks a ton, guys, this is incredibly educational for me.

    Oh, and I gotta address this one:
    That's what I was thinking, which begs the question what is he watching?

    That is as hilarious as it is an excellent point. :) However, I've long since disabled all my Google history and have a variety of Chrome extensions that block virtually all tracking cookies. Specifically I use Disconnect, IBA Opt-out, Privacyfix, and Ghostery.

    In any case, if I was going to watch porn, it wouldn't be softcore or on Youtube. ;)
  • AlexCatMasterSupreme
    • Offline / Send Message
    • Joined
    • 73 Topics
    • 1.8K Replies
    AlexCatMasterSupreme dedicated polycounter

    In any case, if I was going to watch porn, it wouldn't be softcore or on Youtube. ;)

    Softcore fat Indian porn?
    I think that would be funny if anything.
  • Snader
    • Offline / Send Message
    • Joined
    • 75 Topics
    • 2.6K Replies
    Snader veteran polycounter
    Best portfolio ever that probably melts smartphones and people with datacaps: B1ll's wall of art

    Actually that page plus all of the thumbnails is less than 5 MB. That's about as much as one or two streamed MP3s. It's not a super heavy page. Mind you, it could still be a lot smaller if the images used more compression since it is all greyscale:
    BenRegimbal_Compression.png

    And you could use online compression tools like http://www.pngoptimizer.com/ or http://www.smushit.com to get even more compression. Such online tools can often manage to even nibble off a few kilobytes more without affecting quality/artifacting - probably by stripping metadata or re-organizing existing compression blocks or something.

    Doing all this (plus having fairly lean HTML) makes this page only 136 kilobytes small. That includes the html, css, resizing javascript, the photos, favicon and that sticker thing. By comparison, these 3 images together are 129 KB:
    armyD_BIC.jpgarmyD_BIC.jpgarmyD_BIC.jpg

    ...that was somewhat offtopic, so let me tie it back into the thread:

    Optimize your site to make it load fast, and use appropriate file formats, file sizes, and compressions.

    Also
    Jon Jones wrote: »
    I'm also learning more ... Thanks a ton, guys, this is incredibly educational for me.

    Like they say in teacher's college, education is a two way street. You can learn a lot from your students.
  • TrampledUnderFoot
    • Offline / Send Message
    • Joined
    • 2 Topics
    • 116 Replies
    This is an awesome thread. Thanks everyone for all the info! :)
  • Jon Jones
    • Offline / Send Message
    • Joined
    • 20 Topics
    • 198 Replies
    Hi guys! I just did another TweetBlast on Art Tests. Here that is!

    ARTISTS! Art Test Tip #1: NEVER be afraid to ask questions. It's expected! However, a) DON'T ask just to seem clever, and b) DO try to ask them all at once.

    ARTISTS! Art Test Tip #2: Follow directions precisely. You'd be astonished how often this DOESN'T happen, and it's completely avoidable.

    ARTISTS! Art Test Tip #3: We give directions, but also read between the lines at what isn't said to add extra polish.

    ARTISTS! Art Test Tip #4: Be tidy. It's as technical as it is artistic. Tidy outliner, clean object and filenaming, organized layer groups in the PSD, etc.

    ARTISTS! Art Test Tip #5: Be on time. If you're going to be late, acknowledge it the *INSTANT* you know you will be late, and politely propose a new date.

    ARTISTS! Art Test Tip #6: Log your time and be honest about it.

    ARTISTS! Art Test Tip #7: Overdeliver, within reason. "Is there a way to jazz this up a little within my creative, time, and tech constraints?"

    ARTISTS! Art Test Tip #8: Unless they say otherwise, assume the art assets are meant for a realtime game. Construct the assets accordingly.

    ARTISTS! Art Test Tip #9: When submitting, always send a separate confirmation email. FTP uploads don't notify, and large email attachments sometimes bounce.

    ARTISTS! Art Test Tip #10: Think hard about how you distribute detail with polygons and texture. This says a lot about how you think.

    ARTISTS! Art Test Tip #11: Make sure the zipped art test contains ONLY the files needed, not dozens of extra directories or files (.mayaswatches, I'm looking at you).

    ARTISTS! Art Test Tip #12: If you're asked to provide diffuse, normal, and spec maps... don't randomly just not use them and not explain why.

    ARTISTS! Art Test Tip #13: Don't include files with random names like "SomethingWhatever.tga" or "DammitPleaseWork.jpg" or "OwlsWithDiarrhea.ma"

    ARTISTS! Art Test Tip #14: DON'T PUT ART TESTS IN YOUR PORTFOLIO! a) It means you failed the test, and b) I've already seen 50 other people do that one, and probably better.

    ARTISTS! Art Test Tip #15: Ask your friends to look over your work. Be willing to accept criticism. Don't make people wonder "did he even look at the reference?"

    ARTISTS! Art Test Tip #16: Don't let your own self-doubt keep you from finishing or submitting. It's their job to evaluate you, not yours. Stay strong.
  • Jon Jones
    • Offline / Send Message
    • Joined
    • 20 Topics
    • 198 Replies
    Snader, that post is totally awesome. Thanks for the links as well! :)
  • seth.
    • Offline / Send Message
    • Joined
    • 62 Topics
    • 1.1K Replies
    seth. polycounter
    I think its a pet hate but I would add: wait a bit before you post it to the internet...I have seen completed art tests on Polycount before we got to see them in the studio they were meant for.
  • Oniram
    • Offline / Send Message
    • Joined
    • 71 Topics
    • 2.3K Replies
    Oniram card carrying polycounter
    Jon Jones wrote: »
    ARTISTS! Art Test Tip #14: DON'T PUT ART TESTS IN YOUR PORTFOLIO! a) It means you failed the test, and b) I've already seen 50 other people do that one, and probably better.

    Wouldnt this be ok if you did pass the test? The m16 ive got in my portfolio now was my test for my current job, and i think it definitely should be in my portfolio because it shows that i was/am capable.

    Its nice also to find some people who have their tests (that landed them the job) in their portfolio to see whats comparable. I remember seeing a few people who did that Bungie environment test a while back, and saw that they did get a job based off of it. It can be a good thing to see someone else's test and say, ok.. "so i need to do that or better."
  • Jon Jones
    • Offline / Send Message
    • Joined
    • 20 Topics
    • 198 Replies
    Oniram wrote: »
    Wouldnt this be ok if you did pass the test? The m16 ive got in my portfolio now was my test for my current job, and i think it definitely should be in my portfolio because it shows that i was/am capable.

    At first glance, I'd have no way of knowing that. Realistically I'm only going to be looking at portfolios of people I want to hire that aren't employed. If you have a successful art test in there, if I'm seeing your folio to consider you for a job, it's still going to look like a failed test.

    That may be too negative a viewpoint on it, though -- think of it less as "omg failed test," and more like "oh, here's something I haven't seen before" instead. If you had to choose between the two, going for the one that doesn't elicit the "oh, yep, I've seen that" response is the better, IMO. Even if the alternative is excluding the test.
  • radiancef0rge
    • Offline / Send Message
    • Joined
    • 14 Topics
    • 550 Replies
    Jon Jones wrote: »
    At first glance, I'd have no way of knowing that. Realistically I'm only going to be looking at portfolios of people I want to hire that aren't employed. If you have a successful art test in there, if I'm seeing your folio to consider you for a job, it's still going to look like a failed test.

    That may be too negative a viewpoint on it, though -- think of it less as "omg failed test," and more like "oh, here's something I haven't seen before" instead. If you had to choose between the two, going for the one that doesn't elicit the "oh, yep, I've seen that" response is the better, IMO. Even if the alternative is excluding the test.

    I understand your point but - I think its a little unfair when youve done a lot of work on the test, passed it and chose to go elsewhere.

    I had someone look at my naughty dog test on my site and say it was the best test theyd ever seen and that was an ex naughty dog employee and I was ultimately hired at that place instead.

    That being said - this is all great info :P and thanks for sharing it :) I love this kind of info :P
  • dustinbrown
    • Offline / Send Message
    • Joined
    • 37 Topics
    • 2.4K Replies
    It's not really a question of what's fair. Lots of stuff isn't fair. It's a situation where you have to put yourself in the mind of the quintessential portfolio reviewer. That person's job at that moment is to sift through a crap ton of portfolios, and you're job is to make it as easy as possible for them to see you as being a great fit for the position. That means sending a LOUD AND CLEAR message that you are highly creative, have attention to detail, and have the technical ability to hit the ground running with little to no handholding. Putting an art test in your portfolio, regardless of how much time and energy you put into it and regardless of the outcome of that test, puts you in a position where you have content that other people will likely also have in their portfolios.

    I can understand and even sympathies with not wanting all that time and energy to be for naught. But putting myself in the mindset of it, the only reason I can imagine anyone wanting to put an art test in their portfolio is if their body of quality work is on the light side. If that's the case I would suggest just making more art.

    So the question you should be asking is, why take the risk when a job is on the line? Especially when you could, instead, have something in your folio could serve you better in terms of standing out.
  • Kwramm
    • Offline / Send Message
    • Joined
    • 8 Topics
    • 2.3K Replies
    Kwramm card carrying polycounter
    Snader wrote: »

    Optimize your site to make it load fast

    oh man do I hate those "here are 20 big images which will load for 10 more minutes while you'll look at the page" sort of folios. Especially annoying if no width and height attributes are used in the img tags, so the whole page jumps when another image finished loading.
  • okkun
    • Offline / Send Message
    • Joined
    • 38 Topics
    • 583 Replies
    okkun polygon
    I don't have much to add but thanks Jon, I'm glad you keep putting this kind of stuff out there.

    I'm sure I've glossed over some awesome candidates in the past for any of those reasons
  • radiancef0rge
    • Offline / Send Message
    • Joined
    • 14 Topics
    • 550 Replies
    So the question you should be asking is, why take the risk when a job is on the line? Especially when you could, instead, have something in your folio could serve you better in terms of standing out.

    valid point.
  • Overlord
    • Offline / Send Message
    • Joined
    • 11 Topics
    • 425 Replies
    @Snader

    It might not be much for you to download, but imagine many people hitting that page all at once. How fast would your data quota burn out before they shut it down for the rest of the month? Even still, on my 30Mbps connection it takes a while to display all of the images. The smart thing would be to break those down into sub pages with thumbnail links to nice hi-res images.

    Edit: Ha! Those are thumbnails! :poly142:
  • Snader
    • Offline / Send Message
    • Joined
    • 75 Topics
    • 2.6K Replies
    Snader veteran polycounter
    If your servers are burning through data and you need to pay more for the exceeded data, that's definitely a problem, but it's one for your wallet and not one that bothers potential employers. Unless your host literally suffers a server crash but that's only when you get posted on Kotaku or something. It's more a problem of many requests than of lots of data transfers - it's how a DDOS works, too.

    Along the same lines, requesting many small images impacts performance more than one larger image. Because you have to send more requests. It's like asking "hey you give me my phone" and then "and my lunch", "and my wallet", "and my notepad" instead of simply asking for your backpack with everything in it. So you wanna combine all HTTP requests as possible. Here's an example:
    apple-nav.png
    One image, and you 'crop' it to the right size using background offsets and div sizes in the CSS.

    As an illustration of how much impact this can have, I threw Regimbal's site through an analyzer and got this graph:
    RegimbalWaterfall.jpg
    Where green is the time between the sent request for a file, and blue the time when there's actual data being transferred. You see that there's a LOT of green. It starts off okay, but once there are 6 or so connections, that server won't make any new ones until the old ones have finished transferring.

    So you're continuously waiting on files to finish before you can start a new connection. In Regimbal's case I'd put all 8 thumbnails of a row in one image, so you would have 8 times less requests and considerably less waiting time.

    Oh and of course the borders of all these similar images should not be in the image, but added with CSS, making the images about 10% smaller.

    ... maybe I should do a write up on website optimization in a completely separate thread =P. Some time. Some time.
  • m4dcow
    • Offline / Send Message
    • Joined
    • 54 Topics
    • 1.4K Replies
    m4dcow dedicated polycounter
    Snader wrote: »
    If your servers are burning through data and you need to pay more for the exceeded data, that's definitely a problem, but it's one for your wallet and not one that bothers potential employers. Unless your host literally suffers a server crash but that's only when you get posted on Kotaku or something. It's more a problem of many requests than of lots of data transfers - it's how a DDOS works, too.

    Along the same lines, requesting many small images impacts performance more than one larger image. Because you have to send more requests. It's like asking "hey you give me my phone" and then "and my lunch", "and my wallet", "and my notepad" instead of simply asking for your backpack with everything in it. So you wanna combine all HTTP requests as possible. Here's an example:
    apple-nav.png
    One image, and you 'crop' it to the right size using background offsets and div sizes in the CSS.

    As an illustration of how much impact this can have, I threw Regimbal's site through an analyzer and got this graph:
    RegimbalWaterfall.jpg
    Where green is the time between the sent request for a file, and blue the time when there's actual data being transferred. You see that there's a LOT of green. It starts off okay, but once there are 6 or so connections, that server won't make any new ones until the old ones have finished transferring.

    So you're continuously waiting on files to finish before you can start a new connection. In Regimbal's case I'd put all 8 thumbnails of a row in one image, so you would have 8 times less requests and considerably less waiting time.

    Oh and of course the borders of all these similar images should not be in the image, but added with CSS, making the images about 10% smaller.

    ... maybe I should do a write up on website optimization in a completely separate thread =P. Some time. Some time.

    More of a problem is that images that small shouldn't be as large as they are 40k+ for a lot of them, even doing save for web in photoshop at 80%(which is overkill for thumbnails) is mostly under 15k.

    Saving images in rows is only going to make it a PITA when it comes time to actually update the site with new work.
  • b1ll
    • Offline / Send Message
    • Joined
    • 42 Topics
    • 1.2K Replies
    I made my site in geocities pagebuilder. If i dont update its because this software doesnt exist anymore ^_^
  • Snader
    • Offline / Send Message
    • Joined
    • 75 Topics
    • 2.6K Replies
    Snader veteran polycounter
    m4dcow wrote: »
    More of a problem is that images that small shouldn't be as large as they are 40k+ for a lot of them, even doing save for web in photoshop at 80%(which is overkill for thumbnails) is mostly under 15k.

    Saving images in rows is only going to make it a PITA when it comes time to actually update the site with new work.
    How so? Copy-paste top row, Swap out image url and detail hyperlinks 8 time, done. It's not like you have to update with every new thing you make.
  • m4dcow
    • Offline / Send Message
    • Joined
    • 54 Topics
    • 1.4K Replies
    m4dcow dedicated polycounter
    Snader wrote: »
    How so? Copy-paste top row, Swap out image url and detail hyperlinks 8 time, done. It's not like you have to update with every new thing you make.

    Well probably won't add multiples of 8 things at a time so the 8 row images start getting confusing. Then the newer stuff won't neccesarily be the best, ie:the stuff you want to been seen first, so that further confuses things. Want to change layout but still use the same thumbs...

    These things while small, make it tedious to update the portfolio thus making the user less prone to doing so. I have seen people who I know are badass artists, with portfolio's whose most recent work is from 2005.
  • Jon Jones
    • Offline / Send Message
    • Joined
    • 20 Topics
    • 198 Replies
    Snader, that is *awesome.* I'd be very interested in seeing an article like that. I'll pimp it everywhere if you do. :)
  • Jon Jones
    • Offline / Send Message
    • Joined
    • 20 Topics
    • 198 Replies
    Oh, we also did a CrunchCast last night -- two-year anniversary! -- and went over all these portfolio and art test tips: https://www.youtube.com/watch?v=3J_vPQuBYbU
  • Justin Meisse
    • Offline / Send Message
    • Joined
    • 329 Topics
    • 8.5K Replies
    Justin Meisse I love typing
    b1ll wrote: »
    I made my site in geocities pagebuilder. If i dont update its because this software doesnt exist anymore ^_^

    growing up on the mean streets of geocities
  • praetus
    • Offline / Send Message
    • Joined
    • 62 Topics
    • 1.6K Replies
    praetus dedicated polycounter
    It is always great to see this type of stuff here. Thank you for putting this together.

    Also:
    growing up on the mean streets of geocities

    ANGELFIRE represent, son!
  • Overlord
    • Offline / Send Message
    • Joined
    • 11 Topics
    • 425 Replies
    @Snader

    But those tables do impose an unnecessary lag that can be eliminated with superior methods. You have to change the tables for each and every page when you do a redesign. It makes it harder to index on search engines because they have to wade through the markup to find your content. You can't cache tables either. Those tables have to be loaded for every single page on your portfolio. It also makes more work for the render engine, making the page render slower because it has to wait for the entire table to load before displaying content. There's more to it than just data transfer. It makes visual consistency much harder as well as updating the layout or even just updating the content would be a lot of work.

    With a CSS layout, you can have one set of rules for every page that only has to download once and making changes to that changes every page. It's easier to maintain, easier to keep consistent, and it's faster.

    Creating sprites is a good idea, but it would still be good to make them smaller. Fewer thumbs per page and some sub-pages would be better too.

    Bill's folio is even worse than tables. He has inline styles embedded in his markup for every single image and that's wrapped in its own individual div. He could have made one rule in a stylesheet and applied it to every element with classes, saving tons of markup and making his page load much faster. As it is, each rule has to be loaded and rendered one at a time along with the image, yuck!

    Here's a whole treasure trove of resources on building good layouts: http://alistapart.com/topic/layout-grids

    Actually the entire site is worth a read. Great stuff there.
  • Justin Meisse
    • Offline / Send Message
    • Joined
    • 329 Topics
    • 8.5K Replies
    Justin Meisse I love typing
    My webpage doesn't stress search engines out, I let them take the day off:

    User-agent: *
    Disallow: /
  • Overlord
    • Offline / Send Message
    • Joined
    • 11 Topics
    • 425 Replies
    My webpage doesn't stress search engines out, I let them take the day off:

    User-agent: *
    Disallow: /

    Your folio is a single image centered with lots of excess markup. I can't imagine the SEO is that significant. :poly124:
  • Justin Meisse
    • Offline / Send Message
    • Joined
    • 329 Topics
    • 8.5K Replies
    Justin Meisse I love typing
    Overlord wrote: »
    Your folio is a single image centered with lots of excess markup. I can't imagine the SEO is that significant. :poly124:

    yes, I almost just considered locking the whole thing with a password - it's a tool that I send to potential employers when I want them to see it. Worrying about SEO and proper CSS & HTML is just web designer stuff... if it's a web design portfolio, of course worry about it. This isn't a public facing corperate website or social media page, it's a portfolio that's meant to be looked at by a handfull of people that you send it to.

    In all the years Jon & Chris have been complaining about shitty portfolio sites they have never once mentioned viewing the source and recoiling in horror at the lack of CSS.

    I don't particularly feel like becoming well versed in something that I only use once every 5 or so years.

    sorry, I just here the same arguments on an annual basis and it's how a good friend of mine ended up with a CSS webpage he can't figure out how to update.
24

Leave a Comment

Drop image/file