{"id":87809,"date":"2017-09-12T13:38:37","date_gmt":"2017-09-12T13:38:37","guid":{"rendered":"https:\/\/codewebbarcelona.com\/diseno-web-responsive\/"},"modified":"2026-06-11T06:21:50","modified_gmt":"2026-06-11T06:21:50","slug":"responsives-webdesign","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/de\/responsives-webdesign\/","title":{"rendered":"Responsives Webdesign"},"content":{"rendered":"

Die Einf\u00fchrung der Smartphones bedeutete eine Revolution f\u00fcr die Welt des Webdesigns<\/strong>. Pl\u00f6tzlich wollte jeder zu den Ersten geh\u00f6ren, die Websites mit responsive Webdesign<\/strong> entwickelten. Es wirkte fast wie Zauberei: Ver\u00e4nderte man die Gr\u00f6\u00dfe des Browserfensters, passte sich die gesamte Website automatisch an die neue Aufl\u00f6sung an \u2013 inklusive der Seitenstruktur.<\/p>\n

Wenn wir das damals unseren Kunden pr\u00e4sentierten, waren sie \u2013 so ungew\u00f6hnlich das heute klingt \u2013 meist v\u00f6llig beeindruckt. Das ist noch gar nicht so lange her, doch inzwischen ist diese Technologie l\u00e4ngst zum Standard geworden.<\/p>\n

Trotzdem gibt es im Bereich responsive Webdesign<\/strong> noch viel zu tun. Es reicht nicht aus, einfach ein CSS-Framework wie Bootstrap zu verwenden und zu erwarten, dass damit alles erledigt ist. Wer eine echte Verbindung zum Endnutzer<\/strong> herstellen m\u00f6chte, muss ihm eine User Experience bieten, die auf sein Ger\u00e4t zugeschnitten ist<\/strong>. Dazu geh\u00f6rt, zu verstehen, wie der Nutzer mit seinem Ger\u00e4t interagiert \u2013 und welche Erwartungen er an die Navigation hat.<\/p>\n

Am Desktop steht die Maus als zentrales Navigationselement im Fokus. Surft der Nutzer hingegen mit dem Smartphone, muss das Webdesign<\/strong> auf Touch-Bedienung ausgelegt sein und entsprechende Bedienhilfen bieten.<\/p>\n

Schl\u00fcssel f\u00fcr ein gelungenes Responsive Webdesign<\/h2>\n

Navigationsmen\u00fc<\/h3>\n

Das Navigationsmen\u00fc sollte f\u00fcr den Nutzer intuitiv und einfach zu bedienen<\/strong> sein. Das gelingt zum Beispiel mit einem Button, der das Men\u00fc ein- oder ausklappt<\/strong> \u2013 seitlich oder nach unten. So bleibt die Seite \u00fcbersichtlich und der Platz optimal genutzt.<\/p>\n

\"dise\u00f1o<\/a><\/p>\n

 <\/p>\n

Anpassungsf\u00e4hige und stimmige Bilder<\/h3>\n

Alle Bilder im Design m\u00fcssen flexibel skalierbar<\/strong> sein. Sie sollten sowohl auf einem 27″-Monitor als auch auf einem iPhone optimal dargestellt werden.<\/p>\n

Neben der reinen Skalierbarkeit ist vor allem die Koh\u00e4renz der Proportionen<\/strong> entscheidend \u2013 ein Aspekt, der oft \u00fcbersehen wird. Die Bilder sollten zur Ausrichtung des Ger\u00e4ts<\/strong> passen. Wird beispielsweise auf der Desktop-Version ein sehr breites Panorama-Bild verwendet, erscheint dieses auf dem Smartphone oft nur als schmaler Streifen \u00fcber die gesamte Breite \u2013 was meist wenig Sinn ergibt.<\/p>\n

Die beste L\u00f6sung ist daher, ein mittleres Format zu w\u00e4hlen<\/strong> oder f\u00fcr Smartphones alternative Bildversionen<\/strong> bereitzustellen.<\/p>\n

Struktur und Hierarchie<\/h3>\n

Die Reihenfolge der einzelnen Bereiche auf der Website ist entscheidend. Da auf Smartphones die Inhalte meist untereinander in einer Spalte angeordnet werden, sollte man die Reihenfolge der Abschnitte gezielt planen<\/strong> und die wichtigsten Elemente m\u00f6glichst weit oben platzieren<\/strong>.<\/p>\n

Weniger ist mehr<\/h3>\n

Gerade auf kleinen Bildschirmen empfiehlt es sich, unwichtige Bereiche f\u00fcr mobile Nutzer auszublenden<\/strong>. Typische Fu\u00dfzeilen k\u00f6nnen beispielsweise komplett entfernt werden \u2013 oder man beschr\u00e4nkt sich auf eine schlichte Zeile mit den wichtigsten Kontaktdaten.<\/p>\n

Alle verf\u00fcgbaren Funktionen nutzen<\/h3>\n

Wer die mobile Nutzererfahrung optimieren m\u00f6chte, sollte alle spezifischen Features von Smartphones einbeziehen<\/strong>. Wird auf der Desktop-Version etwa eine Anfahrtskarte angezeigt, kann auf dem Smartphone ein Button zum \u00d6ffnen der Navigation im GPS<\/strong> integriert werden. Ebenso lassen sich Direktwahl-Buttons<\/strong> f\u00fcr Anrufe einbauen, um dem Nutzer den Kontakt zu erleichtern.<\/p>\n

Weitere interessante Fakten<\/h2>\n

Aktuelle Statistiken zeigen: Mehr Nutzer besuchen Websites \u00fcber mobile Endger\u00e4te<\/strong> als \u00fcber den Desktop. Die Zahlen sprechen f\u00fcr sich: 51 % der Besucher kommen \u00fcber mobile Ger\u00e4te<\/strong>, 42 % \u00fcber Desktop<\/strong> und die restlichen 7 % nutzen andere Ger\u00e4te.<\/p>\n

\"diseno<\/a><\/p>\n