Button Styles

I am a web developer. I can’t design if my life depended on it (ok I could but it wouldn’t be good). So I work with a designer. From time to time he loves putting glows and rounded corners on elements, namely buttons–the former as a hover effect. Here I am thinking about efficiency so I ask him: Would it kill the design if people with older browsers saw square corners and some other indicator for a hover because, if not, I can use CSS to style the shadows and corners. Stupid question, of course he says yes.

Progressive enhancement through CSS3 is the best way to go, in my opinion, to lower resource overhead in the browser. I usually use the sliding door technique for image-based hovers but in the most recent case, there are three different button colors, and in future pages there might be buttons of varying widths. That’s a lot of images to load (and slice up in PS!). Granted, the file sizes for each image are small, but, still, a design/development person/team should always think about efficiency right? The glow makes it particularly complicated to create a sprite for use with the sliding door technique, and it creates a bunch of unused spaced for the non-hover state part of the sprite.

Firstly, what are some opinions on this matter? Has anyone run into the same issues? Which paths did you take?

Second, what’s the best way to handle this situation? Should I just make a bloated sprite for the sliding door technique? I don’t think two separate images is gonna work well at all.

CURS-ED DESIGNER PRIDE! :mad:

My instinct is always to go with the simplest solution that uses the most efficient and economical method to achieve a reasonable result.

In general, I would prefer to use code-based solutions that degrade gracefully in non-supporting browsers. But I’m not sure that CSS3 is widely enough supported for that kind of deployment just yet. Really, it depends how ‘wrong’ the site will look with regular buttons as to whether you can tolerate a significant number of people seeing it like that. Quite possibly you can. It depends on your site, your business and your target audience.

Hi Smola,

Try this demo, if it can be of any help. (Try any height images sprite with adjusted nav heights.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>One Image Transparent Corners Hover State Dynamic Width Nav Buttons</title>
<style type="text/css">
#nav li{
	list-style:none;
	float:left;
	margin:5px;
}
#nav li a{
	float:left;
	margin-left:10px;
	padding-right:10px;
	height:28px;
	background:url("images/nav.png") no-repeat right top; /* a two-stacked-images-with-10px-rounded-corners sprite */
	color:#000;
	white-space:nowrap;
	text-decoration:none;
	font-size:130%;
	line-height:28px;
}
#nav li a span{
	display:block;
	margin-left:-10px;
	padding-left:10px;
	height:28px;
	background:url("images/nav.png") no-repeat left top;
	cursor:pointer;
}
* html .nav span{ width:1%}

#nav li a:hover{
  background-position:100% -28px;
  color:#ff0;
}
#nav li a:hover span{
  background-position:0 -28px;
}

</style></head><body>

<ul id="nav">
	<li><a href="#"><span>One Image</span></a></li>
	<li><a href="#"><span>Transparent Corners</span></a></li>
	<li><a href="#"><span>Hover State</span></a></li>
	<li><a href="#"><span>Dynamic Width Nav Buttons</span></a></li>
</ul>

</body></html>

Andy Clark has a couple of interesting takes on this topic.

http://forabeautifulweb.com/blog/about/time_to_stop_showing_clients_static_design_visuals/

http://forabeautifulweb.com/blog/about/five_css_design_browser_differences_i_can_live_with/

The bottom line is that you don’t show your client a picture of something unobtainable in all browsers in the first place. As soon as you show the client a picture then that’s what they will expect. Instead you show them what it will look in the medium that will be used.

It’s an interesting approach and you will always get those that say it needs to be the same in every browser but that’s impossible these days anyway when you have 120px mobile phones or 50" plasma screens to contend width.

These days quite a few of my clients are happy to lose the round corners in IE8 and under and don’t want me to spend excess time on IE6 as long as it is usable and functional and looks ok. A few years ago I always got the same answer that “it must look the same” but we need to educate the clients that we deal with and explain why browsers don’t have to look the same and what the benefits are.

Thanks for your replies everyone! Trust me Paul, I’m on board with with the points those blog posts where making. Unfortunately, it’s not my client I’m trying to convince, it’s my partner. He does indeed come from a print background and so when he designs something he wants it to look just so. It’s frustrating because he just hands it off to me expecting me to just make it happen. I guess it’s just something we will have to continue discussing.

Not so easy then :slight_smile:

He does indeed come from a print background and so when he designs something he wants it to look just so.
Reverse the tables then and ask him to draw you a picture that is bigger than the piece of paper it fits on and when you fold the piece of paper the text slides to the left.:slight_smile:

When he says he can’t do that … job done :wink:

Joking apart there has to be give and take on both sides so you both need to work towards a common goal. The main point being that the medium should dictate the design and not vice versa.

It’s not easy I know as I have worked with a few people like that also :wink:

Haha, thanks Paul. It’s always good to hear from people who agree with me! :smiley:

I’ll keep the conversation going for sure.