Vorheriger Artikel Nächster Artikel

50 kostenlose Einsteigertools für Responsive Web Design

Die Umstellung auf modernes und professionelles Responsive 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 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.

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

 

Weiterführende Links:

 

 

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
5 Antworten
  1. von Alexander am 30.04.2012 (18:27 Uhr)

    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.

    Antworten Teilen
  2. von Stefan am 01.05.2012 (10:25 Uhr)

    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.

    Antworten Teilen
  3. von Multiple Auflösungen am 01.05.2012 (15:35 Uhr)

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

    Antworten Teilen
  4. von blocknoise am 01.05.2012 (15:54 Uhr)

    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.

    Antworten Teilen
  5. von Stefan am 19.07.2012 (14:21 Uhr)

    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

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema Webdesign
Die Basics des Responsive Webdesign [Infografik]
Die Basics des Responsive Webdesign [Infografik]

Je schneller die Zahl der mobilen Internetnutzer steigt, desto dringender wird die Frage, wie sich Website-Inhalte auf verschiedenen Endgeräten optimal darstellen lassen. Ein möglicher … » weiterlesen

Grid – Eine einfache Einführung in Responsive Webdesign
Grid – Eine einfache Einführung in Responsive Webdesign

Willst du schnell den Einstieg in Responsive Webdesign finden oder die Basics auffrischen? Mit diesem Tutorial ist beides kein Problem. » 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

Kennst Du schon unser t3n Magazin?

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