"Re:thinking the web" - die cloud19 Webseite

Im August haben wir uns dazu entschlossen, unserer veralteten Webseite ein neues Gesicht zu verpassen, das sich vor allem durch seine Klarheit und sein zukunftssicheres Design auszeichnet. Hier ein kurzer Bericht über unsere Hintergedanken und die Schwierigkeiten, die gelöst wurden.
"Re:thinking the web" - die cloud19 Webseite

www.cloud19.at - the responsive way

Als Schmiede für moderne und innovative Webseiten liegt einem beim Design der eigenen Webseite natürlich eine gewisse Last auf den Schultern. Anforderungen und Kritik sind durchaus etwas Gutes, jedoch ist man selbst bekanntlich sein größter Kritiker. Dadurch haben wir unsere Anforderungen überdurchschnittlich hoch gesteckt.

Unsere Webseite soll folgendes repräsentieren:

  • Wer wir sind

  • Was wir machen

  • Wie gut wir es machen

  • Was wir schon gemacht haben

Um diese Punkte ordentlich zu präsentieren, bedarf es natürlich auch der passenden Technik. Wir haben es uns als Ziel gesetzt, folgende Techniken zu verwenden und bestmöglich einzusetzen:

  • Plone, Zope, Python

  • HTML5, CSS3

  • Responsive Webdesign

  • Flat Design



Plone, Zope, Python

Mit diesem großartigen Stück Technik gehen wir ganz und gar nicht den Weg des geringsten Widerstandes. Da PHP die weit verbreitetste Sprache zur Webprogrammierung ist, liegt es vielen Personen sehr nahe, diese zu verwenden. Jedoch muss das meist Verwendete nicht immer das Beste sein.

Plone ist ein CMS, das es bereits seit 2002 gibt und aktuell in der 5ten Version aufliegt. Es sticht besonders durch seine Benutzerfreundlichkeit und Performance hervor. Weiters zählt es zu den sichersten CMS Systemen der Welt und besitzt gleichzeitig enorme Flexibilität, um es an fast jeden Verwendungszweck anzupassen. Python punktet durch seine enorme Performance und seine hohe Sicherheit. Dadurch bietet es die perfekte Basis für anspruchsvolle Applikationen und Seiten im Web. Auf dieser sehr soliden Basis baut der Zope Application Server auf. Zope ist ein open source Webserver, der, wie auch Python, durch seine Performance und extreme Sicherheit punktet.

Sicherheitsvergleich anhand "National Vulnerability Database" Einträgen:

CMSFehler
Plone 21
Django 31
Drupal 660
Typo3 364
Joomla 772
Wordpress 543

(weniger ist besser)
http://nvd.nist.gov/ 

 

HTML5, CSS3

Obwohl HTML5 und CSS3 noch keine Standards sind, gibt es bereits sehr weit ausgeführte „Working Drafts“. Das heißt, dass man schon damit arbeiten kann, jedoch gib es noch keinen einheitlichen Standard und es kann zu unterschiedlicher Unterstützung in Browsern kommen. Dennoch haben wir uns dazu entschieden, die neue Technik so gut es geht auszuschöpfen und unsere Webseite auch schon für die Zukunft fit zu machen.

Found at: http://www.mdproductions.ca/guides/why-html5-is-the-future-of-the-web-and-what-features-come-with-it

Um unser CSS bestmöglich umzusetzen, wurde LESS verwendet. LESS ist ein Compiler, der eine neue Art von Stylesheets mit sich bringt. Dadurch kann man in Stylesheets nun auch ansatzweise programmieren. Es gibt Ansätze von Vererbung, Variablen, Funktionen und viele weitere, sehr nützliche Funktionen. Hierbei entsteht quasi eine neue Sprache, die das klassische CSS um einiges erweitert. Jedoch kann der Browser nicht damit umgehen, darum muss es vorher durch den Compiler, der wieder ein standardkonformes Stylesheet erzeugt.

 

Responsive Design

Seit den letzten Jahren gibt es ein neues Konzept für die Programmierung von Webseiten. Dieses nennt sich responsive Webdesign. Seit das Smartphone immer mehr Einzug in unser Leben nimmt, gilt es jede Webseite auch für Smartphones und Tablets benutzbar zu machen. Bislang wurde das mit einer speziellen Webseite gelöst, die nur für diesen Zweck gefertigt wurde. Das Ziel von responsive Webdesign ist es, eine Webseite zu gestalten, die sich an den Bildschirm des Endgerätes anpasst und so auf allen Geräten funktioniert.

Screens by placeit.breezi.com

Die Schwierigkeiten die sich ergeben sind, ein Konzept zu finden, das es jedem Benutzer erlaubt, auf einem Smartphone genauso einfach zu navigieren und die gleiche Qualität an Inhalten zu bekommen wie auf einem Desktop-PC.

 

Flat Design

Seit 2012 gibt es im Webdesign noch eine weitere, neue Bewegung. Diese bezieht sich jedoch nicht auf Funktionalität, sondern auf das Aussehen der Webseite. Idealerweise ergibt sich durch ein besseres Aussehen jedoch auch bessere Funktionalität und vor allem eine einfachere Bedienung.

Flat Design hat es sich als Ziel gesetzt, weitestgehend von 3D Effekten und Schatten Abstand zu nehmen und eine Webseite dadurch ganz flach zu halten.

http://www.lushtype.com/ 

So werden alle Elemente auf das wirklich Wesentliche reduziert und maximal vereinfacht. Dadurch wird eine extrem klare Seitenstruktur erreicht, die es jedem Benutzer erleichtern soll, auf einer Seite zu navigieren. In seltenen Fällen findet jedoch hin und wieder ein Schlagschatten oder eine abgerundete Kante Einzug in eine Seite, um vor allem als Abgrenzung oder Verschönerung zu den meist sehr ähnlichen Farbtönen zu fungieren.

 

Easter Egg

In Zusammenarbeit mit dem büro sterngasse*, kam uns die Idee zu einem netten easter egg. Easter eggs sind in der IT vor allem versteckte Funktionen oder Informationen, die den Benutzer zum Schmunzeln bringen sollen. Ganz so lustig ist unser easter egg zwar nicht, jedoch trotzdem sehr nett und nützlich. Auf der Homeseite und manchen Unterseiten unserer Webseite wird im Kopfbereich ein Slider (Mostslider von Julian Handl) angezeigt. Mit Hilfe der Livedaten von Yahoo Weather wird als Hintergrundbild immer ein Foto gewählt, das die aktuelle Wettersituation in Melk (Standort von cloud19) widerspiegelt.

 

Schlusswort

Insgesamt sind wir mit unserer neuen Webseite sehr zufrieden. Das Verwenden der angewandten Techniken hat wieder einige Knöpfe im Kopf gelöst und uns für neue Kundenprojekte bereit gemacht. Plone als CMS zu verwenden ist und bleibt eine der besten Entscheidungen, die man als Unternehmen treffen kann.