uwepr, handgemachte Webseiten

Willkommen auf meinen privaten Webseiten. Sie finden hier zwei Subdomains, welche einem Teil meiner Leidenschaften gewidmet sind:

 

Ein weiteres Hobby ist leicht erkennbar:

Webseiten schreiben mit (X)HTML und deren Gestaltung mit CSS

Dabei beschränke ich mich nach Möglichkeit auf (X)HTML + CSS + PHP, was der Barrierefreiheit zugute kommt. Javascript kommt zum Einsatz, um Browserfunktionalität nachzurüsten, z.B. im Kontaktformular, oder um die Zahl von Einzeldateien, z.B. in den Galerieseiten von Wandern und Genussklettern, in einem überschaubaren Rahmen zu halten. Neben meinen eigenen Webseiten habe ich den Code und das Design für das Roßmäßler-Vivarium 1906 - Verein für Aquarien- und Terrarienfreunde Halle (Saale) e.V. entwickelt.
Inzwischen (2015) ist es Standard, dass Webseiten benutzerfreundlich auf mobilen Endgeräten funktionieren. Webseiten mit festen Breiten für traditionelle Monitorgrößen optimiert, haben da ganz schlechte Karten. „Responsives Webdesign” heißt das Zauberwort, „media queries” sind das Standardwerkzeug. Momentan bin ich bei der Umsetzung für meine Webseiten. Bereits abgeschlossen ist die Umstellung für diese Seite und Wandern und Genussklettern.

 

Für eine größere Ansicht bitte jeweils auf das Bild klicken.

Meine Subdomain wandern-genussklettern.uwepr.de

wandern-genussklettern-klein.jpg

Meine Seite zum Thema „Wandern und Genussklettern” ist im Wesentlichen eine Bildergalerie, welche ich zunächst völlig ohne Javascript schrieb. Nachdem die Anzahl der Bilder die 200 überschritt, stellte ich dann auf eine Javascript-Lösung um. Meine Wahl fiel auf popeye, eine Lösung von Christoph Schüßler, welche eine Zeit lang unter der GPL 2 lizensiert von ihm zum Download angeboten wurde. Ein wichtiger Entscheidungspunkt war für mich die Tatsache, dass die Inhalte bei dieser Lösung auch bei abgeschaltetem Javascript zugänglich bleiben. Der IE6 bekommt nur noch ein Basis-Styling geliefert, da er mit popeye im Test auf leistungsschwachen Rechnern einfriert. Dieses Basis-Styling erscheint auch bei deaktiviertem Javascript und kann auf Wunsch in allen gängigen Browsern dargestellt werden.
Bei der Überarbeitung 3/2015 wurde mit geringstem Aufwand auf variable Anzeigebreiten umgestellt. Dabei wurden lediglich Maximalbreiten für zwei Schlüsselwerte bei „@media only screen and (min-width: Wert)” gesetzt + Anpassungen für einen Platzhalter für eine float-Simulation der Hauptnavigation, welche absolut positioniert ist + Anpassung der Breite der Links in der Fußleiste.

 

Meine Subdomain malawi.uwepr.de

uwepr-malawi-klein.jpg

Meine Seite zum Thema „selbst gehaltene Malawibuntbarsche” hatte ich ursprünglich mit einem Minimum an CSS gestaltet. Nur bei der Schriftart hatte ich etwas Aufwand mittels @font-face betrieben. Bei der Umstellung auf responsives Web-Design stellte ich im Erscheinungsbild auf einen flexiblen Einspalter um mit Zentrierung für das Menu bei geringer Breite des viewport. Bei größerer Bildschirmbreite wird das Menu scheinbar gefloatet. Für content-first geschieht das ganze per Simulation, d.h. ein Platzhalter sorgt für freien Raum und position:absolute für die Anzeige an der gewünschten Stelle. Für platznutzende Anzeige der Bild-Container sorgen bei größerem viewport float und display:inline-block. Für die älteren IE wird inline-block-Simulation verwendet.

 

Webseite des Roßmäßler-Vivarium 1906 - Verein für Aquarien- und Terrarienfreunde Halle (Saale) e.V.

Aqua-Verein-klein.jpg

Für das Design dieser Seite wählte ich einen schlichten Einspalter mit floatenden Sidebars. Da teilweise erhebliche Textmengen pro Unterseite anfallen, werden so die Scroll-Balken nicht so lang wie bei einem normalen Zweispalter oder Dreispalter.

 

Diese Seite

wandern-genussklettern-klein.jpg

Ein Design, welches sich schrittweise von 300 px Breite des Viewports ausgehend aufbaut. Die Positionierung erfolgt über display:flex. Bei kleinen Monitorgrößen ist die Schrift etwas vergrößert. Die Grundformatierung erfolgt für Breiten ab 300px. Bei 760px Breite passt sich das Menu „ausgehende Links” an die verfügbare Breite an. Ab 980px Breite werden die Textboxen in zwei Boxen pro Reihe verteilt und ab 1700 px Breite in drei Boxen pro Reihe. Der Haken: display:flex wird erst ab IE10, FF28, Chrome33, Safari7 und Opera22 unterstützt. Viele sind noch mit älteren Versionen unterwegs siehe die Statistiken unter Browser-Statistik.de.