Tempo zählt - auch bei der Steuerberatung

Ein Speedindex von 700 bis 800 laut Webpagetest, den bringen gerade einmal 2 oder 3 Prozent aller Websites. Die der Dessauer Steuerberatung Nora Büttener gehört nunmehr zu den Websites, die auf einer recht lahmen 16000er-DSL-Leitung schneller laufen, als viele Sites an dreimal so schnellen Anschlüssen.

Möglich wurde das Tempo duch eine Beschränkung aufs Wesentliche und etliche technische Kniffe. Das Design lieferte Yvonne Tenschert, während ich mich um die Technik gekümmert habe.

Das Gropius-Gymnasium im Netz

Das Walter-Gropius-Gymnasium in Dessau trägt den Namen eines berühmten Mannes – die alte Website aber war eine Selbstbaulösung, die wohl auch Lehrer und Schüler nicht so recht zu überzeugen vermochte. Also wurde die Designerin (und ehemalige Schülerin) Sandra Heinze gebeten, die Site zu überarbeiten.Die technische Umsetzung habe ich dann übernommen. An der Website zeigt sich übrigens sehr schön, was „responsives Design“ bedeutet. Wer das Browserfenster allmählich zusammenschiebt, sieht, wie sich allmählich das Design verändert und stets der Bildschirmbreite anpasst. Die Webpräsenz funktioniert dadurch sowohl auf einem großen Computermonitor wie auf einem Smartphone mit bescheidenen 320 Pixel Auflösung.

Leader-Region Anhalt

Ob Gemeindezentren oder die Restarierung eines Forsthauses – das EU-Programm „Leader“ hat viele Projekte in der Region Anhalt gefördert. Vorgestellt werden diese auf der Website lag-anhalt.de.Als technischen Unterbau benutzt diese Website einmal mehr MODx und sie ist selbstverständlich mobiltauglich. Das Design entwickelt die Dessauer Agentur 3undzwanzig.

Askania reloaded

Nach einigen Jahren bedurfte die Website des Askania Hotels in Bernburg der Überarbeitung. Olivia Seipelt hat ihr gestalterisch eine gründliche Diät verordnet, gleichzeitig wurden Strukturen verschlankt, ohne auf Inhalte zu verzichten. Die Website funktioniert nun auch auf Mobilgeräten.

Das Elend mit Drop-Down-Menüs

Zugegeben: ich bin kein großer Fan von so genannten Drop-Down-Menüs, bei denen etwas aufklappt, wenn der Mauszeiger drüber fährt. Viel zu oft sind sie fricklig zu bedienen. Manchmal aber geht es nicht anders, weil die Navigation schlicht zu umfangreich ist, wie etwa bei der Website der Evangelischen Landeskirche Anhalts. Bei deren „Mobilmachung“ für Smartphones und Tablets stellte das eine besondere Herausforderung dar.Der Grund: Mobilgeräte verfügen über keinen Mauszeiger, den man auf irgendein Element schieben könnte, das sich dann zum Beispiel öffnet und dann den Weg frei macht für den nächsten Schritt, meist einen Klick. Hier gibt es in solchem Fall nur den Klick (oder genauer: den Touch).

Dieser Umstand ist dazu geeignet, Webentwickler in eine milde Form des Wahnsinn zu treiben, wenn es darum geht, Drop-Down-Menüs mobiltauglich zu machen. Eine perfekte Lösung gibt es nicht, so dass ich nach einer eigenen gesucht habe, die hoffentlich funktioniert.

Schneller paddeln

Die neue Website der Junkers Paddelgemeinschaft Dessau war erst anderthalb Jahre alt, da habe ich sie nochmals ordentlich gepimpt. Das machte sich gut, weil ich für diese Website allein verantwortlich bin und sie inzwischen als Experimentierfeld benutze, um neue Techniken einzusetzen. Ziel der Überarbeitung: das Design – ausnahmsweise einmal von mir selbst – sollte klarer werden und die Seiten sollten schneller laden. Gerade was das Tempo angeht, läuft die Site vielen vergleichbaren den Rang ab, wie der Webpagetest beweist. Einen „Speed Index“ von 1300 für die DSL-Verbindung erreichen lediglich knapp acht Prozent aller Websites. Der einzige Punkt, der sich wohl verbessern ließe, wäre eine schnellere Serverantwort, aber das würde die monatlichen Betriebskosten etwa um den Faktor 10 in die Höhe treiben – eindeutig zu viel für solche eine kleine Website.

