Tuesday, July 16, 2013

#43 Portfolio website tips 2

Studio Hinrichs_2013-05-18.jpg


Robert, a designer friend, asked me some entertaining web questions that are near-and-dear to my designer heart. :) You'll find varying opinions, of course, from others. So realize what I'm sharing is based on my experience, experiments, and reading. I assume you've already been to http://www.steveteare.com/foliosites/ where I explain some online portfolio strategy.

Whenever possible, I use old, vintage, legacy stuff that I repurpose in some strange way. This is low-tech. It's low-cost and low-risk. When you want to do the latest "online fad", it'll usually cost you in time, money, or frustration. Redefining what is good enough is part of the creative solution.

I've built portfolio sites. Almost always in-trade for creative services. Generally, artists, illustrators, and photographers are on severe budgets. I've been encouraging my clientèle to move along with the mainstream herd and use CMS. (I did this again just yesterday but mainly because the potential client was bossy. Not a qualified lead.)

Clients care (are anxious) about making portfolio changes more than they care about loadtime. This is an unwarranted "want" --not need. They generally think their latest work is their best. That isn't necessarily true. My experience is portfolio sites rarely change even if the owner has that CMS flexibility and capability. It takes discipline.

In 3 years, sites are obsolete and need a rebuild anyway. That is the shelf-life of a site. So build a disposable website and leave it alone.

CMS is not the solution I'd take for myself. They're clunky and slow. So what is the right answer depends upon your skill level, audience, and objectives.

I'm going to give an example of keeping the pageweight down with strategy:

PROJECT ONE: Photography
Here's one I built last year and the strategy is not for everyone.

Link MiningShots.com >


First, I asked the photographer to supply as few horizontal images needed to do the job (12 per section, 4 sections) cropped to 1024 x 768 pixel dimension. Vertical images that resize just aren't as impressive. That is not very many images for a photographer but more is counterproductive (9 per section is optimum.) He couldn't choose that few. More repels visitors (boredom.) I have tested this.

I used a "widget" called SimpleViewer, which is free, for the main screens. This is a Framed Hybrid website which I do not recommend except for non-conformists like myself. If you don't care if others make fun of you as a programmer, it's a great trick. :) SimpleViewer is a dynamic image resizing slideshow. It's free and extremely lightweight. It uses a Flash file and XML file in the big frame.

I optimized all the images using an old-school Photoshop compression plugin called "Boxtop Pro JPEG" but "save for web" in GIMP or Photoshop gives fine results, too. The JPEG images are saved at a 70% level and sharpened. The human eye cannot distinguish any difference from the original onscreen. That puts the large images in the 70K to 100K pageweight range (sometimes less --like 50K.) This is acceptable.

Notice how you drop right into the portfolio and not an introductory page or splash screen.

NOTE: Viewers do NOT care as much about image quality as the "artist" does. Always push hard to reduce image file size. Here's a nice link on optimizing image files:
http://doteduguru.com/id42-optimizing-web-graphics.html

People have a lower expectation of page load time with portfolio websites. But this shouldn't be abused. Keeping one large image per page is ideal. Loading up a page with many images does two things: it dilutes the emphasis (visual noise) and bogs the download. In this case, we're relying on "perceived load time" and not real load time. A preloader is working in the background for subsequent images.

The page that absolutely has to be the fastest is the home / landing page. All that matters is that it answer 3 questions: who you are, what you do, and why I should care. Anything else is a distraction.

I use a custom-built Photoshop action to generate the thumbs which are under 2K each.

Now some would say, "This is a foolish solution because Flash is doomed and Frames don't work on mobile." All true. But here's the strategy: the audience is not mobile active. They are all upper-level advertising and marketing executives sitting at desks with a huge screen.

Flash is stagnant but will be supported with upgrades --but not new versions --and Adobe claims this is true. Millions of sites still use Flash --even YouTube and Hulu. You don't just pull the plug in one night. The only platform Adobe has said they will not support is Linux. But they will continue to support it for 3 more years. How many executives at mining companies are using Linux? :) Uh? No big deal. Using Flash and frames is not a problem either. There are a bunch of tricks to make it all work but you get the idea.

The Teare-ism (rule of thumb): One big image (1024 x 768 px) per screen and optimize the image. This distributes the load over many pages.

This is the solution I'd still take today. Portfolio sites should NOT be viewed on small screens. Whoever reviews artwork on mobile is not a qualified lead. I promise.

Lastly, here's other strategy for multiple images on a single page and still keeping the pageweight down. They both are works in progress. The secret: limited color palette.

Experimental site
http://www.pagepipe.com/
20K to 25K page weights.

New business
http://www.sprintgauge.com/
All images are two or three color GIFs.
Generally, 50K pageweights for this site.

Also look at this example of Kit Hinrichs website >
The home page loads in under a second (34K pageweight.) He then starts heavy-ing up the pages as you go deeper and are more and more "hooked." Great portfolio strategy.

I classify the whole pageweight-vs.-aesthetics philosophy as "Judicious Beauty."

No comments:

Post a Comment