Web Design- viewpoints

[Faolan]

This is a little FAQ sheet of elements I frequently post about when critiquing other sites. I've had a few PMs and Emails asking what I'm looking for when critiquing or why I'm harsh about it.

I'm harsh because I believe in being honest, but also a person who has a web site is that persons reputation. If you don’t understand Web Design or you want to learn it then find someone who does understand it. If you don’t want to spend the time then pay/trade with a professional to do one for you.

Remember a site design is about your image. It’s your online portfolio, business card and your reputation. A person will judge you on your site and quality of work. There's nothing worse than seeing some outstanding images being showcased in a site that looks like it's been dragged from the 90's.

Spend the time understanding what makes a good website, look at the professional sites and consider the elements that make up the site not just the whole.

When designing a site you have to factor in:

1) Who’s your intended audience?
2) What the demographics of your audience (what browser, abilities, screen resolution, connection speed and so on).
3) The branding of your company.
4) What media are you targeting? Things like mobiles devices, desktop computers, Games consoles.
5) What technologies do you want to use and more importantly why do you need to use them?

Most issues I see with websites are that they lack a clear and concise layout. Most are slapped together and it shows. Many lack forethought in design principles let alone deprecated coding standards. There is a key term in Web Design and that’s Well-Formedness. This means that all your code is clean, complies with the accepted standards (such as W3C) and is system agnostic.

Even with Template based sites you need to take care in customising it for your business otherwise it will look like any other on the web diluting your brand and image. Also understanding how the template works is also essential and having a basic understanding of underlying code and what it does is important otherwise you may end up breaking the site layout or worse make it impossible for a browser to render. Also you need to make sure the code of the template is properly formatted which many of the older or cheaper ones aren’t.

Common issues that I see:

Tables – Tables should be used for tabular data not for sites. In the early days Tables was used for sites and layouts because it was quick and easy. However it’s harder to maintain a table based site and it takes longer to process the pages.

These days it’s better and more efficient to lay out a site using Layers and CSS. Whilst it can be more difficult in the short term to build such a site the rewards down the line are worth the pain.

A pure CSS based site gives you the ability to change the whole site with one style sheet making updates easier and faster. In addition making changes to the site is a lot easier as there is far less code on a page.

Flash – This is one of the most abused pieces of technology on the ‘Net. People will build complete sites or embed Flash content incorrectly into a site.

The main problem with Flash is that it’s not search engine friendly, meaning to get your website noticed is significantly harder. The other big issue is that it’s not well supported on other devices such as Smart Phones, Pocket PCs and so on.

Amendment - Flash can be made SEO but it's got to be done as part of the design process and by it's nature not as intuitive as a pure HTML site.

Flash does have a place in web design for instance delivering dynamic content such as galleries, animation and also video streaming.

Colours – Colours on a web site should reflect your company branding and colour scheme. The design should also reflect your company image. However if you’re displaying photographs you should consider how to balance this. Most websites will have a base colour of black, grey or white for neutrality. Also I see text often with little or no contrast making it impossible for people who have poor vision to read the text.

Navigation – The heart of your website. A lot of sites I see have navigation in non-intuitive locations particularly in Flash based sites. Step back and consider what areas need to be readily accessible to a visitor. Normally you will have 3-4 key areas Home, Content, Contact and About. You may have more or less sections as needed but these should always be easily found on a site.

Load times – More about Flash than HTML but HTML based sites do and can suffer from this. People will only wait around 3-5 seconds for a site to load and they want information at their finger tips. They don’t want to see a landing page. Most people will associate that with the thought of the site not being ready. You want to give them a reason to stay.

Code – The biggest flaw of HTML based sites is the poor quality of code. Most coding I see doesn’t have a DocType, properly formatted code so that it’s legible or the CSS and HTML properly separated and used. In addition most sites don’t always display properly when viewed in alternative browsers such as Opera, Safari, Firefox and other browsers.

Contact forms – An area that suffers from a lack of understanding even today people still use a mailto tag because it’s easier than trying to lay out a form for a client. However this has some major drawbacks in that people may not have access to a email client or that they have blocked the mailto: tag due to security considerations.

Also using a mailto tag will leave that address open to Spammers who trawl the ‘Net for these.

Marquee text - Don't, just don't. People's eyes are drawn to movement. It's instinctive. If you have moving text people won't be paying attention to your content. By all means use movement on your site if it enhances or adds to your content.

Content - On your site make sure you tell your visitor who you are, what you do and how you do it. A lot of photographers rely on their work to sell them that may work in some instances but what if a person is in say Canada and you're 2000 miles away?

[Grumbledook]

Good post, should be a sticky

I would point out though that the biggest issue with flash site(more so than your points which are also worth taking in) is the fact most of them override the browsers and operating systems navigation. You can't use the back and forward buttons in the browser usually (or in my case the ones on my mouse), the mouse scroll wheel often doesn't work within flash made scroll bars instead of the default browser scroll bar.

They are just a pig to use most of the time and usually they will have music on them as well. Cardinal sin.

The other thing to consider is that most flash sites (if not all) can be replicated by using javascript librarys and don't fall foul to most of the issues flash sites have.

For example check this demo out: http://devkick.com/lab/galleria/demo_01.htm#img/grass-blades.jpg this is not done using flash.

[Faolan]

The other thing to consider is that most flash sites (if not all) can be replicated by using javascript librarys and don't fall foul to most of the issues flash sites have.


The problem with JavaScript whilst it's gained in popularity recently some people still disable it for similar security reasons to Flash. This said a JS gallery is usually more lightweight than Flash. Another advantage is there is JS libraries available such as script.aculo.us, JQuery and so on.

