Responsive Design Bes­se­re Usa­bi­li­ty dank Re­spon­si­ve Web­de­sign

TEIL.CH Responsive Design

Wir entwickeln Ihre Website mit Responsive Design, damit sie auf allen Endgeräten und Bildschirmgrössen optimal dargestellt wird.

Ihre Webseite ist in die Jahre gekommen und wird auf Mobilgeräten und Tablets noch nicht optimal dargestellt? Smartphone-User, die auf Ihrer Homepage landen, sehen im Grunde genommen die gleiche Webseite, die auch Desktop-PC-Nutzer sehen, und müssen deswegen vergrössern und verkleinern, nach rechts und wieder nach links scrollen, um die entsprechenden Webseiteninhalte richtig lesen zu können? Als erfahrene Webdesignagentur mit Sitz in Zürich helfen wir Ihnen gern dabei, Ihre Website auf Basis von Responsive Webdesign auf den neusten Stand zu bringen. Seit 2011 entwickeln wir Websites ausschliesslich responsive, was so viel wie «anpassungsfähig» bedeutet, damit sie auf allen Endgeräten in jeglichen Browsern und Auflösungen bestmöglich dargestellt werden.

Responsive Design Referenzen

Website der Ganz Baukeramik AG
Website der Fundus Treuhand AG
Website des Grand Prix Migros
Firmenwebsite der Jak. Scheifele AG
Website von Hello Career
Website von Ziemer Ophthalmic Systems
Website des Gesundheits-Magazin «meine gesundheit»
Website des Verein mediX schweiz
Landingpage der Stromwahl-Kampagne für die WWZ
Website von Nephro am See
Website von swissfirecube
Website von THE GYM
Firmenwebsite der Strubline AG
Website der Schweizer Hagel Versicherung
Firmenwebsite der Fuchs Architekten AG
Website des Verein Stadtzürcher Seeüberquerung
Website für historische Waffen und Rüstungen der Cabinet d'Armes GmbH
Website der Bach Immobilien Gstaad AG
Website von pure.living

Die wichtigsten Merkmale unserer responsiven Websites

Dadurch, dass immer mehr Internetuser beim Surfen ein Smartphone oder ein Tablet nutzen und darüber hinaus die Optimierung auf mobile Endgeräte ein sehr wichtiger SEO-Faktor geworden ist, haben wir uns als kreative und erfahrene Zürcher Webdesignagentur auf hochwertige Responsive Designs spezialisiert. Alle Websites, die wir neu programmieren, sind responsive. Und alle Webseiten, die wir redesignen, erhalten ebenfalls ein Responsive Webdesign.

Navigation und Menüführung müssen beim Responsive Design für Smartphones und teilweise auch für kleinere Tablets unbedingt angepasst werden. Einfach die Navigation von der Desktop-PC-Variante zu übernehmen, sorgt für sehr viel Unübersichtlichkeit – und schliesslich auch für hohe Absprungraten. User Experience und Usability fangen beim Responsive Webdesign bereits im Header bei der Navigation an, weshalb wir ein besonders grosses Augenmerk auf eine ebenso sinnvolle wie nutzerfreundliche Menüführung richten.

Neben der Navigation und Menüführung ist natürlich auch die Auswahl und Platzierung der (bestehenden) Inhalte ein wichtiger Faktor, um mit dem Responsive Webdesign möglichst erfolgreich zu sein. Sollen in Smartphones nun Bilder über oder unter der entsprechenden Textpassage angezeigt werden? Und eignen sich die entsprechenden Bilder oder Bildelemente überhaupt für die Darstellung auf Mobilgeräten?

Oft ist es unumgänglich, bestimmte Inhalte, Bilder oder grafische Elemente bei kleineren Auflösungen einfach nicht anzeigen zu lassen oder eben anzupassen, um dadurch die Usability und die User Experience zu erhöhen. Buttons und Links, die auf dem Smartphone nur schwer anklickbar sind, sind unbedingt abzuändern und für die Darstellung auf Mobilgeräten zu optimieren.

Bei der Optimierung Ihrer Webseite auf mobile Endgeräte achten wir selbstverständlich auch auf die Optimierung Ihrer Conversion Rate. Hierzu passen wir CTAs sinnvoll an, damit Smartphone-User Sie schnell und einfach erreichen können. Telefonnummern werden beispielsweise anklickbar gemacht, damit der Anruf eines potenziellen Neukunden auch tatsächlich nur einen Mausklick entfernt ist, wenn er beim Surfen ein Smartphone verwendet.

Auch das Wording passen wir in bestimmten Fällen an. Wir lassen grundsätzlich keine Möglichkeiten aus, um die Conversion Rate Ihrer Webseite in wirklich allen Darstellungsvarianten zu erhöhen.

Von viel zu vielen Agenturen nach wie vor sträflich vernachlässigt wird die Page-Speed-Optimierung einer Website bei ihrer Darstellung auf mobilen Endgeräten. Dabei ist es nicht nur für Google, sondern insbesondere auch für eine positive User Experience sehr wichtig, dass eine responsive Website vor allem auch auf Smartphones schnellstmöglich lädt und angezeigt wird. Beim Responsive Design achten wir auf einen hohen Page Speed Ihrer Website, insbesondere für Mobiles und Tablets.

Unsere Vorgehensweise beim Responsive Webdesign

Unsere Vorgehensweise beim Responsive Webdesign

Jede Webdesignagentur hat ihre eigene Herangehensweise bei der Entwicklung und Erstellung einer Webseite im Responsive Design. Unsere Vorgehensweise für eine Homepage, die auf wirklich allen Geräten und in jeglichen Browsern und Auflösungen optimal dargestellt wird, sieht wie folgt aus.

Bei einigen Websites zeigen die Zugriffszahlen, dass bereits mehr User über mobile Endgeräte wie Smartphones und Tablets auf die Website zugreifen. Deshalb ist es in der Konzeptionsphase wichtig zu entscheiden, ob man für die Website vielleicht doch einen «mobile first» Ansatz wählen sollte. Dieser ist nicht zu verwechseln mit «mobile-friendly» bei dem man die Website mobile optimiert, aber das Konzept von Desktop auf Mobile überträgt. Entsprechend unterschiedlich und reduziert könnte der Content ausfallen. Aus unserer Erfahrung sieht man in der Praxis aber selten eine wirklich konsequent umgesetzte «mobile-first» Website, auch wenn dies gerne behauptet wird. Meist wurde es dann mit responsive Design verwechselt und die Website wurde auch für Mobile optimiert, aber zuerst für Desktop konzipiert.

Mit Hilfe von Wireframes definieren wir die Elemente und Inhalte der Website. Hierbei spielt das Design noch keine Rolle. Allerdings haben wir bei der Entwicklung der Wireframes trotzdem schon das responsive Verhalten im Hinterkopf und skizzieren für die wichtigsten Breakpoints die Umpositionierung der Elemente. Das Verständnis von Design und Technologie spielt bereits in dieser Phase eine wichtige Rolle.

Sollten Sie mit der Ausarbeitung unserer Wireframes soweit zufrieden sein, präsentieren wir Ihnen schliesslich das «Look & Feel», um das neue Design nun auch final zu definieren. Selbstverständlich ist es vom Aufwand her nicht möglich für jede Bildschirmbreite ein Design zu erstellen. Allerdings kann man sich auch schlecht vorstellen wie ein Design aussehen soll, wenn man zuerst nur die Wireframes gesehen hat. Das Design direkt in der technischen Umsetzung zu entwickeln mag dann gut funktionieren wenn man ein bestehendes Theme anpasst, oder das Design sehr standardisiert wirkt. Wir ziehen es allerdings vor das «Look & Feel» zuerst in Adobe XD auf Basis einer Desktop- und Mobile-Version zu entwickeln. Bei der technischen Umsetzung in responsive Design optimieren wir dann die verschiedenen Fälle für unterschiedliche Bildschirmgrössen und Browser.

In einer Testumgebung werden wir nun Ihre Webseite gemäss dem abgenommenen Design entwickeln. Dabei setzen wir als Redaktionssystem das CMS REDAXO ein und entwickeln zuerst die Eingabemodule, so dass möglichst bald mit dem Einpflegen der inhalte begonnen werden kann. Das Responsive Design wird auf Basis von CSS, HTML5 und Javascript umgesetzt. Als solide Grundlage für das responsive Verhalten der Website setzen wir das CSS Framework Bootstrap ein, von dem wir hauptsächlich das Grid nutzen. Bei der Webentwicklung achten wir zusammen mit den finalen Inhalten darauf, wie sich das Responsive Design verhält und passen wenn nötig Elemente oder Komponenten auf die entsprechenden Bildschirmgrössen an.

Natürlich werden wir vor dem Go-Live auch noch einmal Funktionalität und Darstellung Ihrer Website auf allen Endgeräten und in allen gängigen Browsern und Auflösungen genauestens überprüfen und allfällige Fehler beheben.

Bei einigen Websites zeigen die Zugriffszahlen, dass bereits mehr User über mobile Endgeräte wie Smartphones und Tablets auf die Website zugreifen. Deshalb ist es in der Konzeptionsphase wichtig zu entscheiden, ob man für die Website vielleicht doch einen «mobile first» Ansatz wählen sollte. Dieser ist nicht zu verwechseln mit «mobile-friendly» bei dem man die Website mobile optimiert, aber das Konzept von Desktop auf Mobile überträgt. Entsprechend unterschiedlich und reduziert könnte der Content ausfallen. Aus unserer Erfahrung sieht man in der Praxis aber selten eine wirklich konsequent umgesetzte «mobile-first» Website, auch wenn dies gerne behauptet wird. Meist wurde es dann mit responsive Design verwechselt und die Website wurde auch für Mobile optimiert, aber zuerst für Desktop konzipiert.

Mit Hilfe von Wireframes definieren wir die Elemente und Inhalte der Website. Hierbei spielt das Design noch keine Rolle. Allerdings haben wir bei der Entwicklung der Wireframes trotzdem schon das responsive Verhalten im Hinterkopf und skizzieren für die wichtigsten Breakpoints die Umpositionierung der Elemente. Das Verständnis von Design und Technologie spielt bereits in dieser Phase eine wichtige Rolle.

