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

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 …

 
Wir begrüßen zwei neue Mitarbeiter im ABAKUS-Team!

Wir freuen uns, neue Mitarbeiter bei ABAKUS Internet Marketing willkommen heißen zu können. Sowohl im Bereich OnPage- als auch in der OffPage-Optimierung haben wir Verstärkung erhalten, die wir in diesem Beitrag näher vorstellen möchten. SEO-Abteilung: Stefan Wall Stefan Wall hat seine Stelle als SEO Manager im Dezember 2020 angetreten. Er kennt sich nicht nur mit

> WEITERLESEN …

 
ABAKUS kooperiert mit Experten-Verzeichnis „let’s find experts“

Mit den ABAKUS Personal-Branding-SEO-Paketen helfen wir Personen mit Expertenstatus dabei, ihre Präsenz im Web zu stärken und auf sich und ihre Expertise aufmerksam zu machen. Der Aufbau einer Personenmarke hat viele Vorteile für Selbstständige, Trainer und andere Experten: Die Glaubwürdigkeit wird gestärkt und die personenbezogene Kompetenz wird anhand von kommunizierten Fakten hervorgehoben. Die Webseite https://www.letsfindexperts.com/

> WEITERLESEN …

 
ABAKUS Internet Marketing ist Top 100 SEO Dienstleister 2020

Bereits seit vielen Jahren überzeugt die ABAKUS Internet Marketing GmbH als SEO Agentur. Auch 2020 gehörten wir zu den Top 100 Anbietern für professionelle Suchmaschinenoptimierung. Wer bewertet die SEO Dienstleister? Erstellt wird die jährliche SEO-Liste vom Magazin iBusiness (HighText-Verlag). iBusiness informiert über innovative Märkte, digitale Transformation und interaktive Medien. Das Magazin führt Markterhebungen, Szenarien-Entwicklungen und

> WEITERLESEN …