Profitable Website Management: 4 Portfolio Sites Evaluated

Without a doubt, photographers’ portfolio websites tend to place visual design and aesthetics high up there on the list of business priorities. While some photographers may place a high degree of importance on the use of creative assets (think textured backgrounds, image borders, designer color schemes, image transitions, etc.) in a website design, others will have only the vaguest concern as long as the template comes from a reputable vendor. It is true that balance, harmony and cohesiveness of visual style are important considerations. However, if a site doesn’t load quickly or work properly, it’s not going to serve the business or your prospective customers effectively.

In the first article I wrote for the Profitable Website Management column (Rangefinder, April 2008) I talked about how form and function can be a real balancing act. However, they need not be mutually exclusive features for your next website design project. In fact, if either is neglected you’re likely going to end up with frustrated customers. With so many (right brain) resources thrown at the visual aspects of a website design, it might help to think creatively about solving the performance (left brain) side of the equation with earnest effort, the same way photographers approach solving visual problems.

To that end, this month we evaluated several Flash websites from some of today’s most popular creative agencies catering to the needs of photographers. My colleague Gabriel Paez, director of technology at Downstream.com and expert in Flash design, and I developed a set of criteria (see sidebar) for evaluating the sites. Hopefully you will gain greater confidence and become well equipped with some intelligent questions to ask and features to look for on your next website makeover.

Jimmy Chin on LiveBooks
Jimmy Chin’s site (www.jimmychin.com) is built on the LiveBooks platform and features a basic layout that showcases his photography. Performance in this splash logo could be optimized by cropping white space out and publishing as a GIF or vector SWF instead of a JPEG to reduce the image size by more than 67–89% without losing image quality. The site does a nice job of preloading its non-gallery content into memory when the site initially loads so that the user does not have to see loading bars as they switch pages. This only becomes a problem when a user lands on the homepage and then quickly switches to a gallery. In this case, the home images should ideally stop loading so that there isn’t a bottleneck on loading the gallery.

Jen Thompson on BIG Folio
Jen Thompson uses BIG Folio to power her website (https://jen
thompsonphotography.com). The site features smooth transitions and an approachable design. On slower connections, not automatically loading the music file on startup will create a better user experience. At a whopping 4.58MB, this file could really slow down the entire website as it loads in parallel to gallery images and other site content.

Gavin Bond on Clickbooq
Gavin Bond’s online portfolio (https://gavinbondphotography.com) runs on Clickbooq. Clickbooq does an excellent job of giving photographers access to a simple set of tools that can be used to create an elegant portfolio online. While it was not possible to verify at the time of writing, Clickbooq sites appear to be hosted on a smaller regional ISP, which could be potentially problematic for some sites. Always check that your Web-hosting provider has the network infrastructure and capacity to meet your requirements. Gavin’s site could also be improved by using gzip to achieve better file compression ratios and improved page rendering. From an application perspective, Clickbooq’s shared asset model will improve performance through quick updates to their entire customer base.

Gabriel Ryan on ShowIt Sites
Gabriel Ryan (www.gabriel-ryan.com) has created an online portfolio that combines playful sketches with powerful photography, all built on the ShowIt platform. While the entire site scales as you scale the browser window, which can create a powerful visual experience, the site can also suffer from reduced image quality on larger screens and less then optimal load times on smaller screens. That said, a lot of the text on the site has been saved as image files rather than using vector-based fonts in Flash. Converting these images to text would certainly help improve performance. The song that initially loads on startup has been encoded down to 1.52MB. This helps to speed up load times in those crucial first moments when a visitor hits the website.

Time for Modesty
As much as we could continue to critique Flash website designs, there are still other factors which may have less to do with technology and more with the way you manage and prepare images for uploading to your website. I exchanged several emails with Big Folio founder and CTO Erik Dungan while writing this article. Erik laments, “If an article says, ‘This website loaded very slowly then people are going to equate that with all of our sites when in fact it’s usually caused by photographers not optimizing their images properly.” To Erik’s point, many photographers may not be actively optimizing their images for target resolution and onscreen viewing, expecting that their Web-host provider will take care of resizing for them. One’s assumptions in this regard always come with the risk that if images are not sized properly, the user experience will suffer as a result.

So now is the time to make website performance a top priority. Rarely do website visitors ever complain about the lack of embellishments, but almost everyone can detect slow loading pages, pixilation from poorly scaled images, and slow or confusing pre-loaders and transitions between images.
Finally, our desire for profitable websites for photographers is that no portfolio have to share the stage with a Flash designer trying to leave his or her imprint. Every portfolio deserves an uncluttered, efficient and distraction-free place to be seen.

Top 5 Performance Priorities for Flash

1. Intelligent preloading and asset management.
When done correctly this will result in very few or no loading bars. However, when the connection speed degrades, loading bars should still be shown so that the user knows to wait. The “intelligent” we refer to implies that logic needs to be built into the application to predict user behavior and balance that knowledge with connection speed to load assets accordingly. Once those assets are loaded they must be cached so they can be used later, but managed as not to crash the user’s browser.

2. Server-side image scaling.
If images are scaled in Flash they look bad. The compensation for this usually involves using image smoothing, which slightly blurs the image so viewers won’t notice the jagged edges that resulted from the scale. Image smoothing is processor intensive, so if the image is very large or if there are multiple images on the screen you will see a performance hit (especially on slower computers). Image smoothing also doesn’t look as good as an appropriately-sized image.

3. Connection specific delivery of video.
This can be done either with progressive or streaming video. Another thing that can really help here is the use of a CDN (Content Delivery Network).
4. Caching (Images, Cache-control Headers, etc.)

Ideally, the HTML files in your website should be cache-aware. The other aspect of this is that ideally the SWF itself should behave differently on load if it has been cached. For instance, if there is normally a loading bar that is displayed when the Flash file is loading, that loading bar should not be displayed if the SWF is loaded from cache. Try to avoid using pre-loaders (if possible) for branding purposes. Our preference is to take our user immediately to the resource he/she requested.

5. Quality of hosting.
We evaluate the quality of hosting based on the following points:
• Reliability—What kind of uptime guarantee does the Web host offer? Do they go down? How often? How are upgrades handled?
• Scalability—Can the host handle a huge surge in interest to the site? All too often when a site gets some press, everyone who goes there will invariably see “Site Unavailable” errors or extremely slow page views.
• Speed—Not only is it fast for one user, but what about when there are 10, 100 or 1000 simultaneous users?

Steve Tout is the owner and principal photographer of Coffeehouse Photography, a boutique wedding photography shop in the Pacific Northwest. He has worked in sales, consulting, web development and information security for 10 years with recent positions at Oracle Corporation and US Bank. Readers can contact him directly by email at [email protected].