Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Ein verspielter One-Pager II: Handwerk

Ein verspielter One-Pager II: Handwerk

Gestern hat Nicolai Schwarz über den langen Weg zum Relauch seines Portfolios berichtet. Heute geht es um die konkrete Umsetzung: Usability, Performance und all die anderen Kleinigkeiten, an die ein Webworker denken muss.

Kurzer Rückblick: Bei meinem Relaunch sollte es um einen verspielten One-Pager gehen. Ich habe mich für knappe Inhalte entschieden, die alle erst einmal nebeneinander liegen: Leistungen, News, Portfolio, Fachvorträge, Fachartikel, Datenschutz und Impressum. Alles in einem festen Raster angeordnet. Die Menüpunkte Leistungen und Impressum haben etwas mehr Inhalt und erscheinen erst einmal breiter als die anderen Inhalte

Startvorbereitungen

Per JavaScript wird die Seite nun ein wenig zurechtgefaltet. Bei den Leistungen und im Impressum werden Inhalte zusammengerückt, sie lassen sich per Klick umschalten. Die Inhaltsleiste startet etwas verschoben mit dem Portfolio. Es sei denn, jemand hat das Kontaktformular falsch ausgefüllt und klickt auf »Zurück«, dann startet die Seite direkt mit dem Kontaktformular. Zunächst gab es nur die kleinen Pfeile, über die der Besucher dann navigieren sollte.

Die aktuelle Startseite von textformer.de
Die aktuelle Startseite von textformer.de

Usability

Soweit, so klar. Habe ich gedacht. Ich habe probeweise eine Freundin an meinen Rechner gesetzt, die dann auch prompt fragte: »Und nun?«

Nur weil ich weiß, dass der Besucher scrollen kann, muss es ja der Besucher nicht begreifen. Also habe ich eine bekannte Navigation hinzugefügt. Da sich das Menü nun aber unter dem eigentlichen Inhalt befindet, habe ich zusätzlich den kleinen Pfeil in grün hinzugefügt. In der Hoffnung, dass mehr Leute die Navigation finden. Zusätzlich steht beim Portfolio die Aufforderung, sich durch selbiges zu klicken. Sobald der User einmal gesehen hat, wie sich der Inhalt bewegt, weiß er hoffentlich, wie die Seite zu bedienen ist.
Ob das bei allen Usern klappt, werden die nächsten Wochen zeigen.

Mit ohne alles

Als professioneller Webworker kommen wir nun nicht umhin zu fragen: Was passiert, wenn?

Was passiert, wenn der User gar kein JavaScript hat? In dem Fall sieht er alle Inhalte in dem kleinen Fenster mit einen horizontalen Scroll-Balken und kann einfach nach links und rechts scrollen. Erst, wenn JavaScript aktiviert ist, erscheint die untere Navigation und diverse Inhalte werden anders angeordnet.

Was passiert, denn der User die Schrift vergrößert? Bei einem reinen Text-Zoom wächst die Seite schön mit. Im Firefox übersteht das Design bei 1280×1054 Pixeln drei Vergrößerungen per Strg+, danach muss der Nutzer den Bildschirm nach unten scrollen.

Was ist mit Bild-Zoom? Opera und Safari schaffen den Bild-Zoom problemlos. Der inkompetente Internet Explorer 7 zerstört leider das Design. Für mich aber kein Grund, irgendetwas an meinem Code zu ändern.

Was passiert, denn der User die Seite mit 800×600 Pixeln anschaut? Pech!

Und ohne CSS? In dem Fall sind die Inhalte zunächst zu sehen. Falls aber JavaScript aktiv ist, schiebt ein Klick auf die Navigation aber Inhalte aus dem Sichtfenster. Ich könnte das Problem umschiffen; aber den Aufwand spare ich mir hier.

Performance

Das große Problem an einem One-Pager ist natürlich: Es muss ziemlich viel auf einmal geladen werden. Insbesondere die Bilder machen sich bemerkbar. Die Navigation ist als CSS-Sprite angelegt. Ich habe darin das Menü, die Links-Rechts-Pfeile und auch den Text im Kopf zusammengefasst. Das spart zwar keinen Speicherplatz, aber einige HTTP-Requests.

In der fast finalen Version kam ich trotzdem auf 33 HTTP-Requests: 1 HTML-File, 3x JavaScript, 2 Style-Sheets, 1 CSS-Image und 26 weitere Bilder. Die Bilder haben mit 732 Kilobyte den größten Anteil; insgesamt liege ich bei 851 kb.

Bei den Bildern habe ich bereits vorher darauf geachtet, dass sie jeweils möglichst klein sind. Im Gegensatz zu anderen Projekten habe ich bei jpgs schon mal eine höhere Komprimierung gewählt, um ein paar kb zu sparen. Ich jage trotzdem alle Bilder noch einmal durch Smush It (ist Teil von Firebug) und spare so noch einmal 26,2 kb. Bei anderen Projekten lässt sich da deutlich mehr herausholen. Die beiden Style-Sheets fasse ich zu einem zusammen.

In dem Versuch, richtig clever zu sein, kam ich auf die Idee, auf die kleinen Bilder im Portfolio zu verzichten. Schließlich muss ich ja ohnehin die großen Bilder laden, da kann ich sie eigentlich doppelt nutzen und den Browser daraus Thumbnails kleinrechnen lassen. D.h. ich packe die Bilder in ein zusätzliches <span>, lasse das Bild dann skalieren und durch das span in der Höhe abschneiden. Das spart zehn HTTP-Requests und noch einmal knapp 100 kb.
Leider bringt das einige Nachteile mit sich. Zum einen rechnet ein Browser die Bilder zwar kleiner, hübsch sehen sie aber nicht aus. Zum anderen wird die Animation langsamer, wenn das kleingerechnete Portfolio ins Bild kommt. Da überwiegen also die Nachteile – übrigens hier zu sehen. So nehme ich lieber die zusätzlichen 100kb in Kauf und bin flexibler, weil das kleine Bild nun was anderes zeigen könnte als das große.

YSlow zählt übrigens noch ein paar Punkte auf, die ich verbessern könnte, etwa jQuery per CDN auslagern. Davon halte ich jedoch nicht allzuviel; irgendwer könnte dann meine Besucher mitzählen. Ich könnte mein JavaScript noch minifzieren, vermutlich lässt sich alles auch cleverer programmieren, viel ist daran aber nicht zu sparen, es ist ja nur 3kb groß.

Barrierefreiheit

Zum Thema Accessibility gab es einen Mini-Mini-Test der Seite mit dem Screenreader. So viel war danach nicht zu optimieren. Die Bilder hatten bereits einen entsprechenden alternativen Text, das Captcha beim Formular ist absichtlich nur eine einfache Frage.

Ich habe ein paar Links der Marke »Webseite ansehen« um die Domain erweitert, damit die Links auch eindeutig sind. Die dynamischen Links bei Leistungen/Zur Person funktionieren auch im Screenreader, allerdings sprang der Screenreader danach zum Bild. Mit etwas JavaScript wird nun nach einem Klick die neue Überschrift fokussiert.

Ein ausführlicher Test mag hier mehr Stellen finden, die optimiert werden könnten. Für den Moment reicht mir der aktuelle Stand.

Suchmaschinenoptimierung

Gibt es nicht.

Ich feile zwar immer noch an den Texten, es geht mir aber nur noch darum, lockerer zu werden. Dabei verschwende ich keinen einzigen Gedanken an Suchmaschinenoptimierung. Wenn ein Keyword auftaucht, ist es eben so, aber ich setze sie nicht absichtlich ein, um ein höheres Maß an SEO zu erreichen.

Sonderbehandlungen

Ich brate zwei Extrawürste: Eine bekommt der Internet Explorer 6, die andere ist fürs iPhone.

Die Seite würde im Internet Explorer 6 grundsätzlich funktionieren. Es gäbe keinen Durchsicht-Effekt in der Navigation und ich müsste die Elemente mit einem Extra-Stylesheet etwas anders formatieren, aber den Look der Seite schafft auch der IE6. Allein, ich gönne mir auf meiner eigenen Seite den Luxus, den IE6 zu ignorieren. Bzw. ignorieren ist das falsche Wort, der IE6 bekommt von mir ganz anderen Inhalt ausgeliefert. Es gibt ein anderes Foto und den mehr oder weniger freundlichen Hinweis, doch bitte den Browser zu wechseln.
Alles andere dazu habe ich schon vor eineinhalb Jahren im Pisto-Magazin erörtert.

Die Webseite im Internet Explorer 6
Die Webseite im Internet Explorer 6

