About

Kiel, Germany, Europe, Earth ...

Soz.-Wiss, Dipl-Soz-Päd, Mediengestalterin

Contao seit 2006

kikmedia.de | @carolinakoehn

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;
}

https://codepen.io/kikmedia/pen/WNNNjQo

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%;
} 

https://codepen.io/kikmedia/pen/bGGGWRg

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

Aber der Reihe nach

Und nun in der Praxis

The Full Monty

• responsiv
• Filter
• Layoutanpassungen
• Beispiele

CSS

JavaScript

https://datatables.net/

https://www.dynatable.com/

http://www.jquery-bootgrid.com/

https://johnpolacek.github.io/stacktable.js/

Und 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

Ressourcen

CSS

wie beispielsweise

• Unsemantic (https://unsemantic.com/)

Aber auch

• Less Framework (https://jonikorpi.com/less-framework/)

More to come

Reine responsive Grids werden weniger

CSS Gridmodul kann vieles ersetzen

Trotzdem einsetzbar

CSS Gridmodul

• https://grid.layoutit.com/
• https://griddy.io/

Wem das immer noch nix sagt:

• http://cssgridgarden.com/#de

Javascript

Mir ist schon klar das man inzwischen JS können sollte

... vor allem in Zeiten von Vanilla JS

Allgemein

Speziell

• 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