Neues Template Storyteller

  • Hallo.


    Ich habe mal das neue Storyteller Template ausprobiert (gefällt mir sehr gut) und eine meiner Seiten damit neu gemacht: http://www.siegmann.ws/


    Was mich dabei sehr gefreut hat, dass ihr die Möglichkeit eingebaut habt <section> zu nutzen.

    Kurze Erklärung: Wenn ich bei Onepagern Abschnitte mit <section> kennzeichne, dann unterscheidet die Suchmaschine diese Abschnitte so, als ob es einzelne Unterseiten wären.

    Ich kann dann auch in jeder <section> eine neue H1 überschrift setzen. Was ja früher mal schwer verboten war.


    Auch das Menü finde ich klasse, das nicht starr bei einer bestimmten Auflösung einklappt, sondern genau dann, wenn der Platz für meine Einträge nicht mehr ausreicht.


    Nicht so schön fand ich, dass viele Elemente nicht für Responsive angepasst sind - hier vor allem der ganze Text im Header Bereich.


    Zusätzlich habe ich übrigens über CSS ein paar eigene Effekte eingebaut, wie z.B. die Bildgestaltung (Rahmen / Mouseover Effekte).

  • Nicht so schön fand ich, dass viele Elemente nicht für Responsive angepasst sind - hier vor allem der ganze Text im Header Bereich.

    Das kann man so nicht sagen. Der Text im Header wird auf kleinen Bildschirmen in etwas kleinerer Schriftgröße angezeigt. Irgendwann ist aber Schluss und wenn es dann für den kleinen Bildschirm zu viel Text wird, erscheinen die Scrollbars. Die beste Lösung bei solch einem Problem wäre es, die Textlänge entsprechend anzupassen.


    Mir ist bisher noch keine Lösung eingefallen solch ein Problem vernünftiger zu lösen. Die Schriftgröße so lange zu verkleinern bis alles rein passt ist ja auch keine Lösung, weil man dann den Text gg.f nicht mehr lesen kann…

  • Ich sprach ja auch von ganz normalen Kopfgrafiken und deren responsive Verhalten und nicht von Kopfgrafiken, die durch zusätzlichen Code (der nicht von uns stammt) animiert werden…

  • PS: der container für die Header Caption (.flex-caption) ist overflow: auto; dadurch erscheint eine Scrollbar, wenn Inhalte über den Container hinausragen.

    overflow: hidden; würde diese Scrollbar unterbinden. Man könnte dem Container also generell, oder besser nur während der Dauer der Animation overflow: hidden; zuweisen… Oder so…

  • Die Grafik passt sich an ... die Texte aber nicht!

    Ich hab dieses Layout umgesetzt. Ich bin mir da sehr sicher, auch wenn es nicht auszuschließen ist, dass ich altersbedingt auch mal was vergesse ;-)


    Die Schriftgröße der Headline in der Kopfgrafik im Beispiel ist auf breiter Desktop-Darstellung z.B. 6.25rem, ab 1064px Bildschirmbreite nur noch 5.5625rem und ab 736px Bildschirmbreite 3.5rem.

    Unglücklich ist, dass ich die Kopfgrafik des Beispiel-Projekts nicht so bearbeitet habe, dass auch auf schmalen Bildschirmen keine Scrollbar erscheint. Da hätte ich ggf. das kleine Maus-Icon entfernen sollen…