Es war mal wieder Zeit für Veränderungen. Meine erfolgreiche persönliche Website www.greg.ch, aktuell in der Version 10, begann mitten im ersten Internet-Boom im Jahre 1999. Die Versionen 1 bis 9 gestaltete ich alle sehr unterschiedlich – kreativ und fantasievoll.

Für die Version 10 machte ich eine informative Website ohne viel Schnickschnack: Die Website kommt schon auf der Startseite sofort auf den Punkt, zeigt einige von mir entwickelte Websites, Kompetenzen, Reaktionen und Client Locations (Weltkarte) – alles auf einer Seite.

Eine moderne Website muss rasch und kompakt zur Sache kommen. Und Fragen der BesucherInnen beantworten. In maximal 20 Sekunden. Sonst sind sie weg.

1.) Layouts und Typografie

Die Layouts habe ich durchgehend optimiert und generell mehr Weissraum hinzugefügt. Meine Website ist nicht 100% breit, denn ich will nicht, dass meine Visitors ständig nach ganz links und ganz rechts blicken müssen – wie heutzutage leider üblich. Benutzerfreundlich ist eine kompakte, übersichtliche, auch visuell leicht zu navigierende Site.

Die Webdesign Trends 2026 gehen eindeutig in Richtung eines einheitlichen, weil bei Usern bewährten Musters: ein simples Logo oben links, darunter ein zusammenfassender Claim in grosser Schrift, darunter 2 CTA (call-to-action) Buttons, Farbverläufe (Gradients) in Hintergründen und Überschriften, Card Design mit abgerundeten Ecken, Count-in Pills, 3 Columns, viele CSS Slide-Ins, extrem gut lesbare Schriften etc.

Im Web haben viele neue Sites: einen schwarzen oder sandfarbenen Hintergrund, viele Animationen und hereinfliegende Seitenelemente. All das soll cool wirken. Fast alles bewegt sich — überraschend soll es sein. Aber: Die heutige hektische Welt ist geprägt von Reizüberflutung. Überall wird man von Werbung und visuellen Effekten überschwemmt. Und immer mehr alte Menschen sind im Internet. Was sollen diese mit dem ganzen Zirkus anfangen? Ich laufe nicht jedem Trend nach — tat ich noch nie. Zwar studiere ich die Trends, doch setze ich nur das um, was mir sinnvoll und erträglich erscheint. Zu viele Website-Effekte sind spätestens beim dritten Besuch nur noch nervig. Was ich NICHT mache: So was . Modernes Webdesign?

Schon rund 30% aller neuen Websites sind KI-generiert — und man sieht es ihnen sofort an: kein persönlicher Touch, absolut langweilig, kein Erfolg.

Für die Typografie wählte ich den Font "Oxygen" in Schriftstärke 400 für Copy und 700 für Headings. Die Schriftart wirkt klar und zeitgemäss. Die Schrift besitzt offene Buchstabenformen ("open counters") und eine monolineare Struktur (gleichmässige Strichstärken), wodurch sie auch auf kleineren Bildschirmen leicht und transparent wirkt.

Manchmal ist es notwendig, für ein sauberes Schriftbild die Texte so lange zu verändern, bis sie ein perfektes Layout ergeben:

2.) Mobile Layouts

Basierend auf Mobilgeräten entwickelte ich mit Responsive Web Design kompakte Layouts für kleine Bildschirme. Mein Smartphone Layout weist einige Besonderheiten auf: Der Lead (Einführungstext) wird verborgen, der Background Kontrast ist höher (Handy Darstellung braucht mehr Impact), und die Navigation habe ich so gelöst, dass die User sofort sehen, was angeboten wird (nur 4 Bereiche). In einigen Kundensites machte ich typische "Hamburger Menus" (3 horizontale Linien mit Klappmenu), aber in meiner eigenen Site mag ich das nicht. Das "Verstecken" der Website-Bereiche in einem Dropdown-Menu führt meistens dazu, dass Smartphone-User nur wenige der Menupunkte antippen — statt alle.

