Online portfolio design megathread

[morts]

See old thread here

I decided to re-post this in a format similar to my data protection thread - broken up into sections so I can afford more words in what was quite a detailed guide.

So here goes. (mods please don't gas my placeholders)

Contents:

1. Domain names & hosting
2. Design
3. Content
4. Your tips

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.

If you disagree with me, I encourage you to argue the case, but please be constructive. I want this thread to be a resource for others and not devolve into a mudslinging, holier-than-thou troll-a-thon.

Watch these clips
These videos are constructive critiques of a series of photo portfolios from all kinds of photographers. Watch them and take away something useful from them. The great thing about these videos is that the reviews point out great things about sites as well as areas of improvement so you can see what you should do and what you should steer clear of.

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.
http://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.

Against my own advice, I registered http://kyrill-poole.com/ so call me a hypocrite if you want.

Also, when registering a domain name, look for a registrar which is flexible in what you can do with your domain. A lot of registrars will have a limit, for instance, on the number of subdomains you can have. While this may not bother you much, it's still good to have the ability to play with your DNS settings if you're technically inclined.

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. Lesson: avoid.

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).

Originally Posted by hazmat

http://www.ipowerweb.com/
I have used them since 2002. Good pricing, very little to no downtime.

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.4/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.

For $20 a month for a basic box it will serve you amazingly and you can install all sorts of stuff on there. I currently host with them and it's worked wonders for me.

Slicehost

If you get a slicehost box, I would recommend you install the following:

• WebMin
• Apache 2 (web server)
• PHP5
• MySQL (database engine)

All those are available through the package manager (apt-get, aptitude, yum, etc). The reason I say Webmin is because once you install it, you can forgo doing any console-level configuration. You can set up virtual hosts, passwords, etc all through a lovely web interface.

[morts]

Design

Before you read any of this, look here: http://vandelaydesign.com/blog/galle...pher-websites/. You will learn so much more about great design here than you ever will reading my threads.

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. Don't use them. Ever.

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!

In-Depth Stuff

Typography

I differentiate this from just "fonts" as it's a far more in-depth study of how fonts are used in everyday life and which fonts are most suited to which applications. I advocated using a sans-serif font for your basic text and I would stick to this for body text as all browsers, for instance, can render Arial.

Do some research into what fonts work where, look at other peoples' folios, use StumbleUpon, whatever. You'll get a better idea of how you can make your site stand out. Here are some starting points:

http://www.designer-daily.com/30-hig...l-designs-1999
http://abduzeedo.com/45-amazing-type...phic-portraits
http://vandelaydesign.com/blog/ <-- Another amazing all-round source of inspiration.

Colours

A good colour scheme will make or break a website.
For examples of how NOT to do it, click here: http://www.blogstorm.co.uk/top-10-worst-websites/

There are lots of resources out there on colour theory, harmonics, different combinations of colour, ad infinitum. I'll link some in a second but here are some basic rules to think about:

• Avoid flooding your site with bright colours. They hurt the eyes. .
• Add touches of bright colours to draw attention to elements
• Avoid clashing colours like purple/green, blue/yellow etc
• Black/white is fine because it's easier on the eyes.

http://econsultancy.com/blog/2654-20...website-design lists some excellent pointers and you would be well advised to read it.

Also, take a look at http://kuler.adobe.com/ - this nifty app will help you generate harmonious colour schemes either from a photo or by picking a "base" colour and a mode for picking the other colours.


Usability

This is where a lot of folks fall down. You can design the greatest site known to mankind from a technical point of view, but if I can't work out how to use it within about 5 seconds, I'll leave. Simple as.

You may complain that corporate websites often don't follow this rule and neither do large web-based applications. There is a reason for this: training. People can be trained to use a specific site if they work with it on a daily basis. They will NOT be trained to use your navigation that is operated by the power of thought.

Keep It Simple Stupid.

So, once you have figured out what colour scheme you want and decided on a general look of the site, you need to put your Jane "middle-aged housewife" Watson hat and see your creation from a user's point of view. Here are some tips that I think are worth sticking to in no specific order:

• Humans are associative learners. Make links immediately apparent and don't use the same style for anything else
• Think where the user's eyes are drawn to and put something important there
• Be consistent in your layout. No changing it for each page
• Don't force users to scroll unnecessarily
• Have a means of contacting you readily available if not on the same page than no more than one click away.
• Don't overwhelm the user with information

The last point deserves an explanation.
If you are a prolific photographer and have hundreds of pictures for people to browse through, present them in batches of no more than 10-20. The less scrolling your users have to do, the less stressful their time will be. Nobody likes missing half a photo due to screen size.

Another excellent resource for your betterment is here: http://vandelaydesign.com/blog/desig...with-visitors/

And finally - read this article: http://www.alistapart.com/articles/indefenseofeyecandy/ It talks about how design affects peoples' perception of the product or service and very much applies to us photographers selling our product.

Headrickphoto also has a very good point:

Originally Posted by headrickphoto

This list is very complete, however I have one suggestion that I see sites having issues with quite often...

For your index page (Home page), DO NOT CLUTTER IT. It must be organized, easy to find whatever needs to be found, and interesting. The user will decide if they are going to stay within the first 5-15 seconds. So make a good impression.

Flash & Scripting

Originally Posted by kelleyrie

can I add one thing: I despise a website that makes me wait for loading like a video game. If I click on your website and the first page I get is loading: xx%....I'm leaving.

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.

