Moin!
Contao-Konferenz 2019, 11. Oktober 2019
Sperrige Inhalte in Contao.
About
Carolina KoehnKiel, Germany, Europe, Earth ...
Soz.-Wiss, Dipl-Soz-Päd, Mediengestalterin
Contao seit 2006
Der Inhalt.
Problemstellungen,
Lösungsansätze und
Implementationen von externen Daten
Im Detail so:
Und was Contao dazu sagt.
Was ist denn eigentlich 'sperrig'?
Sowas?

Sowas?
Hej, im Layout sieht das super aus.
Donaudampfschifffahrtsgesellschaftskapitänswitwentröster*in.
#WTF
Designer*innen verhauen?
Nein.
Vorsprung durch Technik.©
Layouts flexibel bauen.
Warum sieht das so aus?
CSS nutzen.
Zum Beispiel: Fontsize relativ zum Viewport.
<h1>Ich will rein.</h1>
h1 {
text-align: center;
font-family: Arial, Verdana, sans-serif;
font-size: 15.5vw;
}
JavaScript nutzen.
Zum Beispiel: fittext.js.
<script src="/files/themes/js/jquery.fittext.js" /><script>
Und dann ...
jQuery("h1").fitText(0.38);
http://fittextjs.com/
Ohne JS nix gut.
Es soll auch Leute geben, die damit komplette Webseiten responsiv machen.
#WTF
Oder doch SVG?
Zumindest selten.
<svg viewBox="0 0 130 25">
<text x="0" y="15">Ich will rein!</text>
</svg>
text { font-family: Arial, Verdana, sans-serif; } svg { width: 100%; }
Auch Höhen machen Freude.
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Ich bin ein Titel</span>
<p>Ich bin nur ein einfacher Layouttext.</p>
</div>
<div class="card-action">
<a href="#">Link</a>
</div>
</div>
</div>
</div>
Sieht eigentlich ganz unschuldig aus.
Aber was ist ...
- wenn wir viele davon haben?
- wenn die Textmengen heterogen sind?
Javascript raufgiessen.
Beispielsweise MatchHeight
- Sucht Elemente, die mit
data-mh="myClass"
gekennzeichnet sind - findet gleichartige Elemente
- hängt Inline-CSS an
<style="height: 657,93px">
Ressource: http://brm.io/jquery-match-height/
- (+) vergleichsweise robust
- (-) ohne JS keine Höhenanpassung
- (-) noch mehr Javascript
CSS nutzen.
<div class="row">
<div class="card-wrapper col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Ich bin ein Titel</span>
<p>Ich bin nur ein einfacher Layouttext.</p>
</div>
<div class="card-action">
<a href="#">Link</a>
</div>
</div>
</div>
</div>
CSS-Grid.
CSS dazu:
.card-wrapper {
display: grid;
grid-template-columns: 1fr 3fr;
grid-gap: 20px;
} .card {
grid-column: 3;
}
"Mein Video ist entweder zu klein oder zu gross!!!!"
Hmmm, ein <iframe>
...
Wie bekommt man die denn responsiv ...?
<iframe src="//www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
- Via CSS Höhe und Breite auf 100%
- den Iframe absolut positionieren
- Padding setzen
Hä???
- Drumherum einen responsiven Wrapper
- darin der iFrame auf 100% ...
Achso.
Ressource: https://codepen.io/kikmedia/pen/VwwwXOM
And now for something completely different.
Viel Content.
Das kann sein:
- lange Inhalte
- unstrukturierte Daten
- tabellarische Daten
- ...
Lange Inhalte
Paginierung, FTW!
Unstrukturierte Daten
Strukturierung, FTW!
Tabellarische Daten
Erschliessung, FTW!
Unstrukturierte Daten
Strukturierung, FTW!
Tabellarische Daten
Aber der Reihe nach
Wir fangen erstmal klein an.
Kinder-Kampfsport Training | Montag, 17.15 - 18.00 Uhr Freitag, 17.15 - 18.00 Uhr |
Beginner Training | Mittwoch, 19.00 - 20.15 Uhr Freitag, 19.00 - 20.00 Uhr |
Advanced/Fighter Training | Montag, 20.15 - 21.30 Uhr Mittwoch, 19.00 - 20.15 Uhr Freitag, 20.15 - 21.30 Uhr |
Krav Maga Tactical | Montag, 19.00 - 20.00 Uhr Mittwoch, 20.30 - 21.30 Uhr |
Power-Workout | Montag, 18.00 - 18.45 Uhr Mittwoch, 18.00 - 18.45 Uhr Freitag, 18.00 - 18.45 Uhr |
Morning Fit* | Montag, Mittwoch, Freitag 09.15 - 10.00 Uhr** Sonntag, 11.00 - 11.45 Uhr |
Mittagsdrill* | Montag, 12.15 - 12.45 Uhr Freitag, 12.15 - 12.45 Uhr |
Open Training | Samstag, nach Absprache |
Aber der Reihe nach
Dasselbe auf dem Smartphone:Kinder-Kampfsport Training | Montag, 17.15 - 18.00 Uhr Freitag, 17.15 - 18.00 Uhr |
Beginner Training | Mittwoch, 19.00 - 20.15 Uhr Freitag, 19.00 - 20.00 Uhr |
Advanced/Fighter Training | Montag, 20.15 - 21.30 Uhr Mittwoch, 19.00 - 20.15 Uhr Freitag, 20.15 - 21.30 Uhr |
Krav Maga Tactical | Montag, 19.00 - 20.00 Uhr Mittwoch, 20.30 - 21.30 Uhr |
Power-Workout | Montag, 18.00 - 18.45 Uhr Mittwoch, 18.00 - 18.45 Uhr Freitag, 18.00 - 18.45 Uhr |
Morning Fit* | Montag, Mittwoch, Freitag 09.15 - 10.00 Uhr** Sonntag, 11.00 - 11.45 Uhr |
Mittagsdrill* | Montag, 12.15 - 12.45 Uhr Freitag, 12.15 - 12.45 Uhr |
Open Training | Samstag, nach Absprache |
Und nun in der Praxis
WebsiteThe Full Monty
- responsiv
- Filter
- Layoutanpassungen
- Beispiele
CSS
BeispieleJavaScript
BeispieleUnd Contao so?
Teasern
Subinhalte auf anderen Seiten
Artikel
CSS-Lösungen
Javascript-Lösungen
Wo einbinden?
Andere Variante
Hilfreiche Extension
https://github.com/trilobit-gmbh/contao-headerfootercode-bundle
Ermöglicht
- individuelles JS auf Einzelseiten
- individuelles CSS auf Einzelseiten
- maximal flexibel
- verschiedene Layouts unnötig
- lädt nur wenn es gebraucht wird
Aber: man muss sich selbst um minifizierte Scripte kümmern
In der Summe
Contao ist da maximal flexibel.Ressourcen
CSS
wie beispielsweise
- Unsemantic (https://unsemantic.com/)
Aber auch
- Less Framework (https://jonikorpi.com/less-framework/)
More to come
Ganz klar:Reine responsive Grids werden weniger
CSS Gridmodul kann vieles ersetzen
Trotzdem einsetzbar
CSS Gridmodul
Zweifelsohne die ZukunftWem das immer noch nix sagt:
Javascript
Mir ist schon klar das man inzwischen JS können sollte
... vor allem in Zeiten von Vanilla JS
Allgemein
JQuery hat gewonnen.Speziell
Grundsätzlich beipielsweise- http://maddesigns.de/responsive-tables-2393.html
- http://lea.verou.me/2018/05/responsive-tables-revisited/
Spezieller, JS Frameworks
- https://datatables.net/
- https://johnpolacek.github.io/stacktable.js/
- https://mdbootstrap.com/docs/jquery/tables/responsive/
Playground
Danke für die Aufmerksamkeit.

@carolinakoehn