Tips for creating a portfolio

Here’s a quick cross-post from a forum that I post on about how to design your portfolio site. You’ll have noticed that I will probably liberally ignore any and all of the tips that I lay out here, but still! So without further ado, here goes!

I’ve been posting in a few “critique my site” threads of late and since I have time to kill, I thought I’d share my nibbles of information and tips that I have picked up over the years doing the odd spot of web design here and there.

I’ll present my tips in quick points and paragraphs to stop you tearing your eyeballs out with a rusty spoon.

Domain Names

First and foremost, pick a good domain name. Too often have I seen people that have site names that are as long as my forearm.
https://clear-light-pixel-charleston-photography.com/ is not only a bitch to try and spell but it’s also far too long and easily forgotten. I appreciate that a lot of domains are taken, but, when you register a domain, try to pick a name that is easy to pronounce and spell.

If you have a funny name or surname, then I’d advise against using it as part of your domain for the simple reason that when you mention your site in passing to someone, they want to be able to bash it out on the keyboard without asking you to spell it letter-by-letter.

For instance, my name is Kyrill Poole and if I were register a domain with that name – kyrillpoolephoto.com or something – then I would constantly be answering the same “how do you spell that?” question over and over ad infinitum. I know. I do already.

Ideally the name should be no more than a pair of words. *“pixelphoto.net”*“reynoldsphoto.com” “followme.co.uk” are all good names. All taken, I might add. This also makes them memorable. You would remember followme.co.uk far easier than kyrillpoolephoto.com.

Hosting

Don’t use free hosts like Geocities and Google Pages. They’re good for quickly sharing your family’s ski trip album with your distant cousins in Azerbaijan, but not so good for a professional portfolio.

Do your homework and look around for good hosting deals. Personally, I’d recommend a Unix/Linux hosting provider. PHP5 and MySQL are a HUGE plus. Also, look at the bandwidth allowance and overage charges. A good host will offer several tens of gigabytes transfer per month. Note that this is only measured on the outgoing connection (FTPing to your server to upload photos does not count as outgoing).

If you have a bit of spare cash, you can opt for a virtual host on slicehost.com. You get a virtual machine which you can load with your choice of Linux distro (CentOS 5, RedHat 5, Ubuntu 8.⁴⁄₈.10 but to name a few) and do what you please with. You can build it, break it, format it, whatever. It’s your box.

Design

This is the most crucial part of your portfolio. While it may not make or break your image and brand, a good, well thought out design will entice clients to stay and peruse your work.

Take time to do some research into good design practices. Look at other portfolios to see what they have in common and try to incorporate it into yours.

Simple is effective. Use a plain font like Arial or a Sans Serif variant. They are easier to read and won’t cause headaches to your viewers.

Run a spellchecker over your text before putting it live. At least. Better yet, get someone to proofread your txet so miskates don’t pop up. If someone is looking for professionalism, txt spk and l337 are your worst enemy. If you use them in your pages without irony or humour, I will find out where you live and strangle you with a brick.

Gentle colours. People find it easier to look at photos/read text on screen when the background is dark and the text is light. If anyone’s used Lightroom, you’ll note that, unlike Photoshop, it has a very dark background complete with a “lights out” mode which dims it further. This makes it easier to look at your photos with less eyestrain.

I’ve had conflicting opinions on this – I leave it to you to decide what your audience prefers: light/dark or dark/light!

Flash

Nobody likes to be greeted with a “loading the site you clicked to view right now” progress bar. It’s taken me long enough to load your stupid flash applet without having to wait for your flash applet to load all of its assets.

I know a lot of you have seen hundreds of photo sites that are made entirely in Flash and you’ve thought to yourself “wow, that would be awesome to have on my portfolio”.

Unless you are a flash guru or have friends that do a lot of flash development, who are willing to design and code your folio for you, stay clear. Flash is hard to get right and when it’s wrong it’s really bad.

Saying that, Flash, when used correctly, is a powerful tool that can enhance your site. SimpleViewer is a great tool for quickly showing off your images without having to code your own flash-based image viewer.

Scripting

My rule of thumb is “If the script is not essential, don’t use it”. Not the most eloquent saying, but true nonetheless.

Don’t load your site up with JavaScripts that handle mouseovers (you can do it with CSS just as easily) or make your photos slide across the screen and other wacky effects.

Ask yourself if the feature that the script adds is *essential *to the running of the site. If not, don’t use it. It adds to loading time, causes crashes and annoys users who use Firefox and have JS off and a flashblocker like AdBlock or NoScript installed. Annoyed users do not equal potential clients. If they are irate at your site, they won’t bother trawling through it.

ALTERNATIVES

I touched on this already but I would like to reiterate again. It’s come up time and again in the discussion.

Provide an alternative to flash/JS to your users. If they don’t have JS enabled or flash installed, they’ll see a blank page or a pageful of errors. Make sure your site will work without the JS/Flash. It might not do fancy transitions, but it’ll work.

Standards

This is a fairly loose term and a somewhat all-encompassing one at that. I’m using this in the context of CSS and standards-based design. Look at https://www.csszengarden.com/ for some truly astounding examples of standards-based design. The whole concept revolves around separating style from content and while you might not be thinking about it as much, it comes in extremely handy if you ever choose to redesign your site.

If your markup (HTML) is written well, you can simply swap out the CSS and your site will be changed entirely. It is also a great way of keeping your filesizes down to a minimum as a well-thought out HTML page and corresponding CSS file will only be a few KB and will load almost instantly.

Another great reason to use CSS is as a replacement for all your silly JS effects like mouseovers. Instead of writing a hefty script to handle mouseover events in a HTML page, the :hover attribute in CSS handles that just as well, if not better because it’s far more flexible.

CSS is also supported by most browsers and renders the same across the board. The exception in some cases is Internet Explorer, but a lot of people these days use Firefox/Opera/Safari to browse the Web so there is no excuse really.

Finally, and I cannot emphasize this enough, test in several browsers.

Content Management

An alternative to designing your site from scratch is to use something like a blogging engine and download and customise a layout that suits your needs. Good engines include wordpress and livejournal (google them). They are easy to set up and maintain and have a plethora of plugins available to extend functionality.

They also provide a pre-made interface for creating new posts and keeping track of tags and the like. I’m sure you’ve seen a blog before so I don’t need to tell you much more.

Here are a couple of examples where blog engines were used to do a portfolio:

https://blog.photosforlife.ca/
https://www.byronbrydgesphotography.blogspot.com/

JoanieBC21’s contribution:

Headrickphoto also suggested a very good point:

That’s all I can think of for now – hope this helped a little. If anyone has anything to add, then post here and I may update the OP if the post has value!

Feel free to discuss anything I’ve spoken about and comment!