Closed kinow closed 10 months ago
Just the header done so far. Here's what it's looking like for now (ignore the content as I am breaking the CSS styles as I upgrade the rest).
HTML navigation menu added.
It was hard to tell what was a link, and what was text (because of the text near the top for venue & date. I had a look at the CWL's website and used colors similar to the CWL website menu.
And remaining styles done (note that we have a reset, so we define things like what a p
looks like, a ul
, etc.. It looked simpler than trying to make it work on different envs & browsers. Now we can a) review this layout, b) fix any browser inconsistency if any, c) make it fun :tada:
I used the BOSC23 as reference, https://www.open-bio.org/events/bosc-2023/, as well as the CWL website, mixing a few ideas that popped into my mind while working on it. I hope we are going in the right direction for a new layout :+1:
Will update the remaining pages and mark it as ready for review and assign reviewers.
Cheers
And the previous/current layout, in case we need to revisit it later :+1:
Ready for review.
One thing that I noticed, is that perhaps we could delete the other pages, and have all the sections at the body of the first page. And then use anchors to link to those sections of the page. WDYT?
(Oh, If you want to run the way I am doing, just run serve-with-python.sh
if you have Python3, then visit localhost 8000)
Thanks! :sleeping_bed: Bruno
Noticed I deleted the organizers text. Fixing that today :+1: will also try a single HTML file with anchors (easier to maintain I think).
In the last commit it uses a single page layout. Deleted the extra pages with the duplicated HTML code (easier to maintain, we may not need a static site generator?). Menu items point to each section.
And each section contains a heading element. If this element contains a link, that link displays a paragraph symbol when hovered (like in some other websites). In the screenshot below you do not see the mouse pointer, but it is over the "Call for Submissions" link. Clicking on that updates the URL, but readers can also copy the link to share with others.
The sections linked from the top navigation menu contain a link to go back to the top.
Moved the part about previous conferences to footer as that seems less relevant (not about the currency CWLConf 2024, but it's still visible and accessible).
It renders Okay-ish on mobile now, but I did not want to spend much time on responsiveness, accessibility, etc., for now. Just the new layout. I will prepare another PR later.
I also think we can have two columns with colored background as in the BOSC2023. That could be useful to make the Call for Submissions easier to read, splitting into two. Or to have images to make the page less text-heavy. But leaving that for a follow-up pull request, and just addressing the new layout part (this PR does not close the linked issue).
Bruno
Awesome work Bruno!
I think this makes a lot more sense, particularly since there's only a small amount of content on each page.
I also think we can have two columns with colored background as in the BOSC2023. That could be useful to make the Call for Submissions easier to read, splitting into two. Or to have images to make the page less text-heavy.
This might mess with mobile layouts. But I agree that it could break up the paragraph chunks a bit! Will be plenty of pictures to add once the conference actually happens!
This might mess with mobile layouts. But I agree that it could break up the paragraph chunks a bit!
We can hide or make the 2 columns a single column when the browser viewport is small, for tablets and mobile. Next on the list after the new layout.
Thanks @alexiswl !
Updated with @alexiswl improvements! Thanks Alexis!
Hi @mr-c,
Some random thoughts; no link back to the main CWL website?
I made the same question, from the description:
Not sure if we also need/want to link CWL homepage from the Common Workflow Language logo on the top-left (maybe too many links?).
It's super easy to add the link. Do you prefer that on the CWL logo on the header, or somewhere else like the footer? (I really don't have a preference)
On mobile, the nav elements are hard to read
Yup, just updating the layout here first. Then will create more follow-up PR's for mobile, to make it more fun (some colors, use two columns as in the BOSC website, ...), etc. https://github.com/common-workflow-language/cwlcon2024/pull/41#issuecomment-1868497073
But if you prefer we can leave this open and work on the mobile improvements before merging this one. WDYT?
It's super easy to add the link. Do you prefer that on the CWL logo on the header, or somewhere else like the footer? (I really don't have a preference)
Agree, the logo should link back to commonwl.org
But if you prefer we can leave this open and work on the mobile improvements before merging this one. WDYT?
Also I'd like to merge this so we can make PRs from this as a base. I don't think this design is less mobile-friendly than the current main branch?
Agree, the logo should link back to commonwl.org
Link added! :heavy_check_mark:
Also I'd like to merge this so we can make PRs from this as a base. I don't think this design is less mobile-friendly than the current main branch?
Sounds good to me. It should look slightly better, but I only did a quick test on Firefox mobile viewport. To get things really right it takes a bit longer, as you have to test different browsers, resize a few times, and make sure things look aesthetically OK.
I'm +1 to merge and iterate, unless we need to hold on merging this for some reason :+1:
This version should also be a little more accessible, but if you open it in WAVE or some a11y test app you'll definitely get warnings and errors. My focus here was really just HTML and CSS first :slightly_smiling_face:
Thanks!
Addresses #26
The website renders fine on Linux Ubuntu LTS, and Firefox LTS. I didn't have time to test all other browsers and OS's (I brought some machines home to test Autosubmit, so I have Mac+Safari, Windows+Edge, and Linux+Chr/Ffox).
I will test accessibility too (with Wave/browser tools/and Orca reader on Linux).
This is a pure CSS site, no JavaScript required, and no cookies as well (important for EU). It renders correctly without JS (I use NoScript so that's the default behavior for me).
I changed so that clicking on the text "CWLCon 2024" at the top/header takes you to the same link as "Home". Not sure if we also need/want to link CWL homepage from the Common Workflow Language logo on the top-left (maybe too many links?).
Feel free to provide any feedback :vulcan_salute: Bruno