50 nützliche responsive Webdesign-Tools für Designer
In den letzten Tagen haben wir Ihnen einige der besten WordPress- und Joomla-Themes gezeigt, die Sie herunterladen und auf Ihrer Website verwenden können. Heute werden wir dir geben die Werkzeuge. Wir sind der Meinung, dass sie aus Frameworks, Services und herunterladbaren Skripten eine große Hilfe sind, wenn es um responsive Webentwicklung geht.
Um das Auflisten der gesamten Liste der Tools zu erleichtern, haben wir sie in die folgenden Abschnitte unterteilt:
- Raster & Frameworks
- Skizzenblätter & Drahtgitter
- JavaScript & jQuery-Plugins
- Testen & Vorschau
- Schieberegler
- Andere
Raster & Frameworks
[Zurück nach oben]
Säulenförmig
Columnal ist ein Pulp + Pixels-Projekt, das von cssgrid.net entliehen wurde, während einige Code-Inspirationen von 960.gs übernommen wurden. Columnal hilft Ihnen sehr bei Ihrem responsiven Webdesign, indem Sie Ihre Raster flexibel machen und sich dynamisch ändern lassen, wenn die Größe des Browser-Fensters geändert wird.
Skelett
Skeleton ist ein einfaches und leistungsstarkes CSS-Framework, das aufgrund seiner Einfachheit und Effizienz vor allem von Entwicklern und Designern beliebt ist. Mit Javascript gibt es hier kein schweres Heben, nur gutes und reines CSS mit sauberer Dokumentation.
LessFramework 4
Weniger Framework ist mehr oder weniger ein Framework im Namen des Erstellers. Es ist ein adaptives CSS-Rastersystem, das auf Inline-CSS-Medienabfragen basiert und die Entwicklung responsiver Websites wesentlich vereinfacht.
Semantisches Gittersystem
Das Semantic Grid System wird verwendet, um responsive Rasterlayouts zu entwerfen. Es verwendet vorverarbeitete CSS-Erweiterungen wie LESS, SCSS oder Stylus, um maximale Effizienz zu erzielen. Sie können Spalten- und Zwischenstegbreiten auswählen, die Anzahl der Spalten auswählen und zwischen Pixel und Prozentwerten wechseln.
Goldenes Rastersystem
Das Golden Grid System ist ein Fluid-Grid-System, das als Ausgangspunkt für Ihr responsives Webdesign dient. Dadurch kann die Website gut aussehende Seiten im Bereich von 240 bis 2560 Pixeln anzeigen.
320 und höher
320 and Up ist eine CSS-Medienabfrage, die als Startvorlage für Ihr responsives Design dient. Es folgt ein völlig umgekehrter Ansatz als bei den anderen verfügbaren Boilerplates.
Inuit.css
Inuit.css ist ein CSS-Framework, das selbst für Anfänger extrem einfach zu bedienen ist. Es ist ein minimalistischer Ansatz, daher müssen Sie sich nur mit Dingen befassen, die benötigt werden, aber es kann auch mit einer Handvoll verfügbarer Plugins erweitert werden.
Gridless
Gridless ist eine Plattform für die Erstellung responsiver und browserübergreifender Websites mit schöner Typografie. Dieses Tool konzentriert sich auf die schrittweise Entwicklung eines Projekts und dient als Ausgangspunkt für jedes Design.
1140 CSS-Gitter
1140 CSS Grid ist ein großartiges CSS-Rastersystem, das vom Melbourne Designer Andy Taylor entworfen wurde. Dieses Design passt bei 1140px für große Monitore perfekt und Ihr flüssiges Layout passt sich nahtlos an andere kleinere Auflösungen an, ohne viel zusätzlichen Aufwand.
1KBCSSGrid
1KB CSS Grid von Tyler Tate entworfen, ist ein einfacher und leichter CSS-Grid-Generator. Hier können Sie die Anzahl der Spalten, die Spaltenbreite und die Rinnenbreite einstellen. Außerdem können Sie ein herunterladbares CSS für das Raster Ihrer Website erhalten.
Bootstrap
Bootstrap, erstellt und verwaltet von Mark Otto und Jacob Thornton bei Twitter, ist ein hervorragendes Set an Elementen der Benutzeroberfläche, Layouts und Javascript-Tools, die Sie kostenlos herunterladen und in Ihren Webdesign-Projekten verwenden können.
Fluid Grid-Rechner
Dieses einfache Tool hilft Ihnen dabei, schnell das CSS Ihres fluiden Rasterdesigns zu erfassen.
Flüssigkeitsgitter
Fluid Grid ist ein einfaches und dennoch nützliches Fluid-Grid-Framework, das responsive Layouts basierend auf 6, 7, 8, 9, 10, 12 oder 16 Spalten erstellt.
Flurid
Flurid ist ein einfaches und sehr nützliches Cross-Browser-CSS-Raster-Framework mit bis zu 16 Spalten. Außerdem werden Pixel nicht im Rand angezeigt.
Gridset
Gridset ist ein Werkzeug zum Erstellen von Gittern aller Art, wie säulenförmig, asymmetrisch, fest, Ratio, zusammengesetzt, ansprechend und mehr. Dieses Tool von Mark Boulton befindet sich noch in der Beta, erweist sich jedoch als vielversprechend. Und habe ich schon erwähnt, dass es so einfach ist, einen Link einzubetten.
Gridpak
Bei Gridpak handelt es sich um einen online reagierenden Grid-Generator, in dem die Anzahl der Spalten, der Abstand und der Zwischenraum geändert und benutzerdefinierte Haltepunkte hinzugefügt werden können. Das CSS wird vom Tool generiert und zum Download bereitgestellt. Es enthält auch PNG-Gittervorlagen, die zum Gestalten in Photoshop verwendet werden können.
SimpleGrid
SimpleGrid, entwickelt von Michael Kuhn, ist ein sehr einfaches und unkompliziertes CSS-Framework für die Erstellung von endlosen gitterbasierten Layouts. Standardmäßig ist SimpleGrid für 4 verschiedene Bildschirmgrößenbereiche vorbereitet.
Susy
Susy von Oddbird ähnelt dem Semantic Grid System. Es verwendet kein zusätzliches Markup oder andere spezielle Klassen, sondern richtet sich nur an die Benutzer von Saas und dessen Erweiterung Compass.
Tiny Fluid Grid
Tiny Fluid Grid ist eine großartige Web-App, mit der Sie das Rastersystem Ihrer Website interaktiv bestimmen können. Sie können die Anzahl der Spalten, den Prozentsatz der Rinnen, die minimale und maximale Breite des Layouts Ihrer Website festlegen und ein herunterladbares CSS dafür anfordern.
Variables Rastersystem
Variable Grid System wurde von SprySoft entwickelt und basiert auf dem 960 Grid System. Damit können Entwickler und Designer das benutzerdefinierte Raster generieren und anschließend die zugehörige CSS-Datei basierend auf diesem Raster herunterladen.
Skizzenblätter & Drahtgitter
[Zurück nach oben]
Responsive Webdesign-Skizzenblätter
Dieses Tool ist nützlich, um die Platzierungen verschiedener Elemente in Ihrem Website-Layout auf verschiedenen Geräten abzubilden. Mit Hilfe dieses Geräts können Sie sich eine Vorstellung davon machen, wo die erforderlichen Elemente einer Website für verschiedene Bildschirmgrößen und Auflösungen platziert werden sollen.
Responsive Wireframes
Responsive Wireframes ist ein experimentelles Werkzeug, das von James Mellers von Adobe erstellt wurde. Es enthält nur HTML und CSS (keine Bilder oder JS wurden verwendet), mit denen Sie visualisieren können, wie Ihr responsives Design auf den tatsächlichen Browsern verschiedener Desktops und mobiler Geräte aussehen würde.
StyleTiles
Style Tiles gibt Ihnen die Möglichkeit, eine Vorstellung davon zu entwickeln, wie eine Website aussehen würde, unabhängig von den komplizierten Stilen, die ins Spiel kommen. Es gibt Ihnen die Möglichkeit für einen perfekt ansprechenden Design-Workflow und die Möglichkeit, Kundenfeedbacks zu integrieren.
JavaScript & jQuery-Plugins
[Zurück nach oben]
Adapt.Js
Adapt.js ist eine Javascript-Lösung und eine ausgezeichnete Alternative zu den CSS-Medienabfragen. Die Verwendung von @media ist eine bewährte Methode, die jedoch nicht für alle Browser geeignet ist. Nathan Smith, der Schöpfer von 960 Grid System, veröffentlichte Adapt.js, eine sehr leichte Javascript-Bibliothek, um dieses Problem zu lösen.
Isotop
Isotope ist ein erstaunliches jQuery-Plugin, das sich beim Entwerfen eines responsiven Designs als sehr nützlich erweist. Es hilft nicht nur, die Elemente einer Seite neu anzuordnen, wenn die Größe des Browser-Fensters geändert wird oder die Bildschirmgröße kleiner ist, sondern es hilft auch, diese Elemente zu filtern.
Mauerwerk
Masonry ist ein hervorragendes jQuery-Plugin, mit dem dynamische und anpassungsfähige Layouts erstellt werden. Dieses Plugin hilft dabei, die Elemente in Ihrem responsiven Design neu anzuordnen, damit sie besser an die offenen Stellen im Raster passen.
Respond.js
Respond.js ist ein schnelles und leichtes Skript (3 Kb minified und 1 Kb gipped), dessen Hauptziel es ist, responsives Webdesign für diejenigen zu ermöglichen, die die CSS3-Medienabfragen nicht unterstützen, wie beispielsweise IE-Browser.
TinyNav.js
TinyNav.js ist ein kleines und leichtes jQuery-Plugin mit nur 362 Byte, das große Navigationslisten in kleine Dropdown-Menüs für kleinere Bildschirme konvertiert.
Wookmark jQuery Plugin
Wookmark ist ein jQuery-Plugin, das die Browserfenstergröße erkennt und die Elemente der Seite automatisch in Spalten anordnet. Sie können auch eine Live-Vorschau am unteren Rand der Seite selbst anzeigen.
Testen & Vorschau
[Zurück nach oben]
Protofluid
ProtoFluid ist ein webbasiertes Prototyping-Tool, mit dem Sie Ihre Website-Prototypen in verschiedenen Bildschirmgrößen und Auflösungen testen können. Geben Sie einfach die URL ein, wählen Sie das Gerät (oder benutzerdefinierte Abmessungen) aus und drücken Sie die Starttaste. Da es sich um ein webbasiertes Tool handelt, können Sie auch andere Erweiterungen wie FireBug verwenden.
Responsive.Ist
Responsive.Is wird von TypeCast, einem anderen Browser-Emulator-Tool, erstellt, mit dem Sie Ihr Responsive Design testen können. Geben Sie einfach eine URL ein. Die Größe wird automatisch je nach dem von Ihnen ausgewählten Gerät geändert.
Responsivepx.Com
ResponsivePx ist ein hervorragendes Tool zum Testen Ihres responsiven Website-Designs. Das Hauptmerkmal, das sie von anderen unterscheidet, ist ihre Fähigkeit, die Website pixelweise zu verändern. Mit dieser großartigen Funktion können Sie die Haltepunkte identifizieren und testen, wie die CSS-Medienabfragen in Ihrer Site funktionieren.
Responsives Webdesign-Testwerkzeug
Ein hervorragendes Testwerkzeug, mit dem Sie Ihre responsive Website in verschiedenen Bildschirmgrößen gleichzeitig auf einem einzigen Bildschirm anzeigen können, während Sie diese erstellen oder entwerfen. Ich mag dieses Tool vor allem deshalb, weil es alle Bildschirmauflösungen nebeneinander anzeigt, was das Debuggen erleichtert.
ReView.Js
ReView ist ein dynamisches Viewport-System, das in reinem JavaScript entwickelt wurde und ein fantastisches Anzeigeerlebnis für Ihr responsives Webdesign bietet.
Screenfly
Screenfly von QuirkTools ist ein erstaunliches Tool, mit dem Sie Ihre responsive Website auf verschiedenen Geräten anzeigen können: Desktop, Tablet, Mobile und TV. Es hat auch Optionen zum Aktivieren oder Deaktivieren des Bildlaufs oder sogar zum Drehen der Anzeige.
Screenqueri.es
Screenqueri.es ist ein pixelgenaues responsives Designtestwerkzeug. Geben Sie einfach eine Website-Adresse ein, die Sie überprüfen möchten, und dieses Tool zeigt die Website in verschiedenen Bildschirmgrößen an, je nach Gerät. Sie können die Größe auch pixelweise ändern, um die Haltepunkte zu ermitteln.
Der Verantwortliche
Testen Sie Ihre Website auf verschiedenen Geräten, vom iPhone und iPad bis hin zum Kindle und auf Android im Responsinator. Außerdem wird Ihre Website im Hoch- und Querformat angezeigt. Dieses Tool gefällt mir sehr viel mehr, weil die Umrisse der auf der Seite angezeigten Geräte mehr Bedeutung haben, was dem gesamten Prozess mehr Bedeutung verleiht.
Schieberegler
[Zurück nach oben]
Blaubeere
Blueberry ist ein fantastischer jQuery-Image-Slider, der speziell für flüssige oder reaktionsschnelle Layouts entwickelt wurde.
Elastislide
Wünschen Sie ein Karussell, das sich automatisch an die Bildschirmgröße anpasst, wenn die Größe des Browser-Fensters geändert wird oder Sie sich auf einem kleineren Bildschirm befinden? Elastislide ist das am besten geeignete jQuery-Plugin für Ihre Bedürfnisse.
Responsiver CSS3 Slider
Dies ist ein reiner responsiver CSS3-Schieberegler, der sich problemlos an jede Bildschirmgröße und Bildschirmauflösung anpassen lässt. Das Schöne an diesem Schieberegler ist, dass die Pfeile in die Box gehen, wenn die Bildschirmgröße des Geräts klein genug ist. Kein JavaScript benötigt.
ResponsiveSlides.Js
ResponsiveSlides.Js ist ein sehr einfaches und extrem leichtes (nur 1 Kb) großes jQuery-Plugin, das mit ungeordneten Listen einen responsiven Schieberegler erstellt. Es funktioniert mit einer Vielzahl von Browsern, auch mit IE6 und höher.
Andere
[Zurück nach oben]
Adaptive Bilder
Adaptive Images ist ein Online-Tool für responsives Webdesign, das die Bildschirmgröße der Besucher erkennt und basierend auf der Bildschirmgröße und Auflösung neu skalierte Bilder erstellt, speichert und liefert.
FitText.Js
FitText.js ist ein kleines Javascript-Tool, das die automatische Größenanpassung von Text und Überschriften ermöglicht, wenn die Browsergröße geändert wird. Mit diesem an Bord befindlichen Tool sind keine Sorgen mehr hinsichtlich der Textgröße.
FitVid.Js
Möchten Sie die eingebetteten Videos neu skalieren, wenn die Größe des Browser-Fensters geändert wird oder das Gerät eine geringere Auflösung hat? FitVid.Js kann Ihnen dabei helfen, dies zu erreichen. Es ist ein leichtes, einfaches und benutzerfreundliches jQuery-Plugin, mit dem eingebettete Videos in Fluidbreite erstellt werden können.
Netzhautbilder
Retina Images ist eine fantastische Javascript-Lösung, die automatisch 2 x größere, hochauflösende Bilder liefert, wenn sie auf dem Retina-Display angezeigt werden. Alles, was Sie tun müssen, ist, eine hochauflösende Version jedes einzelnen Bildes zu erstellen, und es wird den Rest erledigen.
Seamless Responsive Photo Grid
Seamless Responsive Photo Grid zeigt die Bilder randlos im Browser an, ohne Lücken zwischen den Bildern. Die Fotos sind gekachelt und fließen in Spalten von links nach rechts durch die Seite. Die Anzahl der Spalten wird entsprechend angepasst, wenn die Browsergröße geändert wird.
SlabText
SlabText ist ein jQuery-Plugin oder ein Tool von Brian McAllister, das auf dem SlabText-Algorithmus basiert und die Überschriften in Zeilen aufteilt, bevor die Größe der einzelnen Zeilen geändert wird, um den verfügbaren Platz zu füllen. Es ist dem FitText.Js-Plugin in Aktion sehr ähnlich.
Zurb - ResponsiveTables
Haben Sie sich jemals gefragt, wie Sie mit den Big Data-Tabellen im responsive Design umgehen können? Zurb, eine CSS / JS-Combo, gibt Ihnen die Antwort. Es nimmt die Datentabellen und ändert sie so, dass sie das responsive Layout auf kleineren Bildschirmgeräten nicht beeinträchtigen.
Categorizr
Categorizr ist ein sehr kleines PHP-Skript, das Ihren Besuchern ein gezielteres Web-Erlebnis bietet. Damit können Sie gerätespezifische Designs für Tablet, TV, Mobile oder Desktop bereitstellen.
Media Query Bookmarklet
Das Medienabfrage-Bookmarklet zeigt Ihnen, welche Größe das aktuelle Ansichtsfenster hat und welche Medienabfrage gerade dafür ausgelöst wurde.
Der Responsive Rechner
Der Responsive Calculator ist ein sehr einfaches Online-Tool, mit dessen Hilfe Sie Pixel in Prozente umwandeln können, während Sie Ihre responsive Website entwerfen.
Nächste Woche
In der zweiten Woche dieser Serie werden wir Sie mit Tutorials befassen, die Sie wirklich zum Responsive Web Design (RWD) führen werden..
Verpassen Sie es nicht.
