sveltejs / svelte.dev

The Svelte omnisite
https://svelte.dev
101 stars 53 forks source link

docs(omnisite): "GET STARTED" below headline should be more noticeable or be removed #513

Closed jnehlmeier closed 2 weeks ago

jnehlmeier commented 2 weeks ago

Describe the bug

Currently it is easy to miss the "GET STARTED" link below the headline. The headline text is large and the svelte logo is large and complex and thus distracting. Small red text below the headline looks like a subtitle.

Styling the link as larger red button would make it more noticeable.

get-started

Reproduction

--

Logs

No response

System Info

--

Severity

annoyance

cowboycodr commented 2 weeks ago

Working on this right now. Here's what I have so far.

image image
Rich-Harris commented 2 weeks ago

I feel differently. For one thing it's a link, not a button, and so it shouldn't look like a button. (I know a lot of sites do this, but they shouldn't!) It could maybe have an arrow-pointing-right icon or something like that to make it more obviously a link.

But my main disagreement is with this:

Currently it is easy to miss the "GET STARTED" link below the headline

Really? Because there's two interpretations of this:

  1. If you're looking for a 'get started' link it's hard to find. I do not believe this to be the case
  2. It's not so in-your-face that it demands your attention whether you're looking for it or not. This is a good thing!

Opened #529 which adds the arrow and makes it a tiny bit more prominent, but not in an annoying distracting way.

jnehlmeier commented 2 weeks ago

I feel differently. For one thing it's a link, not a button, and so it shouldn't look like a button. (I know a lot of sites do this, but they shouldn't!) It could maybe have an arrow-pointing-right icon or something like that to make it more obviously a link.

Yeah I generally agree with it. It has an href / url so it should be a link. Still it feels a bit lost below the headline. But maybe it is just me, hard do describe. Maybe it is also the positioning itself. We have a large headline, a large logo, a large "/'svelt/" thing and in between a small "Get started" link. It could also go below the description paragraph. At least I have then read what svelte is and then "get started".

At the end it comes down to how prominent you want that get started link. At least I can say on mobile I first didn't noticed it.

There is also a minor issue in consistency because "/'svelt/" is red as well but not a link. So it is not immediately clear that "get started" is a link if you never visited the site before. It is minor because it is a call to action wording but it is inconsistent.

jnehlmeier commented 2 weeks ago

Just seen the arrowed version. Already makes a difference. Maybe a little more space above it would make it even clearer. On mobile the CTA could have equal spacing to the headline above and the logo below.

Rich-Harris commented 2 weeks ago

Agree with that — I added a touch more spacing and merged #529, so I'll close this. Thanks!