Geschrieben von Christian Schnettelker

Schlagwörter: ,

etomusik.de responsive

Nach und nach stelle ich auch diejenigen Webseiten auf ein „responsive Webdesign“ um, an welchen ich privat oder geschäftlich beteiligt bin. Direkt Geld gibt es dafür zwar nicht, aber Ruhm und Ehre (kleiner Scherz).

Kürzlich nahm ich mir die Zeit, um endlich auch die immer noch sehr schöne, aber technisch „in die Jahre gekommene“ Webseite auf etomusik.de entsprechend zu bearbeiten:

Screenshot etomusik.de
Kompliziert zeigte sich die Steuerung der auf jeder Seite in unterschiedlicher Anordnung zu sehenden Quadrate („Dots“) in der oberen Hälfte der Seite, welche teilweise auch das jeweilige Kopfbild überlagern.

Dot

Eine Gesamtsteuerung dafür in den CSS-Stylesheets war nicht möglich, demzufolge wird innerhalb des Head-Bereiches jeder einzelnen Seite für die verschiedenen Stufen festgelegt, welche Quadrate in Felder Farbe erscheinen und wo.

Dazu haben die einzelnen Quadrate eine CSS-Haupteigenschaft (Klasse „dot“) sowie eine Nummerierung (z.B. die Klasse „d01″) – so lässt sich jedes Quadrate einzeln steuern:

<div class="dot d01"></div>

Ein Beispiel für die seitenspezifische Steuerung aus dem Head-Bereich der Startseite:

<style type="text/css">
.dot.d01 { background-color:rgb(125,102,91); }
.dot.d02 { background-color:rgb(225,167,139); }
.dot.d03 { background-color:rgb(89,70,51); }
.dot.d04 { background-color:rgb(255,255,241); }
.dot.d05 { background-color:rgb(150,123,105); }
 
@media only screen and (min-width: 1000px) and (max-width: 1319px) {
   .dot.up1,
   .dot.up2 { margin:0; }
   .dot.d07,
   .dot.d09,
   .dot.d10,
   .dot.d11 { display:none; }
}
</style>

Eine Sisyphus-Arbeit, die mich viele Stunden gekostet hat und viele einzelne Test jeder Seite benötigte, bis schließlich alles passte.

Darstellung Notebook
Das bisherige Spalten-Layout auf verschiedenen Seiten wurde beibehalten, in allen Ansichten (bis auf der kleinsten) orientiert sich die Ausrichtung nach der Größe der Quadrate; die Seiten- und Spaltenbereite ist hier stets ein Vielfaches dieser Abmessung.

Pulse-Effekt

Neu programmiert zeigt sich auch der „Pulse-Effekt“ der Quadrate; teilweise ändern diese, wenn Sie genau hinschauen, ganz langsam ihre Farbe.

Der Effekt ist jetzt vollständig in CSS realisiert, bisher gab es ihn nur auf der Startseite und er wurde mittels GIF-Bildern erzeugt. Hier der verwendete Code im Original:

@-webkit-keyframes pulse {
   0% { opacity: 1; }
   50% { opacity: 0.6; }
   100% { opacity: 1; }
}
div.pulse-1 {
   -webkit-animation : pulse 10s infinite;
   -moz-animation : pulse 10s infinite;
   -o-animation : pulse 10s infinite;
   animation : pulse 10s infinite;
}
div.pulse-2 {
   -webkit-animation : pulse 15s infinite;
   -moz-animation : pulse 15s infinite;
   -o-animation : pulse 15s infinite;
   animation : pulse 15s infinite;
}
div.pulse-3 {
   -webkit-animation : pulse 20s infinite;
   -moz-animation : pulse 20s infinite;
   -o-animation : pulse 20s infinite;
   animation : pulse 20s infinite;
}

Die Eigenschaft pluse-1, pulse-2 oder pulse-3 wird den einzelnen Quadraten als zusätzliche CSS-Klasse auf jeder Seite einzeln zugewiesen – zufällig, damit der Effekt noch besser zur Geltung kommt.

 <div id="trenner">
    <div class="trenner-wrapper clearfix">
 
       <div class="dot d01 pulse-1"></div>
       <div class="dot d02 pulse-3"></div>
       <div class="dot d03 pulse-2"></div>
       <div class="dot d04 pulse-2"></div>
       <div class="dot d05 pulse-3"></div>
       ...
    </div>
 </div>

Dabei erhalten Quadrate, die über dem Kopfbild liegen, keine solche Zuweisung, da andernfalls die darunter liegenden Bildteile sichtbar würden.

Darstellung Tablet
Das Hauptmenü in der eto-Schriftart wurde (in modernisierter Form als PNG-Bilder und sogenannter CSS-Sprites) beibehalten.

Smartphone-Darstellung

Erst, wenn der Platz auf dem Bildschirm nicht mehr zur Anzeige dieses Menüs ausreicht, verwandelt es sich in eine anklickbare Box rechts oben.

Alte Zöpfe abgeschnitten

Wie gehabt mussten für das an die mobilen Geräte angepasste Layout alle Seiten komplett neu in HTML5 und CSS angelegt werden, viele alte Zöpfe wie die bereits erwähnten umständlichen GIF-Lösungen wurden dabei abgeschnitten.

Auf der Diskographie-Seite ersetzen nun großzügige Bilder der CD-Layout die bisher eher kleinen Abbildungen.

Neu auch die Links zu den verschiedenen Vertriebs- und Videokanälen; für eine bessere Erreichbarkeit auf einem Smartphone sind die bisherigen Text-Links nun anklickbaren Schaltflächen gewichen.

Selbstverständlich ist heute ein moderner Webfont und eine etwas größere, dadurch auch besser lesbare Schriftart.

Insgesamt wirkt die Seite jetzt, wie ich finde, nochmal deutlich moderner und ansprechender. Ruhm und Ehre sollten mir gewiss sein…

Kommentare

Kommentare

Kommentar schreiben

Aufgrund neuer rechtlicher Bestimmungen habe ich die Kommentarfunktion meines Blogs vorübergehend deaktiviert und muss Sie vorerst bitten, Kommentare per Email an mail [at] manoftaste.de zu senden.