Designed for mobile vs. responsive Design

Sketch vergleich mobile first with responsive Design

Designed for mobile

Sketch Mobile first design

klassisches responsive Design

Sketch Desktop first design
Start Now

Was unterscheidet
designed for mobile?

17x kleiner
Original 2.5 mb Optimiert 146 kb

Bilder Optimierung

Oft werden Bilder mit der Auflösung für Desktops auch für Mobilgeräte verwendet, was in langen Ladezeiten der Website resultiert. Besonders auf Handys ist die Performance ein entscheidender Faktor. Eine Website hat durchschnittlich 2.5 Sekunden Zeit, um einen Besucher zu überzeugen, zu bleiben.
17x kleiner
Original 2.5 mb Optimiert 146 kb

Ladezeitoptimierung steht deshalb an wichtiger Stelle, wenn man Besucher behalten möchte.
Wir optimieren alle Grafiken und Inhalte bestmöglich, um ein angenehmes Benutzererlebnis zu gestalten und passen die Skalierung den Endgeräten, auf denen sie konsumiert werden, an.
Wir sind überzeugt davon, dass sich dieser Extraaufwand lohnt, die Zahlen zur SEO (search engine optimization) sprechen dabei für sich.

Oft werden Bilder mit der Auflösung für Desktops auch für Mobilgeräte verwendet, was in langen Ladezeiten der Website resultiert. Besonders auf Handys ist die Performance ein entscheidender Faktor. Eine Website hat durchschnittlich 2.5 Sekunden Zeit, um einen Besucher zu überzeugen, zu bleiben. Ladezeitoptimierung steht deshalb an wichtiger Stelle, wenn man Besucher behalten möchte. Wir optimieren alle Grafiken und Inhalte bestmöglich, um ein angenehmes Benutzererlebnis zu gestalten und passen die Skalierung den Endgeräten, auf denen sie konsumiert werden, an. Wir sind überzeugt davon, dass sich dieser Extraaufwand lohnt, die Zahlen zur SEO (search engine optimization) sprechen dabei für sich.

Touch Optimierung

Die Benutzererfahrung soll für den User so intuitiv und natürlich wie möglich sein. So berücksichtigen wir bereits ab Beginn der Planung die Anatomie unserer Hand, denn wie oft ein Element geklickt wird und somit auch ein Artikel gekauft, ein Termin gebucht oder ein Inserat gelesen, hängt stark mit der Erreichbarkeit durch den Daumen zusammen.

image showing touch optimisation for thumb on mobilephone

Einhandgriff – rechts

Dadurch, dass ein Design nicht nur visuell ansprechend gestaltet, sondern auch funktional sein sollte, designen wir bei unseren Projekten insbesondere „Call-to-Action“ – Elemente so, dass sie für Rechts- wie auch Linkshänder optimal erreichbar sind.

Wir testen dabei die Webseiten in unserem Prozess direkt an echten Geräten, um die Usererfahrung mit in die Planung hineinzubringen. In Absprache ist auch eine kontinuierliche Verbesserung der Website in diesem Bereich möglich. Hierbei analysieren wir das Klickverhalten ihrer Besucher und stellen dieses mit Heatmaps grafisch dar.

Die Benutzererfahrung soll für den User so intuitiv und natürlich wie möglich sein. So berücksichtigen wir bereits ab Beginn der Planung die Anatomie unserer Hand, denn wie oft ein Element geklickt wird und somit auch ein Artikel gekauft, ein Termin gebucht oder ein Inserat gelesen, hängt stark mit der Erreichbarkeit durch den Daumen zusammen.

Dadurch, dass ein Design nicht nur visuell ansprechend gestaltet, sondern auch funktional sein sollte, designen wir bei unseren Projekten insbesondere „Call-to-Action“ – Elemente so, dass sie für Rechts- wie auch Linkshänder optimal erreichbar sind.

Wir testen dabei die Webseiten in unserem Prozess direkt an echten Geräten, um die Usererfahrung mit in die Planung hineinzubringen. In Absprache ist auch eine kontinuierliche Verbesserung der Website in diesem Bereich möglich. Hierbei analysieren wir das Klickverhalten ihrer Besucher und stellen dieses mit Heatmaps grafisch dar.

By Design ab Projektstart

Standardablauf Webdesign

Zahl 1 Titel

Eine Vorschau einer Desktopwebsite wird nach den Kundenwünschen erstellt und anschliessend besprochen.

sketch of a desktop with a coding sign inside
Zahl 2 Titel

Die Desktop Website wird anhand der Demoversion programmiert und Formalitäten mit dem Kunden besprochen.

sketch of a mobile device
Zahl 3 Titel

Der letzte Schritt besteht darin, die Website auf responsive Design herunterzubrechen, damit sie auch mobile funktioniert.

Diese Vorgehensweise namens Desktop-First hat sich lange Zeit bewährt, jedoch mit dem enormen Anstieg der mobilen Nutzung haben sich die Anforderungen an Webseiten geändert.

Neben breitem Design gewinnt nun auch das Hochkantdesign zunehmend an Bedeutung. Die Bedienung per Touch wird immer wichtiger, da Mausklicks zunehmend von mobilen Geräten abgelöst werden. Statt zu Hause vor dem Computer in einer ruhigen Umgebung surfen Nutzer heute im hektischen Alltag, wo sie in der Bahn schnell die benötigten Informationen erhalten möchten.

Die klassischen Stolpersteine, die der Standardablauf nach einer fertigen Desktopseite mit sich bring sind: hoher Aufwand an Designanpassung, festgefahrene Flows, Vernachlässigung, das mobile Design als letzten Schritt durch nahender Zeitdruck, neue Projekte, die ihre Aufmerksamkeit auf sich ziehen, …

Mobile First Ansatz von Codesign

Die erwähnten Veränderungen bieten spannende Herausforderungen und ganz neue Möglichkeiten, wenn man sie richtig angeht und genau darauf spezialisieren wir uns. Wir konzipieren Ihre Website auf eine Weise, dass sie die Vorteile dieser Veränderung mit allen neuen Chancen nutzen kann und damit eine stabile und sichere Grundlage für Ihre Unternehmung bietet.

sketch of a mobile device
Zahl 1 Titel Orange

Die Mobilversion wird geplant und darauf aufbauend die Desktopversion für ein einheitliches Design.

sketch of a mobile device code
Zahl 2 Titel orange

Die mobile Version wird parallel 
zur Desktopversion programmiert. Anpassungen am Design sind so jederzeit möglich.

 

Aus diesem Grund haben wir unsere Prozesse von Grund auf so konzipiert, dass das mobile Design von Projektbeginn an im Fokus, damit die Seite den 65 % der Anfragen auch gerecht wird. Parallel dazu wird eine passende Desktopwebsite entworfen, damit die Entwicklung nahtlos funktioniert und ihre Kunden ein konsistentes Weberlebnis erfahren, egal ob auf ihrem Handy oder auf dem Desktop.

© 2025 Codesign-Schneiter

No. 1

SOCIAL MEDIA

Webdesign Plan

UNTERNEHMEN

Datenschutz