Drücke die Tasten ◄ ► für weitere Artikel  

50 kostenlose Einsteigertools für Responsive Web Design

Die Umstellung auf modernes und professionelles Responsive Webdesign kann zeitaufwändig sein – und nicht jeder Webdesigner liebt es, seine Entwürfe von Pixel in Prozent umzurechnen. Mit kostenlosen Helfern im Internet lässt sich Zeit sparen und die Nerven schonen.

50 kostenlose Einsteigertools für Responsive Web Design
Rechenkünstler: Der Responsive Calculator macht aus Pixel Prozente

 

50 Angebote für alle Stationen des 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.

Schrumpfbild: Ein paar Zeilen Skript zusätzlich und schon passen sich die Bilder dem Ausgabemedium an

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.

Schön oder Schund: Der Responsinator offenbart, auf welchen Geräten das Design funktioniert

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 auf unterschiedlichen Geräten ungefähr aussieht.

 

Weiterführende Links:

 

 

199 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
13 Antworten
  1. von Alexander am 30.04.2012 (18:27Uhr)

    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.

  2. von Tim Bischoff via facebook am 30.04.2012 (18:59Uhr)

    Sehr wichtiges Thema Responsive Webdesign

  3. von Torsten Schiefen via facebook am 30.04.2012 (22:53Uhr)

    Find es auch ein gutes Thema

  4. von 50 kostenlose Einsteigertools für Respo… am 01.05.2012 (05:07Uhr)

    [...] 50 kostenlose Einsteigertools für Responsive Web Design » t3n News [...]

  5. von Stefan am 01.05.2012 (10:25Uhr)

    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.

  6. von Multiple Auflösungen am 01.05.2012 (15:35Uhr)

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

  7. von blocknoise am 01.05.2012 (15:54Uhr)

    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.

  8. von Money Sequencer Review | Money Sequencer am 08.05.2012 (20:55Uhr)

    [...] Mit kostenlosen Helfern im Net lässt sich Zeit sparen und die … Examine far more on t3n Magazin Posted in Money SequencerTagged Money, Review, [...]

  9. von Responsive Webdesign: flexibles CSS-Fram… am 21.05.2012 (16:00Uhr)

    [...] 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 [...]

  10. von 50 Anleitungen, die jeder Webdesigner un… am 21.06.2012 (12:45Uhr)

    [...] 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. [...]

  11. von Stefan am 19.07.2012 (14:21Uhr)

    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

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

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

Responsive Webdesign: So überzeugst du deine Kunden
Responsive Webdesign: So überzeugst du deine Kunden

Responsive-Webdesign ist eine tolle Technik. Die Notwendigkeit von RWD an Kunden zu vermitteln, gestaltet sich aber meistens etwas schwieriger. Mit einem genauen Blick auf die Bedürfnisse deines... » weiterlesen

Sticky Footer mit variabler Höhe im Responsive Webdesign? Kein Problem!
Sticky Footer mit variabler Höhe im Responsive Webdesign? Kein Problem!

Einen Sticky Footer umzusetzen, ist nicht besonders schwierig. Kniffliger wird es, wenn er in einem responsiven Design verwendet werden soll. Wie ihr das einfach und mit wenig Code per display:table.. ... » weiterlesen

Kennst Du schon unser t3n Magazin?

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