WebDesign pointers please

[FishGuy]

Hey,

I have worked in Application Development a while but have never really produced customer facing websites. Recently a friend asked if I could produce a simple site for him. Whilst I have done this in a way that fulfills the basic requirements I would like some constructive criticism.

I have always been aware that my creative/design skills are lacking and that I would greatly benefit from learning photoshop/graphics much better.

I have tried to used CSS and ASP.Net Master Pages where possible but feel it currently looks amaturish. I applied some styling which displays slightly differently in Chrome and Moz to in IE where rounded corners are applied.

Anyway I would welcome any advice on how to make the site look much better.

The link to the site is www.cyprusstairlifts.com

regs

[Nightwalker83]

I'm in the same boat although, I did web development first I'm now doing software development. In regards to that site one thing I notice just my looking at the area with control is that it would look better in the center of the page. Example adjust the top margin some more so it moves the area in the the center of the template.

[Justa Lol]

you could move the text in footer a bit to the right so its not all the way at the end of the page, and maybe center the text of the navigation buttons but not in the menu.

you could make links more visible, like put a underline or lighten up the links a bit... if you don't put your cursor through the whole text then you wont know if theres a link.

would maybe make it look a bit better, i can't think of much more then that..

[SambaNeko]

Though there are some staid principles, visual design can be a subjective target - some people will love one thing and others will hate it. Your site appears to be fully functional, and that's most important. So, consider my following thoughts as non-critical musings.

- add distinction (different color, etc.) to the navigational tab of the page that the user is currently on; gives the user a sense of their "position"

- lessen usage of rounded corners; the yellow "installation available" blurb on the home page looks like a clickable button (possibly because it's near the similarly-styled "send" button on the form), but it's not - that's confusing.

- lessen usage of colors in main content area; too much color is making the pages feel busy to me. You want to use color sparingly to draw attention to that which you want a customer to DO: send in the request form (?)

- the yellow text on white at the top of the page ("for free advice re...") is hard to read - change to more contrasting color.

- agreed with Justa's comment that links are hard to see in the main text area; use a different color or something to distinguish them.

- don't use the overflow-scroll box for usability issues; let the main text expand its container normally

- not really about the web design, and may not be your place to change, but if it's up to you, change logo imagery; it's more important to depict the fact that you sell stairlifts than that you're based in Cyprus

As for the overall look and feel of the design, it's hard to make suggestions as it really depends on what you (or your client) want to depict as your "image" (how do you want customers to see you? Friendly? Bold? Innovative? Technically savvy? Efficient?), and what you want to facilitate customers doing on your site (do you want them to learn about the company? To call the phone number at the top? To fill our the request form?). The way you arrange pages, the style and the colors you use will be dependent on those sorts of considerations.

You can check out this site for some inspiration if you'd like. Find a style that looks appropriate and try to mimic (though not directly copy) it.

[kows]

I think you'd benefit from having smaller rounded corners. The navigation on the bottom of the page is very close to the rounded corner (on the left side). Consider moving the navigation there to the center, or just 10 pixels to the right. Or lessen the corner radius. This same problem exists on the navigation; I'd add a little padding to those elements so that the text isn't so close to the edge of the rounded corner. Hopefully, that makes sense. I could elaborate further and with imagery if needed.

[FishGuy]

thanks for the feedback so far people, I will hopefully apply some of these changes this week.

Regarding the logo unfortunately this is limited to my graphics skills and inability to come up with a better one, presumably I would have to draw the stairlift myself as I dont have a royalty free image to use.

I guess the market requires a friendly image.

In regards to what I want to achieve most is that the market either call the number or fill in the form.

So far most users have called the number and not used the form! Is there an obvious reason for this?

I am also concerned about the image locations should I move the layout of the site?

Any way thanks for the responses so far and keep the advice coming please.

[techgnome]

So far most users have called the number and not used the form! Is there an obvious reason for this?

You would need to ask them, but a few things things come to mind:
* phone is much more instant feedback
* Some people are more comfortable on the phone than email
* The email is a required field, maybe they don't have email - they could be using a public computer at a cafe or the library
* Sometimes the answer to a question leads to more questions... conversation on the telephone is a lot easier in this case


I agree though, the text in the tabs need to be centered, the bottom navigation needs to be nudged to the right and the radius of all the curved corners could be softened.

-tg

[Merri]

The form has awfully many fields! Just ask the minimal that you need to know to contact back, ie. name, phone & email. It would also help if the message area would be larger and would have no prewritten text. It could also have some brief paragraph above or below the form like "if you have any questions or request regarding our stairlifts you'd like to do please use this form".

This kind of changes should make the form seem much friendlier and easier to use instead of formal & detailed. It would also be in the line with the general "less is more" rule that can be applied into a lot of things from design to programming and it often works very well.


Edit!
Why links are the same color as the text? It makes them hard to figure out, I was trying to select text (which is just something I do to make reading text easier) and to my surprise I hit a link.

[Nightwalker83]

Why links are the same color as the text? It makes them hard to figure out, I was trying to select text (which is just something I do to make reading text easier) and to my surprise I hit a link.

Although, when I hover over a link in underlines it whereas if normal text it does not.

[techgnome]

Right, but if it's the same color as the text, then how would any one know that it's a link in the first place?

-tg

[Nightwalker83]

I suppose he could do what I would do and that is to a background colour on the link so when the link is hovered the background changes colour or just do that for the link itself (FishGuy could do both).

[kareninstructor]

I think the site looks great, nicely done. Just like to mention a few comments.

If possible, use CSS to position format elements rather than tables, search Google and you will found many examples. A good example for me was at the following page http://www.jimjacobe.com/ClassDescriptions.html where at first glance one would think that the captions for classes where the class name is far left and fee is far right would be done via a table but instead is done with CSS. Bottom line is that once you learn CSS the hard part is getting things to work across various browsers as I am sure you already realize this.

If you get things working on the majority of browser but have issues with newer versions of IE consider the following tag (place at the top of the head tag) <meta http-equiv="X-UA-Compatible" content="IE=7" /> but only use this tag until a solution is worked out rather than keeping it.

Put your JavaScript into script file, no different than doing CSS. Dive into jQuery as there is no power than straight JavaScript.

With so many people going mobile, you might want to validate your code against validating tools.

Give your class names meaningful names that make sense.

Use forms to get information rather than tables.

[Merri]

I suppose he could do what I would do and that is to a background colour on the link so when the link is hovered the background changes colour or just do that for the link itself (FishGuy could do both).

Does not resolve the issue: the link should be distinguishable as a link before I happen to hover my mouse over the text. The standard is to either underline the link or have the link in some variant of blue color, or at least some color that is clearly different from the regular text color. There is no other way around it, you shouldn't break things that work the way they do – only to do things differently.

Of course this does not include links that are used for navigation etc., only links that appear within the actual text content.

[SambaNeko]

If you get things working on the majority of browser but have issues with newer versions of IE

If you write CSS by modern standards, then your compatibility issues will probably be with old versions of IE, not new ones. I've never found the X-UA-Compatible tag to be necessary - always a simpler (and/or more sensical) solution to be had.

Dive into jQuery as there is no power than straight JavaScript.

There is no need for jQuery (or any Javascript framework) here. If OP wants to add a lot of fancy Javascript functionality, then it might be a good idea.

With so many people going mobile, you might want to validate your code against validating tools.

Validating your code can be a good thing to do, but it has nothing to do with whether or not it works (or works well) on a mobile platform.

Use forms to get information rather than tables.

Doesn't make sense.