Twenty Sixteen – mein ausführliches Review

das neue Standard Theme 2016
das neue Standard Theme 2016

Das neue Standard Theme Twenty Sixteen liegt auf Github und wordpress.org. Jede und jeder kann es sich holen und auch mitwirken.  Florian und Pascal haben es sich bereits kurz angesehen und ich widmete mich die vergangenen Tage diesem Theme.

Mein allererster Blick auf den Screen erinnerte mich an Traueranzeigen /Patezettel. Der schwarze Rand ist der Hintergrund sagt der Verstand, aber dennoch.

Das Theme spielt mit den vertikalen Linien. Das gefällt mir gut. Zur Wirkung kommt dies für mich allerdings nur dann, wenn man auf eine Sidebar verzichtet.

Je nach Größe des Bildschirms verrücken sich etliche Elemente. Dies hat zur Folge, dass auf einmal zwei Avatare der Autorin zu sehen sind. Nämlich wenn die Meta-Angaben unter die Autorenbox rücken.

Andrerseits wird die Hauptnavigation in der mobilen Ansicht ganz unten auch nochmals angezeigt.

Twenty Sixteen läßt mich nicht kalt. Neben fantastischen Ideen einiges ungereimt.

Dieser Beitrag ist extrem bildlastig. Ich konnte nicht widerstehen und musste ganz viele Screens machen.

Wie immer biete ich bei sehr langen Beiträgen Sprunglinks zu den einzelnen Bereichen an:

Twenty Sixteen anpassen – was kannst du leicht ändern

Anpassen des neuen Standard Themes
Anpassen des neuen Standard Themes
Webseite Informationen: Die horizontale Navigation sucht sich ihren Platz nach der Länge des Untertitels. Nur, wenn du wenige Navi Punkte und einen kurzen Untertitel hast stehen beide so wie auf dem Screen zu sehen.

Meine Texto hat einen langen Untertitel. Daher rutscht die Navi auch in der Desktop Ansicht nach unten.

Farben

Das Theme bietet fertige Farbschemata an. Kommentarlos mag ich dir diese zeigen:

Farbschema: default, green, yellow, gray und dark
Farbschema: default, green, yellow, gray und dark
Ich kam mit Farbschema default und hellem Hintergrund am besten klar beim Testen.

Header-Bild

Das Header-Bild erscheint unterhalb der Navigation. Ein Logo in der Nähe des Websitetitels ist nicht eingeplant.
Empfohlene Bild-Abmessungen: 1200 × 280.

Headerbild auf dem iPad Mini
Headerbild auf dem iPad Mini

Nutzt du ein Header-Bild und ein Beitragsbild hast du zwei sehr große Bilder direkt untereinander.

Das Beitragsbild in Twenty Sixteen

Es wird in folgender Größe eingebunden:

set_post_thumbnail_size( 1200, 0, true );

Angezeigt wird das Beitragsbild
In allen Archivübersichten. Unterhalb des Titels in den Einzelansichten. Auf dem iPad sieht dies dann so aus:

Headerbild und Beitragsbild auf dem iPad
Headerbild und Beitragsbild auf dem iPad

Formulare

Ich nutze Contactform 7 ohne das CSS des Plugins. Twenty Sixteen gestaltet das Formular dann so:

Formulargestaltung von Twenty Sixteen
Formulargestaltung von Twenty Sixteen
Die Hintergrundfarbe des Sendebuttons orientiert sich an der gewählten Farbe für Links.

Spiel mit vertikalen Fluchten

Twenty Sixteen spielt mit vertikalen Fluchten //Linien
Twenty Sixteen spielt mit vertikalen Fluchten //Linien

Das Beitragsbild nutzt die ganze Breite. Die Meta-Angaben sind je nach Bildschirmgröße neben dem Inhalt. Listenpunkte rücken aus der vertikalen Linie des Textes hinaus. Auch auf kleinen Devices.
Zitate kannst du nach rechts oder links schicken. Sie sehen dann auch anders aus.

Bindest du mitten im Beitrag ein Bild groß ein, nutzt es auch die gesamte Breite. Dies sieht für mich sehr gut aus.

Diese Gestaltungsidee von Takashi Irie gefällt mir sehr gut. Doch wie erwähnt für mich wirkt sie nur dann ästhetisch schön, wenn ich keine Sidebar nutze.

Schriften

drei CS Dateien drücken auf die Performance
drei CS Dateien drücken auf die Performance

Das Theme bindet neben den Genericons auch drei Google Schriften ein. Und zwar mit all deren Möglichkeiten. Performance ist offensichtlich nie ein Thema.

Die Schriften werden aber fantastisch genutzt. b,strong, em tc wird durch die Schrift gestaltet nicht durch den Browser. Und dies sieht immer besser aus.

Child-Theme was ist zu beachten

Position von den "Weiterblättern" Links
Position von den „Weiterblättern“ Links auf mobilem Device

Magst du die Paginierung, also die „weiterblättern“ Links ändern. So gibts dafür keine Funktion in der functions.php. Diese Links werden direkt im Template angegeben. Sowohl für die Archivansichten wie die „vorheriger Beitrag – nächster Beitrag“ Links.

Postformate
Das Theme bietet alle Postformate. Magst du diese nutzen, dann musst du die content-[postformatname].php im Child-Theme erstellen und auch selbst gestalten.

Ich würde auch sofort die Schriften performater einbinden. Und mir mehrere Bildformate erstellen.

Hauptnavigation, Social Menu und mobile Geräte

Navi im Footer auf mobilen Geräten - hier Twenty Sixteen auf dem iPad Mini
Navi im Footer auf mobilen Geräten – hier Twenty Sixteen auf dem iPad Mini

Der obligatorische Hamburger ist auch bei Twenty Sixteen zu finden. Er hat jedoch nun den Namen „Menu“ und als Zuckerl wird das Social Menu unter diesem Button auch angezeigt.

Außerdem wird die komplette Hauptnavigation „primary menu“ in der mobilen Ansicht ganz unten dargestellt.
Dies finde ich als die beste Idee des Themes :-)

Reviews zum Theme anderorts:

Und nun du…

Wie gefällt dir dieses Theme Twenty Sixteen?
Deine Meinung dazu – ich bin neugierig….

7

7 Beiträge zu “Twenty Sixteen – mein ausführliches Review

  1. Kommentar Autor
    Jack Beauregard
    Kommentar

    Das ist jetzt der große Wurf?
    Bin enttäuscht, lasse aber die Standardthemes aber eh nur aus Sicherheitsgründe drauf.

  2. Kommentar Autor
    Mirjam
    Kommentar

    Hallo,
    ich mache gerade meine ersten Experimente mit 2016. Mir gefällt, dass es wieder eine horizontale Hauptnavigation gibt – diese habe ich beim Twenty Fifteen sehr vermisst.
    An den Rand muss ich mich auch noch gewöhnen, denke aber, dass man hier mit einigen CSS-Anpassungen recht gut spielen kann. Im Großen und ganzen denke ich, dass das eine relativ gute schlanke Basis ist, mit dem man ganz wunderbar weiterarbeiten kann. Wer ein voll ausgestyltes Theme out-of-the Box erwartet wird enttäuscht – aber der sollte eh lieber ein Premium Theme kaufen :-).

    Danke auf jeden Fall für die Übersicht!
    Ciao,
    Mirjam

  3. Kommentar Autor
    Monika
    Kommentar

    hi Mirjam
    der Rand ist der Hintergrund und dieser ist leicht anpassbar.
    Ich habe mir den sofort auf eine sehr helle Farbe eingestellt :-)

  4. Kommentar Autor
    Mirjam
    Kommentar

    Hallo Monika,

    Der Rand schaut übrigens auch ziemlich schick aus, wenn man ein Pattern statt einer Farbe dahinterlegt. Naja, und wegmachen kann man ihn ja auch….. :-)

  5. Kommentar Autor
    Monika
    Kommentar

    stimmt Mirjam, ich war länger weg, darum konnt ich dir erst jetzt antworten :-)

  6. Kommentar Autor
    C.
    Kommentar

    Hm, so richtig vom Hocker haut mich das neue Theme nicht. Ich glaube, da bleibe ich lieber bei 2015, die Anpassungen haben lange genug gedauert.

    Danke jedenfalls für das imposante Review. Viele Bilder sind in so einem Fall immer gut.

    Ich frage mich jedoch, was das WordPress Design Team mit diesem neuen Theme bezwecken will. Vor 2015 habe ich sehr lange 2010 genutzt, das sah mir dann aber zu altbacken aus… Na ja, ich unterbreche mich dann jetzt mal :-)

    LG