Die ABAKUS Website von 2002 bis heute
Das erste Design (2002)
Das zum damaligen Zeitpunkt aktuelle ABAKUS Logo bildet die Grundlage der ersten ABAKUS Website. Dunkelrot und dunkelblau beherrschen folglich das Farbschema. Überschriften sind in rot gehalten, die Links bzw. Menüpunkte im klassischen blau. Das dreispaltige Layout besteht aus Navigation bzw. Logo links, dem Inhaltsbereich in der Mitte und den Infokästen mit Newsletter-Anmeldung, dem Link zum Forum, Partnerprogrammen… auf der rechten Seite. Fotos oder Grafiken kommen kaum vor, um die Ladezeit nicht unnötig zu verlängern. Die Breite des Layouts erstreckt sich über den ganzen Bildschirm. Damals surften die meisten User noch mit kleinen Monitoren. Daher war die unbegrenzte Breite kein Problem und die Texte der Seite waren für die meisten User gut lesbar.
Viel hat sich in den letzten 19 Jahren verändert. Der häufig vorkommende Begriff Webpromotion ist nicht mehr üblich und ein Wortungetüm wie Webseitenförderungsaktivitäten haben wir längst von unserer Website verbannt. Nach wie vor aber gilt, was wir schon 2002 auf unserer Seite geschrieben haben:
Technische Umsetzung
Die Seite besteht aus mehreren ineinander verschachtelten HTML-Tabellen mit leeren Tabellenzellen als Gestaltungselementen und festen Größenangaben innerhalb der Tabellenelemente. Klingt kompliziert, ist es auch. Stark vereinfacht erfolgt die Umsetzung folgendermaßen:
Eine Tabelle mit drei Spalten, in denen sich die jeweiligen Inhalte befinden. Die Positionierung der Elemente gestaltet sich mühsam. Um rechts neben dem Logo 10 Pixel Abstand zu schaffen, fügte man mit der damaligen Technik einfach eine leere 10 Pixel breite Tabellenspalte ohne Inhalt ein
<td width=“10″></td>.
HTML-Tabellen zur Gestaltung von Webseiten erwiesen sich als nicht zweckmäßig, schon bald gab es neue Techniken.
Runde Sache (2006)
2006 rundeten wir die Website im wahrsten Sinne des Wortes ab. Die einzelnen Elemente stellten wir mit abgerundeten Ecken dar, hinterlegten einen farbigen Hintergrund und zentrierten die Website mittig. Wir fügten einen Header mit dem Logo links und den Trust Elementen bzw. Zertifizierungen rechts ein. Die einzelnen Elemente grenzten sich klarer voneinander ab und hatten einen leicht farbigen Hintergrund.
Zur Neugestaltung der Seite haben wir einen Wettbewerb im Forum gemacht. Forenmitglieder reichten verschiedene Website-Entwürfe ein. Anschließend stimmten die Forennutzer ab. Der Siegerentwurf stammte von Weddig & Keutel und bildete die Basis für unser neues Design.
Technische Umsetzung
Die Website von 2006 ist mit div-Containern umgesetzt. Das CSS ist teilweise inline direkt hinter die Elemente geschrieben. Alle grafischen Elemente sind Gif-Dateien, die genau positioniert das gesamte Layout ergeben.
Die Grafiken für die linke bzw. rechte Ecke setzten Webdesigner an feste Stellen, der mittlere Teil ist dehnbar und passt sich der Breite an. So entstanden zur damaligen Zeit die abgerundeten Designelemente.
Das Jahr der Giraffe (2009)
2009 rückt das Logo nach rechts, dafür kommt die Giraffe auf die linke Seite. Es gibt nur noch leichte Rundungen, die ganze Website wirkt sachlicher. Die Farben und Schriften sind dezenter. Ein Slogan befindet sich der Mitte des Headers und die Inhalte links und rechts stecken in leicht abgerundeten Kästen mit beigem Hintergrund. Die Schriftgröße der Menüpunkte ist etwas kleiner. Statistiken, um die Wichtigkeit von SEO zu betonen, platzieren wir auf der rechten Seite.
Technische Umsetzung
Wir lagerten das CSS aus. HTML und CSS waren von nun an voneinander getrennt. Die Suchmaschinen mussten so erheblich weniger HTML-Code verarbeiten. Die Breite ist auf 970 Pixel beschränkt und das Layout in der Mitte platziert.
Die CSS-Befehle zum Stylen der HTML-DIVs befinden sich gesonderten Dateien. Dadurch ist das Ganze übersichtlicher und Layout-Änderungen gehen erheblich schneller.
Ein Licht geht auf (2015)
2015 ging uns ein Licht auf, zumindest auf der rechten Seite des neuen Designs. Die Headerelemente befanden sich auf einer virtuellen Pinnwand, das ABAKUS Logo positionierten wir standardmäßig wieder links oben. Die Agenturleistungen listeten wir fein säuberlich auf der linken Seite auf. Einige Menüpunkte hoben wir hervor, indem wir sie im Kopfbereich der Seite befestigten.
Technische Umsetzung
HTML Container und CSS Gestaltung waren getrennt. Der Header bestand aus einer einzigen Grafik. Die einzelnen Elemente platzierten wir pixelgenau. Das Logo hatte beispielsweise einen Abstand von 64 Pixeln von oben und 34 Pixeln von links.
Bei dieser Technik erzeugen Grafiker die Bilddateien und HTML-Experten positionieren dann die einzelnen Elemente auf diesen Grafiken.
Happy Birthday (2017)
Zum 15.Geburtstag der Firma gönnten wir uns bei ABAKUS ein neues Layout. Das übersichtliche Design funktionierte problemlos auf dem Smartphone und setzte auf große Fotos und klar voneinander abgegrenzte Inhaltsbereiche. Die Telefonnummer und die Mail-Anschrift im oberen Bereich dienen der schnellen Kontaktaufnahme. Die Fotos sollen emotionalisieren und ein positives Nutzererlebnis ermöglichen.
Technische Umsetzung
Die Smartphonetauglichkeit steht im Vordergrund, bei sämtlichen Unterseiten beziehen wir die mobile Version in unsere Designüberlegungen ein. Die Website soll auf dem Smartphone übersichtlich aufgebaut und schnell zu laden sein. Der Header ist fixiert. So behalten User die Menüpunkte und Kontaktmöglichkeiten auch beim Scrollen jederzeit im Blick.
Übersichtlich und modern (2020)
Das neue Layout zeichnet sich durch Übersichtlichkeit und leichte Bedienbarkeit aus. Links oben fassen wir die wichtigsten Inhalte der jeweiligen Seite stichpunktartig zusammen. Ein auf dem Smartphone ausgeblendetes Foto sorgt rechts daneben für optische Auflockerung. Rechts oben bieten wir unseren Kunden Kontaktmöglichkeiten und eine interne Suche. Die in der Komplementärfarbe grün gehaltenen Conversion-Buttons bieten eine weitere Möglichkeit der Kontaktaufnahme.
Technische Umsetzung
Eine gut funktionierende Smartphoneversion und eine schnelle Ladezeit zeichnen das Layout aus. CSS3 erleichtert die Arbeit. Abgerundete Ecken stellen kein Problem mehr da. Grafiken werden zu diesem Zweck nicht mehr benötigt. Die Inhaltsboxen sind mit CSS3 realisiert. Eine andere Farbe bzw. eine stärkere Rundung stellt man im CSS-Code ein. Das Erstellen und anschließende Zusammensetzen von einzelnen Grafiken entfällt.
Ist bei den Infokästen eine stärkere Rundung und ein schwächeres grau erwünscht, ändert man einfach den Quelltext in border-radius:20px; und background:#ccc;.
Die Profilbilder oberhalb der Blogbeiträge und sämtliche anderen abgerundeten Fotos liegen im quadratischen Format vor. Die Rundungen entstehen durch die entsprechenden CSS-Eigenschaften. Die Bearbeitung der Fotos in einem Grafikprogram fällt weg.
Fazit
Im Internetbereich ändern sich regelmäßig die technischen Voraussetzungen. Neue HTML-Techniken entstehen und bringen Verbesserungen. Die kleinen Beispiele in diesem Beitrag verdeutlichen die Vielfalt der vorhandenen technischen Möglichkeiten.
Anzeige
Über Marcel Sarman
IT-AbteilungMarcel Sarman betreut die ABAKUS Website und entwickelt sie weiter. Er ist unser Experte für HTML5, CSS3 und WordPress und schreibt Beiträge für unsere Seite.
Alle Artikel von: Marcel Sarman
