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

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
4 Antworten
  1. von fortrabbit-frank am 15.09.2011 (19:48Uhr)

    Uff, man kann ja aus allem eine Wissenschaft machen.

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

    wow... slideshare... richtig genial

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

    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:35Uhr)

    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
Grid – Eine einfache Einführung in Responsive Webdesign
Grid – Eine einfache Einführung in Responsive Webdesign

Willst du schnell den Einstieg in Responsive Webdesign finden oder die Basics auffrischen? Mit diesem Tutorial ist beides kein Problem. » weiterlesen

Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

Die 10 beliebtesten Artikel der Woche: Pornhub, WhatsApp und die neuesten Logo-Trends
Die 10 beliebtesten Artikel der Woche: Pornhub, WhatsApp und die neuesten Logo-Trends

Die vergangene Woche wurde von kreativen Themen dominiert – seien es originelle Visitenkarten, die 15 Trends des Jahres im Logo-Design oder die verrückte Crowdsourcing-Kampagne, mit der das … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen