Quicknav Close

Die neue cloudtec Webseite

Besser denn je!

Für uns ist es klar, dass wir mit unserer eigenen Webseite ein starkes Statement machen müssen. Denn Web-Technologien und Software-Entwicklung sind unsere Kernkompetenzen. Darum haben wir uns zum Ziel gesetzt, eine moderne, schöne und responsive Webseite zu entwickeln, die auf allen Geräten funktioniert und auch viel Inhalt gut und übersichtlich darstellen kann.

Zu Beginn haben wir unsere bestehende Webseite analysiert, die Statistiken ausgewertet und entsprechend neue Schwerpunkte festgelegt. Wir haben für die alte Webseite viele Komplimente bekommen. Da sie jedoch nicht für mobile Geräte optimiert war, konnten wir einfach nicht länger damit leben. Auch hat sich unsere strategische Ausrichtung etwas verändert, sodass gewisse Kompetenzen mehr hervorgehoben werden sollten als andere.

Mock-ups, Mock-ups, Mock-ups

Ein gutes Webseiten-Konzept ist einfach wichtig. Wir haben unzählige Mock-ups erstellt und an der Strukturierung der Webseite gearbeitet, bevor wir mit der grafischen Umsetzung gestartet haben.

Mockup-Übersicht
Mock-up Übersicht

Wir haben mit verschiedenen Gliederungsformen experimentiert und Navigationskonzepte erarbeitet. Weiter wollten wir viele kleine Widget für unsere neue Webseite entwickeln. Sogenannte „calls for action“ sind Widgets, welche wir ganz einfach überall im CMS platzieren können, wo sie passend sind. Auch mussten wir uns viele Überlegungen bezüglich Responsive Design machen, da die Logik der Webseite situativ angepasst werden soll.

Original Mockup für unseren Blog
Erstes Mock-up für unseren Blog

Grafische Umsetzung

Sobald die Mock-ups abgeschlossen und alle mit dem Konzept und den verschiedenen Webseiten-Layouts einverstanden waren, machte sich unser Grafiker an die Arbeit.

Wir bevorzugen Designs, die mit Photoshop umgesetzt sind, da sie pixelgenau sind und wir mit „Adobe Extract“ alle Schriftgrössen, Paddings, Grafiken, Farben und Bilder sauber exportieren können.

Alle unsere Designs sind 100% Eigenkreationen.

Darum haben wir für unsere neue Webseite auch ein eigenes Icon-Set kreiert. Nur so können stilvolle und passende Icons für die gesamte Webseite gefunden werden.

Eigenes einzigartiges Icon-Set
Eigenes einzigartiges Icon-Set

SVGs sind vektorbasierte Grafiken. Wir versuchen, wann immer es geht, Bilder und Icons in diesem Format in die Webseite zu integrieren. Der grosse Vorteil hierbei ist, dass Logos, Icons und Illustrationen gestochen scharf auf hochauflösenden Displays dargestellt werden. Im Display-Markt tut sich einiges und in ein paar Jahren werden 4K-Auflösungen der Standard sein. Darum setzen wir bereits heute auf vektorbasierte Grafiken.

Technische Umsetzung

Als erstes haben wir die verschiedenen Layouts aus Photoshop extrahiert und in Handarbeit HTML-Code geschrieben, der das Layout 1:1 abbildet – ja, pixelgenau. Sobald die Vorlagen erstellt waren, konnten wir sie mit MODX, dem Content Management System unserer Wahl, verknüpfen und damit beginnen die Logik einzuprogrammieren. Bei der technischen Umsetzung für die Webseite haben wir die neusten Technologien verwendet. Wir setzen auf SASS und generieren mit Gulp dynamisch CSS-Dateien, die komprimiert und verkleinert sind. Weiter sind fast alle Animationen auf der Webseite mit CSS3 umgesetzt. Es wurde nur wenig JavaScript verwendet. Für das Responsive Design arbeiten wir mit Media Queries und spezifischen Klassen, die auf die einzelnen HTML-Elemente gesetzt werden. Je nach Gerätetyp können wir so ganz explizit Elemente ausblenden, anders positionieren, verkleinern usw. Auf Performance, Caching, schnelle Ladezeiten und das Erfüllen neuster Webstandards und Google-Richtlinien legen wir natürlich immer besonders Wert.

Intelligent umgesetzt
Intelligent umgesetzt

Das Resultat

Wir haben viel Zeit und Herzblut in unsere neue Webseite gesteckt. Und wir sind der Meinung, dass sich dies doch sehr gelohnt hat.

Gerne bieten wir unsere exklusive Dienstleistung auch für Ihr anspruchsvolles Webseiten-Projekt an. Weitere Informationen finden Sie hier: Webseiten-Entwicklung.

by cloudtec Veröffentlicht: Aktualisiert: 24. May 2019

Die neue cloudtec Webseite cloudtec AG
Sandrainstrasse 17 3007 Bern Switzerland