3.) Dark Mode

Meine Website hat jetzt einen "Dark Mode" (Dunkelmodus) mit einem Theme Umschalter (auf Desktops). Dies ist heute ein Bedürfnis vieler User. Das Farbschema im Dunkelmodus ist anders, so wird z.B. das dynamische Orange zu einem angenehmen Hellbraun. Diverse Bilder musste ich ändern, damit sie auf dunklen Backgrounds funktionieren.

4.) Print Design

Da es auch heute noch User gibt, die (tatsächlich!) eine Webpage kurz ausdrucken möchten, entwickelte ich ein Print Design für alle Webpage-Typen. Dabei entstehen saubere Page-Breaks ohne abgeschnittene Bilder oder unterbrochene Content-Blöcke. Alle für den Druck unnötigen Elemente, z.B. die Menus, werden herausgefiltert. Spezielle Seitenelemente wie Texte mit Typing-Effekt, CSS Slide-Ins oder "Masonry" Layouts musste ich separat umwandeln. Dies ergibt brauchbare Printouts.

5.) Performance

Fakt: Homepages können eigentlich nie schnell genug laden, denn heutige WebuserInnen haben immer weniger Geduld. Ich habe darum mit speziellen Methoden die Ladezeit meiner Homepage verbessert und einen Page-Footer eingebaut, der die Resultate der üblichen Google Qualitätstests ("PageSpeed Insights") anzeigt. Wie bei mir zu erwarten: 4 x 100%. Meine Homepage lädt in nur 0,5 Sekunden.
Hier zum Vergleich: die wichtigste Website der Schweiz www.admin.ch



Laut httparchive.org haben Homepages aktuell eine gesamte durchschnittliche Dateigrösse von 2'994 KB. Meine Homepage hat nur 370 KB. Meine Website besteht aus nur einem PHP File, nur einem CSS File, und nur einem JS File. Plus Assets wie Bilder. Ich mag es extrem kompakt und schnell.

6.) Interface Details

Gute Webdesigner erkennt man an den Details — vor allem an der Benutzerfreundlichkeit. Soll heissen, die User sind einem wichtig! Zum Beispiel:

• Mein Sprach-Umschalter macht jedem User klar, welche Sprache angewählt ist
• Meine Menupunkte haben einen Untertitel, damit man versteht was man anklickt
• Die Feedback Box zeigt mit einem orangen "Progress Bar", wie lange es noch geht
• Eine Seite hat einige Zwischentitel, die ich mit einem subtilen 3D-Effekt gestaltete



In meinem Page Footer biete ich eine Sitemap an, damit User direkt weiterklicken können, anstatt zuerst an den Seitenanfang scrollen zu müssen (wo das Top Menu ist). In einigen Sites löste ich das Problem mit einem "sticky" Top Menu, was Vor- und Nachteile hat.

7.) Website Search

Die Suchfunktion auf GREG.CH liefert schon während des Tippens blitzschnell passende Treffer — dank "AJAX" und Live Search ganz ohne Neuladen der Seite. Sie durchsucht gleichzeitig Inhalte aus der Datenbank und statische Seiten der Website. So lassen sich Blogbeiträge, Projekte, Feedback und persönliche Inhalte bequem über ein einziges Suchfeld finden. Das kompakte Layout zeigt die Ergebnisse direkt an Ort und Stelle und kennzeichnet übersichtlich, aus welchem Bereich sie stammen. Auch meine Musik ist dabei: Ein Klick auf einen gefundenen Track öffnet die Musikseite in einem neuen Tab direkt beim passenden Stück.

8.) Website Security

Unter meinen Kundenprojekten befinden sich hochsichere Websites, für die ich zum Beispiel einen USB-Dongle für das User-Login programmierte (bbretrace.com). Oder einen serverseitigen Schutz von geheimen Konstruktionsdateien im Bereich Brückenbau. Oder Web-to-SMS Messaging zwecks Verifikation der Telefonnummer eines neuen Members. Website-Sicherheit war noch nie so wichtig, denn wegen KI und KI-Agenten steigt die Anzahl und Raffinesse der Hacking-Attacken im Internet extrem an.

Meine Website-Suche verwendet vorbereitete Datenbankabfragen, sogenannte Prepared Statements. Dabei bleiben die SQL-Befehle und die eingegebenen Suchbegriffe voneinander getrennt. Auch eine Eingabe, die wie ein Datenbankbefehl aussieht, wird dadurch als harmloser Suchtext behandelt. Zusätzlich sind die Länge der Suchanfragen und die Anzahl der zurückgegebenen Treffer begrenzt. Auch bei der Darstellung der Ergebnisse gibt es klare Regeln: Die Titel werden als Text ausgegeben. Enthaltene HTML-Tags oder JavaScript-Anweisungen werden dabei nicht als Programmcode ausgeführt. Die Ergebnislinks werden ausserdem darauf geprüft, dass sie zur eigenen Website gehören. Diese Massnahmen schützen meine Website vor typischen Manipulationsversuchen wie SQL-Injection und Cross-Site-Scripting.



Wichtig ist ausserdem eine serverseitige Begrenzung der Suchanfragen. Sie berücksichtigt sowohl einzelne IP-Adressen als auch die gesamte Suchlast. Kurze Serien von Eingaben bleiben möglich, automatisiertes Dauerfeuer wird gestoppt. Die Prüfung erfolgt bereits vor dem Aufbau einer Datenbankverbindung. Das Löschen von Cookies setzt diese Begrenzung nicht zurück.

Mein Kontaktformular kommt ohne Bilderrätsel und CAPTCHA aus. Stattdessen enthält es einen sogenannten "Honeypot": ein zusätzliches Feld, das für Besucher unsichtbar ist und leer bleiben soll. Spambots füllen meistens sämtliche gefundenen Formularfelder aus. Tragen sie auch dort etwas ein, erkennt die serverseitige Prüfung dieses Signal und verhindert den Versand der Nachricht. Eine weitere Hürde steckt im Absende-Button: Er wird erst nach zehn Sekunden freigeschaltet. Wer einen Betreff auswählt und seine Nachricht formuliert, bemerkt davon nichts. Für die nervigen Spambots, die sofort nach dem Laden alles ausfüllen und auf "Senden" klicken, entsteht dagegen ein Hindernis.

Die PHP-Version meiner Website halte ich stets aktuell — derzeit auf Version 8.5. Entscheidend für die Sicherheit sind regelmässige Updates und eine Version, die noch Sicherheitskorrekturen erhält. Unter manchen Entwicklern hat PHP trotzdem einen schlechten Ruf: Wer in Coder-Foren damit arbeitet, wird gelegentlich belächelt. Für moderne Webapplikationen müsse es Python, RoR, Go oder gleich das sichere Rust sein.

Doch PHP läuft nach wie vor auf rund 69% der Websites, deren serverseitige Programmiersprache bekannt ist. Es bildet die Basis von WordPress, Drupal, Joomla, Magento, E-Shops, Blogs, MediaWiki (Wikipedia) etc. Viele Websites von Gemeinden, Behörden, Spitälern und so weiter laufen auf PHP. Allein das ebenfalls oft verpönte WordPress betreibt rund 40% aller Websites (ich würde dennoch nie WordPress benutzen). PHP selbst hat sich in den letzten Jahren stark weiterentwickelt — mit einem leistungsfähigen Typsystem, moderner Syntax und deutlich höherer Geschwindigkeit. Veraltet ist vor allem sein Ruf.

9.) SEO

Ich habe die Suchmaschinenoptimierung meiner Website aktualisiert. Die index.php ist SEO-seitig sauber aufgebaut: Dynamische Title/Descriptions, canonical, hreflang (de/en/x-default), passende Robots-Regeln und JSON-LD sind aktiv. Die Google Sitemap wird gesteuert von einer aus der Datenbank erzeugten sitemap.php und liefert lastmod, changefreq, Prioritäten sowie Sprach-Alternativen für Google. Die robots.txt ist klar Google-freundlich, sperrt nur irrelevante Bereiche (z. B. Admin, Filter-URLs) und referenziert korrekt die Sitemap. In .htaccess sichern 301-Canonical-Redirects, Sitemap-Rewrite und Caching-Regeln eine moderne Basis, damit die SEO jetzt auf dem neuesten Stand und Google-freundlich ist.

10.) Logo Redesign

Hier sehen Sie die Entwicklung meines Website-Logos von 1999 bis 2026. Als Designer begann ich zu einer Zeit, in der Komplexität cool war — und landete schliesslich bei Einfachheit. Die meisten Menschen bevorzugen heute minimalistische Logos.
Ich modernisierte das Logo mit einem dynamischen "G" als Symbol.



(meine Workstation für Programming + Design + Copywriting + Composing)

11.) K.I. - mein Take

Das vermutlich allerwichtigste Thema ist Künstliche Intelligenz www.greg.ch/ai 

12.) Feedback Seite

Da meine Arbeit viel Resonanz ausgelöst hat, musste auch diese Page renoviert werden. Jetzt mit besserer Schrift und besserem Layout www.greg.ch/reactions 

13.) Projekte Seite

Für meine Kundenprojekte hatte ich die Kategorie "Social Networks". Doch was ich entwickelte, waren korrekt "Social Websites" (v.a. Online Vereinsplattformen und Dating Plattformen). Darum habe ich die Kategorie geändert .

14.) Skills Seite

Die Zusammenfassung meiner Skills war vorher unklar, da verschiedenartige Disziplinen wie Webdev und Trading gleich aussahen. Nun habe ich die Grafiken unterschiedlich gestaltet .

15.) Kundenlogos

Kundenlogos aus meinem Portfolio sind jetzt geordnet und auf A4 , gut zum Ausdrucken.

16.) Fotoseite

Meine Fotoseite www.greg.ch/photos  habe ich einheitlich formatiert und chronologisch geordnet. Als Sohn eines früheren Profi-Fotografen habe ich einen Schwarzweiss-Effekt eingebaut. Mit dieser Page zeige ich, dass ich nicht nur ständig vor dem Computer sitze.

17.) Musikseite

Für die Musikseite www.greg.ch/music  wählte ich die besten 50 Stücke aus meinen 8 CDs aus, optimierte die Qualität mit KI und designte 4 CD Covers neu. Das Layout der Seite baute ich komplett um, es ist jetzt übersichtlich. Mit dem JavaScript "Web Audio API" programmierte ich einen Audio Visualizer, der unter jedem Track läuft und sehr attraktiv aussieht.

18.) Doggy Page

Da ich einen neuen Hund habe, gibt es jetzt eine neue Doggy Page: www.greg.ch/joya 

19.) SWB

Meinen alten aber viel gelesenen Zeitungsartikel "Swiss Webdesign Business"  (sicherlich über 300k Impressions bis heute — inklusive auf Papier) habe ich gestrafft; er ist jetzt kompakter.

18.) Projekt HeartOpera

Für ein privates Webprojekt einer Neurologin (Ärztin) in Zürich machte ich eine komplette zweisprachige Website inklusive PHP8 Programmierung, Javascript Coding, HTML und CSS Scripting, alle neuen Designs und Layouts, einige Video- und Audio-Edits, und teilweise die Texte in Deutsch und Englisch.



Das Thema der Website ist moderne Performancekunst und experimentelle Musik in Verbindung mit der Zürcher Hochschule der Künste (zhdk.ch). Deshalb entwickelte ich ein modernes, klares Website Design. Primär sollte nichts von den gezeigten Kunst-Performances ablenken.

• Ich begann mit der Entwicklung des Namens: Dieser musste zum Thema passen, einzigartig sein, und als Web-Domain noch buchbar. Meine beste Idee war "HeartOpera", weil die Ärztin sich sowohl mit Medizin als auch mit Oper befasst.
• Zweitens entwickelte ich das Logo. Dieses musste ebenfalls einzigartig sein und beide Kernthemen vermitteln. Einerseits Medizin: als wichtigstes Organ das Herz ➾ Puls ➾ EKG. Und andererseits die Oper ➾ grosser Auftritt, Drama, Glamour ➾ ein grosses "O" mit Glamour. Um das Logo ansprechend zu machen, designte ich eine kurze Logo-Animation, die bei jedem Seitenwechsel (einmal) abläuft:
  
  
• Drittens bearbeitete ich den Content: Diese Website enthält aktuell 18 verschiedene Projekte — vorwiegend öffentliche Performances. Zu jedem Projekt gibt es Multimedia Content (Video oder Audio), wofür ich einige Videos und Audioclips editierte und schnitt. Weiter gibt es zu jedem Projekt zweisprachige Texte, wofür ich zwischen Deutsch und Englisch übersetzte.
• Viertens suchte ich passende Ideen für die Homepage (d.h. die Startseite), kombinierte einige Video-Szenen als "Teaser" und entwickelte einen Intro-Text (Werbetext), der das vielfältige Angebot der Website auf den Punkt bringt.
• Fünftens entwickelte ich ein zu moderner Kunst passendes Website Design, gestaltete alle Layouts und wählte die Typografie (Schriftart "Adobe Acumin Pro").
• Danach waren lediglich Details zu erledigen wie das Scripting des Responsive Webdesigns zwecks Darstellung auf mobilen Geräten wie Smartphones, das Optimieren der Ladezeiten etc.


• Die fertige Website: www.heartopera.ch 

Fazit

Nach 15 Jahren Pause als Web-Worker (Programmierer + Designer + Texter) bin ich nun wieder fasziniert von den neuen Möglichkeiten und Technologien im Web. Meine Experimentierfreude ist wieder geweckt, und ich spiele mit Ideen.

Als Sohn eines erfolgreichen Unternehmensberaters Swisscoaching  und Bruder eines selbständigen Software-Experten und IT-Supporters MacSimum Support  ist mir klar, dass berufliche Selbständigkeit eine Herausforderung ist. Im 2011 hörte ich damit auf, um mich wichtigeren Dingen zu widmen.

Manchmal vermisse ich die alte Zeit. Damals, vor gefühlt 100 Jahren, war ich ein international erfolgreicher Webdesigner mit Kunden auf fünf Kontinenten und erschien 12 Mal im Fernsehen — auf SRF1 und 3sat inklusive Wiederholungen. Oder damals, als greg.ch vom brasilianischen "TV Cultura" (70 Mio. Zuschauer) als Website des Monats präsentiert wurde — und danach meine Mailbox explodierte. Oder damals, als das Wirtschaftsmagazin "Bilanz" mich in die Liste der Schweizer "Internet VIPs" aufnahm — und die Erwartungen an mich immer höher stiegen...

Dabei war ich nur 1 Typ mit 1 PC und 1 Kaffeemaschine.

Ohne Zertifikate, ohne Kurse, ohne Fachbücher, ohne Outsourcing und ohne Werbung. Brauchte ich nicht.

Zum Schluss bleibt die Frage:

"Warum schaffen es die allermeisten Webdesigner nicht, Resonanz zu erzeugen?"

Viele machen sich eine hübsche Homepage: fehlerfreie Texte, saubere Layouts, moderne Effekte. Alles nice. Doch dann passiert: nichts. Kaum Echo, keine Reaktionen — erst recht nicht von internationalen BesucherInnen oder Medien. Der Grund liegt nicht bei JavaScript, Photoshop oder irgendeinem technischen Know-how. Er liegt tiefer: bei Menschenkenntnis, Psychologie und der Fähigkeit, Neugier zu wecken.

