Bedrohte Ordnungen

[diogo]

Hi Guys,

Here's is our most recent website built in collaboration with the Design studio DITHO from Cologne, who designed and coordinated all the process. For now the website is only in German, but there will be a English version soon.

https://bedrohte-ordnungen.de/

 

"Bedrohte Ordnungen" (Threatened Orders) is the display of an ongoing research by the University of Tübingen. Best described on their own words. Here on a hopefully accurate translation

Quote

Social crises existed in antiquity as well as today. Societies are changing and new things are emerging. The research project "Threatened Orders" shows how changes take place according to certain patterns and how people deal with the threat. The University of Tübingen is researching what our society can learn from past crises and catastrophes. The website "Threatened Orders" presents twelve multimedia cases from antiquity to today.

 

Here's a nice showcase video made by DITHO:

 

This is a quite complex website. It's also quite heavy on images, videos and CSS animations, so old computers might struggle a bit to process it. All the website is dynamic and inside PW, including those animations. This is probably the most interesting part of how the website was built, since all the animations were created by DITHO themselves in ProcessWire thanks to a system that I created for them using a repeater field. You can have an idea through these screenshots:

The content blocks of each case represent a question each and repeat throughout all the presented cases. Each question has a main content and most have also a hidden block that can be opened by clicking a button. They are created in PW using the very recent FieldGroups https://processwire.com/blog/posts/processwire-3.0.73-and-new-fieldset-types/:

 

The only two third party modules used were AdminOnSteroids by @tpr and the very useful ColorPicker by @Soma.

There would be more to talk about, but I don't want to extend myself too much. Hope you guys like it!

Just a shout out to DITHO to say again how much fun this collaboration has been

 

 

[LostKobrakai]

Congrats. Another very well crafted website of yours. I don't really like the scroll-jacking, but I really really like the menu. 

You also might want to look into hiding the video pop out button on opera.

[diogo]

Thanks @LostKobrakai, I'll look into the popup button.

[wbmnfktr]

Just two words: Awesome & Insane

A really nice and different design combined with such a nice animation-builder-toolkit.

Great Work. Love it.

 

[dragan]

Congrats. That's really well-done.

I only found a slight responsive glitch where original and translated text overlap each other somewhere ("letter from A to B"), but that should be easy enough to fix.

 

 

[diogo]

Yes that's an easy fix, thanks for spotting it @dragan!

[dragan]

<distraction>

Sonderforschungsbereich 923!

Gotta love the German language! Sorry, but I just can't help myself. It sounds at the same time so bureaucratical and military, but also beautiful. I've heard many standup-comedians making fun of this simple fact, that in German it's easy (and allowed) to put words together to create a new one. For us, it's natural and normal, but for many other people it's like "what the heck"?

</distraction>

[Sergio]

Really impressive, Diogo!

Excellent implementation of the design. And cool stuff having the animations settings manageable by the design team.

Congratulations to you and the team!!

[diogo]

@dragan that's so true! I still struggle to unmount some long words  

Obrigado @Sergio!

[gmclelland]

Beautiful site.  I'm curious... what is your preferred way to structure your template files? ie. Template File Strategy?  I'm referring to https://processwire.com/docs/tutorials/how-to-structure-your-template-files/.  Direct Output, Direct Output with Includes, Delayed Output, WireRender Pattern, Markup Regions, etc...

What does the main content tab look like when editing a page?

Did you use FieldtypeFieldsetGroup or FieldtypeFieldsetPage?

[SamC]

OMG @diogo wow!