Big large buttons multi line text

HTML & CSS
1

I want to have a simple page and give the user a couple of simple choices.

I then make 3 buttons.
<do this>
<do that>
<do some>

But I know my customer.
“But the user get confused. You need to add lots of text that should explain the user what to do, what to expect, what not to do, and whats important to do, and the…”

So I usually have to make ugly pages with lots of text, red text, warnings, popups. And warnings about what to do and not to do on next page… <do not close this page>

I was thinking of suggesting something cleaner.

what if I make large buttons with text inside them?


.selectbutton
{	
	background: #D3D3D3;
	padding: 0;	
	color: #000; 
	border: 2px solid;
	border-top-color: #8799FF;
	border-left-color: #8799FF;
	border-right-color: #0026FF;
	border-bottom-color: #0026FF;
}

<div class="selectbutton">	
	<a href="#gosomewhere">
	<h3>Do This</h3>
	<p>If you want to do this and some stuff then this is the place for you.		
	</p>
	</a>
</div>

Ugly as h*** but you get the point??

What about doing some rounded corners?? That would make the large button look more buttonish?
Not sure if css can help me there.

I tried and modified this:
http://www.roundedcornr.com/rc5.php

But the code is ugly, and it doesn’t work properly with IE and there is limits with the size. And I’m not found of maintaining images, especially not this kind of type.
The project is probably going to be handed over to someone who are not skilled at html/css, and I want something simple and easy to maintain.

Do you have some ideas please?

2

Without a more specific description of the project, it’s hard for me to determine the necessity of these “explanations.” Though, it sounds as if you disagree with the client but feel forced to abide.

This brings me to my first point - control your client or find a new one. I have worked with numerous idealistic clients - often with great compensation - but trust me when I tell you it is not worth it. Along with that great compensation, I’ve earned myself some gray hair and a level of burnout that someone 20-years-old should not experience. I recommend that you explain to the client your professional opinions, and if they expect you to work outside of your own limitations - then they need someone else.

Now, as for your little problem, and what exactly your professional opinions should be - I think you need to step outside of the box a little bit.

You could use JavaScript tool tips with a little (?) next to each “confusing” link that explains it to the user upon hover of the (?). You could simply use the title attribute on your links to specify the link’s action. You could also use jQuery/JavaScript show/hide containers for your instructional information, allowing your page to not be bloated with instruction but still allowing confused users to find instruction. These are just a few simple examples of how you could handle this situation from a developmental standpoint.

EDIT: Oh, and if you plan to use a JavaScript solution, be sure to consider graceful degradation.

EDIT 2: In hindsight, I think this belongs in a different forum as it’s more of a layout concept / page design issue than it is a CSS issue.

3

Hi,

Apart from what Alex has just commented on I should also point out that you can’t wrap div elements inside an anchor so your code inside the anchor would need to be inline elements like spans instead.

If you want round corner type buttons then you have little choice but to add the extra elements required unless you get the corners added with some JS (see nifty corners - which doesn’t use images)

You can do it manually without using images but the code becomes bloated and pretty ugly. This sounds like the type of thing you were asking.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fluid transparent round corners - no images required</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
p {
    margin:0 0 1em
}
body {
    padding:10px;
    background:#fff;
}
.box {
    float:left;
    display:inline;
    clear:both;
    width:300px;
}
.box  a{
    width:300px;
    display:block;    
    text-decoration:none;
    color:#000;
}
.content {
    background:#e4d9d3;
    border-left:1px solid blue;
    border-right:1px solid blue;
    padding:1px 5px;
    overflow:hidden;
    display:block;
}
.box b {display:block}
.top *, .bottom * {
    padding:1px 0 0;
    background:#e4d9d3;
    border-right:1px solid blue;
    border-left:1px solid blue;
    font-size:0;
}
.top, .bottom{display:block}
.px0 {
    margin: 0 5px;
    background:blue;
}
.px1 {
    margin: 0 3px;
    border-width:2px;
}
.px2 {margin:0 2px;}
.px3 {
    margin: 0 1px;
    padding:2px 0 0;
}
.px4 {
    margin: 0 1px;
    padding:2px 0 0;
}
.content strong{
    display:block;
    font-size:120&#37;;
    margin:0 0 .5em;
    text-align:center;
}
.box a:hover{visibility:visible}
.box a:hover .content{
    background:red;
    color:#fff;
}
.box a:hover b{border-color:#000}
.box a:hover .top *,.box a:hover  .bottom *{background:red}
.box a:hover b.px0{background:#000}
</style>
</head>
<body>
<div class="box">
 <a href="#">
    <b class="top"><b class="px0"></b><b class="px1"></b> <b class="px2"></b> <b class="px3"></b></b>
      <span class="content">
        <strong>Button heading</strong>
        Button Content goes here : Button Content goes here : Button Content goes here : Button Content goes here :
        </span>
    <b class="bottom"><b class="px3"></b> <b class="px2"></b> <b class="px1"></b> <b class="px0"></b></b>
 </a>
</div>

</body>
</html>

You could simply use the button element but IE makes large buttons look atrocious.


 <button><strong>Button Heading</strong> <br>Button text</button>

As soon as the button gets larger IE decides to make it look horrible for some reason.

There are millions of techniques for round corners and some are simpler than others but does depend on the use.

4

Paul,

While your point is completely correct but I think you actually meant to say block-level elements, as the div in darkslayer’s posted code actually wraps around the anchor. Though, because he has still wrapped a paragraph tag inside of the anchor, which is a block-level element, your post is still completely valid.

As for the rounded corners - the techniques vary, and are debatable, but I chose to sort-of ignore that question. It seems the point in my prior post makes obvious that if he approached the presentation of the instructions more appropriately, a large button full of text would be unnecessary. Furthermore, including the instruction inside of the actual button is nearly pointless regardless. Without the need to include the instructions in the button, he no longer needs a large button, in turn no longer needing rounded corners.

Oh, and I hope all is well with you Paul. :slight_smile:

Alex

5

For the main issue, about how much text to give people:

One rule of the web is, people don’t read. Not if their lives depended on it. They skim at best. The amount of text there is in one place seems to determine how much reading there is as opposed to skimming.

Another rule of the web is, don’t assume users know what to do.

Well, that sucks! They may not know what to do but won’t read too many directions.

To satisfy both concerns you could do a little bit of user testing.

You can present two bits of paper (I mean, you could draw these on paper or something) to various people and ask them what they’d expect these web buttons to do.

You can also make images that look a lot like the intended web site.

If the low-text version confuses them, you know you need to be more clear.

If the whole page of text takes them so long they say “It looks like it does x” when it does y, then you know they’re not spending enough time to read the important parts, and have too much text.

This way there can be some actual testable evidence either of you can show to the other to prove your points.

6

Hi Alex :slight_smile:

Yes you are right I did say div elements and I meant all block elements of course. I was really referring to the h3 and p block level elements that the op had wrapped incorrectly so i don’t even know why I mentioned the div anyway (must be going senile).:slight_smile:


<a href="#gosomewhere">
	<h3>Do This</h3>
	<p>If you want to do this and some stuff then this is the place for you.		
	</p>
	</a>

As for the rounded corners - the techniques vary, and are debatable, but I chose to sort-of ignore that question. It seems the point in my prior post makes obvious that if he approached the presentation of the instructions more appropriately, a large button full of text would be unnecessary. Furthermore, including the instruction inside of the actual button is nearly pointless regardless. Without the need to include the instructions in the button, he no longer needs a large button, in turn no longer needing rounded corners.

Yes you made your point well which is why I just chose to concentrate on the mechanics :slight_smile:

7

[ot]

Blame grandkids : ) [/ot]

8

[ot]

I blame web development for my ultra-fast aging. :P[/ot]

9

You might consider “speaking blocks,” nav buttons with one or two words highlighted and a short explicative phrase underneath. Evan Eckard does them nicely in his central nav bar. [URL=“http://www.smashingmagazine.com/”]Smashing Magazine is using them in their redesign (though their short phrases are actually sublinks), and they [URL=“http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/”]featured them in a recent article.

10

@alex
How can I explain…

I tried to make a short story of how and why, but ended up in a 5page rant.
Yes I agree with you, but atm I just try make the best of it.

The customer (a team actually) want instructions placed here and there. If I don’t place them, they will order them, and I will have to make them. If I hide them, they will order them to pop up here and there. The UI today is terrible after years of our customer team designing it. The application is to big for me to redesign/recode everything, and I get no help for it, and customer don’t want to pay for anything, therefore my boss don’t want to spend a dime on it either. But the project gives my company nice money, so its important, but …

@stomme poes
Yes I agree with you 100%. But our customer order stuff together with our sales person, project leader, and my boss. I just get a piece of paper that says I have to do this and that. And the penalty of disobediance…
…jobs are scarce and until new job … I need money…
Those times I managed to get ahead and provide options, through my project leader, the customer always chooses the cheapest and worst solution, or decides for a worse one.
Btw: These jobs come from the one user who called in and complained, and the customer makes a big number out of it. There are no facts behind anything, but it sounds like everyone misunderstand and its a grave problem…

My idea of the button:
The idea of the button is all mine. Heading + text + maybe a picture. Presented in a buttonish look and feel. Yes my example is ugly.

The reason for this idea is to try to reduce the number of elements on the page. And make room for future elements, because I know they will come. And ofc try to spend some time doing html/css and clean up old terrible code. And ofc get ahead of the customer who orders these instructions…sigh.

Anyway they liked the idea since it contained these instructions. I have this implemented with rounded corners, but the code is a bit anti-IE and very ugly. Therefor I ask for a bit help.

@alex @paul o’b
Yes I’m not skilled html/css guy. Whish I had a software that could tell me when I did those stupid html mistakes with block elements and such.

@paul o’b
Nifty corners looks nice. I’ll try experiment a bit with it. Yes I agree it get bloated when you want to make cornes manually. The one I have now has 4 divs + lots of other stuff.
I want to avoid bloat…

@black max
Nice idea, but since my customer always want lots of text …. No.
But you gave me an idea … speech bubbles …
Maybe that’s what you tried to explain Alex?

http://www.willmayo.com/journal/projects/07/bubbles/
Maybe this could be helpful…. I need to modify it to fit our customers need, and at same time avoid clutter…

Thx for the pointers, I’ll look at it and see if I can come up with something. I’ll post back the result if I manage to solve it.

11

I can’t tell what those bubbles are supposed to do, but they look a little like a CSS tooltip. You can layer javascript on top of a CSS tooltip, but if it’s 100% js you’re going to have any non-JS’d customer not getting the text (or at least make sure the client has JS on before presenting it to them).

I use help text like that in forms… not necessarily the best idea (lots of text inside a form) but it worked with what I had to work with.

Start working on your networking, so you have a way out if needed!

12

Hmmm. If you’re going in Poes’s suggested direction, jQuery tooltips might work best for you. They can handle images, text, sometimes even .avi and .mov files.

Relying on JavaScript solutions for navigation is normally caveated, because as Poes said, folks with JS sometimes get left flat-footed. However, your situation is different; your first responsibility is to please those lunatics. Maybe you should give them the fat JS tooltips, design the nav buttons so that they look decent and so non-JS users can use them with at least some facility, and be done with it.

Maybe perhaps?