Vorheriger Artikel Nächster Artikel

Responsive Webdesign: Umfangreiche Präsentation mit Tipps und Tricks

Eine umfangreiche Präsentation führt in das aktuell viel beachtete Thema „responsive Webdesign“ ein und gibt die wichtigsten und Tricks für den Einstieg. meint: ein Layout, das sich flexibel an die Bildschirmgröße des abrufenden Geräts anpasst - vom 30-Zoll-Desktop-Monitor bis zum 3-Zoll-Smartphone-Display.

Responsive Webdesign: Umfangreiche Präsentation mit Tipps und Tricks

Responsive Webdesign reagiert „automagisch“ auf Displaygrößen

Die Autoren der Präsentation nutzen responsive Webdesign (natürlich) auch auf ihrer eigenen Website. Links im Desktop-Browser mit viel Platz, rechts für Smartphones und Tablets.

Wer eine Website per responsive Webdesign umsetzen will, muss sich teilweise umgewöhnen. Bislang wurden Websites für unterschiedliche Geräte in der Regel getrennt voneinander entwickelt, teils sogar mit unterschiedlichen Inhalten. Responsive Webdesign hingegen will sich an alle denkbaren Bildschirmauflösungen und Formate so geschickt anpassen, dass das nicht notwendig ist. Die Zahl der Spalten, die Positionierung der Navigationselemente etc. - alles das passt sich „automagisch“ an.

Die Präsentation unten stammt von Yiibu. Dahinter stecken Bryan und Stephanie Rieger, die sich (wen wundert's) auf mobile Websites spezialisiert haben. Ihre eigene Seite yiibu.com ist übrigens ein praktisches Beispiel für responsive Webdesign: Einfach aufrufen und das Browserfenster kleiner ziehen. Effekt: Die Bilder verkleinern sich und als letzter Schritt wird das Layout einspaltig - perfekt fürs Smartphone-Display.

Präsentation zu responsive Webdesign

Pragmatic responsive design

View more presentations from yiibu

Responsive Webdesign in t3n Magazin 25

In der aktuellen Ausgabe Nr. 25 des t3n Magazins nimmt sich t3n-Kollege David Maciejewski des Themas responsive Webdesign an. Außerdem findet ihr dort zahlreiche weitere Beiträge rund ums Thema (Web-)Design, denn das Titelthema ist: „Das Auge klickt mit“.

Links zum Thema responsive Webdesign:

Bildnachweis für die Newsübersicht: © kaipity - Fotolia.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
4 Antworten
  1. von fortrabbit-frank am 15.09.2011 (19:48 Uhr)

    Uff, man kann ja aus allem eine Wissenschaft machen.

    Antworten Teilen
  2. von Ideen am 16.09.2011 (00:50 Uhr)

    wow... slideshare... richtig genial

    Antworten Teilen
  3. von res ponsive am 16.09.2011 (02:01 Uhr)

    Responsive wäre auch zu merken, ob man Javascript hat und bei Fehlen einen Button einzublenden um eine Suchanfrage oder Aktion auszulösen die mit Javascript auch ohne Button automatisch losgeht. Menü-Selektionen beispielsweise.

    Noch wichtiger wird nächstes Jahr auch Touch/Multitouch/Bildschirm-Tastatur bzw. Maus/echte Tastatur und! TVs als Bediengeräte.

    Anpassung an Internet-Geschwindigkeiten für Kunden weit weg, Kunden am Handy am Monatsende mit gedrosselter (weil verbrauchter) Paket-Tape"Flat" oder Kunden ohne UMTS wäre auch responsive.

    Man merkt schnell, das die Leute ihre eigenen Webseiten nicht am PAD oder Handy ansehen oder gar benutzen. Hexenwerk wäre das keines. Bei wikipedia beispielsweise kann man schnell erste Ideen abschauen. Viele Projekte definieren keine Zielfunktionen. Dann herrscht schnell teurer Wildwuchs. Klickstrecken für die Besucher/Kunden minimieren wäre beispielsweise ein sinniges Ziel.
    Am Handy ist man handicapped. Barrierefreiheit ist folglich auch Bedienbarkeit am Handy mit Touchscreen oder auch mit 5wege-Kreuz oder am Fernseher mit Fernbedienung. Dazu zählen dann auch Ladezeiten oder Lesbarkeit oder halt die 1-2% RotGrün-Blinden Männer.

    Antworten Teilen
  4. von Andreas Maucher am 17.10.2011 (00:35 Uhr)

    Sehr gute Präsentation eingebaut!

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
Die Basics des Responsive Webdesign [Infografik]
Die Basics des Responsive Webdesign [Infografik]

Je schneller die Zahl der mobilen Internetnutzer steigt, desto dringender wird die Frage, wie sich Website-Inhalte auf verschiedenen Endgeräten optimal darstellen lassen. Ein möglicher … » weiterlesen

Responsive Webdesign für lau: Diese Website bündelt mehr als 500 Templates
Responsive Webdesign für lau: Diese Website bündelt mehr als 500 Templates

Du willst deine Website mit einem Responsive Webdesign versehen oder eine neue damit launchen? Dann solltest du einen Blick auf W3Layouts werfen. Die Website bündelt über 500 kostenlose … » weiterlesen

Die Basics des Responsive Webdesign in 9 schicken GIFs
Die Basics des Responsive Webdesign in 9 schicken GIFs

Wir zeigen euch die wichtigsten Prinzipien des Responsive Webdesign – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 38 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen