PDA

View Full Version : site is not sexy enough


desertdirk
12-11-2005, 04:02 PM
I have developed a web site for a chamber of commerce in a near-by town. As board members of the chamber come and go the opinions of the website change. The current administration thinks the site needs to be more "sexy"

I spent an hour talking to them about web design and what a website does and should do. I told them that the information has to be clear, pages must load fast, the navigation must be easy and logical.

I asked them these questions:

Who is the web site for?

What information do you want to convey, or why do you want people to come to the site?

How do you identify yourselves as an entity. (what is the chamber of commerce)

After much talk there were no answers to these questions, but still the directive to "make it more sexy"

So my question to the forum is "What makes a web site sexy?"

I know this is in the eye of the beholder, and I told the president I would photograph the woman's club (blue haired widows) in bikinis if that was what he wanted (hints of the movie calendar girls)

So what are your thoughts?
thanks
DD

Creative Insanity
12-11-2005, 05:16 PM
That guy sounds like he wants a personal page all of his own.
This is a goverment department (even if it is local goverment) so why on earth does he want a 'sexy' goverment page for?

If it was me I would get a joint opinion on what is required for the site and if he is out voted on his sexy page give him a nice list of porn sites to keep him happy.

Excuse the language, but the guy sounds like a tosser to me.

domedia
12-11-2005, 08:57 PM
Actually, this is a question you should have asked the chamber. They need to determine the measurements for success.

I get the same message sometimes. 'Spice it up', 'make it more flashy', 'more exciting' etc. Every time that happens you have to ask your client what he means by that, examples, and what he is trying to achieve by doing it (so you can maybe achieve the same thing without ruining their website ;))

desertdirk
12-11-2005, 09:51 PM
Yeah
thats what I tried to do. I asked for examples and got none. And to compicate matters, there are several that have input to this so it is like some like blue and others like green.

What are you gonna do?

domedia
12-12-2005, 12:45 PM
You just have to ask more. If client is not able to communicate to you what they want done, I would simply walk away. You're better off not doing this that be hit with a dissapointed client/scope creep/further lack of ocmmunication.

davidj
12-12-2005, 01:14 PM
i have been told by marketing that
company site ('http://www.northgate-hrs.com/index.php')
is not very good because it projects too much proffesionalism

"its great if we are a consultant firm targeting a professional market"

its too clean and very accountant-tee!

desertdirk
12-12-2005, 02:45 PM
Yeah
I think what they are asking for when they say sexy is more/better photos, and thin black lines around a few colums. More of the standard 2/3 colum web page.

here is the site by the way
http://townofcarrizozo.org ('http://townofcarrizozo.org')

davidj
12-12-2005, 02:48 PM
hi desertdirk

without being too cut throat i think your site does have an air of amature about it and for the company that your building for i can see their point. It takes time and allot of practice to get it right

coding i think can be taught but design is a gift that cant be taught. If you have it you will find it lurking inside waiting to jump out at you

try this site to gain some inspiration and to see what the web wizards are chucking out these days

My inspiration site ('http://www.cwd.dk')

also

here is an example local business setups. Im not saying its any good but its this type of proffessional looking site i think they may be after
building up business ('http://www.buildingupbusiness.com/default.asp')

Creative Insanity
12-12-2005, 05:33 PM
dj that account-tee LOL site is awesome.. what the hell are they on about?
You just cannot please some people.

Yeah desertdirk, I can see why they want to picked up a little. That does look somewhat amature and flat. Take dj's advice. That site needs some serious work.

domedia
12-12-2005, 06:38 PM
Style can be taught though :)
desertdirk, you'll find plenty of resources online if you google for terms like color theory, web user interface, etc
Very nice place to learn more:
http://www.webstyleguide.com/ ('http://www.webstyleguide.com/')

