Web Standards in Germany

Webstandards-Spezialisten in Deutschland

Webkrauts

Die Webkrauts sind ein Zusammenschluss deutschsprachiger Webdesigner. Sie setzen sich dafür ein, die Vorteile der Webstandards auch im deutschsprachigen Raum stärker zur Geltung zu bringen. Ansprechpartner ist Jens Grochtdreis.

Aktuelle Themen bei Webkrauts:
  • Flexbox light – das neue Layoutprinzip schon heute anwenden
    Schriftzug flexible auf einem Tor. Sieht nicht sehr flexibel aus.Modernes Layout mit CSS

    Flexbox ist eine interessante neue CSS-Technik, mit der Webworker einfacher Inhalte in einem Layout anordnen können. Dabei können sie auch Elemente unabhängig von der Codereihenfolge sortieren. Leider ist die Verbreitung dieser Technik nicht besonders groß. Einfaches Umsortieren kann aber mit einem einfachen Trick schon heute realisiert werden.

    Im Juni letzten Jahres veröffentlichte Ian Devlin einen Vorschlag, wie man mittels der Display-Eigenschaft die Darstellungsreihenfolge einer Webseite entscheidend beeinflussen kann. Diese Technik ist sozusagen »Flexbox light«, weil sie in die Richtung der mächtigen Technik Flexbox weist. Diese wird glücklicherweise immer besser implementiert. Aber leider gibt es keinen Fallback-Zustand und auch kein Polyfill, weshalb wir Flexbox sicherlich erst in vier oder fünf Jahren flächendeckend werden einsetzen können.

    Bis dahin können allerdings im kleinen Maßstab Webseiten mit einfachen Mitteln für kleine Bildschirme umarrangiert werden. Meine Beispielseite bei Codepen zeigt das Grundprinzip an einem Zweispalter. Das Beispiel wurde mit YAML aufgebaut. Die meisten CSS-Regeln stecken deshalb in externen Dateien. Auch die Inhalte stecken in separaten Pens, die man bei dieser Testumgebung inkludieren kann.

    Ein Beispiellayout in breiter Darstellung, die rechte Spalte floatet
    Das Beispiellayout in voller Breite, zweispaltig

    Die Contentspalte kommt am Ende des Codes, weil sie flexibel in der Breite ist. Die Seitenspalte mit den nebensächlichen Inhalten (die im Zweifel allerdings die Kohle bringt) kommt als erstes im Code und floatet nach rechts. Es soll nun dafür gesorgt werden, dass der Inhalt auf einem schmalen Bildschirm vor der Werbung und den weiterführenden Links kommt. Im Beispiel kommt Ians Idee bei einem Breakpoint von 720px Maximalbreite zum Zuge:

    1. @media only screen and (max-width: 720px){
    2. /* vorher floatende Seitenspalte */
    3.         .ym-col1 {
    4.         float: none;
    5.         width: 100%;
    6.         display: table-footer-group;
    7.         }
    8. /* statische Inhaltsspalte */
    9.         .ym-col3 {
    10.         margin-right: 0;
    11.         width: 100%;
    12.         }
    13. }
    Ein Beispiellayout in schmaler Darstellung, die vorher rechte Seitenspalte hängt nun nach dem Ende des Inhalts
    Das linearisierte Beispiellayout mit der zweiten Spalte am Ende der Seite

    Die floatende Seitenspalte wird »entfloatet« und bekommt eine neue Display-Eigenschaft: display: table-footer-group;.
    Die umgebenden Container werden vom Browser automatisch zu einer neuen Tabelle umdefiniert. Und da in dieser die table-footer-group am Ende der Darstellung ist, wird der Inhalt nun am Ende der neu implizit gedachten Tabelle platziert. Es ist wichtig, dass das nicht automatisch das Ende der Seite ist. Die Unterstützung von display: table reicht bis runter zum IE8. Es ist doch einen Versuch beim nächsten Projekt wert, in dem die Sourceorder für die Darstellung auf kleinen Bildschirmen unpassend ist.

    Jens Grochtdreis
  • 3. Kasseler Web Montag

    Der Web Montag wurde 2005 in Köln aus der Taufe gehoben und bietet seither eine Plattform für alle Webentwickler, Webdesigner und Webarchitekten, die kreativ am Fortschritt des Internets teilhaben wollen und sich mit anderen Enthusiasten auf diesem Gebiet austauschen möchten. Usprünglich inspiriert vom Hot Spot Silicon Valley ist der Web Montag heute eine Institution in über 40 Städten mit aktiven Gruppen in Deutschland, Österreich, Schweden und Kalifornien.

    Weitere Infos zum Web Montag im allgemeinen.

    Der dritte Web Montag Kassel findet am 17. März statt! Ab 19:00 Uhr in der Kombinatsgasstätte »Zur Marbachshöhe«, Amalie-Wündisch-Str. 3, 34131 Kassel. Um Voranmeldung via Web Montag Wiki wird gebeten (das erleichtert uns die Planung).

    Übrigens: Wir suchen noch Leute, die den Web Montag Kassel mit guten Ideen und mit Freude an der Sache unterstützen wollen (Präsentationen, Organisation, Programmierung etc.). Und natürlich sind wir auch einem Sponsoring gegenüber nicht abgeneigt (immerhin müssen Örtlichkeiten & Verköstigung usw. finanziert werden).

    17.03.20142014Web Montag Kassel
    Zur Marbachshöhe
    Amalie-Wündisch-Str. 3
    34131 Kassel
    Deutschland

Sprungmarker

Sylvia Egger schreibt zum Thema Barrierefreiheit und Standardisierung im Internet.

Aktuelle Themen bei Sprungmarker:

German New Media Events

Nicole Simon moderiert bei "Upcoming" eine Liste der deutschen Veranstaltungen aus dem Bereich Neue Medien. Jeder kann seine Veranstaltung in die Gruppe German New Media Events hinzufügen - dazu muß man nur Mitglied der Gruppe sein.

Aktuelle Liste:

    Webzeugkoffer Blog

    Björn Seibert ist Dipl.-Betriebswirt (FH) / Wirtschaftsinformatik und beschäftigt sich als Manager für Websites und Onlineservices. Er hat, zusammen mit Manuela Hoffmann, das Buch “Professionelles Webdesign mit (X)HTML und CSS” veröffentlicht. Er verfügt über Profiwissen zu Webstandards, CSS und XHTML. In seinem Webzeugkoffer werden Themen und Know-How aus der Webpraxis gepackt.

    Aktuelle Themen bei WebdevBits:
    Björn Seibert

    bsmarkup

    Heinigstr. 46

    Ludwigshafen
    67059
    Germany

    0621-5723075