SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    link not working

    I have a link / call to action on my page and I cannot figure out why it is not a link when you hover the mouse over.

    It is the link on the first banner of my home page that says " Click here to make the first move before someone else does " and it supposed to link to my quote page...

    Here is my site http://www.organicwebdesigns.co

    Your help would be appreciated
    Many thanks

  2. #2
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is working for me, but the only word you currently have linked is "Click".

  3. #3
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    hm that's strange, I have this in the coding:

    <a href="http://organicwebdesigns.co/quote" id="cta">Click here to make the first move before someone else does</a>

    what could be wrong?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    The slider-left div above it is positioned absolutely and sitting over the top of it.

    Solution: either reduce the height on slider-left, or better, remove it altogether.

    Code:
    .slider-left {
      margin: 30px 25px 0px 25px;
      float: left;
      width: 490px;
      height: 209px;
      overflow: hidden;
      position: absolute;
    }
    As an aside, your call to action link needs some styling to make it stand out. It took my eye ages to find it. You need a chunky background color on it or something to highlight it ... maybe rounded corners, too.

  5. #5
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ok did that and it fixed the link

    Totally agree about the call to action, it was something I was going to work on but you inspired me to do it now. I have been absent for quite a few months so I am very rusty now with css code so I tried to add my new call to action image. On doing so it does not show up. Any ideas why? I added some styling and a nice orange image with corners and white text but still nothing

    Many thanks

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Add display: block to your CSS:

    Code:
    #cta {
    display: block;
    margin-left: 15px;
    background-image: url(images/cta1.jpg);
    height: 27px;
    width: 310px;
    text-indent: -10000px;
    }

  7. #7
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Yes sorted!!! But what do you thing of the call to action? I can't make up my mind, it seems a little busy now


    Quote Originally Posted by ralph.m View Post
    Add display: block to your CSS:

    Code:
    #cta {
    display: block;
    margin-left: 15px;
    background-image: url(images/cta1.jpg);
    height: 27px;
    width: 310px;
    text-indent: -10000px;
    }

  8. #8
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hantaah View Post
    Yes sorted!!! But what do you thing of the call to action? I can't make up my mind, it seems a little busy now
    Maybe make "Click here to make the first move" in orange (the same orange that is currently its background), and have a transparent background with a 2 pixel oval/circle around that sentence?

    Also, within that green container, I noticed that there is a green rectangle on the top left and the top right which stands out as being a different shade of the rest of the green. Not sure if this is somehow on purpose or for a specific reason?

  9. #9
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    thanks for you help, I had a play around and I found the best thing was to position the current button differently, now it looks good I think and jumps out at you. Thanks guys

  10. #10
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I find "click here", even on a link text that DOES have more information, a waste of space. What the heck else will someone think of doing to a link? People have been already pretty well trained to click things that look like links and buttons.

    Calls-to-action are indeed often styled like buttons: just have the link text state what hitting that button would do for the user ("make the first move" for example, though that sounds a little vague). "Subscribe", "Buy now!", "Get your discount now!", "Start", "Complete purchase", etc. Action text. Telling someone to click there is redundant and makes the rest of your text more likely to be skipped by skimmers (according to Nielsen research, skimmers read just a few words starting a sentence or link).

    Though, this link is inaccessible to many people anyway. It would be really nice if it had actual link text, and if it reacted on :focus. The negative text-indent isn't recommended for a variety of reasons.

    Unless you need some fancy weird font people won't have on their systems, removing the text and using an image (which has no fancy text that I can see) is a problem. This problem can be solved by letting real white text sit on real orange background colours. This allows you to use CSS to show user feedback on :hover, :focus and even :active. I makes the text available whether the image loads or not. It allows people to let their computer contrast settings make that text more readable if necessary. It allows people to highlight and copy that text. And you can get that shrink-wrapped look of a button by changing display: block to display: inline-block, where the anchor keeps its block properties except it won't extend to 100% width like static blocks do. Give it some padding all the way around and you can round the corners, add a slight background shadow and other goodies with pure CSS. You can then change these during the feedback states (focus, hover, etc).

    If you did though find an image that did what CSS or the user's fonts cannot, Gilder-Levin is a more accessible technique.

  11. #11
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Yes good point!!! Thinking up a good call to action now in replace. Your other suggestion sounds the better way to go although I have strayed away from it so far, I guess now is the time to change practice. So can you help a little further to make it clear for me.

    my html would simplt be:

    <a href="http://organicwebdesigns.co/quote" id="cta">Make the first move, catch me while you can</a>

    my css is what I need help with let me try:

    #cta { display: inline-block; margin-left: 20px; margin-top: 5px; background-color: #e35413; text: #fff; height: 27px; width: 310px; }

    Am I close or far and I'm not sure how to do the shadows and corners etc

  12. #12
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Also regarding action text: short and sweet if you can.

    But assuming this HTML:
    <a href="http://organicwebdesigns.co/quote" id="cta">Make the first move, catch me while you can</a>

    You'd want:
    #cta {
    position: relative; (this is only for having button-y feedback when the user clicks... see below to :active state)
    display: inline-block;
    margin-left: 20px;
    margin-top: 5px;
    background-color: #e35413;
    color: #fff;
    min-height: 27px; (let it grow if user enlarges text)
    font-weight: bold;
    font-size: 1.2em; (I strongly encourage setting a font-size and line-height... buttons should stand out! :)
    text-decoration: none;
    text-align: center; (instead of a width we'll use padding, but if you do add a width, this'll keep text in the middle)
    padding: 5px 7px; (or something... for things like buttons, even if I set font-size in something like em, I notice I tend to do px for padding. Padding is like the inner layer of fat. It'll keep the outside edge further away from the internal organs (text). Play with these numbers until you are satisfied visually)
    text-shadow: 0 1px 2px rgba(51,51,51,0.6); (optional, should make the white letters seem a tad raised and might make them more readable esp if the orange isn't very dark)
    border-radius: 5px; (again here I also use px if it's a tiny edge. If it's a large edge, it'll need to grow if the whole element does, and I'll use em instead)
    box-shadow: 3px 3px 3px rgba(51,51,51,0.6); (again optional... this one I'm not sure of the browser support, and might still need the prefixed versions here too)
    }

    :active is the moment when the user is actively clicking on the element. When using the mouse, so long as the mouse button is depressed, the :active state should show. Also triggered by keyboard and styluses(sp?) and other things, but I think not touch. Not sure.
    #cta:active {
    top: 1px;
    left: 1px;
    box-shadow: 1px 1px 0 #222; (make shadow smaller and more solid as if user is pressing down on a button)
    }
    While being pressed, the button actually kinda looks like it's been pressed: it moves right and down 1px. The shadow might be fugly and you might not want to have it at all on this state (or on the button at all :)

    #cta:focus, #cta:hover {
    decide some styles for when users are interacting (but not yet clicking) this button. Changing colour/background-colour should only be the sole change if you are changing the colour radically (changing the contrast), otherwise couple it with something else like adding an underline or something (basically we're considering the colour-blind, those with general bad vision and those with crappy-calibrated monitors or with sunshine streaming onto the monitor like what's happening to me right now, ug). Underlines don't tend to look good on buttons but they're an option.
    It's usually a bad idea to go from bold to normal, or from normal to bold, or italic, etc. Usually this makes the text jump as it changes width and looks teh fugly.
    }

    If you don't want the focus outline, it's okay to remove it using outline: 0; but ONLY if you have something visually obvious on the hover/focus state. Otherwise keyboard users are lost as they navigate your page.

    Anyway, those are some ideas. Check the button afterwards in IE 8 and 9 to see the difference. IE<9users will get square boxes with no shadows, but still should be an obvious (if fugly) button... I forget what IE9 supports. 10 should support all of the CSS3 stuff. Keep this in mind when making your hover/focus state, that it's not only affecting schmancy CSS3 things.

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    An interesting ote by uxmovement about buttons vs links:
    http://uxmovement.com/buttons/the-bu...s-link-debate/

    We're assuming "link" here means an anchor who is inline with text and therefore merely styled similar to the text around it, but with something to make it look "linky" like an underline and a different colour and a reaction to the mouse.

    "Button" here does not mean (only) the <button> element or form submits, but something you style to look like a button (like a call to action). I don't think the article made that clear, because you can have instances of real buttons styled like links, and links styled like buttons.

  14. #14
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    getting my head into this now, thanks for all the info I'm just about to play around with all your advice. One more thing I changed my cta text to see if I'm free. Do you think that's better? What would you put?

  15. #15
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    The text suggests I'll maybe get either a contact form to ask you if you are free, or a schedule showing when you are free. What I get is a quote contact form (and I'd have the header on the form page say "Get a quote" or even "get a quote in one simple step"). I'd say something like "get a quote", but one thing that's really easy and awesome for this kind of thing is to show a screenshot of your web page as it is now to various random people, and say

    "Let's say you're on your computer and you are looking for web site design services etc. and you end up at this page. What do you expect if you hit this button?"

    Regular non-techy people will tell you where they think they'll go or where they expect to end up when hitting that. You might have to tell them the button is a clickable thing if it's just a screenshot or printout; that's ok.
    You can also ask them, showing a screenshot of the whole page, "where would you go if you just wanted to know what some site might cost?" and "where would you go if you wanted to know x?" where x is the typical tasks you expect users to do on your web site.

    This is a really simple easy type of usability testing and no matter how well you've built your page, you'll usually always find stuff that's wrong enough to cause potential problems and easy to fix. Button text is usually within the realm of a web copywriter but we're assuming you're your own copywriter :) so usability testing is the easier way to find the text you need.

    The trick is asking people questions without inadvertently implying an answer :)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •