So ist unsere neue Website entstanden

Seit einigen Tagen ist unsere neue Website cyon.ch nun online. Uns erreichten dazu zahlreiche Komplimente, dafür ein herzliches Danke.

Gerne gewähren wir Ihnen hier einen kleinen Einblick in die Entstehungsgeschichte des neuen Webauftritts.

Das Design

An der neuen Optik waren drei Parteien beteiligt.

1. Die renommierte Agentur iA aus Tokyo/Zürich hat uns das Design für die Startseite und das my.cyon geliefert.
   

   Eine frühe Fassung unserer neuen Startseite

2. Die neuen Illustrationen unserer drei Früchte hat die Agentur nothing aus Bern beigesteuert.
3. Und schliesslich haben wir noch selbst den virtuellen Pinsel angesetzt und das Design im Verlaufe des Projekts verfeinert und auf die weiteren Unterseiten portiert.

Die Technik

Die Umsetzung der Designs in HTML5 und CSS3 haben wir selber vorgenommen. Dieses Video zeigt, wie unsere Startseite entstanden ist. Auf dem zweiten (nicht sichtbaren) Bildschirm wurde der Code geschrieben. Das Ergebnis haben wir in ein Zeitraffer-Video verpackt:

Das neue cyon.ch entsteht… from cyon GmbH on Vimeo.

Auf Serverseite wird die Website mit PHP zusammengesetzt. So werden z.B. auf jeder Website die Datei header.php und footer.php eingebunden, damit kein Code doppelt vorhanden ist.
Die „sprechenden URLs“ werden

1. über das Anlegen von Ordnern und
2. das Entfernen der Endung .php erzielt.

Die Adresse https://www.cyon.ch/shared-hosting/infrastruktur beispielsweise öffnet die Datei infrastruktur.php aus dem Ordner shared-hosting.

Auf ein CMS haben wir bewusst verzichtet, da dies in unserem Fall zusätzlichen Aufwand bedeutet hätte. Sollte der Wunsch nach einem CMS doch einmal wachsen, würde die Website kurzerhand migriert.

Die Hilfsmittel

Für den Aufbau der Website kamen verschiedene Helferlein zum Einsatz. Die wichtigsten sind:

• Netbeans und Coda: Zwei wunderbare HTML und CSS Editoren.
• Git: für die Verwaltung des Codes bzw. des Inhalts der Website. Unsere Freunde grafischer Oberflächen setzen dabei auf Gitbox.
• jQuery: für alles, was sich bewegt. Der Quasi-Standard unter den Javascript-Frameworks.
• HTML5 ★ Boilerplate: damit man das Rad nicht neu erfinden muss.
• CSS3 PIE: damit CSS3 auch im Internet Explorer hübsch aussieht.
• Chrome Developer Tools: damit man direkt im Browser die Seite bearbeiten kann.
• LiveReload: damit man am Schluss des Projektes noch Farbe auf der F5-Taste hat.
• Es würde uns freuen, wenn wir mit diesem Einblick für das eine oder andere zukünftige Webprojekt Anregungen geben konnten und sind natürlich wie immer auf Ihre Rückmeldungen und Erfahrungen gespannt.