• Zur Hauptnavigation springen
  • Skip to main content
  • Zur Hauptsidebar springen
  • Zur Fußzeile springen
MAMEDi  @  Home » Design + WordPress » Spaltensatz mit Breakpoints für Kolumnen

MAMEDi-Logo MAMEDi

  • Home
  • ! BLOG ?
  • Referenzen
  •   
  • Mediation
  • ? MM !
  • Impressum

Spaltensatz mit Breakpoints für Kolumnen

5. Mai 2018 MAMEDi Kommentar schreiben!

Die technische Entwicklung eines „Spaltensatzes“, welcher beim Layout einer Zeitung oder eines Buches eine ganz normale Angelegenheit ist, hat im Internet eine Weile gedauert. Was früher auf statischen Webseiten für den Normalmonitor (1024 x 768 Pixel) festgezimmert nebeneinander stand, kann nun aber seit „CSS3“ durch „Media Queries“ und definierte „Breakpoints“ (Pixelbreite für den Umbruch des Layouts) „mit flexiblen Kolumnen“ für Ausgabegeräte wie Smartphone, Tablet, Laptop oder Desktop optimiert und nach Bedarf eben auch untereinander angezeigt werden.

! Was braucht (D)eine Homepage ?

Erdbeeren

! Werkzeug ?

Mit welchem Content-Management-System (CMS) läßt sich mein Web-Projekt leicht (um)organisieren, (neu)gestalten und vor allem pflegen? Welches Werkzeug ist geeignet für meine Präsentation.

Zwei Bananen

! Stilmittel ?

Mit perfekten CSS-Kenntnissen bekommt man noch lange keinen gepflegten Stil hin. Ebenso wichtig ist das richtige Gespür für Farben und Formen, um eine stimmige Atmosphäre entstehen zu lassen.

Birnen

! Elemente ?

Ein wichtiges, oft vernachlässigtes Element ist der Raum zwischen den vielen Informationen. Texte, Bilder, das graphische Beiwerk und Schriften wirken erst mit den richtigen Proportionen zueinander.

Beispiel: Box mit 3 Kolumnen (one-third)

Während auf größeren Monitoren mehrere Kolumnen sehr schön nebeneinander präsentiert werden können, müssen diese auf kleineren Geräten untereinander dargestellt werden. Daher ist es unumgänglich eine moderne Homepage für unterschiedliche Ausgabegeräte mit einem flexiblen Layout auszustatten. Zwar gibt es auch Plugins, sogenannte „Page Builder“ (die letztlich ebenfalls mit Kolumnen arbeiten), allerdings verwende ich viel lieber die im Stylesheet per CSS definierten Kolumnen (wie one-half, one-third, one-fourth, …), die ein grundlegender Bestandteil meines Themes sind, aber auch unabhängig vom verwendeten Theme eingesetzt werden können.

Mit wenigen ergänzenden Angaben zum Breakpoint der Kolumnen funktioniert die Sache einwandfrei. Alle Fotos bekommen eine simple CSS-Regel – width=”100%” height=”auto” – mit auf den Weg und füllen damit die jeweilige Kolumne im Prinzip immer ganz aus. Wenn nicht, sind sie zu klein bemessen (die notwendige Mindestbreite ist abhängig vom Theme). Dadurch wird bei jeder Monitorgröße eine optimale Ausnutzung des Platzes (= Viewport) gewährleistet.

Code-Schnipsel der „Kolumnen“

.five-sixths, .four-sixths, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds { float: left; margin-left: 2.564102564102564%; }

.one-half, .three-sixths, .two-fourths { width: 48.717948717948715%; }

.one-third, .two-sixths { width: 31.623931623931625%; }

.four-sixths, .two-thirds { width: 65.81196581196582%; }

.one-fourth { width: 23.076923076923077%; }

.three-fourths { width: 74.35897435897436%; }

.one-sixth { width: 14.52991452991453%; }

.five-sixths { width: 82.90598290598291%; }

.first { clear: both; margin-left: 0; }

2, 3, 4 oder 6 Kolumnen · Flexibel durch Breitenangabe in Prozent

Das CSS der Kolumnen basiert auf einer Version von „Bootstrap“ und läßt sich im Prinzip in das Stylesheet jedes Themes integrieren (plus Angaben zum Breakpoint für die verschiedenen Monitorgrößen). Im Unterschied zu einem „Page Builder“ gehört natürlich schon etwas elementares Grundwissen im Umgang mit HTML dazu. Dafür ist man bei der Gestaltung seiner Homepage aber unabhängig von der Weiterentwicklung solcher Plugins, die außerdem ihre jeweils eigenen Shortcodes und weiteren (relativ umständlichen) Quelltext generieren.

Fotos + Text · Gestaltung mit Kolumnen

Fotos mit Kolumnen

Beispiel: „Fotos mit Kolumnen“ @ DEMO-Homepage

Fotos mit Kolumnen

Beispiel: „Fotos mit Kolumnen“ @ DEMO-Homepage

Das Arbeiten mit einem „Page Builder“ geht weder besser noch schneller. Warum also nicht einfach einige der wesentlichen Grundbefehle des „HTML“ (= HyperText Markup Language) lernen, die sich beim Aktualisieren und Einpflegen neuer Daten (Fotos, Texte) sowieso ständig wiederholen und daher schnell Routine werden, anstatt weiterhin nichts zu verstehen, sich deshalb „blind“ einem Plugin anvertrauen zu müssen mit der Hoffnung, dass dieses zuverlässig arbeitet.

Kolumnen: Layout mit mehreren Spalten

Die journalistische „Kolumne“ ist hier nicht gemeint, sondern ein Layout mit mehreren Spalten (engl. „columns“). In diesem Artikel geht es um die Verteilung des Inhalts in „Kolumnen“ (= Spalten), jedoch nicht um den seit „CSS3“ möglichen „Spaltensatz“ (Gliederungsmittel beim Buchdruck), der im Web bislang eher selten anzutreffen ist.

Es gibt etliche nützliche Plugins, welche ich auch hier bei „MAMEDi“ einsetze. Manche Dinge lassen sich allerdings einfacher und sehr elegant mit wenigen Grundkenntnissen in „HTML“ per Hand erledigen. Die Auszeichnungssprache des Web (= HyperText Markup Language) ist nicht schwer zu lernen und eine Sache wirklich zu verstehen hat langfristig nur Vorteile.

Design + WordPress Fotos, HTML, Kolumnen

Who is „MAMEDi“?

Unter dem programmatischen Akronym „MAMEDi“ schreibt hier der Schlagzeuger, Komponist und Dipl.-Musikpädagoge „Manfred Menke“ (Dinklage) unregelmäßig nach Lust und Laune und garantiert völlig meinungsfrei über alles (Un)Mögliche. Da er für verschiedene Projekte als „Mediengestalter“ tätig ist, befasst sich ein Teil seiner BLOG-Artikel mit Problemen, die bei der Organisation, der Aktualisierung und der Pflege von Internetpräsenzen auftreten können, wobei er grundsätzlich an funktionierenden und praktischen Lösungen interessiert ist.

Homepage: „www.manfred-menke.de“, Projekt: „www.schlagzeug-dinklage.de“

Vorheriger Beitrag: « Unterirdische Kunst in Stockholm
Nächster Beitrag: Meisterkonzerte Lohne // Saison 2018/19 »

Leser-Interaktionen

Kommentar schreiben! Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Haupt-Sidebar

Hallo Blog-Leser(in)!

MAMEDi-Logo

Für die Richtigkeit oder den „Wahrheitsgehalt“ der hier bereit gestellten Informationen geben die Autoren keine Gewähr und übernehmen auch keine Haftung für irgendwelche daraus resultierenden Konsequenzen. Deshalb gilt das ironisch formulierte Motto: „Lesen auf eigene Gefahr!“. Oder: „Alles, was hier steht ist wahr, auch wenn's nicht stimmt, ist das klar!“

MAMEDi

SD-Visitenkarte
DEMO-Homepage
! Ach, wie „süss“ ist das denn ?

Kaum zu glauben. Dieser (alte) Zuckertopf ist das letzte Überbleibsel von einem „Kaffeeservice“ meiner Mutter und ist bereits mehr als 60 Jahre alt. Nun ziert er als süßes Favicon die „DEMO“-Homepage.

