Responsive Webdesign reagiert „automagisch“ auf Displaygrößen
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
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:
- Responsive Webdesign: „Adaptive Images” optimiert Bilder automatisch - t3n News
- Artikel zu responsive Webdesign in t3n 25 - t3n Magazin
- Präsentation zu responsive Webdesign - slideshare.net
Bildnachweis für die Newsübersicht: © kaipity - Fotolia.com
![Responsive Webdesign: Tipps und Informationsquellen [Infografik]](http://t3n.de/uploads/t3n-news-post-436816_Responsive-WebDesign-infografik-feat_medium.jpg)
von Responsive Webdesign: Umfangreiche Pr&au… 15.09.2011 (13:28Uhr) 1.
[...] 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 [...]
von fortrabbit-frank 15.09.2011 (19:48Uhr) 2.
Uff, man kann ja aus allem eine Wissenschaft machen.
von Ideen 16.09.2011 (00:50Uhr) 3.
wow... slideshare... richtig genial
von res ponsive 16.09.2011 (02:01Uhr) 4.
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.
von Bjoern Kaas via facebook 16.09.2011 (09:31Uhr) 5.
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)
von Bjoern Kaas via facebook 16.09.2011 (09:32Uhr) 6.
Florian Grell - schauen sie doch mal...
von Responsive Webdesign ::: von mobil bis R… 03.10.2011 (10:44Uhr) 7.
[...] Responsive Webdesign: Umfangreiche Präsentation mit Tipps und Tricks [...]
von Responsive Webdesign Tutorial MRwebcat… 05.10.2011 (22:58Uhr) 8.
[...] 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. [...]
von Responsive Webdesign mit HTML5 und CSS3… 06.10.2011 (16:01Uhr) 9.
[...] Responsive Webdesign: Umfangreiche Präsentation mit Tipps und Tricks - t3n News [...]
von Andreas Maucher 17.10.2011 (00:35Uhr) 10.
Sehr gute Präsentation eingebaut!
von Responsive Webdesign für Blogs | Webmas… 20.10.2011 (16:32Uhr) 11.
[...] t3n – Zusammenfassung von Beiträgen zu Responsive Webdesign [...]
von Responsive Webdesign – Eine Sammlu… 14.11.2011 (07:01Uhr) 12.
[...] 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. [...]
von FitVids.js: Videos mit jQuery in respons… 14.12.2011 (14:45Uhr) 13.
[...] Responsive Webdesign: Umfangreiche Präsentation mit Tipps und Tricks - t3n News September 2011 [...]