If you're going down the Flash or JS route then unless you know coding and want to avoid templates then you need a professional.

Another way to get JavaScript/DHTML galleries is to buy a extension for Dreamweaver if you use this app. Some of the best galleries I've found are from these people:

Project VII (http://www.projectseven.com/)

[sue.t]

Great post! I hope people take it to heart and take the time to understand the words.

Far too many websites are all about the owner of the website, and have little thought about the user of the website. Yet, the website is for the USERS, not the owner.

[Grumbledook]

that one I linked is JQuery it also degrades nicely if you don't have javascript enabled, a flash site for someone without flash won't work at all

worth bearing in mind

[potn_momma2]

great post.... off to google I go!

[Rachel B]

I just bought a book that I hope will help me more with CSS :)

[grimm5577]

Good post and good information.

I think flash is a great tool when used properly, a full site made from flash won't be great for SEO but if you are a well known brand I don't see any reason not to use it. Granted most if not all of us on this forum are not well known enough brands but you get my point.

[Faolan]

Going to add a nice blog from Google here for interest:

Google Site Tips. (http://googleblog.blogspot.com/2009/03/make-sense-of-your-site-tips-for.html)

[Faolan]

If you're interested in dynamic sites this is a useful link for demos of various software that's available:

http://www.opensourcecms.com/

What's also useful is the user feedback of each of the systems available.

[Oxymoroness]

May I add my 2¢?

Your verbal content is as important as your visual content.

1. Pick a tense, any tense. Just be consistent.

2. Magazine and other publication titles should be in italics.

3. Speak in either 3rd or 1st person. Not both.

4. No whining or defensive language. I realize that justifying your prices to those most likely have no clue exactly what it is that you do is a huge challenge. I encounter the same thing all the time. BUT the more you protest and justify, the weaker your position. Just sell them on the merits of your product and state a fair price. Let your customer start the argument and go from there. You may be pleasantly surprised to discover that less people will argue with you than you originally anticipated.

5. Keep your personal stories and biography to a minimum. When you do share a personal tidbit, always bring it back around to how it's relevant to your customer and what they need.

[obnoxiousmom]

Thanks for posting this. I wish I knew how to do half of the stuff you are talking about but simply use a program that writes me code for me and Ive been told the code is sloppy at best. I use layers but when various browsers view them, they see different things and I dont know how to fix it. Cant figure out CSS for the life of me :( And have no idea how to make a contact form lol

I dont think my site would ever meet up to your standards because I dont know what the heck Im doing haha

[SwitchBlade]

I dont think my site would ever meet up to your standards because I dont know what the heck Im doing haha

I don't want to be cruel, but if I were you I'd invest some money in getting a pro to do it. I've just given the site a cursory glance but if I were looking for a photographer I'd have just closed your site straight after it loaded the home page. You can put some great pictures on a website but unless people are looking for you rather than a photographer in general they are unlikely to look for them after that first impression is set IMHO.

At least you admit that you don't know what you are doing. If you want it to be a marketing tool to make you money then IMHO you should spend money on making it look as good as you can afford.

[Faolan]

This is the main point I was trying to make, if you can't do it or don't have time to do it then get a pro. Too many photographers think they are a designer or have web design chops, and fail miserably. I'm not getting at obnoxiousmom here, but more as a general viewpoint.

You see it a lot when people asking for critiques and was the reason for me creating this post.

[SwitchBlade]

BTW chap, I like the way you did your contact page, your default text is good at stopping it feeling cold and generic.

Another thing I'd add to the list is making sure the site degrades gracefully as you move to older browsers/odd platforms. Stupid amount of businesses (and some home users) still use IE6, and I know a lot of people who when browsing for something like this will do it when they are with their mates on their break at work. Then there's people with smart phones wanting to show your site to friends in the pub as a recommendation for example. The amount if sites I see that don't even show an explanation if you don't have flash installed isn't funny anymore.

[Todd Lambert]

Great points, on all accounts.

This thread should be required reading for anyone who is in need of a website, whether they are doing it themselves, or hiring it out.

[Jay Jay]

Great post. Here are a few SEO friendly site tips.


The most important is your page content. Make sure you have quality content with keywords.
The homepage is your websites most important page. Don't use it as a splash page or use flash. Make sure it has a decent amount of content mentioned above.
Try to avoid using flash since its not spidered as easily and most flash sites are only one page, your index.
Do not use frames because each frame page will be indexed seperately. If someone comes to your content frame page from google they won't see the header, footer, nav, etc.
Use CSS design and navigation to simplify your code making your content higher up for bots to see.
Use descriptive page titles for your pages.
Use alt tags to describe images.
Use title tags on your links.
Use appropriate anchor text when linking to your pages (don't use "click here").
Use description heading tags to describe paragraph content below (<h1>, <h2>, etc)
Use friendly page links with keywords when possibly (automotive_portfolio_2.html instead of portfolio.php?id=2)

[obnoxiousmom]

I don't want to be cruel, but if I were you I'd invest some money in getting a pro to do it. I've just given the site a cursory glance but if I were looking for a photographer I'd have just closed your site straight after it loaded the home page. You can put some great pictures on a website but unless people are looking for you rather than a photographer in general they are unlikely to look for them after that first impression is set IMHO.

At least you admit that you don't know what you are doing. If you want it to be a marketing tool to make you money then IMHO you should spend money on making it look as good as you can afford.

I have to make money to spend money. Cant afford to pay some one when Im in the negative all the time :/

But you say you glanced and would have left straight off the home page. Care to explain why? I cant improve what I can work with if I dont know whats wrong. I viewed all the major photographer websites in my area and they all pretty much look like mine or worse lol so I was really just trying to follow the trend of the locals

[Hikin Mike]

Use friendly page links with keywords when possibly (automotive_portfolio_2.html instead of portfolio.php?id=2)

Totally agree, but is there an "easy" way to convert the dynamic pages to display a more SEO friendly url?

[sapearl]

Hi Crystal - I just went out to your site for the first time. I hope you don't mind, but since you asked I'll give you my non-qualified opinion of your site. I don't do sites, so consider me an amateur in this regard.

For whatever reason your main page image took more than 10 seconds to load.... and I've got DSL Elite which is rated at up to 6MB/sec. download. That amount of load time is deadly today. I thought the site link was broken and almost left. I'm sure others would have had less patience.

A number of your photos are very nicely done, with a pleasant artistic touch - I can see rapport between the subjects and yourself.

For the slide show the images don't seem to transition very smoothly - there's a fair amount of jerkiness to them. An inconsistency I also see is the lack of the navigator buttons on the top of the gallery pages. Site uniformity is really important for a nice "feel." Your text seems a bit too jammed in - perhaps a smaller san serif font. You may want to consider dropping the boudoir gallery.

Now that I've been critical - nothing personal - let me be the first to say that I have no idea how to code or assemble a site. I tried to build one myself three years ago and it was beyond me. At the end of the day with a FT job I was just too tired to study manuals and experiment with s/w. My daughters convinced me to hire a pro, and it was the best money I'd spent. I worked with her for several weeks - we went back and forth a lot - but it worked out nicely in the end.

It is now three years later, my site is has become "stale," it needs to be updated, and new copy and fresher images need to highlight a revised business plan. I'm going back to a pro with new ideas, again. - Stu


I have to make money to spend money. Cant afford to pay some one when Im in the negative all the time :/

But you say you glanced and would have left straight off the home page. Care to explain why? I cant improve what I can work with if I dont know whats wrong. I viewed all the major photographer websites in my area and they all pretty much look like mine or worse lol so I was really just trying to follow the trend of the locals

[Jay Jay]

Totally agree, but is there an "easy" way to convert the dynamic pages to display a more SEO friendly url?

You can do it pretty easily using mod_rewrite in apache. You need to change your links in your code and then setup the mod_rewrite rule in an htaccess file. There are a bunch of online tutorials online. If you need any help let me know.

EDIT
If you do change your urls make sure you setup 301 redirects for any old pages that are already indexed.

[obnoxiousmom]

Hi Crystal - I just went out to your site for the first time. I hope you don't mind, but since you asked I'll give you my non-qualified opinion of your site. I don't do sites, so consider me an amateur in this regard.

For whatever reason your main page image took more than 10 seconds to load.... and I've got DSL Elite which is rated at up to 6MB/sec. download. That amount of load time is deadly today. I thought the site link was broken and almost left. I'm sure others would have had less patience.

A number of your photos are very nicely done, with a pleasant artistic touch - I can see rapport between the subjects and yourself.

For the slide show the images don't seem to transition very smoothly - there's a fair amount of jerkiness to them. An inconsistency I also see is the lack of the navigator buttons on the top of the gallery pages. Site uniformity is really important for a nice "feel." Your text seems a bit too jammed in - perhaps a smaller san serif font. You may want to consider dropping the boudoir gallery.

Now that I've been critical - nothing personal - let me be the first to say that I have no idea how to code or assemble a site. I tried to build one myself three years ago and it was beyond me. At the end of the day with a FT job I was just too tired to study manuals and experiment with s/w. My daughters convinced me to hire a pro, and it was the best money I'd spent. I worked with her for several weeks - we went back and forth a lot - but it worked out nicely in the end.

It is now three years later, my site is has become "stale," it needs to be updated, and new copy and fresher images need to highlight a revised business plan. I'm going back to a pro with new ideas, again. - Stu

Thank you for looking at it and giving me a decent description of whats wrong on your end from your perspective. I may have to take the time to pay a real designer but with me only having my equipment for 1 year and not knowing how to get my name on the search engines over the last year, also only making $400 after investing $3000, I seriously dont have the funds to pay some one at this moment.

[sapearl]

You're very welcome Crystal - I didn't mean to be overly critical... was only trying to give honest, direct, critical opinions.

I've had to face up with some hard realities on my site and my current business approach, and it'll cost me a few bucks to send things down a different path. But hopefully it will pay off in the long term.

Our sites display our work which are like our personal mirrors. We want to feature them in their best light, and we want to be involved intimately in that process. Hence we feel we can be the designers too. Well, it doesn't always work out that way, and I had to face my own ugly truth ;).

Thank you for looking at it and giving me a decent description of whats wrong on your end from your perspective. I may have to take the time to pay a real designer but with me only having my equipment for 1 year and not knowing how to get my name on the search engines over the last year, also only making $400 after investing $3000, I seriously dont have the funds to pay some one at this moment.

[obnoxiousmom]

lol, well I would like to think I could be a good designer :P Im one of those people who meddle into everything creative. But maybe Web design is just more than I can handle with all the ins/outs and coding. Ill look around for a designer and check prices. But how do you know you have really found a good designer? And what if you like to frequently change up your pictures? I get bored with my website often and change it like underwear so I dont want to be stuck in a design or forced to pay all over again to add or take away something

[sapearl]

That's a tough question Crystal and hard to answer. Ask for links to sites they've designed, go by word of mouth reference, check POTN.... it's almost a coin toss.

As for frequently changing the pictures, I have that problem too. For my new design I'll likely purchase some sort of gallery generating s/w plug-in that I can FTP to the hosting service running my site. I may not be able to code, but I could probably learn how to upload the new galleries, and then perform that function when I've created new material.

Also, fresh stuff like written content and new images I tend to put on my blog which is my "poor man's website" tie-in.;)


....... But how do you know you have really found a good designer? And what if you like to frequently change up your pictures? I get bored with my website often and change it like underwear so I dont want to be stuck in a design or forced to pay all over again to add or take away something

[Hikin Mike]

You can do it pretty easily using mod_rewrite in apache. You need to change your links in your code and then setup the mod_rewrite rule in an htaccess file. There are a bunch of online tutorials online. If you need any help let me know.

EDIT
If you do change your urls make sure you setup 301 redirects for any old pages that are already indexed.

I've done a bunch of 301 Redirects, but haven't done a mod_rewrite yet. Thanks for the tip! :D

[Hikin Mike]

Thank you for looking at it and giving me a decent description of whats wrong on your end from your perspective. I may have to take the time to pay a real designer but with me only having my equipment for 1 year and not knowing how to get my name on the search engines over the last year, also only making $400 after investing $3000, I seriously dont have the funds to pay some one at this moment.

I thought I have helped you in the past with that, but I can hardly remember what I did yesterday! You can check out this thread: http://photography-on-the.net/forum/showthread.php?t=793272

But in a nut shell, I think your title tag 'Welcome to C. M. Strickland Photography. Portrait, Maternity, Newborn, Family, Boudoir and Senior Photography in Anderson and the Upstate of &nbsp; SC' is WAY too long.

Get rid of the "fluff", like 'Welcome to C. M. Strickland'. You need your location first then a few of your keywords followed by the word 'Photography' or 'Photographer'....all in about 70-80 characters or less. Right now your at 149. Something like 'Belton South Carolina Portrait, Family, Boudoir and Senior Photography'.

Next, you need more content on your home page. I have a short bio on my home page. I would use a <h1> tag emphasizing your specialties helps your view see your key words and Google like that kind of stuff too. ;)

[obnoxiousmom]

^You did help me with my stuff and I thought I had done what you were saying by adding all the extra stuff to my home page and adding the SEO stuff lol Guess Im still not getting it

[Jay Jay]

lol, well I would like to think I could be a good designer :P Im one of those people who meddle into everything creative. But maybe Web design is just more than I can handle with all the ins/outs and coding. Ill look around for a designer and check prices. But how do you know you have really found a good designer? And what if you like to frequently change up your pictures? I get bored with my website often and change it like underwear so I dont want to be stuck in a design or forced to pay all over again to add or take away something

If you ever decide to change up your site I would be glad to help you out. I offer websites for photographers that you can easily manage the entire site. Just check the link in my signature if you are interested.

[SwitchBlade]

But you say you glanced and would have left straight off the home page. Care to explain why? I cant improve what I can work with if I dont know whats wrong. I viewed all the major photographer websites in my area and they all pretty much look like mine or worse lol so I was really just trying to follow the trend of the locals

Right the text seems to be too large and apart from the main heading on the home page all the same size. I'm guessing something is meant to load in the centre of the page but nothing does.

The top two lines I'm reading as "Home Creative" "About Photography" and then my head gets too confused, it would be aided with the "Creative Photography for Every Occasion and Any Location." being in a smaller font size or a change in background colour/border/etc to make the two feel more separate.

The about page is feels like a wall of large text, and that text rolls over your contact details at the bottom. There's not actually a lot there to read, but it almost feels like it with the size of the font.

The pricing page is a mess with different sized text and text rolling over itself.

Your blog on the other hand while basic is a much neater and nicer display for your work than your site.

As I said initially though seeing that first page as a first impression the site feels unfinished and thrown together. I'd have left as it had loaded and looked no further as an "average" browser. People may not be able to make a good looking site but they know what one looks like and will gravitate toward one over a worse looking one. Someone utterly useless can have a great looking site but they'd get more interest as that first impression is what matters.

</harsh>

Now for the constructive part of the criticism. I'm going to assume here that you only have internet explorer on your PC. I'm also assuming that you coded the site yourself. I'd look through your CSS and the CSS on your blog, probably take the nice white/dark grey/blue/orange colour scheme from the blog and use that to alter colours on the main site, change the font to a sans serif one (my personal preference, not everyones) at least for the navigation and contact details. Navigation I'd set in the blue, contact in the orange, header and main text in the grey. Shrink the font size on the menu slightly, and shrink the content text size, maybe add some form of border between the menu and the main text or more space on the home page so that it's more defined.

Having viewed your source code I see that the home page is meant to run a flash movie in the blank space but no-one else knows that. Make sure if you keep it that you display a message that the slide show requires flash and I'd place a plain image underneath myself so that people see at least something even if they can't see the flash.

Hope that feels more helpful than it does horrid.

[obnoxiousmom]

I run firefox and double check with IE when building my pages. But I know MAC users have issues with my website which sucks as I dont know how to fix it. I dont think your response was horrid. I just prefer to hear "your site sucks because..." rather than a plain "your site sucks" lol

[Faolan]

You should also check it in Opera in all the modes, as it has Mobile, Presentation and Screen support. One of the few browsers that do.

[obnoxiousmom]

I have opera as well and my site always runs fine on my computer no matter which browser I use. For some reason my text over runs its self on some other computers when people look at it and I dont know why or how to fix it

Trying to redo it now but its really the same to me :/ I guess its just what I like. Front page with different fonts and without a slide show so far
http://farm5.static.flickr.com/4017/4255422513_5e957cb361_o.jpg

[SwitchBlade]

Too many fonts there and definitely don't use Comic Sans. It's not cross platform compatible for a start. A simple roman or sans serif is a much more professional looking alternative. I'd look to using the same font for the menu and main parts of the page and only using a different one for the heading. Use a different colour for the links so they stand out more. As stated before I'd try to match the fonts and colourscheme between your blog and site.

[sapearl]

Any time I design something - flyer, page, announcement, etc. - I try to use NO more than two different fonts.

One MIGHT be serif and the other a sans serif. Within that I may use a modest amount of bold or italic. Too many fonts, and just like a photograph with bad composition you don't know what is important or what the main focus point is. Simple, clean graphic design always trumps complex confusing images. Clean and minimalist is often what sticks in one's mind as the iconic image that is remembered.

[obnoxiousmom]

Use a different colour for the links so they stand out more. As stated before I'd try to match the fonts and colourscheme between your blog and site.

Using more than one word color is like fingernails against a chalk board to me lol but Let me find colors Im happy with on my blog and Ill try it. The colors currently on there are generics that the blog auto puts in for me

Ill pick two fonts. Going to go work on it all now :)

[obnoxiousmom]

Corrected font. Now to find colors
http://farm3.static.flickr.com/2696/4256355511_ef8014b1e5_o.jpg

[sapearl]

Yes - more simplified, easier to read, easier on the eyes and improved spacing.

Now you just need to cut down on the verbosity - I see what you are trying to say but I think there are too many words. You may want to consider something like this: "Family Photography Including maternity, newborns & youth, couples and seniors. Serving upstate South Carolina. Contact Crystal Strickland for a consultation." and then list the other contact info.

What I just did was off the top of my head - used to do a lot of PTA and some corporate copywriting - but you can polish it a bit. You just had some redundant text there :D - Stu

[Faolan]

Also having that amount of redundant words on a page may mean a search engine down rank you thinking it's a spam drop.

[sapearl]

That's an excellent point Rob - I had no idea; you learn something new and valuable every day.:D


Also having that amount of redundant words on a page may mean a search engine down rank you thinking it's a spam drop.

[Todd Lambert]

I wouldn't worry about word redundancy, in this case. There is only like 4 instances of the word photography. That is not enough for Google to flag, and honestly you do want it the way you have it, because certain keywords should have a certain density - it actually helps with ranking.

[obnoxiousmom]

Now?
http://farm3.static.flickr.com/2756/4256498625_6cb5587856_o.jpg

[obnoxiousmom]

So put the words back?

[sapearl]

Compromise perhaps - in an earlier life I was an art director. Very often less is more from the standpoint of positive visual impact. But from an SEO standpoint, I'll have to defer to Rob and Todd's greater experience.... that is my weak area. I'm simply going by my initial, gut, visual reaction. I've seen a lot of good art and some bad art and this is just my emotional, non quantitative reaction. ;)

So put the words back?

[Todd Lambert]

I don't think it hurts in the case of penalties and SEO purposes. Me, personally I don't think the whole design is very well done, though. Sorry.

[sapearl]

Well - perhaps it's just too simple and plain in a place - POTN - where we're used to always seeing stunning photos, great graphics and dynamic design. Terrific visuals are not easy to come by. That's why the graphic design firms are able to stay in business :D.


I don't think it hurts in the case of penalties and SEO purposes. Me, personally I don't think the whole design is very well done, though. Sorry.

[obnoxiousmom]

^lol, i cant make everyone happy so I have to go with the masses. I have basically been a minion in building this site and just doing what I was told for two days now.

[obnoxiousmom]

And Todd, Your websites are stunning so I do not think I would ever live up to your expectation :)

[SwitchBlade]

Well - perhaps it's just too simple and plain in a place - POTN - where we're used to always seeing stunning photos, great graphics and dynamic design. Terrific visuals are not easy to come by. That's why the graphic design firms are able to stay in business :D.

I'm a firm believer that less is more in web design. Problem is it's the difference between basic and missing something and sleek and good.

[Todd Lambert]

Crystal, thank you... I actually like your existing site better, but the black may not lend itself to your work. Softer color tones would probably be more appropriate, I think.

Anyways, I was not trying to slam you, just making an observation. I think there is some typography issues with your mockup that would fix some things, mainly the size of your tagline. It shouldn't be bigger than your menu text. Ideally, your company name or logo is biggest, then your menu, then your tagline, then your body copy. That's usually the order. The way you have it, the tagline gets your attention more than your menu which is not the way to go. You want your menu to stick out as much as possible, since it's just about the most important aspect of your site. Many people lose sight of this when designing, but it really is the most important thing. Without good navigation, you might as well just make your site a single page site.

Anyways, keep playing with it. I often go through round after round of designs, over and over again. Sometimes, I think I have it... and let it sit for awhile and then when I come back to it, something jumps out as wrong, or I add a small thing, and voilà!

The secret to good design is the details. You can make almost anything look great, if you focus on the very small details that most people miss. It's the sum of those details that add up to the whole experience. People won't be able to put their finger on what it is that they like, they just know that they like it.

Anyways, keep at it.

[Faolan]

OK, I'm going weigh in here as I've been avoiding stepping on toes. The design is dated. Sorry, but that's simple fact. It harkens back to the late 90s and early 2000's of web design.

You really need visual interest on the front page or some stunning typographical layout, you have neither. You need this to engage the visitor, and having a slide show in the middle of the page isn't going to cut it.

What you need to do is over the weekend sit down and look at some professional sites and review what makes them work both visually and emotively. Remember photographer is about creating a rapport with your subject, so you need to grab their attention. This site just doesn't do any of this, in fact as has been noted it's more likely to turn visitors away. You're competing in a very, very crowded and competitive market especially for family and seniors work so you need your site to go WOW for your visitors.

Look at any website, not just photographic. Sit down and think about what navigation looks good and works for you, think how the content is laid out and how it engages your eye. Take note of the sites that you're referring to and taking ideas from, this will help for reference. If you need help PM the guru's for advice and help, most of us probably won't mind.

Once you have a firm idea of what you want sketch it out, yes pencil and paper. It will save you lots of time in long run when creating the site. Once your doodles scan them into Photoshop (or your image editor) and tweak/edit the layout till you're happy with it. Then start coding round it. That's how pro designers build their sites. Very few will sit down with Photoshop and immediately start drawing.

Final point is create a logo, or something to brand your company. I'm guilty of this as I don't use a logo, never got round to creating one but worked around it. The text you're using for your logo is very old fashioned, it doesn't say 'modern' to me, it's another that it would turn me away if I was considering you for senior work, which for all intents and purposes is a vibrant genre with punchy colours and creative lighting.

Hope all this helps.

[obnoxiousmom]

I do look at websites a lot. For what ever the reason may be, Im drawn to simplicity. Black and white. But it doesnt seem to GRAB anyone. I prefer links across the top. Do not like side navigation. I am a little OCD with things being symmetrical which may be why. So what my brain sees is

Header
Navigation
Sample of work
Contact information

I love some of the designs that tom has listed. I love blues and purples, blacks and whites. Pinks and greens. But every time Ive tried to expand my site into more detail, every one screams it takes away from my images and that they should be the center focus. So I go back to simple.

I HATE flash sites but like a few of the features. Like the photography sites with the slide shows resembling my current site. But then its too slow. Doesnt load fast enough for people

So everything is conflicting

Too simple
Too complex

Not enough words
Too many words

Simple fonts
Your fonts are too plain

My head is spinning!

[Hikin Mike]

FWIW, I dabble in web design/graphic design....not a pro at all, I just know enough to be dangerous. I too agree with your site looking dated and 'boring'. So, last night I asked my wife for her impression. She has no background in web design, graphic design or photography. She basically said nothing about the website itself, she liked the pictures. She did say she didn't like the picture of the kid on the train tracks though!

[obnoxiousmom]

oh my! Thats like my favorite picture of my daughter of all time and its the largest one hanging in my house lol

[Faolan]

This is why I said start from scratch clear your mind of your existing site and rethink what you're doing. Header navigation is easy to implement (I use this myself), and to incorporate into your site.

Contact info usually goes into a separate page with a contact form, that way it's nice and easy for someone to get to.

I agree about Flash don't use it, except for what it's design for: Media Presentation. Which is why I use it as my gallery system. That and the back end makes it a snap to update.

My site is designed to be simple but elegant, it was one of the criteria I set for it. Another criteria I set was that it supposed to look similar in all browsers which was a bloomin' pain. Whilst it's code and CSS heavy I've used certain tricks to compress the pages down before they are delivered to the browser client, which speeds up load times. I've also used image sprites for the navigation again speeding up load times despite being a large(ish) image.

Colours I used was to compliment the images not detract from them, they form the background. Just like you would for mounting images. Dark colours let the images stand out.

You won't please everyone with your site design, but you need to make it competitive with your local photographers otherwise you're wasting your time putting one up. It's the first impression that many people will have of you.

[Hikin Mike]

oh my! Thats like my favorite picture of my daughter of all time and its the largest one hanging in my house lol

LOL!!! She said something like "I can't believe she let this girl sit on the railroad tracks!". I'm sure it was an abandon track. ;)

[b.han]

FWIW, I dabble in web design/graphic design....not a pro at all, I just know enough to be dangerous. I too agree with your site looking dated and 'boring'. So, last night I asked my wife for her impression. She has no background in web design, graphic design or photography. She basically said nothing about the website itself, she liked the pictures. She did say she didn't like the picture of the kid on the train tracks though!
I absolutely agree.

Personally, I think that the site looks a tad boring because the text makes it look cluttered. I think you should experiment with different font sizes. Using different font sizes helps the viewers distinguish between different types of text where it be the title, navigation, comment, contact information, caption, or actual context.

[obnoxiousmom]

Because Microsoft expression web writes all code for me there isnt a lot of understanding when it comes to CSS etc. Ive been trying to watch tutorials

[obnoxiousmom]

LOL!!! She said something like "I can't believe she let this girl sit on the railroad tracks!". I'm sure it was an abandon track. ;)

Not abandoned but runs like clock work :) I wouldnt put my child or any other in danger lol

[Hikin Mike]

Not abandoned but runs like clock work :) I wouldnt put my child or any other in danger lol

I/my wife knew that. :D

[SwitchBlade]

I do look at websites a lot. For what ever the reason may be, Im drawn to simplicity. Black and white. But it doesnt seem to GRAB anyone.

This is the thing as I said before. It's not so much that the white on black doesn't grab anyone, it's more the layout and general design. As said, too simple and you look like something from the early days of the web, too much detracts from what you are doing and can become a Geocities style mess. Balance is key and the difficult bit.

That said I'm another weekend web warrior.

[sapearl]

I know how you feel - been through this myself also.

So, I threw in the towel on the 3-year old sight from 1990 and I'm now working on some new ideas with a designer. She and I are working on a logo design first, a solid identity. The logo does not have to be earth shattering.... just iconic in order to readily identify your site, your product, your watermark, business card - that sort of thing. You want the customer to readily identify that it's YOU by the visual symbol, without having to do any reading. Kind of like the Nike Woosh, the Cotton symbol (one of my favorites), Target, etc.


