Frontpage re-design

[tlienart]

Following #791 and a discussion on Slack, here are some actionable things we could work on to make some pages more ergonomic and lighter to load.

Front page specific

• [ ] put the tools (IDE/Debugger tools) on a separate page, access it via a new button next to "Try Julia in the Browser"
• [ ] at the moment the buttons "Code examples" and "Try julia in the browser" lead to the same REPL monster that takes forever to load, not a good sign, only one of the two should, the other one should show actual code directly (like it did before with the rosetta code)
• [ ] remove the Environment stuff and their heavy gifs and move it to the Community page
• [ ] update the splash image (see #791) making sure that background images there are <100kb. Ideally generate SVG files with programs like Luxor etc and cycle through them
• [x] make the youtube video link smaller (see GO front page)
• [x] make the "recent blog post" be automatically generated from the last 3-5 blog posts (@tlienart on it)

Misc

• [ ] move to bootstrap 4.3.x which is (I believe) jQuery free

Thoughts & actionable points are welcome. Please bear in mind that at some point someone will have to do it so if you want us to do large changes (e.g. change framework) please provide a full working POC otherwise we will likely not do it.

I'll try to tackle some of these over the weekend but will likely need help for things like

• SVGs (@cormullion)
• check that I've not chopped the community page too finely (@logankilpatrick )
• getting representative code from star packages
• ...

[zlatanvasovic]

Why can't recent blog post be just... last blog post?

[cormullion]

Although I'm a big fan personally, I'm starting to think that having a slideshow/art-gallery isn't entirely a good idea. It can become too much a matter of personal opinion and taste, and the people who comment may be outliers (be they minimalists or lovers of the baroque), some want a Julia set, others hate background graphics...

The most economical SVGs I can make are linear gradients - you can easily get this beauty for 727 bytes:

but as soon as I try to add a handful of straight lines it creeps up to 30K or so.

This might be something to do with how Cairo outputs SVG - probably not very efficiently. Funny how high quality SVGs start to get as big as low quality PNGs...

[tlienart]

Why can't recent blog post be just... last blog post?

Sorry this is exactly what I meant, but it's not the case at the moment. You may know that stuff went from a Hugo backend to Franklin backend, I ported most of the functionality but there's a few things missing, one was the auto generation of the list of blogs (now done) and another one which I realised when writing the list here is the list of few X recent blog posts. It's an easy fix that I'll do, I just added it to the list to not forget.

@cormullion I think 30K is still ok. And IMO the linear gradient is not bad! (I just look at the 27000 and it makes me happy so...) maybe it could be a semi-transparent overlay over some actual Julia code?

[zlatanvasovic]

@tlienart

1. Does "remove the Environment stuff and their heavy gifs and move it to the Community page" refer to the Ecosystem section, or to the Editors and IDEs? Editors definitely should be moved off the front-page.
2. What do you mean by YouTube video link, perhaps the whole JuliaCon2019 section?

[tlienart]

1: yes so this:

would be removed from the front page and arrive in some form on the community page instead (that's a suggestion). In any case it loads some massive gifs which don't really serve a purpose, and that should be removed.

The Editor/Tools stuff should go, I think, on a /tools/ page which could be linked to here:

---

---

2: this (note: you may have it blocked if you use uBlock or similar)

---

---

I think it's potentially a good idea to have a youtube link here but it shouldn't be as big

[cormullion]

Can you add text as a background using HTML and CSS? - I find text tricky in SVG - either it gets converted to thousands of curves (-> big files) or it stays as text inside the SVG, then needs to be styled somehow with available fonts.

[zlatanvasovic]

1. The ecosystem section is what actually brought me into Julia. It's a really good selling point, as it lists all the key strengths of the language. It kinda says "Julia is awesome, and if you don't believe it, look at the awesome software built with it". Maybe it can be condensed to be simpler and without GIFs?

2. YouTube video and that whole section may be removed altogether. After all, someone who finds out Julia for the first time isn't looking for JuliaCon. And someone who's looking for JuliaCon knows where to look.

[zlatanvasovic]

@cormullion You just make SVG image without text and put it as background of the .jumbotron div, like the way it is now.

[tlienart]

• The ecosystem section is what actually brought me into Julia. It's a really good selling point, as it lists all the key strengths of the language. It kinda says "Julia is awesome, and if you don't believe it, look at the awesome software built with it". Maybe it can be condensed to be simpler and without GIFs?

Right, so the key message is that there's lots of packages right? there's already that "Packages" section which is quite good?

The tabs as they are now are all outdated anyway, what we could have instead is something that looks like it with some simple code on the left and the output on the right showcasing "nice examples" of how Package X can be used to do Y. This is what I suggested in the list except that I suggested it be in "community" but I agree it could be on the front page.

Packages that could be shown there could be:

• Plots
• DataFrames
• Jump
• Diffeq
• Flux or Knet

There could maybe also be a list of the 10 most starred packages and what they do?

[zlatanvasovic]

@tlienart That's right. Packages and Ecosystem sections should be merged, somewhere along the lines of what you've proposed. Drop GIFs (maybe replace them with plain images) and update the lists of packages. But it seems that you'd arrive at something very similar to the current Ecosystem section, so why not just improve it and drop the packages one?

What do you think about dropping the JuliaCon section though? There's already a link to YouTube channel.

[tlienart]

Yeah I think I'm favourable to that. In any case we should do this in chunks of work so that we don't change everything at once and can get feedback on stuff. In order to not clash on things would you be interested in one of those items?

[zlatanvasovic]

I am interested. I'd go with removing JuliaCon section first (from the front-page). It maybe should be linked somewhere else.

[tlienart]

well it's already linked in the banner...

[tlienart]

also bootstrap 5 recent does not use jQuery, might be worth experimenting with it.

[zlatanvasovic]

@tlienart Users should be able to close the banner, though (and to have that preference stored in localStorage). It's a bit distracting to be displayed every time.

[cormullion]

@tlienart I uploaded a few SVG banner-type images here. I'm not saying you should use any of these in particular, just they're the kind of image I can make for around 50kb or so. They've all been optimized so are probably as small as they can get.

Whether they're too dull or too eye-catching is another matter altogether... :) 🤣

[ViralBShah]

Let's open separate issues for redesign of other pages. I also have some graphics I use in my slides that have logos of universities and books that I can add.

[tlienart]

@ViralBShah yes I think here I added "community" because some content would potentially be shifted over to that page but I agree that could be done in a second phase.

[ViralBShah]

Just taking a step back here. I think the point of the front page redesign should not to be minimal or lighter to load, but to get a newcomer to the project excited about Julia and find the things they need quickly. Within that experience, we certainly want a lighter / fast loading page.

[tlienart]

The main thing I wanted to do is a revamp of that ecosystem thing on the front page which would highlight top packages, maybe show some key code / plots

[cormullion]

@tlienart I added a few more versions of the Bowyer–Watson/Delaunay triangulation background image with varying opacities and with correct graph coloring here (since someone commented that adjacent triangles had the same color... :) But perhaps it would be simpler to just have a plain colored background...🤣

[JeffreySarnoff]

The last few words of the final sentence can jump out of the surrounding text box, moving under the image. The boxing should be enforced.

[zlatanvasovic]

@JeffreySarnoff Is that really such an issue? It does very well if it's not just a few words left over, like here:

Anyway, that section will be redesigned per the points mentioned above, so a better design may be implemented.

[JeffreySarnoff]

It is possible to have the best of both, extending the box when the excess is small and overlaying below the image otherwise. The hanging phrase looks unprofessional to me.

[cmcaine]

Anecdata: I really like the plots gifs and they were one of the reasons why I started using Julia.

You could make them .webms if you need to cut bytes?

[cormullion]

not sure webm is supported on Apple mobile devices...

[cmcaine]

They support MP4, which would probably still be an improvement.

On Mon, 18 May 2020, 19:03 cormullion, notifications@github.com wrote:

not sure webm is supported on Apple mobile devices...

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/JuliaLang/www.julialang.org/issues/800#issuecomment-630346279, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABNZA6KOBSBOTCCDMR4EFY3RSFZ67ANCNFSM4M7QOEZQ .

[zlatanvasovic]

@tlienart Last two items from "front-page specific" should be checked.

[ViralBShah]

I think a major next step is to overhaul the ecosystems. People (newcomers) often want to know what is a good set of well-tested robust packages for basic capabilities. And the ecosystems needs to point to that.

I think on the main page, this should translate into a collection of org logos, which when clicked take one to a page in ecosystems/ about that org that list the solid packages, the experimental ones, and details about how to contact that project on discourse, slack, zulip, github, etc.

[cormullion]

[reply to now deleted comment]

Minimalist designs are cool and can be fun, but the downside is the challenges they pose for accessibility and discovery. Hover text can be difficult to get right on both desktop and mobile. The tiny images are good, but bigger downloads are just around the corner, so it may not save much bandwidth in the long run.

A change in branding would be a fun discussion! 😃 I think the use of those four coloured dots in a row is getting interestingly close to Julia Computing's branding...

[cormullion]

[reply to now deleted comment]

I think those are possibly the dullest web pages I've ever seen. 😂 Probably not the sort of thing to get people excited about Julia...