50 Angebote für alle Stationen des Webdesigns von der Skizze bis zum Test haben Denise Jacobs and Peter Gasston auf netmagazine.com gesammelt. Dabei sind viele Komplettpakete, die vor allem für Einsteiger interessant sind, weil sie mehrere Werkzeuge zusammenfassen. Sie enthalten CSS- und JavaScript-Vorlagen, um Bilder und Texte zu skalieren oder anzuordnen. Aber auch einfache, kleine Hilfestellungen füllen die Liste, wie pdf-Dokumente, auf denen die verschiedenen Ausgabebildschirme zum Skizzieren der Seite vorgezeichnet sind, oder schlichte Rechenassistenten wie der Responsive Calculator. Dieses Onlineformular errechnet aus den Pixelbreiten der Elemente und der Ränder („Padding“ und „Margin“) CSS-Fragmente in Prozent. Die Texte können, so wie sie sind, in das Stylesheet eingefügt werden.
Ein anderes Werkzeug, Adaptive Images, sorgt dafür, dass sich die Größe der Bilder anpasst. Das Skript erkennt, wie groß die Bildschirme der Ausgabegeräte sind, und erstellt automatisch passende, kleinere Versionen, die es auch selbst verwaltet. Ein Beispiel für ein Vorlagenpaket ist Skeleton. Die Sammlung enthält Stylesheets und JavaScripte, vervollständigt von einer Textdatei für Suchmaschinen, einer Startseite und der wohlbekannten 404-Fehlermeldung als Füllmaterial für Seiten im Aufbau.
Um zu testen, wie die Seite auf den verschiedenen Ausgabemedien erscheint, gibt es viele Angebote. Eine besonders schönes trägt den martialischen Namen Responsinator und wurde von Tama Pugsley und Andy Hovey gebaut. Gibt man den Link der eigenen Homepage ein, zeigt die Seite an, wie das Design auf unterschiedlichen Geräten ungefähr aussieht.
Weiterführende Links:
- 50 fantastic tools for responsive web design netmagazine.com
![Responsive Webdesign: Tipps und Informationsquellen [Infografik]](http://t3n.de/uploads/t3n-news-post-436816_Responsive-WebDesign-infografik-feat_medium.jpg)
von Alexander 30.04.2012 (18:27Uhr) 1.
Ich finde responsive Webdesign hammer geil. Endlich mal was neues aus der Webdesign-Richtung. Es gibt auch gute CSS Frameworks für fast jedes CMS System wie typo3, Drupal, Wordpress. Man kann auch YAML4, bootstrap oder bei Drupal zen Theme dazu verwenden. Für Magento haben wir auch schon ein responsive Design in Arbeit.
von Tim Bischoff via facebook 30.04.2012 (18:59Uhr) 2.
Sehr wichtiges Thema Responsive Webdesign
von Torsten Schiefen via facebook 30.04.2012 (22:53Uhr) 3.
Find es auch ein gutes Thema
von 50 kostenlose Einsteigertools für Respo… 01.05.2012 (05:07Uhr) 4.
[...] 50 kostenlose Einsteigertools für Responsive Web Design » t3n News [...]
von Stefan 01.05.2012 (10:25Uhr) 5.
Ich habe mein Blog auch auf HTML5 und einem responsive Theme umgestellt. Das war die richtige Wahl, denn es läuft Perfekt und spart auch noch Plugins wie WPTouch. Man muss sich auch weniger Gedanken machen, ob auch alles auf allen Geräten funktioniert.
von Multiple Auflösungen 01.05.2012 (15:35Uhr) 6.
Gibts Statistiken über die Nutzungsverschiebungen auf andere Clients ?
1280x600 o.ä. waren ja beispielsweise eher Netbook-Auflösungen so das man deren Verbreitung bei den eigenen Site-Besuchern messen könnte. Anhand von Client-Browser und Auflösung kann man ja abschätzen welche Geräte genutzt werden.
Bisher hiess es nämlich oft genug, "für die 2% Mobil-Clients machen wir keine Extrawurst".
Wenn man eine App hat wie Amazon oder Ebay wird man am Smartphone die Webseite eher wenig besuchen.
Klar hängt es also stark von der Site und ihren Besuchern ab, aber SmarTVs im Wohnzimmer und Pads auf dem Tisch oder am Sofa sind doch so bequem das sie auch genutzt werden.
Als 16:9 und 720 bzw. 1080 üblich wurde, mussten die Kameraleute auch dazulernen. Auf einem runden Teller organisiert man Essen auch anders als auf einem rechteckigen Tablett. Da gibts noch viel neues an Usability und sinnvollen Screendesigns für kleine (Smartphones) und ultragroße (SmarTVs), schmale/niedrige (EReader, Netbooks,...) und breite/hohe (16:10, 4:3), hochkant und quer, Touch (Pad, Smartphone, Windows8-PCs), Tastatur+Maus (Desktop), Fernbedienung (SmarTV), Sprachsteuerung (Google-Brille) zu generieren und zu lernen.
Da sind Hilfen, Checklisten usw. schon ganz nett. Viele Seiten dürften nämlich unbenutzbar sein bis der Chef mal selber am Pad oder SmarTV die eigene Site besucht hat und dann - wen auch immer - anruft...
von blocknoise 01.05.2012 (15:54Uhr) 7.
Ich finde Responsive Webdesign ist ein wichtiger Schlüsselpunkt und zukunftsweisend für alle angehenden und fortgeschrittenen Fachleute die einen hohen Wert auf Kompatibilität legen. Zusammen mit diversen SEO-Taktiken ist es fast unschlagbar.
von Money Sequencer Review | Money Sequencer 08.05.2012 (20:55Uhr) 8.
[...] Mit kostenlosen Helfern im Net lässt sich Zeit sparen und die … Examine far more on t3n Magazin Posted in Money SequencerTagged Money, Review, [...]
von Responsive Webdesign: flexibles CSS-Fram… 21.05.2012 (16:00Uhr) 9.
[...] Links: Kostenloses CSS-Framework für Responsive Webdesign (t3n) 50 kostenlose Einsteigertools für Responsive Web Design (t3n) 5 kostenlose jQuery-Bildergalerien für Responsive Webdesign (t3n) Weitere Artikel zu [...]
von Top 50 Tools zum Thema "Responsive… 01.06.2012 (10:33Uhr) 10.
[...] Informationen gibt es hier: http://t3n.de/news/50-kostenlose-einsteigertools-384829/ http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design Dieser Eintrag wurde [...]
von 50 Anleitungen, die jeder Webdesigner un… 21.06.2012 (12:45Uhr) 11.
[...] Wer auf der Suche nach den richtigen Tools ist, findet entsprechende Tipps auf t3n. Webentwickler könnten zum Beispiel in den Artikenl 50 nützliche Tools für Webentwickler und 10 nützliche Cloud-Apps für Webdesigner und Webentwickler fündig werden. In erster Linie an Webdesigner richten sich hingegen beispielsweise die Artikel 10 zeitsparende und kostenlose Tools für Webdesigner und 50 kostenlose Einsteigertools für Responsive Web Design. [...]
von Stefan 19.07.2012 (14:21Uhr) 12.
Ich würde auch gerne meine Seite auf HTML5 umstellen aber leider finde ich kein brauchbares HTML5 Responsive Theme im Magazine Style, was nicht zu sehr vom alten Template abweicht.
Wer also einen Tipp hat, immer her damit.
Gruß Stefan