Drücke die Tasten ◄ ► für weitere 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 Tipps und Tricks für den Einstieg. Responsive Webdesign 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 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

73 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
13 Antworten
  1. von Responsive Webdesign: Umfangreiche Pr&au… am 15.09.2011 (13:28Uhr)

    [...] 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 Tipps und Tricks für den Einstieg. Source: t3n.de [...]

  2. von fortrabbit-frank am 15.09.2011 (19:48Uhr)

    Uff, man kann ja aus allem eine Wissenschaft machen.

  3. von Ideen am 16.09.2011 (00:50Uhr)

    wow... slideshare... richtig genial

  4. 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.

  5. von Bjoern Kaas via facebook am 16.09.2011 (09:31Uhr)

    hm. natürlich knorke - aber in der smartphone-1spaltigen ansicht stimmt das css nicht mehr - <h2>Are we there yet?</h2> springt auf andere typo um...kleinkram, aber oho ;o)

  6. von Bjoern Kaas via facebook am 16.09.2011 (09:32Uhr)

    Florian Grell - schauen sie doch mal...

  7. von Responsive Webdesign ::: von mobil bis R… am 03.10.2011 (10:44Uhr)

    [...] Responsive Webdesign: Umfangreiche Präsentation mit Tipps und Tricks [...]

  8. von Responsive Webdesign Tutorial  MRwebcat… am 05.10.2011 (22:58Uhr)

    [...] WEBDESIGN IST KEINE HEXENKUNST – EIN KURZER ÜBERBLICK Responsive Webdesign – die Basics Responsive Webdesign: Umfangreiche Präsentation mit Tipps und Tricks Webseiten mit CSS3 Media Queries für iphone ipod und android & Co. [...]

  9. von Responsive Webdesign mit HTML5 und CSS3… am 06.10.2011 (16:01Uhr)

    [...] Responsive Webdesign: Umfangreiche Präsentation mit Tipps und Tricks - t3n News [...]

  10. von Andreas Maucher am 17.10.2011 (00:35Uhr)

    Sehr gute Präsentation eingebaut!

  11. von Responsive Webdesign für Blogs | Webmas… am 20.10.2011 (16:32Uhr)

    [...] t3n – Zusammenfassung von Beiträgen zu Responsive Webdesign [...]

  12. von Responsive Webdesign – Eine Sammlu… am 14.11.2011 (07:01Uhr)

    [...] Grundlagen: Natürlich gibt es nicht nur englischsprachige Texte zu diesem Thema, nein die Kollegen von t3n haben sich auch die Mühe gemacht die Grundlagen zu erklären. Wichtig auch die weiterführenden Links am Ende, die auf weitere gute Seiten zeigen. [...]

  13. von FitVids.js: Videos mit jQuery in respons… am 14.12.2011 (14:45Uhr)

    [...] Responsive Webdesign: Umfangreiche Präsentation mit Tipps und Tricks - t3n News September 2011 [...]

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
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

t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“

Möchte man für unterschiedliche Geräte anpassungsfähige Websites erstellen, ist „Responsive Webdesign“ das Stichwort. Um sich damit vertraut zu machen, ist Designern und Entwicklern das Buch.. ... » weiterlesen

Webflow: Intuitives Online-Tool für Responsive Webdesign beendet Closed Beta
Webflow: Intuitives Online-Tool für Responsive Webdesign beendet Closed Beta

Responsive Webdesign, das sich automatisch der Displaygröße anpasst, ist heute Standard – doch der Programmieraufwand dahinter ist hoch, die Struktur responsiver Seiten komplex.... » weiterlesen

Kennst Du schon unser t3n Magazin?

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