Web-Apps und Web­sites

Viele der Applikationen, die wir alle im Alltag verwenden, sind Web-Apps. So ist es nur logisch, dass wir – obwohl wir nicht Web with love heissen – viele Webprojekte umsetzen. Etwa die Hälfte unseres Projektportfolios entsteht mit Web-Technologie. Darunter sind klassische Websites, aber vor allem auch Progressive Web-Apps und komplexe Web-Tools. Neben allen Möglichkeiten, die das moderne Web bietet, ergeben sich gleichzeitig vielfältige Herausforderungen mit den verschiedenen Aspekten, die es zu berücksichtigen gilt: Die Geräte- und Browservielfalt, Accessibility, SEO und vieles mehr. Wir meistern diese mit viel Know-how und Erfahrung.

Unsere Kompetenzen im Bereich Webentwicklung

Unser Anspruch ist es, Weblösungen zu entwickeln, die das Leben der Menschen vereinfachen. Wir entwickeln responsive Designs, damit deine Weblösung auf allen gewünschten Endgeräten optimal dargestellt wird – egal ob Desktop, Tablet oder Smartphone. Der grafische Aufbau einer responsiven Website erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Website betrachtet wird. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie Navigation, Bilder und Texte, aber auch die Nutzung unterschiedlicher Eingabemethoden wie Maus oder Touchscreen.  

Bei der Umsetzung berücksichtigen wir auch die wichtigen Faktoren zu Accessibility und sorgen dafür, dass alle technischen Voraussetzungen für eine gute Auffindbarkeit in Suchmaschinen und KI-Modellen erfüllt sind. Stichworte dazu: strukturierte Daten und SEO. 

Progressive Web-Apps 

Eine Progressive Web-App (PWA) ist eine Website, die zahlreiche Merkmale besitzt, die bislang nativen Apps vorbehalten waren. Sie kann daher auch als Symbiose aus einer responsiven Website und einer App beschrieben werden.

Zusätzlich zu ihren Eigenschaften als Websites stellen Progressive Web-Apps viele Sonderfunktionen zur Verfügung, die von nativen Apps bekannt sind: 

• Offline Verfügbarkeit

• Versenden von Push-Nachrichten

• Zugriff auf gewisse Gerätefunktionen

• Add-to-Homescreen Funktion für schnellen und direkten Zugriff

Die Grundvoraussetzungen damit man von einer PWA sprechen kann sind minimal: Es braucht:

• Eine TLS geschützte Verbindung, erkennbar am https

• Ein JSON-Manifest, das heisst eine kleine Datei, die gewisse Dinge wie Icons, Namen und Start-URL definiert. Eine Übersicht über die Möglichkeiten findet sich zum Beispiel bei web.dev - in einem Projekt bestimmen wir gemeinsam mit unsern Kund*innen was die richtigen Konfigurationen sind.

• Ein Service Worker: Das ist ein Stück Code, der Dinge im Hintergrund erledigt. Einen Überblick über die Technologie haben wir in diesem Blog gegeben. 

Das klingt simpel, doch insbesondere die praktische Umsetzung eines Service Workers kann je nach Komplexität der Webapplikation recht anspruchsvoll werden. Wir kennen die Möglichkeiten und Einschränkungen von PWAs und können einschätzen, in welchen Fällen eine Umsetzung als PWA Sinn macht und wann eine «normale» Website genügt oder doch eher eine native App nötig oder sinnvoll ist.

Klassische Websites

Eine Website ist häufig die erste Anlaufstelle und somit entscheidend für ein gutes Kund*innenerlebnis. Ist die Website visuell ansprechend, finde ich, was ich suche und ist sie performant? Es werden nicht nur Informationen geteilt, sondern auch Werte einer Unternehmung transportiert – entsprechend muss eine Website auch gepflegt werden. 

Wir helfen bei der Umsetzung von grösseren (Corporate) Websites und bieten die allermeisten Services, die du für eine erfolgreiche Umsetzung brauchst, aus einer Hand. 

In manchen Fällen macht eine individuelle Umsetzung einer Website aufgrund der Anforderungen oder wirtschaftlichen Rahmenbedingungen keinen Sinn. Dennoch bieten wir auch in diesen Fällen gerne unsere Unterstützung an und setzen Landingpages oder kleinere Websites auch mal mit einem sogenannten Site-Builder um oder lassen die KI ans Werk.

Komplexere Web-Tools wie zum Beispiel Web-Konfiguratoren

Eine ansprechende Website ist wichtig, doch das volle Potential liegt oftmals dort, wo digitale Lösungen Prozesse transformieren und so tiefgreifende Mehrwerte schaffen. Insbesondere im B2B Bereich sind Produkte und Prozesse oftmals beratungsintensiv und Lösungen «ab Stange», wie ein klassischer Online-Shop, reichen nicht aus. 

Wir bauen individuelle Tools, die Prozesse so transformieren, dass eine Win-Win Situation geschaffen wird. Klassisches Beispiel dafür sind Konfiguratoren, mit deren Hilfe Kund*innen sich ihre gewünschte Lösung selber zusammenstellen können und dadurch viel schneller zu einer Kostenaufstellung kommen, als wenn dies manuell passiert. 

E-Commerce Lösungen

Software-Lösungen im E-Commerce-Bereich werden speziell auf den jeweiligen Anwendungsfall zugeschnitten. Für umfangreiche Online-Shops kooperieren wir mit Partner*innen. Für einfachere Shop-Lösungen setzen wir auf die Anbindung von Shopify oder Shopware.

State of the Art Web Tech Stack

Unsere Web-Frontends basieren grundsätzlich auf den W3C-Standards HTML, CSS und JavaScript respektive TypeScript. Für Web-Applikationen verwenden wir die Frameworks React und Svelte.

Eine individuelle Umsetzung, beispielsweise mit Vue.js oder Angular, ist nach Absprache ebenfalls möglich.

CMS – Statamic, Livingdocs oder Payload

Ein Content Management System (CMS) ist eine Software zur Erstellung, Bearbeitung und Organisation von Inhalten, meistens auf Websites oder Apps, aber auch in anderen Medienformen. Ein CMS lässt sich ohne Programmier- oder HTML-Kenntnisse über eine grafische Oberfläche bedienen. 

Für die Umsetzung von Webprojekten setzen wir in den meisten Fällen auf das CMS Statamic. Statamic erfüllt unsere Ansprüche an ein zeitgemässes, qualitativ hochwertiges CMS sowohl bei der technischen Umsetzung als auch in der Handhabung. 

Mit Statamic lässt sich fast jede Art von Website umsetzen. Statamic ist «von Haus aus» ein Flat-File-CMS. Das bedeutet, in der Standardkonfiguration lässt Statamic Datenbanken weg und bietet eine schnelle und produktive Möglichkeit, kreative, massgeschneiderte Websites zu erstellen, zu verwalten und dabei nicht nur den Code, sondern auch alle Inhalte in der Versionskontrolle zu haben. Eine Datenbank kann aber jederzeit hinzugefügt werden. So sind auch grosse Projekte mit sehr viel Inhalt kein Problem. 

Da Statamic auf dem meistverwendeten und sichersten PHP-Framework Laravel basiert, sind mit Statamic gebaute Websites nicht nur beliebig anpass- und erweiterbar, sondern auch sehr sicher. Und: Wir sind offizielle Partnerin von Statamic und haben dadurch einen direkten Draht zum Entwicklungsteam. Davon profitieren natürlich auch unsere Kund*innen.

Neben Statamic sind auch Livingdocs und Payload Teil unseres Tech Stacks. Livingdocs wurde 2022 als Basis für alle Webauftritte des Bundes und der Bundesverwaltung ausgewählt. Livingdocs eignet sich besonders gut für kollaboratives Arbeiten. 

Für die Verwaltung von Daten in Web-Applikationen ist Payload CMS unser Favorit. Mit Payload lassen sich Datenbanken für die Verwaltung von Daten aufbauen, Payload stellt für die definierten Daten automatisch eine Benutzeroberfläche für Administratoren und eine Schnittstelle (API) bereit. Die Schnittstelle ist für Web-Applikationen wichtig und lässt sich auch mit Drittsystemen integrieren.

Weiterführende Unterstützung im Webbereich

Zu einem gelungenen Webauftritt gehört mehr als ein responsives Design und eine technisch hochwertige Umsetzung. Allem voran werden Inhalte benötigt. Bei Bedarf unterstützen wir dich – auch zusammen mit Partner*innen – in allen Bereichen der Content-Entwicklung (Text, Bild, Ton- oder Videoinhalte), UX-Writing, SEO und im Bereich Markenentwicklung (Branding). 

Realisierte Webprojekte

Von Webseiten zur Informationsvermittlung (wie zum Beispiel Logvision auf Basis von Livingdocs), Konfigurationstools wie der Systemkalkulator für Pestalozzi Stahltechnik umgesetzt mit Statamic, bis zum Eventkalender «le petit calendrier» realisiert mit Payload:

Wir haben vielfältige Erfahrung und finden auch für dein Projekt die passende Lösung.