ISo everything is conflicting

Too simple
Too complex

Not enough words
Too many words

Simple fonts
Your fonts are too plain

My head is spinning!

[obnoxiousmom]

I did originally have a "logo" It was a daisy. But at first it felt cool and then it just didnt feel right anymore. The logo im feeling right now is

X X
V
___

lol

[sapearl]

Well..... maybe take that daisy and represent it in a way that's recognizable but a bit differently than what folks normally expect to see.

I did originally have a "logo" It was a daisy. But at first it felt cool and then it just didnt feel right anymore. The logo im feeling right now is

X X
V
___

lol

[Karl Johnston]

So...anyone know any amazing web designers?

[obnoxiousmom]

^HAHA thats my next step huh :)

[Karl Johnston]

It's all good and well to know what to do, though what good is it if you don't know how to do it? :lol:

[obnoxiousmom]

The only thing I think Ive figured out after 24 hours of insanity is a background color I like lol

http://www.cmstrickland.com/test.html

Here are the colors that a web color matcher says fits but I cant figure out how to implement them.

[obnoxiousmom]

Its a work in progress with help from another POTN member

http://www.cmstrickland.com/test.html

[SwitchBlade]

The menu text is rolling over the top of the tagline beneath for me. Colourscheme does look improved though. The Javascript slideshow seems to be pointing to someone else's site.

Are you still using that program to make it as I think part of the design issues are how that is creating the site and laying out the CSS.

[obnoxiousmom]

Yes, some one gave me code and told me to redo the code to match my site. Havent gotten that far yet with the coding.

Same program. I do not know why the words roll over. Its driving me nuts! I wish I knew some one who used the same program and could help me understand what the deal is.

What browser are you using? What type of computer? What screen resolution? Trying to figure out why you see it that way and I would say 95% of people dont

[SwitchBlade]

Firefox 3 on all machines, on my laptop at 1024x768 it overruns, on my wifes laptop at 1680x1050 it overruns, on my desktop it's fine, 1920x1200. Though I can't see screen size causing it as your CSS sets it to 800px wide.

Could be a font issue. Your site is dictating "Bookman Old Style" as a font, which is bad as that's not a standard font. So I'm guessing it's defaulting to another font, probably Times New Roman by the look of it. You have "Bookman Old Style" installed presumably so you'll see it very differently (having looked it up on wikipedia it's a very different font).

Here's a list of "web safe" fonts to use: http://www.w3schools.com/css/css_websafe_fonts.asp

[obnoxiousmom]

Ok, changed the font. Try looking again?

[SwitchBlade]

Still the same and it's still going for "Bookman Old Style".

[obnoxiousmom]

www.cmstrickland.com/test.html
(http://www.cmstrickland.com/test.html)
Now? I removed some css styles that were still giving that as a font.

[SwitchBlade]

Yup that works fine now.

[obnoxiousmom]

SOOOO, the key is remove styles if they arent in use. Thank you for helping me figure that out :)

[cdwise]

Personally, I think that the site looks a tad boring because the text makes it look cluttered. I think you should experiment with different font sizes. Using different font sizes helps the viewers distinguish between different types of text where it be the title, navigation, comment, contact information, caption, or actual context.

Don't go too crazy on the different fonts more than 2 or 3 makes the site look amateurish. One thing that is important is to use structural mark-up - aka headings and body text. There are some very good slideshows that don't use Flash but use javascript either jQuery or Mootools for the transitions. They also allow you to add context - information about the images which helps with SEO (Search Engine Optimization) so that people can find your site.

For the person that said they use Expression Web for their site it is really easy to make sure that you are using headings and other text properly in EW using the dropdown on the standard toolbar to apply heading elements to the appropriate parts of your page.

I like the new gradient background you are using on http://www.cmstrickland.com/test.html and the colors are harmonious together.

I have to admit to a fondness for http://www.projectseven.com/products/galleries/lightshow/tweaks/wall-hanging/ though I don't think it is a very user friendly site.

[obnoxiousmom]

Thank you. There is some one on this site who is working VERY hard to help me get my site "right"

[cdwise]

Because Microsoft expression web writes all code for me there isnt a lot of understanding when it comes to CSS etc. Ive been trying to watch tutorials

If you are using Expression Web you should visit the MS forum for it. The best resources for beginners (and those new to HTML/CSS because they used FrontPage or other WYSIWYG editor) are in the "BEFORE POSTING" thread at http://social.expression.microsoft.com/Forums/en-US/web/thread/99c95aee-bfe6-4c4d-80d4-8d197194a942

[obnoxiousmom]

^Thank you for the link

[minhthanh77]

I think flash is a great tool when used properly, a full site made from flash won't be great for SEO but if you are a well known brand I don't see any reason not to use it. Granted most if not all of us on this forum are not well known enough brands but you get my point.

[Karl Johnston]

I seem to get wicked SEO lately..I found out that I can put in meta-data into each of my pictures so I've been keywording like mad.

[sapearl]

You've got the touch then Karl - good for you ;). Unfortunately that's beyond my ability at this point.

I seem to get wicked SEO lately..I found out that I can put in meta-data into each of my pictures so I've been keywording like mad.

[Jay Jay]

I would highly recommend you add your header/footer to your portfolio section. Once I'm on that page I have no way of getting back to contact you without hitting back a bunch of times. Also, if someone finds a portfolio page on the web through say Google, they won't know your name/contact info/ etc without stripping off your pages and going to your domain.

[Hikin Mike]

I would highly recommend you add your header/footer to your portfolio section. Once I'm on that page I have no way of getting back to contact you without hitting back a bunch of times. Also, if someone finds a portfolio page on the web through say Google, they won't know your name/contact info/ etc without stripping off your pages and going to your domain.

If your talking about 'obnoxiousmom', it's a work in progress. I'm helping her right now. ;)