Auf dem iPhone würde die Seite auch funktionieren. Und zwar so wie sie ist. Allerdings zoomt sich das iPhone das Inhaltsfenster etwas klein zurecht. Und die Animationen sind in dieser Größe eher hinderlich. Also verzichte ich ganz auf JavaScript und ordne die Inhalte untereinander an statt nebeneinander. Die Portfolio-Übersicht fliegt ganz raus und von den Bildern für die Rubriken News etc. kommt nur noch das Leistungen-Bild zum Zuge, damit zum Start ein Bild zu sehen ist. Das spart zehn kleine Portfolio-Bilder und sechs Fotos bei den Rubriken. So müssen nur noch knapp 460kb geladen werden. Durchaus sinnvoll für einen mobilen Browser.
Die iPhone-Sonderbehandlung gibt es nur, weil ich zufällig selbst ein iPhone habe. Weitere Anpassungen für andere mobile Geräte erspare ich mir.

In dem Fall nutze ich übrigens eine Weiche per PHP. Wird entweder ein iPhone oder der IE6 erkannt, wird per PHP anderer oder reduzierter Inhalt ausgeliefert. Sonst wird die normale Seite gezeigt. Wer genau hinschaut, stellt fest, dass ich den Text im Kopf jeweils leicht angepasst habe.

Die ewige Baustelle

Ich habe die Seite online gestellt, damit ich überhaupt weiterkomme. Sonst bringe ich noch zwei weitere Jahre damit zu, hohe Ansprüche nicht erfüllen zu können. Natürlich habe ich noch ein paar Punkte auszusetzen:

  • Die Stockfotos sind zwar für den Moment ok, aber eigentlich sollte auch das Design deutlich verspielter sein. Ich träume immer noch von eigenen Robotern, die ich für mein Corporate Design nutzen kann. Ich mag eben Character Design. Vielleicht fange ich erst einmal mit einem Twitter-Vogel rechts über dem Inhalt an.
  • Das Print-CSS könnte auch etwas mehr Sorgfalt vertragen. Für den Ausdruck stelle ich aber lieber ein zusätzliches PDF-Portfolio zur Verfügung.

Trotz aller Dinge, die ich noch auszusetzen hätte, ist diese Version aber schon mal online. Und nicht wieder halb fertig am eigenen Anspruch gescheitert.

Kommentare

Thomas
am 19.05.2010 - 09:50

Schöner Artikel und nettes Design!
Den IE6 auszusperren finde ich gut - der hats nicht anders verdient ;)

Eine Anmerkung noch:
Durch die javascript-Navigation funktioniert der Zurück-Button nicht.
Dafür gibt es allerdings ein nettes jQuery-Plugin, das recht einfach zu implementieren ist.
Ein Biespiel gibts hier auf jqueryfordesigners.com

Achja, falls es dich interessiert: Im Android-Browser funktioniert die Seite wunderbar, auf meinem Milestone im Breitbild kann die Seite in voller Breite anzeigen und den Text (gerade noch) lesen. Bei kleineren Auflösungen wirds wohl nicht so gut funktionieren...

MfG
Thomas

Permanenter Link

Dominik
am 19.05.2010 - 11:55

Mir gefällt die Page ganz gut da der Content im Vordergrund steht und man schnell zu den gesuchten Informationen gelangt. Weniger ist oft mehr und die Themenbilder lockern das Ganze etwas auf - top :)

Aber ... mehr geht ja immer. Ob das auch immer sinnvoll ist lasse ich mal dahingestellt - aber eine nette technische Spielerei fällt mir da schon noch ein.

Ich nehme mal an du hast die Themenbilder nicht in einem Sprite zusammengefasst damit du schneller flexibel bist wenn du sie mal austauschen möchtest. Gleiches gilt natürlich für die Portfolio-Thumbnails.

Nun wäre es doch eigentlich ganz praktisch wenn man da nochmal 5 (Themenbilder) + 8 (Thumbnails) = 13 HTTP-Requests einsparen könnte, in dem man die Sprites über PHP dynamisch generieren lässt - so dass man keine Flexibilität verliert. Technisch gesehen ist es ja kein großes Hexenwerk, durch das Verzeichnis zu laufen und aus allen vorhandenen Bildern ein großes Ganzes zu generieren, wenn man die Grafiken entsprechend in Unterverzeichnisse einsortiert. Das Ganze natürlich nicht bei jedem Seitenaufruf, sonst hat man womöglich das Todesurteil für den Server unterschrieben, sondern immer dann, wenn du etwas änderst. Eben ein Script per Hand aufzurufen geht ja fix.

Mir wäre spontan kein Fall bekannt wo jemand das in seinem Portfolio so gelöst hat, was es natürlich noch interessanter macht. =)

Permanenter Link