My rule of thumb is "If the script is not essential, don't use it".

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.

Have an alternative design/stylesheet for users with small screen resolutions (1024x768). It's a fairly simple job to set up:

This little script will seamlessly swap out your CSS file based on the user's screen resolution!

Standards

These are a series of guidelines laid out by the W3C about how websites should work code-wise. The first step towards a fully standards-compliant site is to ensure it validates using the W3C Website Validator. This will tell you that you have written fully valid HTML/XHTML. In turn this will help your site to be rendered in most browsers with fewer quirks since even Microsoft are beginning to support web standards instead of reinventing the wheel with each iteration if IE.

Look at http://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.

[morts]

Content

***WORK IN PROGRESS***

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:

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

JoanieBC21's contribution:

My suggestion is to go with Wordpress. It's the most stable blogging platform around. I've been blogging for seven years and have tried them all. Stay away from the free blogs hosted on someone else's server (Blogger/Blogspot, livejournal, myspace, etc.). You're earning money with your photography and you should invest in the presentation of your art/creation and use a real blogging platform. Own your work and maintain it yourself! Don't let others dictate how you manage your work. Take control from the start!

[morts]

Placeholder post 3

[benjamieson]

Originally Posted by morts

If the user is working on a small screen of 1024x768, try to cater for the lack of screen real-estate.

I need to step in here, as this is not a good comment!

I manage web site stats for about 75 websites, ranging from corporate, to geek, to photographers, to average "person on the street". One of them specifically targets brides and grooms planning their weddings and looking for photographers - it receives about 2000 visitors daily.

Out of those groupings, the predominant screen res is.... 1024 x 768. Only sites I manage aimed at geeks, designers or photographers consistently have higher percentages of visitors with larger screens, and still 1024 x 768 leads the pack.

Every time.

So, if you have even the slightest interest in being hired by average people (families, seniors, mothers to be, etc), brides, or corporate clients, those ' small screens' running at 1024 x 768 should be your primary concern, not something to "try to cater to".

Ben

PS: 1024 x 768 and 1280 x 800 make up around 60% of visitors to my corporate and 'general population' sites. Building for larger resolutions than that is going to instantly alienate 60% of your potential clients.

Can you afford to do that?

[morts]

Originally Posted by benjamieson

Out of those groupings, the predominant screen res is.... 1024 x 768. Only sites I manage aimed at geeks, designers or photographers consistently have higher percentages of visitors with larger screens, and still 1024 x 768 leads the pack.

Every time.

Hmm wasn't aware of those stats, thanks!

Originally Posted by benjamieson

PS: 1280 x 800

Not 1280 x 1024?

[Free]

All in all a great post!

I have to agree with the screen res issue, even if your punters have bigger monitors, you can't expect them to be running the browser full size - especially "geeks". I'm running dual monitors and usually have about 5-15 applications/windows running at the same time, even on one 22" I rarely have my browser window running at full width. Depending on the brief, I build most of my site at 960px or smaller to allow for browser chrome.

And as Ben mentioned, 1280x800! The most common size for Laptop displays.

On a similar vein... You highlighted "Don't force users to scroll unnecessarily" in your useability section. "Users don't like scrolling" is a pretty much obsolete idiom now days. It has been established that as users are now used to scrolling it is better to (within reason) keep relevant information together on the same page rather than making users click on a link and load a new page.

I also feel you've downplayed web standards a bit. Web standards are not a "fairly loose term" they are clearly defined by the World Wide Web Consortium (W3C) - an organisation headed by Tim Berners Lee (The dude that invented the internet [No it wasn't invented by the American military]) that is trying "To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web."

In terms of how this relates to designing websites, the first port of call is to make sure your website code validates using the W3C markup validator. If this is all you do, you're on the path to "Standards Compliance". There's more to it that just validation, including accessibility guidelines and more. A good place to get started is The Web Standards Project.

To be honest I vaguely skimmed over the flash section, but you seems to be saying avoid it, which is always good.

Blimey, I think I might have just started ranting??? Sorry, didn't mean to at all. I really think this is a great post, I was just stating my opinions on a few things I slightly disagreed with.

As to the mention of Wordpress, - It is a great blogging platform with plenty of free templates that are easy to modify. Personally I use MODx CMS a lot more for general websites and gallery situations as it is a lot easier to incorporate my own designs into than Wordpress is. It is also more easy to add/remove functionality of the platform itself than Wordpress, I've also found that non-technical people seem to struggle with needing to add custom fields to Wordpress galleries to get thumbnails and full size photos. I think if this could be made easier for the end user, Wordpress would take over as my gallery platform of choice. For general blogging it wins hand down.

I'm currently developing a gallery template for MODx in my spare time for myself and some mates. I'm planning to give to the MODx community as a free template, so I'll be sure to post links to it here when it's finished.

Cheers
Free

PS - Loved the 10 worst websites, I used to regularly use one of them. MSY the Australian computer parts shop, when you've got the cheapest prices (retail) in the country, you don't need a fancy website!

[morts]

Originally Posted by Free

Blimey, I think I might have just started ranting??? Sorry, didn't mean to at all. I really think this is a great post, I was just stating my opinions on a few things I slightly disagreed with.

I prefer when people rant about stuff they disagree with constructively, like you did here. It's far better feedback than "i think ur rong lol".

Keep it up!

PS: I edited in the W3C piece