Easier to click on links

  • 2
  • Idea
  • Updated 5 years ago
  • Under Consideration
I came about this site http://37signals.com/svn/posts/1048-p... and it was a nice revelation.

It is obviously one reason why some sites are more user friendly than others. In some sites it is almost impossible to click a link and in a case like mine, with a shopping site, it is dead important I keep the visitors for conversions and I want my links to almost click themselves when the visitor even just think about clicking.

The above site explains how to go about and do just that and get links easier to click on, but I have hundreds of links and it will be an impossible task to upgrade all html links with a padded link target size for each one.

My feature request is to provide this function in the Style Designer. It would allow us to upgrade all links at once.

Who’s with me?
Photo of Patrik Karlstrom

Patrik Karlstrom

  • 10 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 2
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
That is a great idea. I can definitely see how it would improve the usability of your site! We have logged the request and it will be taken into consideration with future developments of the Style Designer.

Thanks for posting this and giving thought to how the Style Designer can be improved even further!
Photo of Patrik Karlstrom

Patrik Karlstrom

  • 10 Posts
  • 0 Reply Likes
Nice! Looking forward. How soon could such Style Designer improvement be expected?
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
At this stage I can't comment on if or when it can be expected. It is still at the consideration stage but we will definitely give it some thought and update you if it is something we decide to implement.
Photo of Patrik Karlstrom

Patrik Karlstrom

  • 10 Posts
  • 0 Reply Likes
Ok, I understand. Could you then please help me simplify the code so can place the margin within the link without the style sheet? It would allow me to just add the margin to existing links and it would be a time saver.

[code]
< style>
div.nav a { padding: 5px; }
< /style>

< div class=”nav">
< a href=””>First link< /a>< a href=””>Second link< /a>
< /div>
[/code]

Without the < style> and without the < div>. Can we do that? I’m not a coder. I just dabble and I’m obviously not able to post a proper code here (so I added the spaces - the [code] [/code] did not help).
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Patrik,

Just to clarify something here (sorry to jump in on this thread Monique), are you talking about the links in your online store? If you are, I'm going to assume (because you didn't post a link to your site), you are using ecwid. If so, the clickable links within the store are out of Yola's control and updating the Style Designer would have little effect on changing this.

I don't really know ecwid well enough but I think you can choose from a number of pre-defined css templates or create/edit your own custom css. You may want to try that! This may help too. If you are talking about padding on normal text links then I'm on the wrong track, sorry.
Photo of Patrik Karlstrom

Patrik Karlstrom

  • 10 Posts
  • 0 Reply Likes
Hi Boomer,

I feel ok you jump in here. Here’s a link to my site: http://www.neverhavedryskin.com

I am in fact looking for link padding in my general Yola site. I wasn’t much thinking about the ecwid shopping cart, but will review your link as well.

Thanks a lot!
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Patrik,

So it turns out this is quite easy to do. See here. I have also tested it on your template (Corporate Green).

Copy the code below and place it in an HTML widget at the top of the page that you have the links on:

<style>
a {
margin: -.5em;
padding: .5em;
position: relative; /* Needed for the r/h side of the click area due to a browser bug */
}
</style>
Photo of Patrik Karlstrom

Patrik Karlstrom

  • 10 Posts
  • 0 Reply Likes
Hi Boomer,

This is awesome. Thanks a lot. This is a great day! With such simplicity it should be easy for Yola to upgrade the Style Designer.

PS. How do you post code on this forum?
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Here's a tool I created a while back for posting code on the forum.
http://forsite.synthasite.com/encoder-gs.php
Photo of Patrik Karlstrom

Patrik Karlstrom

  • 10 Posts
  • 0 Reply Likes
Nice! It works:

<style>
a {
margin: -.5em;
padding: .5em;
position: relative; /* Needed for the r/h side of the click area due to a browser bug */
}
</style>

Any other advises to make good code?