Sollten Sie mit der Ausarbeitung unserer Wireframes soweit zufrieden sein, präsentieren wir Ihnen schliesslich das «Look & Feel», um das neue Design nun auch final zu definieren. Selbstverständlich ist es vom Aufwand her nicht möglich für jede Bildschirmbreite ein Design zu erstellen. Allerdings kann man sich auch schlecht vorstellen wie ein Design aussehen soll, wenn man zuerst nur die Wireframes gesehen hat. Das Design direkt in der technischen Umsetzung zu entwickeln mag dann gut funktionieren wenn man ein bestehendes Theme anpasst, oder das Design sehr standardisiert wirkt. Wir ziehen es allerdings vor das «Look & Feel» zuerst in Adobe XD auf Basis einer Desktop- und Mobile-Version zu entwickeln. Bei der technischen Umsetzung in responsive Design optimieren wir dann die verschiedenen Fälle für unterschiedliche Bildschirmgrössen und Browser.

In einer Testumgebung werden wir nun Ihre Webseite gemäss dem abgenommenen Design entwickeln. Dabei setzen wir als Redaktionssystem das CMS REDAXO ein und entwickeln zuerst die Eingabemodule, so dass möglichst bald mit dem Einpflegen der inhalte begonnen werden kann. Das Responsive Design wird auf Basis von CSS, HTML5 und Javascript umgesetzt. Als solide Grundlage für das responsive Verhalten der Website setzen wir das CSS Framework Bootstrap ein, von dem wir hauptsächlich das Grid nutzen. Bei der Webentwicklung achten wir zusammen mit den finalen Inhalten darauf, wie sich das Responsive Design verhält und passen wenn nötig Elemente oder Komponenten auf die entsprechenden Bildschirmgrössen an.

Natürlich werden wir vor dem Go-Live auch noch einmal Funktionalität und Darstellung Ihrer Website auf allen Endgeräten und in allen gängigen Browsern und Auflösungen genauestens überprüfen und allfällige Fehler beheben.

Responsive Design FAQ

Hier finden Sie Antworten zu häufig gestellten Fragen rund um Responsive Design:

Responsive Design ist eine Technik zur Entwicklung von Websites, die es ermöglicht, dass sich das Layout und die Inhalte einer Website an verschiedene Bildschirmgrössen und Geräte anpassen. Dadurch wird sichergestellt, dass die Website auf Desktop-Computern, Tablets und Smartphones gleichermassen gut lesbar und benutzerfreundlich ist.

Responsive Design ist wichtig, da immer mehr Menschen verschiedene Geräte und Bildschirmgrössen verwenden, um auf Websites zuzugreifen. Eine nicht responsive Website kann auf kleinen Bildschirmen schwer lesbar und unhandlich sein, was zu einer schlechten Benutzererfahrung führt. Zudem bevorzugen Suchmaschinen wie Google responsive Websites und belohnen sie mit besseren Platzierungen in den Suchergebnissen.

Responsive Design verwendet flexible Raster, Bilder und CSS-Media-Queries, um das Layout einer Website an verschiedene Bildschirmgrössen anzupassen. Durch den Einsatz von relativen Einheiten wie Prozentangaben statt absoluter Einheiten wie Pixel können sich Elemente auf der Seite proportional zur Bildschirmgrösse verändern. Media Queries ermöglichen es, unterschiedliche CSS-Regeln basierend auf dem Viewport des Geräts anzuwenden.

Responsive Design bietet mehrere Vorteile. Es sorgt für eine konsistente Benutzererfahrung auf verschiedenen Geräten, reduziert die Notwendigkeit, separate mobile Websites zu erstellen, und vereinfacht die Wartung und Aktualisierung der Inhalte. Zudem verbessert Responsive Design die Suchmaschinenoptimierung und erhöht die Reichweite der Website auf verschiedenen Plattformen.

Responsive Design kann die Ladezeit einer Website beeinflussen, insbesondere wenn nicht optimierte Bilder oder komplexe CSS-Regeln verwendet werden. Eine effiziente Gestaltung und Optimierung der Website für verschiedene Geräte ist jedoch möglich und sollte angestrebt werden, um die Ladezeit zu minimieren und die Benutzererfahrung zu verbessern.

Sie möchten die Darstellung Ihrer Webseite nun endlich auch für Mobilgeräte optimieren, um durch modernes Responsive Design mobil mehr Conversions zu erzielen?

Falls Sie auf der Suche nach einem Experten für Responsive Webdesign sein sollten, weil Ihre Website noch nicht mobilfreundlich ist und Sie deswegen hohe Absprungraten bei Smartphone- und Tablet-Nutzern verzeichnen müssen, dann kontaktieren Sie doch einfach die erfahrenen Zürcher Webdesigner der Schweizer Agentur TEIL.CH. Mit viel Kreativität, Leidenschaft und Liebe zum Detail bringen wir Ihre Website «up-to-date».

Ihr Ansprechpartner

Alain Zeiter, Geschäftsführer / Partner

Projektanfrage