[photoguy6405]

Interesting thread.

[DarkKnight369]

This is a little FAQ sheet of elements I frequently post about when critiquing other sites. I've had a few PMs and Emails asking what I'm looking for when critiquing or why I'm harsh about it.

I'm harsh because I believe in being honest, but also a person who has a web site is that persons reputation. If you don’t understand Web Design or you want to learn it then find someone who does understand it. If you don’t want to spend the time then pay/trade with a professional to do one for you.

Remember a site design is about your image. It’s your online portfolio, business card and your reputation. A person will judge you on your site and quality of work. There's nothing worse than seeing some outstanding images being showcased in a site that looks like it's been dragged from the 90's.

Spend the time understanding what makes a good website, look at the professional sites and consider the elements that make up the site not just the whole.

When designing a site you have to factor in:

1) Who’s your intended audience?
2) What the demographics of your audience (what browser, abilities, screen resolution, connection speed and so on).
3) The branding of your company.
4) What media are you targeting? Things like mobiles devices, desktop computers, Games consoles.
5) What technologies do you want to use and more importantly why do you need to use them?

Most issues I see with websites are that they lack a clear and concise layout. Most are slapped together and it shows. Many lack forethought in design principles let alone deprecated coding standards. There is a key term in Web Design and that’s Well-Formedness. This means that all your code is clean, complies with the accepted standards (such as W3C) and is system agnostic.

Even with Template based sites you need to take care in customising it for your business otherwise it will look like any other on the web diluting your brand and image. Also understanding how the template works is also essential and having a basic understanding of underlying code and what it does is important otherwise you may end up breaking the site layout or worse make it impossible for a browser to render. Also you need to make sure the code of the template is properly formatted which many of the older or cheaper ones aren’t.

Common issues that I see:

Tables – Tables should be used for tabular data not for sites. In the early days Tables was used for sites and layouts because it was quick and easy. However it’s harder to maintain a table based site and it takes longer to process the pages.

These days it’s better and more efficient to lay out a site using Layers and CSS. Whilst it can be more difficult in the short term to build such a site the rewards down the line are worth the pain.

A pure CSS based site gives you the ability to change the whole site with one style sheet making updates easier and faster. In addition making changes to the site is a lot easier as there is far less code on a page.

Flash – This is one of the most abused pieces of technology on the ‘Net. People will build complete sites or embed Flash content incorrectly into a site.

The main problem with Flash is that it’s not search engine friendly, meaning to get your website noticed is significantly harder. The other big issue is that it’s not well supported on other devices such as Smart Phones, Pocket PCs and so on.

Amendment - Flash can be made SEO but it's got to be done as part of the design process and by it's nature not as intuitive as a pure HTML site.

Flash does have a place in web design for instance delivering dynamic content such as galleries, animation and also video streaming.

Colours – Colours on a web site should reflect your company branding and colour scheme. The design should also reflect your company image. However if you’re displaying photographs you should consider how to balance this. Most websites will have a base colour of black, grey or white for neutrality. Also I see text often with little or no contrast making it impossible for people who have poor vision to read the text.

Navigation – The heart of your website. A lot of sites I see have navigation in non-intuitive locations particularly in Flash based sites. Step back and consider what areas need to be readily accessible to a visitor. Normally you will have 3-4 key areas Home, Content, Contact and About. You may have more or less sections as needed but these should always be easily found on a site.

Load times – More about Flash than HTML but HTML based sites do and can suffer from this. People will only wait around 3-5 seconds for a site to load and they want information at their finger tips. They don’t want to see a landing page. Most people will associate that with the thought of the site not being ready. You want to give them a reason to stay.

Code – The biggest flaw of HTML based sites is the poor quality of code. Most coding I see doesn’t have a DocType, properly formatted code so that it’s legible or the CSS and HTML properly separated and used. In addition most sites don’t always display properly when viewed in alternative browsers such as Opera, Safari, Firefox and other browsers.

Contact forms – An area that suffers from a lack of understanding even today people still use a mailto tag because it’s easier than trying to lay out a form for a client. However this has some major drawbacks in that people may not have access to a email client or that they have blocked the mailto: tag due to security considerations.

Also using a mailto tag will leave that address open to Spammers who trawl the ‘Net for these.

Marquee text - Don't, just don't. People's eyes are drawn to movement. It's instinctive. If you have moving text people won't be paying attention to your content. By all means use movement on your site if it enhances or adds to your content.

Content - On your site make sure you tell your visitor who you are, what you do and how you do it. A lot of photographers rely on their work to sell them that may work in some instances but what if a person is in say Canada and you're 2000 miles away?


This is an absolutely fantastic post. I completely agree. I would like to add a bit though....

- Color: Color is an important issue in regards to accessibility. Some people are color deficient, color blind, etc. Do not you any sort of navigation or elements that rely on color differences to be decisive. High contrast text is extremely crucial as mentioned. While it may look fine to you, people with color or general vision issues might not be able to read it.

- Marquee text: As mentioned, this is not a good idea to use...unless you are designing a Chinese website. Web Design can have cultural differences, and the Chinese like a ton of flashy elements all over their pages. Its crazy.

- Content: Not only is the text you write on your site important to explain what you do, but its also crucial to aid in SEO. Think about what people will search on when looking for a photographer like you. Try to incorporate those search terms in a brief descriptive paragraph on your home page.