Is this ad effect too intrusive?

RJM62

RJM62

Touchdown! Greaser!
Joined
Jun 15, 2007
Messages
13,157
Location
Upstate New York
Display Name
Display name:
Geek on the Hill
I'm trying to highlight the specials offered by NewEgg, because they're usually pretty good deals and tend to convert well. But I don't like intrusive ads. So I coded the css to ease the deals div from a small, banner-like size to a larger size when it's hovered.

Please hover the div with the orange "Special Deals..." text in it.

The ease in-out effect should take one second in Firefox, Chrome, and IE10. It doesn't work in IE9 (the div expands, but the timing doesn't work, so it happens instantly). It's also a bit quirky on the Android browser, of course, and I assume most other mobile browsers because there's no real "hover."

My personal feeling is that because all the user has to do to shrink the div back down is move the mouse off of it, it's not that intrusive. But I'd appreciate other opinions.

http://www.kitchentablecomputers.com/

Thanks,

Rich
 
Last edited:
Re: Is this ad effect too instrusive?

It works OK on Safari. My question would be how the person who is viewing the page would know to hover the cursor over that particular text. Maybe you should include some clues such as, "hover here to see deals" or something.
 
Re: Is this ad effect too instrusive?

Everskyward said:
It works OK on Safari. My question would be how the person who is viewing the page would know to hover the cursor over that particular text. Maybe you should include some clues such as, "hover here to see deals" or something.
Click to expand...

Thanks. Good point. I was counting on the orange to draw the eye, but maybe I should give some clues.

-Rich
 
Looks fine to me, I wouldn't have noticed it until you mentioned it. A few people will feel violated by it, no doubt.

RJM62 said:
I'm trying to highlight the specials offered by NewEgg, because they're usually pretty good deals and tend to convert well. But I don't like intrusive ads. So I coded the css to ease the deals div from a small, banner-like size to a larger size when it's hovered.

Please hover the div with the orange "Special Deals..." text in it.

The ease in-out effect should take one second in Firefox, Chrome, and IE10. It doesn't work in IE9 (the div expands, but the timing doesn't work, so it happens instantly). It's also a bit quirky on the Android browser, of course, and I assume most other mobile browsers because there's no real "hover."

My personal feeling is that because all the user has to do to shrink the div back down is move the mouse off of it, it's not that intrusive. But I'd appreciate other opinions.

http://www.kitchentablecomputers.com/

Thanks,

Rich
Click to expand...
 
On Chrome Version 23.0.1271.97 m, when I move away from the box while it is expanded, all of the text/links from inside the div are visible over the background, but behind the main content div until the 'deals' div has completed the shrink.
 
CJones said:
On Chrome Version 23.0.1271.97 m, when I move away from the box while it is expanded, all of the text/links from inside the div are visible over the background, but behind the main content div until the 'deals' div has completed the shrink.
Click to expand...

Okay... I think that might be because I have the transition effect set to "all." I'll have to poke around with that.

I'm going to something with the text to indicate that it should be hovered, too.

Thanks.

-Rich

EDIT: That's strange. That's not happening on mine, and I'm using the same version.
 
Last edited:
There's probably some pretty simple jQuery that can achieve what you're trying to do. If you PM me i can help you out. Looks good to me though.
 
Using Firefox. When the cursor is placed outside of the boxes, over the dark area, everything flickers and is unreadable. It returns to normal when cursor is off the dark area.
 
denisd said:
Using Firefox. When the cursor is placed outside of the boxes, over the dark area, everything flickers and is unreadable. It returns to normal when cursor is off the dark area.
Click to expand...

Okay, thanks. That should be fixed now. I had to constrain the max-width.

What's a bit odd is that the width was set to a static size of 600 px when not hovered, but momentarily filled the screen while the div was shrinking.

Constraining the max-width seems to have solved the issue, but it shouldn't have been necessary using a fixed width for that parameter. Whatever the case, it seems to work now.

Thanks,

-Rich
 
This is the current CSS, by the way. I'm not using any JS for this effect.

Code: 
#deals {
    position: relative;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    max-width: 1024px;
    height: 42px;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    background-color: #FFFFFF;
    border: #09F 1px solid;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;    
    font-size: 12px;
}

#deals:hover {
    height: 300px;
    width: 99%;
    max-width: 1024px;
    overflow: auto;
}

#deals p {
    margin-left: 20px;
    margin-right: 20px;
    width: 95%;
    padding: 3px;
}

-Rich
 
I can't seem to locate a "special deals." But I see nothing out of the ordinary, otherwise.
 
Sac Arrow said:
I can't seem to locate a "special deals." But I see nothing out of the ordinary, otherwise.
Click to expand...

ss.jpg
 
Ahhh okay. Well, it's in your face, but not really a big deal.
 
Very nice. Unobtrusive, but visible. Much better than a banner ad, or a popover or whatever else.

Works on Chrome on a MacBook under Mountain Lion.
 
I like it. And, I really like the scrollability.
Its' working acceptably well for me in Firefox & Chrome.

Perhaps it should say something other than "Click Here ..."?
It's a hover (with a mouse); maybe a tap on a touch screen (too lazy to check).
 
Everskyward said:
It works OK on Safari. My question would be how the person who is viewing the page would know to hover the cursor over that particular text. Maybe you should include some clues such as, "hover here to see deals" or something.
Click to expand...

You would know it because it says "click here" and when you move your cursor there it opens up.

Works fine on Safari for me Rich. Now tell me about that Chrome book for sale for $199. Thats a good price can you put office on it? Could be a great replacement for my kids macbook.
 
