Vorstellung: 90er Radar

  • Hallo Gabi,


    danke für deine Gedanken & Ideen.


    Einige davon sind auf der "neuen" Testseite umgesetzt, andere werden noch folgen.
    Die Daten für die Testseite kommen per PN.



    1. Headerbereich


    Hier haben wir viel Luft, sind recht flexibel, daher würde ich das direkt ausnutzen. Das bedeutet Folgendes:


    a) Kannst du bitte für den ersten Testlauf das Bild des Radars, das du als Favicon gewählt hast, nehmen und als Logo links vom Seitentitel platzieren?


    Das Favicon hat eine Größe von 16 x 16 Pixeln und wirkt "verloren".
    Beim skalieren wird es pixelig.


    Eine anderes Radar-Bild ist an der Stelle:


    Radar.png



    b) Wenn das Logo drin ist, könntest du als Abwandlung des Effektes, den wir beim Titel sehen, eine komplette Umdrehung einbauen? Heißt, beim Mouseover findet nicht rein der Zoom-in-Effekt statt, sondern der Titel dreht sich exakt einmal um die eigene Achse, verharrt dann in der Ausgangssituation. Angenommen das wirkt nicht oder ist zu übertrieben, bekommen wir ein leichtes Pulsieren hin, an den Buchstabenrändern?


    Für eine komplette Drehung um 360° wäre oben, unten, rechts und links Platz notwendig.


    So in etwa:






    Der jetzige Effekt könnte von den Werten angepasst werden, damit weniger stark wirkt.


    Eventuell mag @Pacco etwas dazu schreiben oder einen CSS-Effekt aus dem Ärmel schütteln :)




    c) Kannst du bitte den Slogan aus dem Footer-Bereich nehmen und ihn testweise im Header einsetzen? Schau dann, wie das wirkt, teste ggf. dezent mit Farbanpassung, Grafik usw., ja?


    Meinst du diesen Slogan:






    Folgendes: Ich habe mir überlegt, dass wir bei der Seite zwei Dinge besprechen sollten, die eventuell den ersten Eindruck und die Verbindung der einzelnen Bereiche (Header, Mittelteil, Footer) betreffen, beides optimieren könnten. Zum einen würde ich daher ein integriertes Pfeil-Icon unterhalb des Headers zur Diskussion stellen, das das Ziel hat, Header und Mittelteil grafisch und symbolisch zu "verbinden". Im Moment ist die Startseite, wie bei WBB gewohnt, aufgeteilt, genau das möchte ich aber nicht, weil ich denke, unser Seitenbesucher ist kein WBBler. Wir sprechen Musikfreunde und Nicht-Foris an, also sollten wir uns von der Forenoptik lösen, richtig


    Für die Position des Pfeil-Icons ist EasySlider vorgesehen.



    Eventuell wäre eine "Hilfeseite" zu Grundelementen (Kommentar, Suchfunktion, Inhalt melden, Registrierung) für Nicht-Foris nützlich.


    2) Mittelteil


    a) Die Icons wirken nicht, können wir dort Thumbnails mit passendem Bild einbauen?


    Thumbnails an der Stelle sind möglich.


    Hatte mal geschaut, einzeln schauen diese gut aus, zusammen allerdings wie "zusammengewürfelt".
    Ein verwendbares Icon-Set mit Thumbs mit ähnlichen Erscheinungsbild ist bislang nicht gefunden.


    c) Die Beschreibungen der drei Kerninhalte gehen fast unter, könntest du da ansetzen, es leicht vergrößern, eine grafische Variante probieren (Schriftart) und vielleicht dickere Letter wählen, damit wir den Bezug zur Optik des Titels haben?

    Leicht vergrößern ginge, mehr "zerreißt" die Darstellung:






    e) Die 5 Textinhalte wirken von der Optik her noch nicht, kannst du da eine andere Form reinbringen? Könnten wir alternierend (links-rechts) testen

    Zum Beispiel in der Sidebar, als Meistgesehene Flashbacks:



    Eine Variante in der Form wäre eine "Ergänzung" zu Meistgesehene Videos.



    f) Könnten wir dem Stream nehmen und dann darunter einsetzen?


    Der Stream ist in einer seperaten Seite integriert, weil das Script dafür die Daten von einer externen Seite lädt und die Ladezeit beeinträchtigen kann.
    Die Startseite sollte möglichst schnell geladen sein werden.




    g) Die Tags müssen wir bitte unbedingt von rechts wegnehmen, das wirkt optisch nicht gut. Ich hatte ja schon kurz angerissen, ob wir die Tags farblich oder sogar als animierte Variante durchdenken sollten, weil wir es mit Musik zu tun haben, es sich so von statischem Inhalt abhebt und auch ein Blickfang wäre. Die Frage ist, was denkst du darüber und welche Variante wäre eher dein Fall?

    Farblich anpassbar und änderbare horizontale / vertikale Positionierung sind als Grafik möglich.
    Diese Grafik mit Schlagworten könnte dann z.B. Platz in der Sidebar finden.


    Gemischt aus Bildern, Videos und Flashbacks und zur Tags -Seite verlinken:


    tagged.png




    Der Footer wirkt gleich :jump:



    Tolle Idee !


    Eine weitere Box zur "Mitmach-Aktion" folgt noch.


    Einige Gedanken sind vorhanden, in welche Richtung das konkret abzielt, ist noch offen.




    EasyMedia bekommt Funktionsupdates, EasySlider kommt...



    bitte noch diese Box, in der aktuell der Slogan steht, drin lassen?

    Die Box ist lediglich deaktiviert.




    Der Beitrag im Projekt-Beratungsbereich vom Sommer 2016 ist der "Grundstein" für die Seite, danke für deine Unterstützung :yeah:




    Viele Grüße
    Michael

  • Hallo Michael,


    Eventuell mag @Pacco etwas dazu schreiben oder einen CSS-Effekt aus dem Ärmel schütteln

    du könntest folgende Szenarien mal durchspielen und schauen was dir davon am besten gefällt ;)


    • /***** 360 Rotated on Hover *****/
    • /***** Pulse on Hover with boxshadow *****/
    • /***** Pulse on Hover *****/




    Ansonsten kannst du dir auch auf dieser Seite hier noch andere Effekt-Beispiele anschauen!


    edit:


    Hier noch was zu dem Icon

    Ok, das machen wir durch den Pfeil bzw. das Icon, das dann so aussehen und platziert werden würde:

    HTML
    <center>
    <div class="logo">	
    <img src="https://90er-radar.de/_gfx/dein90er-radar.png" alt="Dein90er-radar" width="300" height="210">
    </div>	<div class="logoIconSection">
    <span class="radaricon icon icon96 fa fa-angle-double-down"></span>
    </div></center>
    CSS
    .logoIconSection {
        height: 15px;
    }
    .radaricon.icon.icon96.fa.fa-angle-double-down {
        background-color: #F3F3F3;
        border-radius: 50%;
        color: rgba(80, 80, 80, 1);
    }
  • Hallo,


    an der Webseite ist Einiges umgestaltet.


    Der Logobereich (mit CSS-Pulse-Effekt von Pacco bei Hover):


    Logobereich 2017-04-28.png



    In der "Herobox" wird die Seite grafisch mit verschiedenen Geräten dargestellt:




    Im unteren Bereich der Startseite sind Videos mit Hits der 90er eingebettet:




    Das Stream-Widget ist angepasst (für mobile Ansicht):


  • CSS
    .footerBox.red {
    background: rgba(216, 60, 66, 0.9);
    padding: 10px;
    }

    Moin
    Wenn du in der footerbox.red ein padding hinzufügst sieht es besser aus ;)


    Bei Bildquelle steht der Code mit drin zb <p>Bildquelle:<br>By 20th Century Fox/Paramouth Pictures [Public domain], via Wikimedia Commons</p>
    Ich glaube das sollte anders sein :D