23. April 2016
Webseite an Mobil anpassen: etomusik.de
Nach und nach stelle ich auch diejenigen Webseiten auf ein „responsive Webdesign“ um, an welchen ich privat oder geschäftlich beteiligt bin. 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:
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.
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.
Anpassung an die mobilen Geräte
Nachfolgend ein paar Worte zur Anpassung an kleinere Anzeigen von Tablet und Smartphone:
Menüanpassung
Das Hauptmenü in der eto-Schriftart wurde (in modernisierter Form als PNG-Bilder und sogenannter „CSS-Sprites“) beibehalten und ist in der PC-Ansicht wie gehabt sichtbar. Erst, wenn der Platz auf dem Bildschirm nicht mehr zur Anzeige dieses Menüs ausreicht, verwandelt es sich in eine anklickbare Box („Burger-Menü“) 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-Layouts 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.
Webfont
Selbstverständlich ist heute ein moderner Webfont und eine etwas größere, dadurch auch besser lesbare Schriftart. Insgesamt wirkt die Seite durch die Neugestaltung nochmal deutlich moderner und ansprechender.
Wenn Sie sich die Seite selbst anschauen möchten, klicken Sie bitte hier: http://www.etomusik.de/