Redesign InVision to HTML

[michielbdejong]

Hi everyone,

As part of a website redesign process that was started in spring, we asked Rajnish Baldha to convert the InVision designs to HTML.

This was his brief:

Do you think you could convert this 5 page website design https://inrupt.invisionapp.com/console/share/FW5K83EZGRJ/987274882 to HTML? We want it to be coded as plainly as possible, so using just the plain necessary HTML tags and CSS rules without too many imports / frameworks /dependencies.

[...]

[We want it to] also be responsive, so it stays easy to read when you view it on a mobile phone. You can use things like bootstrap of course, but what we want to avoid is to have a build step of a CMS systems like Jekyll.

Here is the preview of Rajnish's work so far:

https://beamish-pie-3e7a78.netlify.app/

Please contact @gisellewenban if you find any discrepancies, she can then include it in her reply to Rajnish.

[VirginiaBalseiro]

We didn't agree on using CSS or JS frameworks/libraries. We should stick to plain CSS/JS for simplicity.

Some other comments about content: this seems to be including all the changes in the new design, including the content changes we agreed to leave out, not just aesthetic changes.

In addition, Solid world should be removed from the events section and moved into the "more events", since we don't even have a process for submission and it's listing a "Solid World speaker form" this team doesn't even have access to.

[csarven]

@michielbdejong , thanks for following up on this in a very timely manner, communicating, and looking into funding and everything. Much appreciated!

---

Some general comments because I see there are some issues with the proposed HTML+CSS+JavaScript:

Use progressive enhancement strategy: Have proper HTML(+RDFa) in place so that information is human- and machine-readable, accessible, archivable without any other layer or dependency. It will give more mileage to the HTML. A reasonable amount of different and multiple CSS can be used on the same HTML without having to adjust the HTML for a particular design. Use JavaScript for anything strictly behavioural when necessary to extend. (JavaScript shouldn't be required to get the full content of a given resource / URL.)

Aside: I'd suggest that we don't dive into yet-another wholesale templating system of sorts or at least approach with a touch caution. We don't want to replace Jekyll with something equivalent else (whether generated or not) per se, because we wanted to move away from that approach in the first place; no one wants to learn or maintain it. Let me put it this way: there is virtually no difference between taking the output of the current HTML on the website (which is using Jekyll or whatever) and adding that as static files into the repo (replacing the Jekyll setup) and going ahead with that, versus a yet-another templating system which may (or may not) be tightly coupling the layers or a particular setup/flow.

[gisellewenban]

Hi all, Thank you for moving on this so quickly. Michiel: I think this work is done based on the first draft of the reviews - I've checked InVision and removed the older draft versions to avoid any confusion. Now there are only the updated mockups in InVision now (that remove the SolidWorld content until we come to a decision on that). Michiel, do you think you could ask Rajnish to revise his work slightly to reflect the more updated designs? :) I think it is just some minor changes - sorry if I created confusion in InVision! I can also reach out to him if that is preferred - let me know! Thank you so much, Michiel, for your work on coordinating this! Warmest wishes, Giselle

…

On Tue, Dec 19, 2023 at 5:44 AM Sarven Capadisli ***@***.***> wrote: Some general comments because I see there are some issues with the proposed HTML+CSS+JavaScript: Use progressive enhancement strategy: Have proper HTML(+RDFa) in place so that information is human- and machine-readable, accessible, archivable without any other layer or dependency. It will give more mileage to the HTML. A reasonable amount of different and multiple CSS can be used on the same HTML without having to adjust the HTML for a particular design. Use JavaScript for anything strictly behavioural when necessary to extend. (JavaScript shouldn't be required to get the full content of a given resource / URL.) Aside: I'd suggest that we don't dive into yet-another wholesale templating system of sorts or at least approach with a touch caution. We don't want to replace Jekyll with something equivalent else (whether generated or not) per se, because we wanted to move away from that approach in the first place; no one wants to learn or maintain it. Let me put it this way: there is virtually no difference between taking the output of the current HTML on the website (which is using Jekyll or whatever) and adding that as static files into the repo (replacing the Jekyll setup) and going ahead with that, versus a yet-another templating system which may (or may not) be tightly coupling the layers or a particular setup/flow. — Reply to this email directly, view it on GitHub <#823 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A3VFVP7GU3FY34MJWWZ6JNTYKFVZRAVCNFSM6AAAAABA2YTN2SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNRSGUZDMMZXGA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- This e-mail, and any attachments thereto, is intended only for use by the addressee(s) named herein and may contain legally privileged, confidential and/or proprietary information. If you are not the intended recipient of this e-mail (or the person responsible for delivering this document to the intended recipient), please do not disseminate, distribute, print or copy this e-mail, or any attachment thereto. If you have received this e-mail in error, please respond to the individual sending the message, and permanently delete the email.

[michielbdejong]

OK let's see. First page, the only difference I see is the 'Newsletter' link at the top:

[michielbdejong]

Second page looks identical too, except again for the 'Newsletter' link top right and the font size:

[michielbdejong]

Third screen, 'developer tutorials' should be in a white box:

[michielbdejong]

Fourth page the position of the company logos is different (top right of each box), but I actually kinda like it:

[michielbdejong]

Fifth page, agree our newer version is better, I'll ask Rajnish to update to it:

[michielbdejong]

OK, I asked Rajnish if we could make the two changes (white background for 'tutorials' paragraph on the 'for developers' page and one big list of events with square tiles on the 'community' page, and he will make these changes asap without extra charge.

[michielbdejong]

Pushed first version to https://github.com/solid/solidproject.org/tree/2023-redesign - will update that branch with the improved 'for developers' and 'community' pages when ready.

[VirginiaBalseiro]

4/5 people who commented on Matrix about Bootstrap and jQuery expressed they considered it was better not to use these. There are a number of other issues with the current state of work, including content changes that were not agreed on, and the designs used were not reviewed properly before the work was done (I for example, did not get to see the second version before it was implemented).

In any case, I volunteer to fix the HTML and write Bootstrap and jQuery out because I'd rather things are done properly and sustainably than rushed.

[michielbdejong]

Completed:
solid (3).zip