Tips for creating your website

[morts]

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
They are indispensable for any photographer lookig to build their web presence!

Here we go:

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.

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

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.

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

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.

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 **********s 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 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.

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!

Headrickphoto also suggested 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.

Also make the Most important information (not just what you want to highlight) easy to find... This includes contact information, what you do etc.

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!

[ozwebfx]

Very well thought out post!

I've been doing web design for more than 5 years & can't take issue with any of the above.

In regards to flash & **********, these can be used to enhance a website if used correctly but always make sure there is some fallback position so, if I have javasript turned off make sure the page still works, or, if I don't like flash give me an html version.

For most mere mortals the idea is to give out information & make money from the website .. if you have already made your fortune & are well known then by all means go for some esoteric, hard to navigate & self-stimulating flash fest!

[morts]

Originally Posted by ozwebfx

In regards to flash & **********, these can be used to enhance a website if used correctly but always make sure there is some fallback position so, if I have javasript turned off make sure the page still works, or, if I don't like flash give me an html version.

That's what I was getting at, more or less.
I'm not a fan of a site that is made entirely of flash and where the navigation scheme is designed in accordance with the author's own belief that they know better than everyone else how to design the navigation.

99.99% of the time that assumption is wrong. Web UI design is mature enough as a discipline for people to expect at least a play on a familiar navigation system, if not one that follows the general pattern.

If it has to be a custom one, you have to work 5 times harder to ensure your users can pick it up in, oh, about 3 seconds. No more. I do not want to spend 5 minutes of my browsing time figuring out your amazingly technical, but convoluted and stupid flash navigation.

I could spend that time browsing midget porn.

[MrCastle]

Originally Posted by morts

I could spend that time browsing midget porn.

Awwwwkwarrdd....

[benjamieson]

Originally Posted by ozwebfx

In regards to flash & **********, these can be used to enhance a website if used correctly but always make sure there is some fallback position so, if I have javasript turned off make sure the page still works, or, if I don't like flash give me an html version.

I'll agree to this and take it a step further!

1: There is little that Flash can do for a photographer website that can't be done with easy-to-implement ********** libraries such as Scriptaculous/MooTools, etc.

2: By avoiding flash, you're keeping your site open to search engines, which aids in building traffic

3: Even with **********, you should always build your site initially as plain old HTML. Make everything work and then *add* the effects, transitions and little touches with **********. This ensures that even the lowest common denominator (no flash, no **********) can always access your site and view your work without problems.

Just my 2¢ (as a career web developer for 12 years)

Ben

[morts]

Originally Posted by benjamieson

I'll agree to this and take it a step further!

1: There is little that Flash can do for a photographer website that can't be done with easy-to-implement ********** libraries such as Scriptaculous/MooTools, etc.

2: By avoiding flash, you're keeping your site open to search engines, which aids in building traffic

3: Even with **********, you should always build your site initially as plain old HTML. Make everything work and then *add* the effects, transitions and little touches with **********. This ensures that even the lowest common denominator (no flash, no **********) can always access your site and view your work without problems.

Just my 2¢ (as a career web developer for 12 years)

Ben

Very valid points.

Always catering to the lowest common denominator first and foremost you ensure that your site will work on the lowliest of machines.

Remember, not everyone is endowed with a dual 24" widescreen beast of a monitor. There are still folks out there who run a 15"/17" job and have no inclination to upgrade.

[Jim Bryant]

No matter just how good your site is, if it takes too long for photos to download, your viewer is out of there. Make sure they load quickly and a person can navigate quickly about the site.

[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. Also make the Most important information (not just what you want to highlight) easy to find... This includes contact information, what you do etc.

Hope this helps!

[TheYorkshireRambler]

I'd also recommend using a plain font. You wouldn't believe the amount of websites that have super fancy fonts and are a nightmare for those of us who struggle to read such text. Many a site I have left the instant I have seen the text.

[morts]

Updated the OP with your suggestions