AdamZ said:
You would know it because it says "click here" and when you move your cursor there it opens up.
Click to expand...

That's pretty much what I was thinking. I thought about saying "Hover here," but I'm not sure how many users know what "hover" means. I've learned never to underestimate users. Maybe "touch here," or even "tickle here," but for now "click" works until I can think of something better.

AdamZ said:
Works fine on Safari for me Rich. Now tell me about that Chrome book for sale for $199. Thats a good price can you put office on it? Could be a great replacement for my kids macbook.
Click to expand...

Thanks, Adam,

I'm not sure which Chrome book you're talking about. Most likely that was an Adsense ad, because I didn't specifically approve any Chrome book ads. I have almost no control over what Adsense displays other than being able to prohibit certain content (gambling, "adult" ads, etc.). And quite frankly, considering the way Adsense has been behaving itself for the past year or so since Google started weighting user history in ad selection, I consider myself fortunate if the Adsense ads have anything whatsoever to do with the content, and also steer clear of promoting brothels.

What I can say is that there's no release of MS Office for Chrome (that I know of, at least). You can work with at least some office files using Google Docs, but I imagine that some formatting will get lost in the conversion. I can't say for sure because I haven't used MS Office since I discovered OpenOffice.org, and I've never used Google Docs.

So long story short, if working with Office is what you want to do, then based on what little I know, I wouldn't suggest a Chrome book. Probably somewhere here knows more about it than I do, though.

-Rich
 
Last edited:
PilotAlan said:
Very nice. Unobtrusive, but visible. Much better than a banner ad, or a popover or whatever else.

Works on Chrome on a MacBook under Mountain Lion.
Click to expand...

Thanks. I hate intrusive ads, but the ads pay the bills; so it's a challenge making them both visible and unobtrusive.

-Rich
 
JoeSelch said:
I like it. And, I really like the scrollability.
Its' working acceptably well for me in Firefox & Chrome.

Perhaps it should say something other than "Click Here ..."?
It's a hover (with a mouse); maybe a tap on a touch screen (too lazy to check).
Click to expand...

Thank you.

Again, I'm trying to think of something better than "click." It'll come to me... eventually.

-Rich
 
AdamZ said:
You would know it because it says "click here" and when you move your cursor there it opens up.
Click to expand...
Yes. That's why I asked Rich to include that text. See post #2. It didn't used to say "click here".
 
Last edited:
RJM62 said:
Again, I'm trying to think of something better than "click." It'll come to me... eventually.
Click to expand...

Just take it out. In web design, it is considered somewhat of a faux pas to put "<verb> here to <do something>".

I actually couldn't find the ad until you pointed it out. I might like something that just vertically scrolls a list of the deals underneath the red-orange letters. Even if I had noticed the ad, I might not have been interested enough to click (hover) over it to see the deals. But if a particular product scrolls across that area that looks interesting, I would definitely click on that.
 
dmspilot said:
Just take it out. In web design, it is considered somewhat of a faux pas to put "<verb> here to <do something>".

I actually couldn't find the ad until you pointed it out. I might like something that just vertically scrolls a list of the deals underneath the red-orange letters. Even if I had noticed the ad, I might not have been interested enough to click (hover) over it to see the deals. But if a particular product scrolls across that area that looks interesting, I would definitely click on that.
Click to expand...

I actually had it set up that way in the beginning, lol. I thought this might attract more attention while taking up less screen space until it's hovered.

Well, it didn't come down from Sinai. It's only code, and it can be changed. I'll probably track the clicks / sales for a few days and see how it works, though.

Thank you.

-Rich
 
Henning said:
Doesn't do anything on an iPad except highlight the field to copy.
Click to expand...

Thanks, Henning.

I'm not sure whether it's worth it to sniff the browser and do something different for portable devices. Most mobile users elect to use the mobile version. But it is something I'm thinking about.

-Rich
 
dmspilot said:
Just take it out. In web design, it is considered somewhat of a faux pas to put "<verb> here to <do something>".
Click to expand...
Faux pas or not, if I had just gone to the site I would have not known to put the cursor over the words to view the sale items. I realize it's a computer site but not everyone is a web design geek.
 
RJM62 said:
Thanks, Henning.

I'm not sure whether it's worth it to sniff the browser and do something different for portable devices. Most mobile users elect to use the mobile version. But it is something I'm thinking about.

-Rich
Click to expand...

I think on the iPad it's well large enough that one doesn't miss it anyway.
 
Henning said:
I think on the iPad it's well large enough that one doesn't miss it anyway.
Click to expand...

I wound up just adding a separate "deals" page to the mobile version of the site - http://m.kitchentablecomputers.com/deals.php .

According to the stats, there's still fairly good correlation between the type of device and the version the users choose -- for now.

I also speeded up the effect to 0.5 seconds on the main site.

Thanks.

-Rich
 
RJM62 said:
I wound up just adding a separate "deals" page to the mobile version of the site - http://m.kitchentablecomputers.com/deals.php .

According to the stats, there's still fairly good correlation between the type of device and the version the users choose -- for now.

I also speeded up the effect to 0.5 seconds on the main site.

Thanks.

-Rich
Click to expand...

Worked and looked good if not a bit large on the font on my iPad.
 
Henning said:
Worked and looked good if not a bit large on the font on my iPad.
Click to expand...

Ah, okay. Thanks. I think it may be grabbing the font size from the CSS for the main site (or possibly it may be undefined on the mobile site) because it just includes the same php file with the links for both sites. I'll check it tomorrow or Monday and pretty it up a bit.

Thanks again.

-Rich
 
You must log in or register to reply here.
Back
Top