Mobile Besucher

Recht aufschlussreich ist im übrigen der Blick auf die Statistik, für die nicht das umstrittene Tools des Datengierschlunds Google eingesetzt wird, sondern das Opensource-Projekt Piwik. Obwohl die Websites sich an ein durchschnittliches Publikum wendet, unter dem sich kaum Computernerds befinden dürften, erfolgen inzwischen ein Viertel aller Zugriffe über Smartphones und Tablets.

Wenn die Sonne aufgeht

Im übrigen lernt man als Entwickler immer dazu. Die für Paddler wichtigen Sonnenauf- und -untergangszeiten hatte ich in der vorherigen Version recht umständlich über Yahoo! bezogen – bis ich eher zufällig entdeckt habe, dass PHP, die Skriptsprache, die die Website antreibt, selbst eine entsprechende Funktion bereitstellt, die die höchst komplexen Berechnungen vornimmt.

Flinkes Hotel

Vermutlich ist die Website des „Hotels 7 Säulen“ die schnellste unter den Dessauer Hotelwebsites. Jedenfalls legen dies Stichproben nahe, bei denen keine auch nur annähernd rund 1,3 Sekunden Ladezeit (laut Webpagetest) erreichte. (Bei der Startseite eines Hotel-Websuaftritts dauerte geschlagene 40 (!) Sekunden, bis alles geladen war.)

Möglich wurde das Tempo durch konsequente technische Optimierung und durch eine sehr kritische Auswahl dessen, was der Surfer tatsächlich erwartet und benötigt – auch mit Hinblick auf die Nutzer mobiler Endgeräte. Damit konnte die Site, deren Gestaltung Olivia Seipelt übernahm, sehr schmal gehalten werden.

Fraktionsupdate

Nach etwa fünf Jahren war mal wieder ein Update fällig für die Website der Fraktion Bürgerliste/Grüne im Stadtrat von Dessau-Roßlau. Am Webdesign (von Yvonne Tenschert) hat sich kaum etwa geändert, technisch dafür um so mehr getan.So habe ich zunächst das Content Management System aktualisiert, um dann den HTML-Code nachzuschleifen. Der alte war zwar nicht falsch, aber, nun ja, veraltet und konnte eine Prise HTML5 vertragen. Außerdem sind einige nebensächliche Dinge weiter nach unten im Code gerutscht, ohne dass sich an ihrer Position auf der Seite etwas geändert hätte. Die wichtigste Neuerung aber: Die Website läuft jetzt auch in mobilen Browsern vernünftig.

Was das Tempo angeht, wäre wohl an der einen oder anderen Stelle noch ein wenig heraus zu kitzeln – wenn die Site nicht auf einem Server von 1und1 läge und dort etliche Tuning-Schrauben entweder nicht erreichbar sind oder so verborgen, dass man irgendwann die Lust verliert, nach ihnen zu suchen. Da lob ich mir all-inkl.com.

Pathologen im Netz

Update: Da das Institut aufgelöst wurde, musste die Website offline genommen werden. Schade. – Offen gestanden: als es hieß, ob ich eine Website für das Pathologische Institut Halle entwickeln könne, dachte ich zunächst an Knochensägen, Seziertische und Kühlschränke mit Leichen. Und so war ich etwas überrascht, diese bei einem Besuch nicht anzutreffen.Denn die Hallenser Pathologen haben wie die meisten ihrer Kollegen weniger mit Toten als vielmehr mit Lebenden zu tun. Kliniken und Praxen senden Gewebeproben in die Reilstraße, wo diese auf markante Veränderungen untersucht werden, um zum Beispiel zwischen einer gut- oder einer bösartigen Geschwulst zu unterscheiden.