Zur Jahrtausendwende gab es viele technisch primitive, teilweise sogar schrottige Websites, die trotzdem enorme Resonanz erzeugten. Warum? Weil sie psychologisch clever waren. Sie spielten mit dem uralten menschlichen Impuls, etwas entdecken zu wollen. Man klickte weiter, weil man wissen wollte, was hinter der nächsten Tür steckt. Man blieb, weil eine Spannung entstand. Diese Neugier ist tief in uns verankert. Alle Tiere haben sie — also auch wir. Mit meiner jungen Hündin spiele ich täglich Verstecken; sie liebt es...

Es begann so:

1999 besuchte ich die einfache Homepage "Stoked"  von Derek Powazek. Technisch war sie unspektakulär. Aber sie faszinierte mich, weil sie mit dem Impuls des Entdecken-Wollens spielte. Sie weckte Neugier. Sie zog mich hinein. Also baute ich meine erste Homepage. Und www.greg.ch erzeugte — Bingo! — Resonanz.

Wie Menschen funktionieren und reagieren — das wusste ich damals bereits ziemlich gut. Nicht aus einem Psychologie-Studium, sondern aus meinem früheren Beruf: 16 Jahre in der Börsenwelt.

Diese Branche hatte ich nicht gewählt, weil es besonders cool ist, in Sekunden mit Millionen zu handeln. Mich interessierte etwas anderes: die Psychologie der Menschen. Ich arbeitete zum Beispiel bei der grössten Brokerfirma der Welt und erlebte dort das ganze menschliche Drama der Börse: Neugier, Hoffnung, Spannung, Belohnung, Gier, Verlust, Panik, Verzweiflung!

Alles war ständig in Bewegung. Euphorie am Morgen, Angst am Nachmittag, Absturz kurz vor Handelsschluss. Bei Merrill Lynch hatten wir Kunden, die sich das Leben nahmen, nachdem sie an der Börse alles verloren hatten. Und Junior-Trader, die schon mit 22 Ferrari fuhren und mit einer Model-Freundin auftauchten. Unser Big Boss war Marcel Ospel, der später die grösste Schweizer Bank leitete. Unser Cheftrader war Sergio Ermotti, der sie heute leitet. Das Firmenmotto von Merrill Lynch war: "A Breed Apart". In Deutsch: "Eine Rasse für sich"...

Really? Really.

Eigentlich ging es nur um Leistung und den Ehrgeiz, besser zu sein. Fehler waren verboten.

Ich sah täglich, wie extrem Menschen unter Druck reagieren. Ein Mitarbeiter war offensichtlich auf Kokain, ein anderer auf Heroin. Die Personalfluktuation war enorm. Viele blieben nur wenige Wochen und waren dann bereits am Ende. Zu viel Stress, zu viele Sprüche wie "Lunch is for Losers", zu viele Four-Letter Words.

Ich lernte in dieser Zeit mehr über Menschen als in jedem Kurs. Und genau dieses Wissen half mir später im Webdesign mehr als jede Software-Kompetenz. Denn eine Website wirkt nicht, weil sie technisch oder ästhetisch perfekt ist. Sie wirkt, wenn sie Spannung aufbaut, Neugier weckt und Menschen dazu bringt, weiter zu klicken. Das Verständnis für menschliches Verhalten, Emotionen und Instinkte ist entscheidend, um Resonanz zu erzeugen.

In meinem zweiten Fernsehporträt wurde ich von Reto Brennwald — bekannt als der kritischste TV-Moderator der Schweiz — in einem goldfarbenen Rolls-Royce gefilmt. Das passte perfekt zu meinem früheren Beruf Goldhändler. Der Wechsel in die Internetbranche war aber richtig: Was mit "Stoked" begann, führte mich in ganz neue Erlebniswelten — und dafür bin ich dankbar.

Jetzt kümmere ich mich um meinen Hund, bin jeden Tag stundenlang in der schönen Natur und atme durch. Was für ein einfaches Leben! Ich bin 63 und habe noch keine grauen Haare. Wie es scheint, hält Stress jung.