Entwicklung & Design

Responsive Webdesign: Umfangreiche Präsentation mit Tipps und Tricks

© kaipity - Fotolia.com

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

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

13 Kommentare
fortrabbit-frank

Uff, man kann ja aus allem eine Wissenschaft machen.

Antworten
Ideen

wow… slideshare… richtig genial

Antworten
res ponsive
res ponsive

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
Andreas Maucher

Sehr gute Präsentation eingebaut!

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.