Relaunch liechtenecker.at

18. April 2013, von Jürgen

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.
relaunch20132
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 🙂

Jürgen

Meine Rolle bei Liechtenecker: - Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: - Mein Herz schlägt für: -
4 Kommentare.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
22. April 2013 um 12:02

Ein wirklich gelungener relaunch. Ein simpler Layout, cutting-edge Technologien und tolle Typographie.
Mir fehlt aber eine Seite vo man die Leute die dort arbeiten sehen konnte (eine Team Seite oder so etwas) und man kann nicht nach Authoren im Blog suchen.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
19. April 2013 um 23:29

sehe nur gerade die iphone-variante. sieht sehr aufgeräumt und chic aus.
was mir aber auffällt ist, dass die seite leicht horizontal scrollt. dies stört vor allem beim vertikalen scrollen.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
18. April 2013 um 18:05

Sehr starker Auftritt! Auch das responsive Layout und die OpenSans als Webfont… funktioniert super.
Meine Gratulation!
Liebe Grüße aus dem 4. Bezirk,
Alex

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
18. April 2013 um 14:41

Wirklich sehr gut gelungen der Relaunch! love the simplicity – vor allem die Icons….da ich mich auch immer über konstruktive Kritik freue: mir persönlich sind die Buttons etwas zu breit – aber das ist ja bekanntlich Geschmacksache 😉
Viel Erfolg weiterhin – freu‘ mich schon auf die nächsten Blog-Einträge…
Lg

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Natalia und Marion reden über Usertests
UX/UI Design – Blogbeitrag

9 Fragen zum User Test – was Sie als Auftraggeber wissen sollten

18. September 2019, von Natalia

Euch steht ein User Test bevor? Die Agentur schreibt irgendwas von einem Usability Testing ins Angebot? Und ihr fragt euch jetzt, was das alles bedeutet? Dann lest hier die häufigsten Fragen und Antworten zum Thema User Testing.

Jetzt lesen
Susanne Liechtenecker und Christiane Bertolini
Inspiration – Podcasts

Folge #52 mit Christiane Bertolini

27. September 2019

Christiane Bertolini ist Betriebswirtschafterin und seit der Jahrtausendwende unternehmerisch tätig. Als Entwicklerin, Inkubatorin, hands-on Trendexpertin und Sparringspartner agiert sie cross industries, immer mit einem speziellen Twist.

Jetzt anhören
Close