Die ABAKUS Website von 2002 bis heute

Marcel Sarman  Marcel Sarman in ABAKUS am 11. März 2021

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.

ABAKUS Website 2002 - Screenshot

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:
ABAKUS Motto - Screenshot

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:
Tabellenaufbau der ABAKUS Website 2002
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.
ABAKUS Website 2006 - Screenshot

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.
Abgerundete Ecken - HTML-Technik von 2006
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.
ABAKUS Website 2009 - Screenshot

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.
HTML-Technik von 2009
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.
ABAKUS Website 2015 - Screenshot

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.
HTML-Technik von 2015
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.
ABAKUS Website 2017 - Screenshot

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.
Smartphoneversion und fixer Header

Ü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.
ABAKUS Website 2020 - Screenshot

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.
CSS3: border-radius
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.




Beitrag kommentieren

EINE ANTWORT HINTERLASSEN

Dein Kommentar wird vor der Freischaltung von einem Admin moderiert.



Marcel Sarman

Über Marcel Sarman

IT-Abteilung

Marcel 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:

Verwandte Beiträge

Das neue ABAKUS SEO Lexikon

Seit Kurzem gibt es auf der ABAKUS Webseite einen neuen Bereich zu entdecken: Das SEO Lexikon. Hier wird Fachvokabular aus der Welt der Suchmaschinenoptimierung einfach und verständlich erklärt. Damit wollen wir unserer Leserschaft noch umfassendere Informationen bieten und diese mit möglichst wenig Klicks zugänglich machen. Denn auch, wenn wir bereits viele SEO-Begriffe in unseren Blog-Artikeln

> WEITERLESEN …

 
ABAKUS ist Mitglied im Vereins- und Unternehmernetzwerk VUN

Die ABAKUS Internet Marketing GmbH ist seit April 2021 Mitglied in dem Vereins- und Unternehmernetzwerk VUN. Das größte Vereins- und Unternehmernetzwerk der Region Hannover hat es sich zur Aufgabe gemacht, Unternehmen aus der Region Hannover miteinander zu vernetzen und deren Austausch zu fördern. Derzeit sind mehr als 200 Vereine und Unternehmen im Vereins- und Unternehmernetzwerk

> WEITERLESEN …

 
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

> WEITERLESEN …

 
SEO 2021 – Was bringt das neue Jahr?

In der gegenwärtigen Situation verlagern sich viele Aktivitäten ins Internet. Onlineshops verzeichnen steigende Umsätze und viele Internetseiten haben mehr Besucher. Eine suchmaschinenoptimierte Website bildet mehr denn je die Grundlage eines erfolgreichen Unternehmens. Wir bei ABAKUS reagieren auf die veränderte Lage und bieten neue Dienstleistungen wie Workshop Video Konferenzen an. Unsere bewährten Leistungen wie SEO Consulting

> WEITERLESEN …