[WIP] v3 site

[Rich-Harris]

https://v3.svelte.technology/

There's a ton of work still to do, but I've made some progress on updating the site for v3 and moving it into the main repo. Massive thanks to @vedam in particular for creating the fabulous new logo and creating https://svelte-redesign.now.sh — this code is all adapted from that work.

I've made a few design tweaks along the way (contrast ratios etc). Also, the more time I spent with it, the more I felt that Asap doesn't quite reflect Svelte's personality, so this design uses Overpass and Overpass Mono everywhere (which were already in the design for UI elements). It's a really great typeface — modern, playful, versatile, a bit like Open Sans but less bland.

I'll probably make a project board tomorrow to track the many outstanding tasks, but in the meantime if you see something say something. Also, it's revealed a couple of bugs in Svelte itself:

• href=foo#{bar} comes out as foobar — the # is getting removed. This makes all the guide links broken
• bind:this={thing[foo]} doesn't work, if foo is an each block context

[ansarizafar]

@Rich-Harris we can use https://scrimba.com/ for interactive intro and tutorials.

[PaulMaly]

How about multi-language support? Russian translation is ready, btw. Also, the previous logo color was great! Is this new color a final pick or there'll be additional discussion about it? Seems, if we'll use existing color it'll be better to brand recognition.

[akaufmann]

Looks way better! Good job @vedam! But the logo doesn't fit so well with the rest of the site *. I think an S with the font Overpass would be better. Something like (not pixel perfect):

* Sorry to bring this up now, hadn't seen the PR.

[Rich-Harris]

Re Scrimba — I'm not a fan of audio/video-driven tutorials, particularly as a primary means of communication. It's an inefficient way to learn and it's very expensive (in terms of time and effort) to produce/update/maintain as new features are added and practices evolve. I think video is much better suited to e.g. 60 second intros and standalone 'here's how you do X' clips, rather than a soup-to-nuts tutorial.

@PaulMaly good point re i18n — yes, that's an absolute must. I've added it to the project board.

The existing colour (#aa1e1e) works by itself, but it doesn't play nicely with other colours as part of a palette. The new colour (#ff3e00) is much brighter and friendlier, and I think it's more eye-catching in (for example) a sea of Twitter avatars. Svelte is still relatively unknown, so I don't think we need to be too concerned about maintaining existing brand recognition.

@akaufmann I, err... don't agree. Sorry! 😬

[vedam]

@akaufmann As the person who made the logo, I don't want to leave your suggestions completely uncommented and briefly summarize for you: There were some discussions about the topic here and here. There was also a lot of constructive criticism in the channel. There is a Mood-Sheet svelte-sapper-identity-1.1.pdf about the various considerations that led to this logo (besides the explanations by @Rich-Harris from above).
So after you have this comprehensive briefing in mind, it would be a great pleasure for me to continue discussing with you the questions 'What makes a professional logo?' or 'How can a logo visualize the spirit of Svelte'.

Just some positive feedback, not more.

[akaufmann]

@vedam thanks for sharing your Mood-Sheet. Looks very good. Please do not misunderstand "not professional enough". You did a great job with the design of the website. I'd like to explain it a little bit so as not to offend anyone any more: I wasn't aware of the idea behind it and unfortunately it wouldn't have been if Rich hadn't explained it. The shape is a bit unusual (maybe it should) with the combination of an S and the links in a chain - it looks more like a special S with no further meaning (if you don't know it) to me, sorry. Since this was not clear from my point of view and the logo was therefore not harmonized with the rest, it was "not professional enough" for me but I didn't mean to offend you. I also didn't like the quick handling of the discussion and my suggestions from one person here at the beginning (maybe that's another reason for the harsh words and no explanation why it's like that for me) and I definitely didn't want to say that one of the examples should be taken - just as a discussion starter. I would have liked to get some feedback from you about the logos from an experienced designer's point of view, but I think the subject is a bit tricky and that ship has sailed. Thanks for your feedback!

EDIT: With "Just some positive feedback, not more", I meant that I would have liked to get a positive feedback, not that the comment from me (issuecomment-449447767) is a positive feedback - just to clarify that - shouldn't sound cocky.

[maxmilton]

With all the above said, where is the correct place for feedback on the v3 website?

Some general feedback from a quick look is:

1. Since docs are largely about reading lots of text and code, readability should be of paramount concern.
2. Larger body font size is a welcome change!
3. The simple colour palette is nice; gives the site a simple and more friendly feel 😄
4. Some things have too low a colour contrast making them hard to read/see.
5. Top and side nav is a bit hard to read; font and font size.
6. Body font is too tight making it straining to read. Although I actually quite like Red Hat's Overpass font, it can be a bit too condensed. Adding letter-spacing: 0.3px; helps for example.
7. How to access the side nav on small screens?
8. Lack of scroll bar on side nav. Although it looks more minimal, it's not instantly obvious that it's scrollable.
9. Probably a good idea to run it through a11y testing tools such as: https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd.
10. Page weight. Although better than the current site, 522 KB v3 vs 772 KB current, I still feel like there's a lot of room for improvement. Removing https://v3.svelte.technology/great-success.png for example would reduce the size by 80 KB.

[Rich-Harris]

Thanks for the feedback all — I think it's actually probably time to merge this PR in, since it's started accumulating commits that aren't directly related to the design (e.g. bug fixes to Svelte itself), and it's only going to get more chaotic.

@maxmilton I'll add those points to the project board (some of it falls under 'mobile design' which is a catch-all TODO...)