Optimizing Your Online Portfolio
September 18, 2012
Remember the days when having a great-looking website and an active blog was enough to make your work stand out from the crowd? Flash ruled the online portfolio world, and maybe you were even a social wizard using Twitter and Facebook as parts of your PR engine.
Things have evolved quite a bit in the last two years; the online world includes far more than it ever did, and it’s still an ever-crucial part of marketing yourself and your business. Got a website branded with your logo, images fairly large on screen, nice set of galleries, consistent global navigation? Great. Does it look good and function well on screen, tablet and mobile devices? No? Uh-oh.
Every trend indicator says that increasingly more content will be viewed on the go. It’s even projected that Internet access by mobile devices (phones and tablets) will surpass desktops by 2014. So, if you’re thinking about redesigning your online portfolio, or you’re about to create your first one, there are a few options you need to consider, each with their respective pros and cons. Being aware of current trends and technologies within the web and interactive fields can help make your online presence more effective and less costly.
Creating Multiple Versions
Until recently, the only way to make sure content looked good and functioned well across devices was to create multiple versions of the same site. And this is still a legitimate way to go. Typically a web designer and a developer will create multiple versions of the same site, each tailored for a specific device. Then, a simple device query script checks the type of device requesting the website and serves up the appropriate version. While it means more time and money to do so, this option works quite well. You get to take advantage of the native capabilities of mobile and tablet devices, such as transitions and gestures, while avoiding incompatibility issues, such as Adobe Flash.
Personally, I still like Flash and think it’s a viable development tool. However, as most of us know by now, Flash doesn’t work on the iPad or iPhone, and soon it won’t work on Android devices either. So, if you use it, you’ll have no choice but to create a non-flash version of your portfolio to display for tablet and mobile devices. And that’s exactly what Michael McDonald, founder and creative director of Organic Grid, did when he created photographer James Quantz Jr.’s portfolio site. The screen version is created in Flash and looks great with large, full-screen imagery, a cinematic-style layout and minimalist design. The non-flash mobile and tablet versions also work well for each respective device.
Photographer James Quantz Jr.’s website, as it looks on screen and mobile device.
You may be asking yourself, is there a simpler solution than creating three different versions of essentially the same thing? Well, there is. Perhaps you’ve heard the buzz about responsive web design. It’s buzzing for good reason. A responsive design can kill three birds with one stone, giving your work a cohesive presence without much extra effort or cost. These designs are fluid in the sense that the layout, images and functionality adapt to the size of the viewing device (screen, tablet or mobile). So there’s just one site with one set of code, utilizing CSS3, and when you make updates or add new content, you only do it once.
The idea of a fluid grid is an entirely new paradigm in the web world. It means thinking less in terms of pixels and more in terms of percentages and proportions. Responsive design takes a three-column layout on screen and makes it just one column on a 320-pixel-wide mobile device. It restructures a horizontal row of buttons at the top of the screen to one with less space between them on a tablet device and then to a drop-down menu on mobile.
Worried about your images? Don’t be. In a responsive design, images are fluid, while still staying on the constraints of their respective position within the flexible grid (so they won’t spill outside the design layout). Fluid images can be full-screen regardless of device, altering width to account for screen size. In addition, larger- scale images can be used for screen and swapped out for smaller ones on mobile so image quality stays high and download speeds are optimized.
Responsive design is a relatively new thing, so even if your site design isn’t fully “responsive” it can still take advantage of current web trends and a flexible grid that wraps to the device or browser size. Check out Noah Webb’s website, designed and developed by Benjamin Borowski of Typeoneerror Studios. Borowski says, “The front-end of the site employs scalable grid displays (aka jQuery Masonry) that wrap to the device or browser size. Large, full-screen images, rich elements, subtle transitions, visual effects, and beautiful design were the ultimate goal. We utilized resources such as Typekit to make use of dynamic typography, and modern CSS3 methods to create effects like the 3-D ‘card flip’ you’ll see in modern browsers like Chrome, Safari and on mobile browsers based on Webkit (iPhones, iPads and Android, for example).”
Photographer Noah Webb’s website for screen and Tablet.
The site also employs a content management system, based on a custom WordPress installation, so Webb can easily swap out and add to the work in his galleries.
Work With A Pro
If you’ve got the funds to invest in your business, working with a professional digital designer is the ideal situation. This is a legitimate investment in your business, and with so much to think about, it makes sense to work with someone who does this for a living. If you go down this path, you need to find a designer whose expertise is cross-device interface design and has a portfolio of work to prove it. I recommend looking at the portfolio sites of other photographers, select your favorites, and then ask them who they worked with.
Going It On Your Own
If you’re not quite ready to make the investment with a pro, there are still some decent options out there for you. For a lot less money you could do it all yourself. While this may sound daunting, it’s actually a lot easier than you might think. There are essentially two different paths you can take and both can provide you with an attractive and functioning portfolio website that is cross-device.
A traditional blogging tool like Wordpress will offer the greatest possibility for customization, but still requires a bit of technical bravery. Alternatively, there are end-to-end publishing and hosting solutions available such as Squarespace or Livebooks. With either choice there is a learning curve, but once you get going, it’s quite easy to make galleries and menus, and add images, video and other types of content with the click of a button. And all of these options have a built-in content management system, analytics reporting and social network integration.
Blogging isn’t just for blogging anymore. So if you decide to try it yourself, go to a site like ThemeForest.net and check out the hundreds of creative themes available. In the search bar, type in the word “responsive.” There were more than 200 creative themes that were also responsive designs.
With services like Squarespace and Livebooks, the templates are limited to what the platform offers natively, but they tend to be quite nice and allow you to upload custom code if you’re an advanced user. If you go this route, make sure you choose a service that provides you with mobile and tablet options.
Tablet devices, especially the iPad, are becoming increasingly popular at portfolio reviews and sit-down meetings with editors and clients. It’s easily portable and simply makes for a great presentation device either on its own or integrated into a printed portfolio book or case. It’s an excellent tool to showcase photographic images and motion photography. I think this trend will only rise given the superb retinal display resolution and color capabilities of Apple’s latest iPad.
There are a number of terrific iPad apps specifically designed for photographers to create their own customized and self-contained digital presentations. One of the more popular options is Portfolio for iPad. While it’s not a “live” website and isn’t accessible by others via the Internet or app store, it’s still definitely worth considering as part of your digital portfolio.
Photographer Jesse Rieser was one of the first to integrate an iPad right into his portfolio book. He says, “I decided to marry the old with the new. Integrate the iPad’s multimedia capabilities with classic book design [top left]. The new presentation has been very well received.”
Photographer Jesse Rieser’s portfolio book with a built-in iPad.
Like Rieser, Mark Katzman is another photographer who was thinking “inside the box” when he married digital with print, in this case by having hand-printed book and an iPad integrated seamlessly and elegantly into a beautiful solid Walnut wooden box (left). “When we realized that we could have our cake and eat it too—that is the beauty of a printed portfolio and the depth of a digital library with motion in the same package—we set out to design as elegant and practical a presentation case as possible,” Katzman says.
Photographer Mark Katzman’s portfolio box with a built-in iPad.
On one hand, it might seem overwhelming that technology is changing at the speed of light, but on the other hand it’s actually getting easier, quicker and in some ways cheaper to make something truly great, with your content more accessible than ever before. No matter what your budget, it’s within your reach to create a cohesive, multi-device portfolio. In fact, it won’t be long until that’s exactly what’s expected of you, so now is the time to take advantage and jump ahead of the curve.
Danielle Currier has an MFA from Parsons School of Design in New York City. She is an associate professor of visual communications at Endicott College in Beverly, MA, and the co-author of No Plastic Sleeves: The Complete Portfolio Guide for Photographers and Designers. She also runs the popular photo blog www.noplasticsleeves.com.