Die letzten 13 Artikel

  • Zeitenwende · Philosophische Momente
  • Ein frohes, neues Jaaaaahhh!
  • Dynamische Wahrheit
  • Haben wir nicht auch alle Wurzeln?
  • Desinfektion mit Chlordioxid
  • Konzert · Arparimba im Autohaus Ruhe
  • Tschüss Berlingo!
  • Konzert: „Zeitgenössische Musik“ (Dinklage)
  • Herbst im Burgwald Dinklage
  • Unerwünschtes „OSTER“-Feuer am Friedhof
  • Ein Logo für Schlagzeug Dinklage
  • Triomotion begeistert das Publikum
  • Konzert mit „TRIOMOTION“ in Dinklage
Snatakazing

Kategorien

  • Allgemein / Infos (38)
  • Computer + Technik (12)
  • Design + WordPress (39)
  • Ernährung + Umwelt (22)
  • Geh Dichte + Texte (31)
  • Ideen, Leben, Werte (36)
  • Musik + Projekte (33)
  • Politisch – Unkorrekt! (30)
  • Spaß + Humor = Ernst (14)

Strichgesicht @ MAMEDi

MAMEDi-Logo

Diese am 8. März 2009 spontan gekritzelte Bleistiftzeichnung zeigt ein vor Begeistertung leicht schielendes „Strichgesicht“ und ist seit 2014 das Maskottchen dieser Homepage, die anfänglich unter „mmdiesein.de“ firmierte und seit August 2013 unter „MAMEDi“ läuft.

Footer

   
! Datenschutz ?

Kontakt  @  MAMEDi

Fon  (0 44 43) 50 84 54
Mobil  (01 79) 32 56 808
E-Post:  „mail@mamedi.de“

MAMEDi-Schuhe

Web · Projekte

Barfuß gehen ist zwar schön, für manche Wege aber ungeeignet. Deshalb ist gutes Schuhwerk wichtig, um unversehrt ans Ziel zu kommen. Eine Homepage benötigt ebenfalls eine solide Basis. Diese hier wird mit „WordPress“ als Motor angetrieben.

Die letzten 13 Artikel

  • Zeitenwende · Philosophische Momente
  • Ein frohes, neues Jaaaaahhh!
  • Dynamische Wahrheit
  • Haben wir nicht auch alle Wurzeln?
  • Desinfektion mit Chlordioxid
  • Konzert · Arparimba im Autohaus Ruhe
  • Tschüss Berlingo!
  • Konzert: „Zeitgenössische Musik“ (Dinklage)
  • Herbst im Burgwald Dinklage
  • Unerwünschtes „OSTER“-Feuer am Friedhof
  • Ein Logo für Schlagzeug Dinklage
  • Triomotion begeistert das Publikum
  • Konzert mit „TRIOMOTION“ in Dinklage

Über MAMEDi

Logo · MAMEDI.DE Der Name „MAMEDi“ ist das „Akronym“ für „Manfred Menke, Dinklage“ und präsentiere auf dieser Seite u.a. meine Arbeit als Mediengestalter. Dazu gehören Konzeption und Gestaltung von Internetseiten sowie die Erstellung von Drucksachen wie Flyer und Plakate. Das Motto „Lesen auf eigene Gefahr!“ für den BLOG gilt weiterhin.

MM-Homepage

MM-2018-Favicon Wenn ich gerade kein Medium gestalte oder irgendwelche Pixel als „MAMEDi“ hin und her schubse, schlage ich genauso begeistert ganz woanders zu. Ausführliche Informationen zu allen Kompositionen und über meine Aktivitäten im Arbeitsfeld als Schlagzeuger, Komponist und Dipl.-Musikpädagoge gibt es auf meiner „MM“-Homepage, die meine musikalische (Internet)Seite dokumentiert.

Musik: „www.manfred-menke.de“
Vier Pflaumen
  • Home
  • ! BLOG ?
  • Referenzen
  • ? MM !
  • Impressum

MAMEDi  ·  Copyright © 2022  ·  WordPress