Attempt to rethink the design of the main page for 2024 edition

[bvdmitri]

Briefly Describe your changes

We're keep getting very negative feedback about the layout of the main page of the conference. People are confused with the layout and it looks "childish" with very bright colors. This is really important since nice website boosts ticket sales and grabs attention of more people. This PR is an attempt to rethink the layout of the main page, but of course its not going to be merged without any discussion. I will post a link in the organizers slack channel so people can comment on this changes.

I was inspired by the PyData website, but also tried to keep the original spirit and also kept some of the original elements of the old layout. I also made sure that the new layout displays nicely both on computers and phones.

I used some old stock photos from JuliaCon Local Eindhoven 2023, but those can be replaced of course.

Use preview to see the changes. In this PR only the main page for 2024 event has been changed. I didn't change previous templates.

Checklist for merge

• [x] I built the website locally and tested it using Franklin.serve()
• [x] All CI checks have passed and you have tested the online version (click on the list of checks and click Build and Deploy / Preview to see the preview)
• [ ] Somebody else reviewed my changes (use your best judgement if you need to merge quickly

After merge

• [ ] Closed relevant issues

[NickMcSweeney]

The page does end up being a bit long, maybe you could put a one line quick link menu-thing at the top.

keynotes | tickets | venue | sponsors

and clicking on it jumps you down the page.

[pabloferz]

To my eyes, it feels that this leads to too much unintentional blank space (which if not there for spacing) which also makes the landing page too long as commented above.

[bvdmitri]

@pabloferz do you mean the "What to expect" section?. Its indeed "lengthy", I can work on it more and make it more compact

[pabloferz]

Yes, what I said is for the "What to expect" section, indeed.

[bvdmitri]

@pabloferz I do think you have a point, this is a different attempt, makes it much more compact

[bvdmitri]

@NickMcSweeney the page is much shorter now

[mkitti]

I do like the simpler layout. I think it may be possible to use the colors in a limited fashion. Perhaps we could use them for headers somehow. Also check mobile devices please.

[bvdmitri]

Yeah, I've checked the mobile devices right away, they use even simpler "stacked" layout, e.g. this is iPhone

vs iPad (uses normal desktop layout)

[bvdmitri]

@mkitti alternating headers, do you mean something like?

[pabloferz]

@bvdmitri, the last iteration is much better. I still have other comments:

• I'd say it's better to have something like "JuliaCon at a Glance" than "What to expect".
• The font size within the first all buttons (except for the "Buy your tickets" one) should be bigger
• I'd prefer the buy your tickets smaller but possible in a solid color as opposed to outline colored/white background
• I'd have just "And more!" instead of "And even more!" (it sounds overly redundant IMO)
• Finally I would add some intentional but small extra spacing between sections.

But overall I can get behind the last layout. Well done!

[mkitti]

@mkitti alternating headers, do you mean something like?

I'm not sure I like that. Maybe just have the colors be the background for the headers: "Keynote speakers", "Venue", "Previous", "Events" with white text.

[mkitti]

Here's what I was thinking for the headers. I'm still deliberating.

[mkitti]

element.style {
    background-color: #854c9e;
    color: white;
    border-radius: 1em;
    text-align: center;
}

[bvdmitri]

@mkitti this is my attempt, but I'm not sure I like it...

vs

[MaxxxvD]

Can you add a picture of inside the stadium for under the header “iconic location” instead of the group picture?

[mkitti]

Maybe choose just one color for headers? Perhaps the blue?

And then use another color for the button?

You could also try some shade of gray for either one.

[bvdmitri]

@mkitti I tried a few options, but I’m quite busy this weekend. I also have a list of additional changes to implement over the course of the week. I think we can merge this version for now, and I can work on it further on Monday. WDYT?

[bvdmitri]

@pabloferz I also addressed your request :)

[mkitti]

My main request at the moment is to change the color of the "Buy your ticket here!" button to be distinct from the navigation bar. At the moment it's a slightly different shade of green

[bvdmitri]

I find the purple nice, wdyt @mkitti ?

Also red

also blue

[mkitti]

Purple or blue works for me.

[vchuravy]

Could we move the Keynote speakers "above the fold". Right underneath the "Buy your ticket here".

Right now you have scroll down quite a bit on a normal 16:9 display.

[mkitti]

@vchuravy Let's rearrange the keynote speakers in a separate PR. I need to add a sponsor.

[bvdmitri]

@vchuravy imo the position of keynote speakers is fine as it is now, I think its more important to get a simple grasp of the conference first without diving into the details. I also put the link "check out the keynote speakers" under the "insightful keynotes" so its not necessary to scroll all the way down.