Angefangen hat alles mit einem Fachblog vor 5 1/2 Jahren. Lange war ich selber fleissiger Blogleser und konnte als Webworker irgendwann nicht umhin einen eigenen Blog über Design und HTML auf die Beine zu stellen. Dass sich der Blog liechtenecker.at zu einer Agenturwebseite entwickeln wird, konnte ich damals noch nicht erahnen.
Mittlerweile zähle ich den 5. Relaunch seit Bestehen der Domain und bin wie immer ganz stolz auf unseren neuen Webauftritt. Gemeinsam im Team haben wir in den letzten Wochen daran gearbeitet. Jeder hat bei unserem Relaunch seine Talente eingebracht.
Das Ziel war ein sehr aufgeräumtes und modernes Interface, wo wir unsere Stärken ausspielen können. Speziell auf tadellose Webtypografie, Animationen und hohe User Experience haben wir gesetzt. Waren wir mit unserem vorigen Webauftritt bereits Pioniere im responsive Webdesign, haben wir das flüssige Konzept ausgebaut und spezialisiert, dazu meint Stephan:
Bei der Umsetzung wurde darauf geachtet, dass nicht für bestimmte Devices optimiert wurde, sondern Breakpoints an den für die Elemente passenden Stellen (dort wo es Contentmäßig auch wirklich Sinn macht) erstellt wurden. Dadurch ist gesichert, dass die Seite nicht nur auf gängige & populäre Devices sondern auf alle Devices optimiert ist.
Wir sprechen hier von einem Fortschritt von unserem responsive Ansatz mit Media Queries. Die Technik ist hier grundsätzlich die selbe, aber wir achten hier nicht nur auf populäre Deviceauflösungen, sondern brechen dort auf ein neues Design um, wo es auch für den Gesamtkontext besser Sinn macht.
Technische Aspekte und UX
Bekannt sind wir auch für unsere subtile User Experience durch Animationen, welche komplett mit HTML5 und CSS3 realisiert sind. Die Animationen auf der Startseite wurden mit Tumult Hype umgesetzt und funktionieren auf allen von uns unterstützten Browsern (IE7 +, …). Diese Animationen benutzen das Format SVG mit einem Fallback auf PNG. Da Hype dies nicht Standardmäßig unterstützt, wurde ein Custom-Loader für die Hype-Animationen erstellt.
Dass SVG die Zukunft von Grafiken auf Webseiten ist, haben wir zuvor schon erwähnt. Deswegen war es eine frühe und wichtige Entscheidung, alle Elemente, Grafiken & Icons nach Möglichkeit mit SVGs umzusetzen und nur für ältere Browser einen Fallback auf PNG zu implementieren. Dadurch sind alle grafischen Elemente auf der Seite auch auf hochauflösenden Displays (Stichwort: Retina) exakt und besonders scharf.
Alle Webseiten wurden mit Fokus auf moderne Browser entwickelt, jedoch ohne ältere Browser aussen vor zu lassen. Es gibt z.B. keine IE7, IE8 oder sonstigen, browser-spezifische CSS Files. Das funktioniert über Feature Detection im Browser. Für jedes CSS-Feature (SVG, Opacity ,…), welches auf älteren Browsern nicht supported wird, gibt es alternative CSS-Regeln, die eine ähnliche bzw. gleichwertige Implementation auch auf diesen Browsern sicherstellt.
Das Konzept
Unser Hauptaugenmerk beim neuen Konzept war bessere Lesbarkeit (gegenüber der Vorversion) der Contenttexte, da unser Blog ein wesentlicher Bestandteil unserer Webseiten ist. Hierbei haben wir mit unserer Typografieexpertin Lisa ein passendes Fontskonzept entwickelt.
Als Webfont haben wir unsere CI Schrift Neo Sans verwendet, die eine sehr ausgeprägte Persönlichkeit hat und dazu die Open Sans (sans-serife Schrift) in verschiednen Schnitten, die zwei Schnitte harmonisieren sehr gut miteinander! Open Sans ist eine sehr leserliche und moderne Schrift fürs Web. Punkto Lesbarkeit wurde versucht nicht mehr als 45-70 Zeichen in einer Zeile anzuzeigen und je nachdem die Zeilenhöhe anzupassen. Auch die Überschriften stehen proportional zu dem Fließtext. Um das ganze zu Testen wurde zu Beginn ein Typography Prototyp erstellt.
Genug ist mehr
Wir wollten bei unserem Relaunch mit gezielter Call2Action den User dazu einladen interaktiv zu werden. Ob es jetzt ein Quick Check der digitalen Strategie ist, unser Newsletter oder spezielle Anfragen. Zum Beispiel Buttons mit einem sehr subtilen 1.5 Sekunden Fade unterstüzten den Webseitenbesucher dabei.
Getreu unserem Motto „GENUG IST MEHR“ (nicht weniger ist mehr) haben wir alles auf unsere wichtigen Kernaussagen reduziert.
Unser CMS ist nach wie vor WordPress, in der neuesten Version (der neue Medien-Uploader ist sexy:) Sarah, unsere Developerin im Relaunch Team, hat sich bei der Programmierung der Designs auf ein kleines Helferlein gestützt:
Für das Erstellen des Themes habe ich http://underscores.me/ verwendet. Das ist ein ganz simples designfreies HTML5 Template mit allen elementaren Files, dass man dementsprechend erweitert. So kann man auch zum Beispiel auf eine 404 Seite nicht vergessen 😉
Fazit
Ich freu mich sehr wieder einen Schritt in Richtung Liechteneckers Zukunft getan zu haben, schließlich sind wir mit unserer Agentur richtig erwachsen geworden und haben ein perfektes, hochprofessionelles Team beieinander, für Ihre digitale Strategie 🙂
Du willst mit jemanden über das Thema plaudern?
Einen kostenlosen Termin mit CEO Susanne vereinbaren!
Automatische Accessibility Audits – Wie wir mit unserem A11y-Testing-Tool Barrieren aufspüren
Barrierefreiheit im Web ist längst kein Nice-to-have mehr, sondern eine Notwendigkeit. Nicht nur, weil Gesetze wie die EU-Richtlinie 2016/2102 oder der kommende European Accessibility Act es vorschreiben, sondern auch, weil eine barrierefreie Webseite mehr Nutzer:innen erreicht und die UX verbessert. Doch manuelle Audits sind zeitaufwendig. Um Accessibility-Probleme effizient zu identifizieren, haben wir ein leistungsfähiges A11y-Check-Tool entwickelt – basierend auf Nuxt 3, Puppeteer und Axe-Core mithilfe der AI-unterstützten IDE Cursor.
Jetzt lesen
UX SNACKS Episode #2 mit Markus Pirker
In Episode 2 hat Susanne Markus, CEO von Userbrain & Host UX Heroes Podcast zu Gast.Markus teilt seine Erfahrungen aus über 15 Jahren im UX-Bereich und erklärt, warum User-Testing mit echten Menschen noch immer unersetzlich ist, wie man [...]
Jetzt anhören