Henry
am 19.05.2010 - 11:59

Danke. Tolle Artikel - super geschrieben!
Man hat es hier mit einem Menschen zu tun und keinem Lehrbuch. Ich glaube, vieles würde ich ähnlich angehen und genauso lange brauchen. Man ist sich selbst halt immer der schärfste kritiker.

Mit den Hintergrundbildern verfahre ich meistens so, dass ich im Thumbnail einen Ausschnitt zeige. Kein Qualitätsverlust, kein zusätzliches Bild...

Permanenter Link

Bert Kößler
am 19.05.2010 - 17:20

Ist doch prima gelungen!

Mich würde nur das schnelle Überspringen der vielen Portfolio-Seiten stören, wenn man von der Hauptseite irgendwo nach rechts wechselt. Mich bringt das aus dem Konzept, wenn ich nur die Hauptmenüpunkte durchklicke und zwischen zwei bestimmten die Animation anders aussieht. Das ließe sich elegant ändern, wenn das Portfolio ganz links im Menü wäre, die Details links davon und die anderen Seiten rechts vom Portfolio. Ist nur die Frage, ob sich das noch mit einer sinnvollen Reihenfolge im HTML realisieren lässt.

Kleiner Tipp noch für die Geschwindigkeit: es wird angesichts der vielen Bilder zwar nur marginal sein, aber die beiden Scripts am Ende vor </body> einzubinden würde Verzögerungen durch das Laden von jQuery vorbeugen. In jedem Fall sollten die Scripts aber nach dem CSS geladen werden. Manche Browser haben angeblich die Eigenheit, bei einem Script dieses zuerst vollständig zu laden, bevor sie irgendwas nachfolgendes anfangen. Das könnte dazu führen, dass die Seite für einen kurzen Moment ungestylet angezeigt wird.

Permanenter Link

laemmy
am 19.05.2010 - 18:48

Ich mag ja One-Page-Portfolios sehr. Auch deine neue Seite finde ich sehr gelungen. Gefällt mir :-)

Permanenter Link

Michael Stein
am 19.05.2010 - 19:28

Bin immer wieder beeindruckt, wenn eine Seite so gut aussieht und dabei tiptop validiert. Als (Wieder-) Einsteiger ins Webdesign weiß ich, wie schwer das ist. In den 90ern haben wir uns einen Dreck um Semantik und Standards geschert. Gut, dass das vorbei ist.

Permanenter Link

Benjamin Weigl
am 25.05.2010 - 18:03

Ich kenne das Problem mit der eigenen Seite. Es gibt da ja den Spruch:

Der Schuster hat immer die schlechtesten Schuhe ...

Trotzdem möchte ich was einwerfen, was ich anders gemacht hätte. Zwar darf ich nicht ganz so laut reden, hab ich doch auch erst kürzlich neu gelauncht und meine JavaScript Fallbacks noch nicht fertig, dennoch:

Ich hätte das ganze nicht mittels overflow:auto; bei deaktiviertem javaScript anzeigen lassen, sondern schön sauber untereinander. Die entsprechenden Anpassungen im Markup bzw. im CSS hätte ich mittels JavaScript gelöst.

Dann wäre die Usability möglicherweise auch für die ältere Zielgruppe noch gegeben und die Betrachtung wäre einfacher.

Grüße aus dem Allgäu
Benjamin

Permanenter Link

Timo
am 28.05.2010 - 13:26

Hey Nikolai,

schön Website, die Du da gebastelt hast. Großes Lob an dieser Stelle. Überlege schon seit längerem auch mal einen solchen One-Pager zu basteln, aber habe immer davor zurückgeschreckt. Bis ich Deinen Artikel gelesen habe.

Ich glaube aus Usability-Sicht wäre es nicht verkehrt gewesen das Hauptmenü oben zu platzieren anstatt unten. Usability-Guru Jakob Nielsen predigt ja immer man solle das Hauptmenü entweder oben, links oder recht platzieren, aber eben nie unten. Auf der anderen Seite bin ich durchaus der Meinung, dass man diese Regeln auch mal brechen darf, wenn dabei eine gelungene Komposition herauskommt. Und das ist ja in diesem Fall so.

Also nochmals danke für deinen Artikel.

Permanenter Link

Klaus
am 29.05.2010 - 10:43

Hallo und Danke für den schönen Artikel. Ich staune immer wieder was für coole Sachen man mit Hilfe von JavaScript machen kann.

Gruß aus Bremen

Permanenter Link

Bernhard
am 29.05.2010 - 14:49

