Jump to content.

Suche auf der Site

Newsletter abonnieren

Einmal im Monat bringt Ihnen der kostenlose Newsletter die wichtigsten Themen direkt in die Mailbox.

» mehr Info
» zur An- und Abmeldung

Das Buch zum Blog

Cover Buch Website-Konzeption

Website-Konzeption: Erfolgreiche Websites planen, umsetzen und betreiben

Neues bei delicious

(Was ist delicious?)


Facebook-Seite

Kann einem gefallen: die Benutzerfreunde bei Facebook:

Icon Benutzerfreunde bei Facebook

Impressum

Impressum/Kontakt

Responsive Webdesign – immer gut aussehen

Das Schlagwort Responsive Web Design geistert schon länger durch die Web-Entwicklerszene. Und mit der immer stärkeren Verbreitung von Mobilgeräten zum Surfen wird es immer wichtiger. Apple hat mit dem neuen iPad gerade wieder das Leben für die Nutzer besser und für die Entwickler mühsamer gemacht.

Was ist Responsive Design?

„Responsive“ ist das Design einer Website, wenn ihre Seiten auf allen Browsern und auf allen Geräten optimal dargestellt werden. Optimal heißt, sie sehen gut aus, alle Inhalte sind zugänglich und sie sind gut zu benutzen. Und das gleichermaßen auf dem kleinen Screen eines Smartphones, auf dem Laptop-Bildschirm und auf dem riesigen Desktop-Monitor.

A List Apart

A List Apart in Safari bei normal großem Fenster (links) und auf dem iPhone (rechts)

Ähnlich wie die Barrierefreiheit ist das immer nur ein Ziel, das praktisch nie ganz erreicht werden kann. Allein das Testen auf allen theoretisch möglichen Browser-Geräte-Kombinationen ist schon unmöglich.

„responsive“ ist eine Seite übrigens, weil sie „antwortet“ (=respond), d.h. sie reagiert auf die aktuelle Umgebung des Besuchers.

Die Technik hinter Responsive Webdesign

Responsives Webdesign nutzt HTML5 und CSS, um die Darstellung einer Seite so anzupassen, dass sie in der aktuellen Umgebung gut aussieht. Dabei werden zumindest folgende Faktoren berücksichtigt:

  • Größe des Fensters bzw. des Bildschirms

  • Verwendeter Browser und seine Möglichkeiten zur Darstellung

  • Orientierung (Hoch- oder Querformat)

Hinzu kommt immer häufiger noch der Faktor Auflösung. Denn wer auf hochauflösenden Displays, wie sie iPhone 4S und iPad 3 verwenden, brillante Grafiken anzeigen will, der muss auch Bilder in einer entsprechenden Qualität ausliefern.

Darstellung der Bildschirmgrößen und Auflösungen verschiedener Apple-Geräte

Allein der vergleichsweise kleine Apple-Gerätepark hat eine Vielzahl unterschiedlicher Bildschirmgrößen und Auflösungen.

Eine hervorragende Zusammenstellung von praktischen Werkzeugen für Designer sind übrigens die 20 tools to help you create responsive web designs.


Link teilen: Gefällt mir Google +1 Button zeigen Auf Xing empfehlen Link mailen

1 Kommentar

  1. Marketing & Strategien » Wege zum eigenen Webshop gepostet am 11. April 2012:

    [...] Webshop besteht nicht nur aus dem Webdesign (hier gibt es mehr dazu) und der Suchmaschinenoptimierung (siehe heise.de), sondern vor allem auch aus der Software, mit [...]

RSS-Feed für Kommentare zu diesem Post.

Einen Kommentar hinterlassen

Sie können diese Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Weiterlesen bei benutzerfreun.de: