Web Design- viewpoints

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?

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 ….htm#img/grass-blades.jpg this is not done using flash.

Grumbledook wrote in post #7459137
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

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.

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

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

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

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.

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

Google Site Tips.

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

http://www.opensourcec​ms.com/

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

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.

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

obnoxiousmom wrote in post #9329289
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.

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.

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.