desertdirk
12-12-2005, 09:27 PM
I will be the first to admit my shortcomings and design and color theory are two of them. But good design also comes from being able to establish an identity for that which is being designed. And that has been a problem. They can't really tell me what they are about. I have asked several people in town, what images best describe this place, and everybody comes up blank. One person described it a "a dumpy little town in a spectacular setting" so I have to learn to design around that.

I appreciate all of your candor and will check out these good resources you have listed.

Thanks
Dd

andy384
12-28-2005, 11:11 PM
Hey Dirk,

I hope you don't mind some constructive criticism. Quite frankly, I would be upset if I was paying someone to design a site for me and it looked like that.

Your header picture is in the kindest words possible "not that great", the words and picture all stretched out it looks very un-professional. Basically, they have a right to complain, you need to make this website better.

If I could make a suggestion, why not try a CMS with pre-made templates?

http://www.joomla.org ('http://www.joomla.org')

Look through their free templates and you will find plenty of nice ones.

Also, why not head over to OSWD( http://www.oswd.org ('http://www.oswd.org') ) where you will find hundreds of examples of free css/html layouts that might inspire you. Sometimes it just takes a little inspiration from outside sources.

In conclusion, the people who hired you expect more, and they should, so do some hard work and come back with a design that will knock their socks off.

Good Luck :)

desertdirk
12-31-2005, 12:35 AM
384
I like the oswd site. very handy. I am studying up on css, should have done this a long time ago. Will post when site is re-worked

Creative Insanity
12-31-2005, 01:48 AM
Some tips.
Make the BG white.
Place that logo you have down the bottom in the header. Infact remake a new header that one looks all streched.
Add some highlight and contrast colours from your logo to the actual body of the site. Make a centered site (they seem popular).
Use a template (makes life so much easier in making all the pages uniform).
Other than that, CSS.

desertdirk
12-31-2005, 02:38 AM
CI
thanks thats pretty much what I have been working on. will have something soon. Biggest drag is accommodating Internet Explorer and all it's quirks in CSS.

Creative Insanity
12-31-2005, 05:41 PM
Yeah IE sucks.
Umm gc placed some css tricks somewhere for IE.
Click the members link and change the first dropdown to the left to mods and then press go and click on gmcrone and then click the link 'Find all posts by this member' next to his photo. You will see a post there on centered page.. cg talks about IE tricks in there. Many will kick me here LOL, but I always remove the "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
as it stuffs many things up with IE, one being coloured scroll bars.

Creative Insanity
12-31-2005, 07:48 PM
Here is a CSS file I done for a site I done some time ago.
Maybe it will give you some pointers.

/* styles used for frontend of modules*/
.mButton {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #fff;
padding:1px;
background-color:#90B71F;
margin-right:4px;
margin-top:15px;
border: 1px solid #000;
font-weight:bold;
cursor:hand;
}



.attention {
color: #DB2230;
background-color:transparent;
}

/*-----------------------------------*/
/* FILES */
/*-----------------------------------*/
.filesHeader {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #003366;
font-weight: bold;
padding-bottom:3px;
}

.filesHeader a {
color: #003366;
text-decoration: none;
}

.filesHeader a:hover {
color: #95BB3D;
text-decoration: none;
}

.filesDetail {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #004B7A;
padding-top:4px;
padding-bottom:4px;
}

.filesEnd{
padding-bottom:5px;
border-bottom: 1px dotted #4D82A2;
}

/*-----------------------------------*/
/* PRODUCT CATALOGUE */
/*-----------------------------------*/
.productDivider {
border-top: 1px dotted #CCC;
height:7px;
background-color: transparent;
}

.productHeaderLines {
/*border-top: 1px dotted #7F99B2;*/
border-bottom: 1px dotted #CCC;
padding-top: 2px;
padding-bottom: 2px;
/*background-color:#F5F5F5;*/
}

.productSubHeader {
border-bottom: 1px solid #CCC;
font-size: 12px;
color: #758534;
font-weight:bold;
padding-top: 2px;
padding-bottom: 2px;
}

.productsHeader{
font-size: 15px;
color: #006633;
font-weight:bold;
background-color: transparent;
}

.productsCode{
font-size: 15px;
color: #6E9C50;
font-weight:bold;
background-color: transparent;
}


.productsBrief {
font-size: 11px;
color: #666;
background-color: transparent;
}

.productsPriceTable{
border: 1px solid #758534;
}

.productsThumb{
border: 1px solid #758534;
margin-top:2px;
margin-bottom:7px;
}

.productsColRt {
padding:0px;
padding-left:10px;
}

.productsColRt img{
border: 1px solid #758534;
margin-bottom:10px;
}

.productsBGColor{
background-color: #EFEFEF;
}

.productPrice {
border-bottom: 1px solid #7F99B2;
padding:3px 10px 3px 10px;
background-color: #E0E6EC;
}

/*-----------------------------------*/
/* JOBS */
/*-----------------------------------*/
.jobsHeader {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #758534;
font-weight: bold;
border-bottom:1px solid #CCC;
padding-top:10px;
padding-bottom:2px;
}

.jobsHeader a {
color: #758534;
text-decoration: none;
}

.jobsHeader a:hover {
color: #6E9C50;
text-decoration: none;
}

.jobsHeader2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #758534;
font-weight: bold;
padding-top:2px;
padding-bottom:2px;
}

.jobsBrief {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #6F778E;
padding-top:4px;
padding-bottom:10px;
}

/*-----------------------------------*/
/* NEWS */
/*-----------------------------------*/

.newsHeader {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #758534;
font-weight: bold;
border-bottom:1px solid #CCC;
padding-top:10px;
padding-bottom:2px;
}

.newsHeader a {
color: #758534;
text-decoration: none;
}

.newsHeader a:hover {
color: #6E9C50;
text-decoration: none;
}

.newsHeader2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #758534;
font-weight: bold;
padding-top:2px;
padding-bottom:2px;
}

.newsBrief {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #6F778E;
padding-top:4px;
padding-bottom:10px;
}

.newsContent {
}

.newsLink {/* Used for link - View more*/
padding-bottom:5px;
color: #CC0000;
}

.newsLink a{
color: #CC0000;
text-decoration: none;
}

.newsLink a:hover{
color: #FF3300;
text-decoration: none;
}

/*----EVENTS--------------------------------*/

.eventsHeader {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #758534;
font-weight: bold;
border-bottom:1px solid #CCC;
border-top:1px solid #CCC;
padding-top:2px;
padding-bottom:2px;
padding-left:5px;
background-color:#EFEFEF;
}

.eventsHeader a {
color: #758534;
text-decoration: none;
}

.eventsHeader a:hover {
color: #6E9C50;
text-decoration: none;
}

.eventsMainHeader {
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
color: #636A7E;
font-weight: bold;
}

.eventsHeader2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #758534;
font-weight: bold;
padding-top:2px;
padding-bottom:2px;
}

.eventsBrief {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #6F778E;
padding-top:4px;
padding-bottom:10px;
padding-left:5px;
}

.eventsBrief2 { /*nopad and bold used in full story*/
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #6F778E;
font-weight: bold;
padding-top:4px;
padding-bottom:10px;
padding-left:0px;
}
.calTable { /* Outer Border */
background-color: #CCCCCC;
}
.calTitle, .calTitle a, .calTitle a:hover { /* Top Row with Title */
background-color: #EFEFEF;
font: 9px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
.calRightCol { /* Right Column with Arrows */
background-color: #999999;
font: 9px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
.calWeekDayName { /* Week Day Row - M T W T F S */
background-color: #999999;
color: white;
font: 9px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
.calnodays, .calnodays_on { /* No Days Displaying - Blank TD's */
background-color: #EFEFEF;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
}
.caldays { /* Days WITHOUT Events */
background-color: #FFFFFF;
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
}
.caldays_on { /* Days WITHOUT Events - Rollover*/
background-color: #CCCCCC;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
}
a.caldays, a.caldays_on { /* Days WITH Events - Link both states */
background-color: transparent;
color: black;
text-decoration: none;
}
a:hover.caldays, a:hover.caldays_on { /* Days WITH Events - Link Rollover both states */
background-color: transparent;
color: black;
text-decoration: none;
}
.caltoday { /* Current Date */
background-color: #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000;
text-decoration: none;
}
.caltoday_on { /* Current Date - Rollover */
background-color: #999;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a.caltoday, a.caltoday_on { /* Current Date with event with link */
background-color: transparent;
color: #000;
font-weight: bold;
text-decoration: none;
}
a:hover.caltoday, a:hover.caltoday_on { /* Current Date with event with link - Rollover */
background-color: transparent;
color: #000;
font-weight: bold;
text-decoration: none;
}

/*---FAQ---------------------------------*/
.faqHeader {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #758534;
font-weight: bold;
border-bottom:1px solid #CCC;
padding-top:10px;
padding-bottom:2px;
}


.faqHeader a {
color: #758534;
text-decoration: none;
}

.faqHeader a:hover {
color: #6E9C50;
text-decoration: none;
}

.faqHeader2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #758534;
font-weight: bold;
}


.faqHeader2 a {
color: #758534;
text-decoration: none;
}

.faqHeader2 a:hover {
color: #6E9C50;
text-decoration: none;
}

.faqQuestion {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #758534;
font-weight: bold;
padding-top:10px;
padding-bottom:5px;
}

.faqAnswer {
padding-top:2px;
padding-bottom:10px;
}


/*-----CONTACT----*/

.contactHeader {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #758534;

padding-top:10px;
padding-bottom:2px;
}

.contactContent {
padding-top:10px;
padding-bottom:2px;
}

/*-----SEARCH----*/

.searchTable { /* Sets the padding on the outer table */
margin: 10px;
padding: 10px;
width: 98%;
}
.searchDivider { /* Divider line between seach results */
margin-top: 10px;
margin-bottom: 10px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: CCC;
}
.searchTitle { /* Page title in search results */
font-weight: bold;
}
a.searchLink { /* Page title link color in search results */
}
a:hover.searchLink { /* Page title link color in search results */
}


/*------- Newsletter Signup ------- */

.newsletterTable {
background-color: #EFEFEF;
border: 1px solid #CCC;
padding:3px;
margin: 3px;
}

.newsletterHeader{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #758534;
font-weight: bold;
border-bottom:1px solid #CCC;
padding-left:8px;
padding-right:8px;
}

.newsletterRow {
font-family: Arial, Helvetica, sans-serif;
padding-left:8px;
padding-right:8px;
}


/*---Quiz Module-------------------------*/
label
{
cursor: hand;
}
.quizHeader {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #758534;
font-weight: bold;
border-top:1px solid #CCC;
padding-top:2px;
padding-bottom:2px;
background-color: #F0F0F0;
}

.quizHeader2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #758534;
font-weight: bold;
border-top:1px solid #CCC;
padding-top:2px;
padding-bottom:2px;
background-color: #F0F0F0;
}

.quizRow1 {
border-bottom:1px solid #CCC;
background-color: #FFFFFF;
}

.quizRow2 {
border-bottom:1px solid #CCC;
background-color: #F0F0F6;
}
.quizLinetop {
border-top:1px solid #CCC;
}
.quizLinebottom {
border-bottom:1px solid #CCC;
}
.quizLinetop {
border-top:1px solid #CCC;
}
.quizLinebottom {
border-bottom:1px solid #CCC;
}

/* quizQuestion should have formatting for questions only */
.quizQuestion
{
font-weight: bold;
}

desertdirk
01-01-2006, 04:51 PM
Creative
thanks for the CSS code. I will take a look at that.

ok
couple of questions on consistancy:
first,
Is it too distracting -generally- to have both 3 column and 2 column pages within the same site? I know this depends greatly on the site, but generally speaking . . .

Second,
can/should one put the nav menu links in the style sheet, so as to avoid having to edit every page when a nav link is added/changed, or should that be done in an include file. How do most folks do this? advantages, disadvantages?

Thanks
dd

Creative Insanity
01-01-2006, 05:55 PM
I place most of everything in a template, including the navigation and then that is applied to the pages in turn as they are created.
The only editable region that is needed is the main body as that is really all that changes on most sites anyway.

gmcrone
01-01-2006, 07:07 PM
Read all about CSS hacks and other browser bugs at:

http://www.positioniseverything.net/ ('http://www.positioniseverything.net/')

Mike....

desertdirk
01-02-2006, 12:45 AM
Mike
that website was referred to in the book on CSS that I just got. Has lots of good info, thanks.

I just had a real eye opener. I run my monitor screen resolution at 1024x768. In working on my site, I decided to look at it in 800x600 and of course had to make some adjustments. Then I started to look around the web and it is amazing the number of sites that have not taken this screen resolution into account. Even some of the "web development" sites do not look too great at this smaller resolution. Of course sometimes it is a matter of designing for your audience, but . . .
dd

Creative Insanity
01-02-2006, 06:31 AM
well the average screen size these days is 1024x768 so that is what many cater for. I myself use 1280x1024 but would never do a site for that size.

desertdirk
01-02-2006, 03:28 PM
yeah
I saw a statisic somewhere that said about 30% of the web is using 800x600. I'd bet half of them don't know they could go higher.

Also saw that FireFox has close to 10% of the browser share and keeps climbing. Right on.

desertdirk
01-06-2006, 04:33 PM
OK
back into the lion's den.
Here is the re-work of the site. Still needs some fine tuning

http://townofcarrizozo.org ('http://townofcarrizozo.org')

Creative Insanity
01-06-2006, 04:46 PM
Much better looking. But not keen on the way those 3 links open a new browser and are in a differant format. Keep it all uniform and change those 3 links to work with what you have there.

desertdirk
01-06-2006, 05:10 PM
The logic behind having the 3 links open new windows is that those 3 pages don't have links back to the main site. This way people can open the "news letter" and close it and still have the main site there. The news letter is designed to look like the letter that they actually mail out, but I am trying to convince them to let me change it. Also I do have to change the skin on the photo gallery and events. Thanks for pointing that out.

Creative Insanity
01-06-2006, 07:03 PM
Sorry to say but that newsletter format and look is horrid. Kick their heads untill you get your own way.
Personally I cannot see any point of it opening in a new window as you would be reading it anyway and after that you may want to go to another section of the site so why close the main site page.

desertdirk
01-06-2006, 10:35 PM
the main page never closes. When you are done reading the news letter, you close that window and the main page is still there.

Creative Insanity
01-06-2006, 11:13 PM
But that is an extra click.. I hate having to do an extra click when I can be at the right place after reading something.

desertdirk
01-07-2006, 12:55 AM
Yeah
I hardly have time to do extra clicks myself LOL. Actually I have never had anybody comment on it so I don't know what the general consensus is. I will have to ask the clients if it bothers them.

Creative Insanity
01-07-2006, 07:49 AM
yeah I guess that is all that you can do.
Well since I spend around 18 hours a day on my system an extra click is a lot since I do enough in a day in the first place. LOL

desertdirk
01-07-2006, 02:24 PM
Creative
I hope that you at least take time to stick your head out the window and listen to the birds chirp. Too much techno is too much.

Creative Insanity
01-07-2006, 06:21 PM
window?? bird?? what are they?? someone once asked me to go to the backdoor, do you think I could find it? Not on your nelly LOL