Höflich gesprochen, war die Website der Hallenser etwas in die Jahre gekommen, zu retten gab es da nichts mehr. Auch lag er keinerlei Corporate Design vor. Da ein solches zu entwickeln nicht Teil des Auftrages war, musste Yvonne Tenschert als Designerin etwas improvisieren, damit bei der Gestaltung der Website nicht allzu viel Pflöcke eingeschlagen würden. Statt dessen sollte das Design genug Raum geben für spätere Ergänzungen/Veränderungen, ohne deshalb das gesamte Webdesign umkrempeln zu müssen.

Die neue Website der Hallenser Pathologen wurde von Anbeginn von der mobilen Version aus gedacht. Einige Beispiele, was das heißt:

Die einzelnen Seiten sollten möglichst schlank daherkommen – und da reichen nicht nur technische Maßnahmen wie das Komprimieren von Inhalten auf dem Webserver. Dazu gehört gleichermaßen, die Inhalte auf das Wesentliche zu konzentrieren und statt sie aufzublähen: Texte werden knapp formuliert, Bilder wie auf der Ärzte-Seite werden erst geladen, wenn die Lebensläufe vom Nutzer aufgeklappt werden.

Bei den Bildgrößen wurde ein Kompromiss gewählt: Einerseits müssen mit Ihnen die recht neuen hochauflösenden Displays bedient werden, andererseits sollte die Technik wegen fehlender Standards möglichst unaufwändig gehalten werden. Und natürlich: die Bilddateien durften nicht zu fett werden. Die großen Bilder bieten mit einer Breite von 750 Pixel Reserven, um sie auf hochauflösenden Bildschirmen ordentlich darstellen zu können, gleichzeitig habe ich die Bilder recht aggressiv auf 50 Prozent komprimiert, so dass die Dateien mit halbwegs verträglichen 40 bis 50 Kilobytes auskommen.

Die für Smartphones optimale Darstellung wurde mit adaptiven Design erreicht: die Breite der Seiten passt sich dem Bildschirm an, die Navigation wird er auf Anforderung eingeblendet. Dabei wurde auf die oftmals typische Animationen verzichtet, um schwachbrüstige Smartphones weniger zu strapazieren.

Sonstige Tricks für Tempotuning: Wenige Designgrafiken, eine externe CSS-Datei (okay: zwei, weil IE7 und IE8 bedient werden mussten, wobei ich wenigsten auf nahezu ausgestorbenen IE7 liebend gern verzichtet hätte). Alle modernen Browser (also alle, die nicht IE8 und IE7 heißen) kommen mit einer JavaScript-Datei aus, CSS-, JavaScript- und Grafikdateien werden von einer gesonderten Subdomain geliefert. Und schließlich wird JavaScript asynchron geladen, um den Aufbau der Seiten nicht zu verzögern.

Der Lohn der ganzen Mühe sind sehr ordentliche Ladezeiten.

Shop für Regionales

Rechtzeitig vorm Weihnachtsgeschäft ans Netz gegangen ist regiokiste.com, ein Projekt des Vereins Regionalmarke Mittelelbe. Der Shop bietet ausschließlich Lebens- und Genussmittel aus dem Raum Dessau an – Wildschweinsalami ebenso wie Quittenweingelee. Überdies – und daher stammt der Name – gibt es mehrere Regiokisten mit einer Auswahl verschiedener Produkte.Die Website verwendet die Technik des „responsive Designs“. Das heißt: sie verändert ihre Aussehen, je nachdem ob sie von einem „normalen“ Rechner oder von einem Smartphone aufgerufen wird und passt sich den Bildschirmgrößen an. Vorteil für den Nutzer: Er kann die Site mobil sogar mit dickem Daumen bedienen, ohne erst herein zoomen zu müssen.

Das Konzept zum Shop wurde vorab von mir in einem eigenen Projekt entwickelt. Jens von der Dessauer Agentur 3undzwanzig kümmerte sich auf dieser Basis um das Bestell- und Abrechnungsmodul, ich selbst um den ganzen andern technischen Belange. Das Logo steuerte Ö-Konzept aus Halle bei.