The Reef Web Development Thread

Since I was tasked to create the Reef 2.0 project website, I have set up a barebones / skeleton / placeholder website here now:

https://reef.edgeryders.eu/

The basic tech system is in place and works, and (update!) now you’re also able to edit content in near-realtime via the #earthos:reef-web-content category. It is published at every 5 full minutes of the hour. The tech stack is the same as that of the ominous, never-really-used ngi.edgeryders.eu site. Consider that some in-kind cross-funding from the EU between two of its funded projects …

Now what I don’t want is to do and undo content and design changes to that website multiple times. That’s always what happens when I make a detailed first version and then “collect client feedback”. So we’ll do it differently this time:

Please comment here with tasks you want me to do towards finishing that website, or also comment on already collected tasks if you disagree. I’ll work through the tasks in this thread and update myself in a post to this thread when I have caught up. You can then see the results and send me some more tasks. When everyone is happy with the result, we’re done.

What I want my Reef 2.0 project colleagues to write in comments here would be, among others:

  • tasks with proposed menu items / subpages
  • tasks with presentation slides to embed, if you want that
  • tasks with visuals to include
  • tasks with copywriting items that are missing (I can write the short ones myself if I am pointed to the right materials)
  • task telling me the right color scheme to use

Let’s see how that “agile” mode web development will work for us …

(As a side note: I think it would be good to build this as a general webhome for the Reef in both its current and future incarnations. That way, the site will have a use even beyond this Reef 2.0 project, in case the scoping would end with no new house for the Reef.)

Not sure how I feel about many cooks in a design effort. Something we learned from POPREBEL sites making is that it leads to a lot more work.

I will just say:

  • a page with Join the Team is useful - perhaps just take the info from here, adding our email addresses:
    Who's building The Reef in Brussels and how you can join us
  • in Participate I would see the part of the Pitch that is related to the Reef for
    Policy Makers … Added value + how to get involved
    Investors … Added value + how to get involved
    Inhabitants … Added value + how to get involved
    etc.
  • Graphics - we will have to see with the designer - he might keep the logo but on a new color scheme, and design a header etc.
  • Slide show - I like it! perhaps photos can go there: of candidate buildings, of the people + public statements (that we collect from the Sign Up form)
1 Like

Mostly done. It will take a while for the new IP to propagate through the system.

1 Like

I think that logo is pretty unimaginative. Also, not solarpunk at all.

1 Like

Edited the Discourse page a while ago, but it does not seem to have propagated to the website proper. :frowning:

Some updates:

  • We moved the site to reef.brussels.

  • Realtime editing works now. Any change made to a Discourse topic will be live when the wall-clock time shows a multiple of 5 minutes. It did not work before as experienced by Alberto:

  • The site uses the existing (“honeycomb”) logo now. This may change again if and when our designer supplies us with a new Reef logo.

  • The full pitch by @alberto is now online. It’s split between the frontpage and another page “At Scale”.

Now moving to work on @noemi’s proposals for the website.

I’ll only add images, graphics and CSS design changes once I get the relevant material from our designer – @ilaria is organizing that according to requirements I gave her about this job.

1 Like

We will sign the contract with the graphic designer tomorrow morning and he’ll start to work on it right away.

2 Likes

thanks. I believe we will just use the EarthOS instead. They will create a color scheme, right @Ilaria?

Exactly. We said them to use ER blue logo (on the website) / ER orange logo for social media images + EarthOS + Climate-KIC logos.
They will propose a colour palette based on the solarpunk art input we gave them.

1 Like

Clear instructions, please? :smile:

3 logos will be used on the website: ER blue logo + EarthOS logo + CKIC logo :slight_smile:

1 Like

Recent updates: I published another website version. Note the following changes:

  • final versions of all the logos, in the header (EarthOS) and in the footer (all the rest)

  • initial version of the About → Team & Contact page; more formatting will follow

Missing texts: A few essential texts are missing for the first version (I think), namely the three sections marked [TODO] here. If somebody has a text around or wants to write something for these sections, please do.

Missing images:

I’d like to put some initial slides on the website to make it useful enough for handing out the link (as in, no more placeholders visible). Does anyone have a favourite photo, quote or the like that they want to see on one of the initial slides?

Recent updates: I just published another website version. Note the following changes:

  • Full content and proper formatting of the About → Team & Contact section.

  • Team member data editing is now done by editing a JSON-inside-Discourse topic. That’s a bit of a strange solution but seems suitable to me for the few cases where we need to provide structured data that should appear on the website. Let me know if this seems horrible, then I’ll think of a better solution for the future of this website framework :slight_smile:

Next steps:

  • I will write the missing bits and pieces of copy myself (privacy, legals etc.).
  • I will collect some suitable building images, quotes, artwork etc. as proposed by Noemi and provide it as the initial version of the frontpage slideshow. Input by others very welcome but not required.
  • I may write a page about The Reef as a demonstrator and research facility of EarthOS technology, esp. focused on green building conversion.

After that I’ll leave this website alone until I receive the contracted design work from Lorenzo. Applying that will then be the last missing step to finish this website, apart from requested content changes of course.

1 Like

Temporarily, I used these here and there. see if they help, if not i’m sure you have a stack too :slight_smile:


Source: wikipedia.es

Quotes:

I aspire to develop new levers of access to underused spaces, do it in a collective movement with a diverse mixture of actors and financial assets. Only for social cultural ecological and solidarity projects. - Isabelle

I wish to have a rich social life, that starts in the home, with some casual camaraderie and some deep, family-like connection. I wish to maintain my independence. And I wish to participate in the fight for the planet. - Alberto

if you align financial incentives with the “change you want to see in the world”, your path becomes clear and peaceful - Alberto Cottica https://www.cottica.net/2018/08/07/place-based-innovation-as-a-form-of-democratic-participation-the-edgeryders-experience-so-far/

I want to be part of a movement who is working to affect lifestyle change. I dream of a living setup that is both interesting at the project level, and provides time off for personal regeneration. Living in a community is intense, and it works best when you can create a healthy balance between being with others and being with oneself. - Noemi

On ne peut pas habiter la Terre simplement en ayant un logis. Cela ne suffit pas. « Habiter » a une dimension existentielle qui est parfois indifférente à la notion de confort. - Thierry Paquot La maison, miroir de soi : épisode • 1/5 du podcast Habiter, demeurer, se loger philosophe et urbaniste

1 Like

Recent updates: I just published another website version. Note the following changes:

  • Draft slides in the slideshow on the frontpage, using @noemi’s material. Not the final version as we’re waiting for the graphics design now. But better than “Slide 1”, “Slide 2”, …

  • Texts for privacy policy and legals.

  • Hiding still empty sections.

With this, the website is technically ready to use – there are no more placeholder materials. It’s missing the design, obviously.

Next steps: Nothing right now. I’ll proceed with the graphics once we have an accepted design from Lorenzo. If somebody wants to write a bit of copy:

  • There are three small sections on the “The Project” page that are invisible right now because they are still empty. Edit them here. Maybe for @alberto, but it’s not urgent at all.

  • If any project team member (@ilaria, @manuelpueyo, @BaobabUrbain, @chantal_vanoeteren, …) wants anything else to go up on this website, just let me know here and I’ll provide a topic here on Discourse where you can write that content. It will be published automatically from there to the website every 5 minutes.

2 Likes

New update: The website now has its final color scheme, menu formatting and the graphics on the frontpage. Which also works properly for the mobile version and anything in between.

Next steps:

  1. Graphics on the two other pages will follow after sleep. I intend to provide different parts of the illustration as background graphic, together with a “frosted glass” opacity so that the text stays well readable.

  2. After that I’ll do similar changes over on the Sci-Fi Economics Lab website (see this thread).

  3. And only after that (and once the translated texts are ready) will add the multi-lingual versions.

Let me know if a different order of steps is better for your needs, and of course also if you want this or that or something else changed.

New update: The website is good to go :blush: at least as far as I am concerned. It has all the graphics in place, except that I still have to re-do the slides with graphics suiting the overall theme. Also @noemi got her page for the workshops, called “Events”, and editable here.

Next steps: I’ll care for the Sci-Fi Economics Lab website now, and then come back and:

  1. Re-do the slideshow graphics. Using graphics suiting the theme. @all: it’s the right time to provide ideas for slides now.

  2. Improve the background graphics. Since I use Lorenzo’s graphics as full-page backgrounds, they turned out to be somewhat low in resolution for that purpose. Since the cropped vertical excerpts have already a higher vertical resolution than the full-scale illustration we received, I suspect that Lorenzo’s original files could be of a still higher resolution. So, two things:

    • @ilaria, could you please get us the Bespoke Illustration in as high a resolution as available? No cropping or scaling, simply the full thing. Preferably in addition also in its source format.

    • Also for @ilaria, I think we have two or so change requests within the budget of the visuals preparation. If nobody else has a more urgent one, I’d want this: an extended version of the Bespoke Illustration, in as high a resolution as possible, where the illustration is extended vertically at the top so that it ends in an area that has a single whiteish-blue color left-to-right. Basically a whiteish sky of a single color at the very top, left to right. The color should be well suitable to read dark text placed on top. Aspect ratio is not important for this, just adding it to the top of the existing illustration is fine. I need that when placing it at the bottom of a content page so that I can create a smooth transition to the background color of that page. I can do it myself, but if nobody else has a more important change request, Lorenzo can do it.

  3. Enabling the multi-lingual features. Once the translations are ready. I guess @ilaria would “volunteer” :grin: to organize the translation process? There’s already one translation for the frontpage in French and it’s fine if I get the other translations in a similar manner: as new posts in the respective Web Content topics. Not sure if only want French translations or both French and Dutch?

1 Like

Yes, we can. I’ll upload it as soon as I get it.

I ask for it.

Talking about graphics: Lorenzo explained me that he gives us the bespoke illustration at high high resolution in jpg format, which is not modifiable in terms of “changing the picture he designed”, but we can crop it, add logos, change the copy. Also, he gives us the PSD (Photoshop modifiable files) of all the digital assets he produces and the vectorial files of all the assets for printing materials he’s doing. It is literally everything he has, it’s all the designing process.

The reason of having a jpg format is that this is the format for this kind of complex, big illustrations, which are composed by vectorial and pixel graphics. What you proposed - svg format - is used for icon, logos and small images because with that format you can enlarge them, but with this illustration it’s pointless.

This is the what he wrote me:

As discussed yesterday via WA, and as stated in the contract, at the end of the project and after the payment is confirmed, I will also send EdgeRyders all the source files for these assets.

This will include the PSD files of the digital assets, and any AI/PDF file created for any printed material (yet to be produced).

With these files ER will be able to modify/change/reuse them, changing or adding any detail within them; save the illustrations, which are of course one single layer and can not be modified: only cropped at different sizes.

The illustrations will be transferred as single JPG files, at high resolution; ready to be re-used for both digital and printed materials.

Who has done the translations so far? @BaobabUrbain are you available to translate in a great French? :slight_smile: For Dutch, @noemi @alberto do you know someone who could do it?

And one more update:

That page has now all the content about the three Community Workshops available.

1 Like

Thanks Ilaria, I found the updated versions of the illustration for website use. This is what I wanted – I can work with that.

Ah ok, this is how it works. After the final payment. Ok then :slight_smile:

They are not “of course” one single layer, as different assets we received show layers moved against each other. Digital drawing software always uses layers, and having that format helps to make simple changes to the illustration ourselves, like the one I had requested.

But let’s leave it at that. Don’t ask again about this, it’s not that important for this project. We’ll just keep in mind to put this as a condition into any future contract with designers.

(In other words, it’s like the difference between receiving source code and binary code of a program. Some day, somebody will start an open source movement for graphics, videos, even for music audio files (in which case the tracks are provided separately instead of mixed together).)