Guter Artikel! Für meinen Geschmack, sollte man nicht zu viele Scripte einsetzen. Schließlich werden die Seiten ja für Menschen erstellt. Und diese müssen damit auch zu Recht kommen. Die Navigation unterscheidet sich doch etwas von üblichen "Webstandards". Finden sich neue Seitenbesucher hier tatsächlich zu Recht?

Permanenter Link

nik
am 30.05.2010 - 11:07

Also zugunsten von fast 50 Bildschirmprozent optischem Weißraum rund um das Logo die wichtigen Inhalte - inkl. des Einleitungstextes - anzuschneiden und die Navigation gar unter den Falz anzu"siedeln" finde ich doch arg gewagt. Im negativen Sinne. Eine ewig auf unten gerolle Scrollbar beim Ansehen der Website finde ich persönlich jetzt nicht so sehenswert.
Das Ganze wohlgemerkt auf einem 1024/768 Bildschirm/FF/Windows, "Pech!" gilt also auch für alle auf einem etwas älteren Notebook. An Breitbildbildschirme will ich erst gar nicht denken. Übrigens, auch "Klicken Sie sich durch´s Portfolio!" steht unter dem Falz ;)

Insgesamt eine hübsche Seite, aber Benutzbarkeit sieht für mich anders aus. Und gerade wo die Webkrauts immer "Web ist nicht Print" betonen, wundert es mich, dass dieser Leitsatz hier total ignoriert wird.

Permanenter Link
Nicolai Schwarz

Nicolai Schwarz (Autor)
am 01.06.2010 - 00:06

Ich stelle fest: Es ist eine gute Idee, über seinen Relaunch auch noch einen Artikel zu schreiben. Dann schauen Dutzende anderer Webworker noch einmal drüber und geben clevere Tipps.

@Thomas: Interessant, das Plugin kannte ich noch nicht. Allerdings funktioniert der Zurück-Button schon so, wie ich es erwarte. Man kommt eben zurück zur letzten Webseite. Ich kann verstehen, wenn andere Nutzer vielleicht erwarten, dass sie innerhalb meiner Seite »zurück« kommen. Aber ich folge mal meinem Empfinden und lasse es so.

@Dominik, @Henry: Beides gute Ideen. Ich werde demnächst mal ausprobieren, ob ich geeignete Bildauschnitte nach Henrys Idee finden kann.

@Bert: Das schnelle Überspringen ist volle Absicht, die Leute sollen »zufällig« sehen, dass es da viele Referenzen gibt. Außerdem folgt die Navigation einer üblichen Reihenfolge.
Und auch das Script befindet sich in voller Absicht ganz oben. Nach einigen Tests sehe ich nämlich eher unstyled Content, wenn sich das Script am Fuß befindet. Ganz drumherum um den FOUC komme ich aber nie.

@Benjamin: Möglich, aber ich will, dass die Seite in erster Linie horizontal läuft. Untereinander ordne ich es bisher nur fürs iPhone an.

@Timo: Auch das ist Absicht. Unsereins baut sehr viele Layout mit einem üblichen zwei- oder dreispaltigen Aufbau. Das langweilt auf Dauer. Bei dieser Seite sollte es anders aussehen. Da darf auch die Navigation mal unten stehen. Ist das aus Usability-Gründen schlecht? Vielleicht, aber es ist durchaus erlaubt, mal Regeln zu brechen.

@Nik: Es ist nie möglich, es mit einer Webseite allen recht zu machen. Eine gute Webseite ist eine Frage des Abwägens. Unsere Designs sollen demnächst auf kleinen Handys, Notebooks, 22-Zoll-Bildschirmen und großen Fernsehern hübsch aussehen. Mit CSS3 Media Queries können wir einiges rausholen, aber ich bezweifle, dass wir wirklich alle Webseiten für alle möglichen Fälle aufbereiten werden. Wir richten uns nach den häufigsten Fällen, die sich herauskristallisieren werden.
In diesem Fall ist die Lösung aber gar nicht so weit entfernt: Ich kann per JavaScript die Höhe des Browserfensters abfragen und ggf. die Abstände im Kopf anpassen. Demnächst mal.
Allerdings lasse ich aus diesem Grund bereits von Anfang an die Browsergrößen durch Piwik mitloggen. Wenn zu viele Besucher mit kleinen Größen unterwegs sind, muss ich die Seite anpassen. Bisher ist der Anteil aber vernachlässigbar klein.

Permanenter Link

Die Kommentare sind geschlossen.