50 fantastische Tools für responsives Webdesign

Autor: Monica Porter
Erstelldatum: 17 Marsch 2021
Aktualisierungsdatum: 17 Kann 2024
Anonim
Bemob Tracking Tutorial For Beginners With Mobidea 2020–[Cpa Affiliate Marketing With Cpatracker]
Video: Bemob Tracking Tutorial For Beginners With Mobidea 2020–[Cpa Affiliate Marketing With Cpatracker]

Inhalt

Wie von Ethan Marcotte sowohl in seinem Artikel "Responsive Web Design" als auch in seinem Bestseller vorgestellt / geprägt, benötigt man drei Elemente, um eine Website reaktionsfähig zu machen:

  1. Ein flexibles / flüssiges Gitter
  2. Reaktionsschnelle Bilder
  3. Medien-Anfragen

Es gibt viele andere großartige Artikel, die Motive, Konzepte und Techniken in Bezug auf responsives Webdesign behandeln. Daher konzentrieren wir uns in diesem Artikel weiterhin auf einige Top-Tools, mit denen Sie verantwortungsbewusst reagieren können.

Werkzeuge für den Einstieg

Bevor Sie mit dem Erstellen Ihrer Website beginnen, skizzieren Sie am besten, wie sich die Elemente auf der Seite an die unterschiedlichen Browsergrößen der verschiedenen Geräte anpassen, auf denen sie angezeigt werden, und vermeiden Sie die Unterbrechung, die häufig durch primäres Nachdenken entsteht das Desktop-Design und der Rest der reaktionsschnellen Iterationen als nachträglicher Gedanke (siehe insbesondere den Kommentar von Stephanie (Sullivan) Rewis).

01. Responsive Web Design Sketch Sheets

Dieser Satz reaktionsschneller Skizzenblätter von Jeremy P Alford ist ein guter Ausgangspunkt, um herauszufinden, wie sich die Seitenabschnitte in unterschiedlichen Auflösungen verschieben.


02. Responsive Design Sketchbook

Wenn Sie es vorziehen, alle Ihre Skizzen an einem Ort aufzubewahren, sollten Sie dieses drahtgebundene Buch mit 50 reaktionsschnellen Skizzenblättern der Firma App Sketchbook in Betracht ziehen.

03. Responsive Wireframes

Eine der Schwierigkeiten beim Erstellen von Responsive-Websites besteht darin, mithilfe von Wireframes zu zeigen, wie das Responsive-Design funktioniert. James Mellers von Adobe hat dieses experimentelle Tool zusammengestellt, um zu zeigen, wie reaktionsschnelles Wireframing komplexer Layouts funktionieren kann.


04. Layoutmuster für mehrere Geräte

Wenn Sie ein responsives Design planen, ist es hilfreich zu sehen, wie andere Leute es vor Ihnen angegangen sind. Daher sind Luke Wroblewskis Layoutmuster für mehrere Geräte, in denen beliebte Muster mit Links zu Beispielen aufgeführt sind, ein guter Ausgangspunkt.

05. Stilfliesen

Samanatha Warrens Style Tiles schlagen eine neue Technik für das Design im reaktionsschnellen Zeitalter vor. Anstelle von Designmodellen mit fester Breite sind diese wie Farbfelder oder Moodboards, die den allgemeinen Designansatz zeigen, ohne auf detaillierte Details einzugehen.

Werkzeuge für ein flexibles / flüssiges Gitter

Wie bereits erwähnt, ist die erste Komponente, die für ein responsives Design benötigt wird, ein flexibles / flüssiges Gitter.Folgendes ist bereits vorgefertigt: Sie müssen es nur herunterladen und sind schnell auf dem Weg zu einer reaktionsschnelleren Website.


06. Golden Grid System

Joni Korpi, der auch Less Framework entwickelt hat, hat kürzlich diese neue Version eines zuverlässigen Rastersystems für Responsive Design veröffentlicht. Das Golden Grid-System gilt als "faltbar", da es sich leicht von 16 auf acht bis vier Spalten anpassen lässt. Außerdem verfügt es über eine kleine Browser-Überlagerung, die das Raster auf Ihren Seiten zum Testen freigibt.

07. Foldy960

Die talentierten Herren von Paravel, Inc. haben das modifizierte 960.gs-Raster veröffentlicht, das sie als Grundlage für ihre reaktionsschnellen Projekte verwenden.

08. SimpleGrid

SimpleGrid von Conor Muirhead wurde mit eingebauter Reaktionsfähigkeit entwickelt, sodass Sie Ihr reaktionsschnelles Website-Projekt ganz einfach in Betrieb nehmen können.

09. Das 1140px CSS-Raster

Ein weiteres großartiges responsives Grid-System ist das 1140px CSS Grid des Melbourne-Designers Andy Taylor, das von einer breiten Desktop-Auflösung bis hin zu mobilen Geräten reicht.

10. Spalten-CSS-Rastersystem

Das Columnal-Rastersystem, das von Pulp + Pixels, auch bekannt als Creative Director Nick Gorsline, erstellt wurde, basiert auf dem 1140px-Rastersystem, bietet jedoch einige zusätzliche Extras wie ein Design-Kit mit Skizzenblättern und Wireframing-Vorlagen sowie CSS-Debugging-Stile.

11. Semantisches Gittersystem

Vorverarbeitete CSS-Erweiterungen wie Sass und LESS werden immer beliebter, und das semantische Rastersystem von Tyler Tate nutzt sie mit maximaler Wirkung in diesem Rastersystem, das behauptet, keine unnötigen Klassen oder Elemente zu verwenden. Weitere Informationen finden Sie unter coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Wie das semantische Rastersystem hat SUSY von Oddbird ein Rastersystem erstellt, das keine zusätzlichen Markups oder speziellen Klassen verwendet. SUSY richtet sich jedoch nur an Benutzer von Sass (und seiner Erweiterung Compass).

13. Gridpak

Gridpak von Erskine Design ist einer der neuesten reaktionsschnellen Netzgeneratoren. Sie können Ihre Spalten und Dachrinnen an mehreren Haltepunkten festlegen und dann CSS-, JavaScript- und PNG-Dateien ausgeben, sodass Ihr gesamtes Team vom selben Ausgangspunkt aus arbeitet.

14. Gridset

Gridset ist immer noch ein wenig rätselhaft, da es zum Zeitpunkt meines Schreibens noch nicht veröffentlicht wurde. Das Tool von Mark Boulton Design verspricht jedoch maßgeschneiderte, nicht vorgeschriebene Rastersysteme und eine Möglichkeit, Ihre Raster online zu speichern und zu verwalten.

15. Ein besseres Photoshop-Raster für RWD

Elliot Jay Stocks schlägt vor, den alten De-facto-Rasterstandard von 960 Pixel aufzugeben und stattdessen von einer 1000-Pixel-Basis aus zu arbeiten, um die Arbeit mit allen Prozentberechnungen zu vereinfachen. Wenn Sie einverstanden sind, hat er eine PSD erstellt, mit der Sie arbeiten können.

16. Flüssigkeitsgitter

Wenn Ihr Design hochspezialisiert ist und Sie Ihr eigenes benutzerdefiniertes Raster erstellen müssen, können Sie dies mit dem Fluid Grid-Rechner von Harry Roberts, dem brillanten Newcomer-Nominierten von .net Awards, tun.

17. Reaktionsschneller Rechner

Ein weiterer Pixel-zu-Prozent-Rechner, aber dieser von Stu Robson geht noch einen Schritt weiter als andere, indem er alle CSS-Regeln für Sie generiert, sodass Sie sie einfach kopieren und in Ihre Stylesheets einfügen können.

Tools für reaktionsschnelle Bilder (und Text)

Eine weitere wichtige Komponente des reaktionsschnellen Webdesigns sind flüssige Bilder. Während die Technik zum Erzielen flüssiger Bilder unkompliziert ist, scheint die Optimierung der Leistung und des Seitenladens für verschiedene Geräte eine der größten Herausforderungen beim reaktionsschnellen Webdesign zu sein. Hier sind einige Ressourcen, um das Problem anzugehen.

18. Reaktionsschnelle Bilder

Die Filament Group hat eine Möglichkeit entwickelt, ein Bild mit angemessener Größe basierend auf der Bildschirmauflösung zu senden. Dieses Experiment mit Mobile-First-Bildern, die reaktionsschnell und verantwortungsbewusst skaliert werden, erfordert, dass zwei Bilder unterschiedlicher Größe als Referenz verwendet werden.

19. Adaptive Bilder

Matt Wilcox ließ sich vom Responsive Images-Tool inspirieren, um Adaptive Images zu erstellen, das PHP und ein wenig JavaScript verwendet, um dem Gerät des Benutzers geeignete Bilder bereitzustellen, ohne dass zusätzliche Markups erforderlich sind.

20. Sencha.io Src (ehemals Tinysrc)

Sencha bietet einen Cloud-Dienst, der optimierte Versionen gehosteter Images für die Größe des Geräts sendet, das sie anfordert. Informationen zur Verwendung finden Sie unter docs.sencha.com/io/src/.

21. FitText

Ein weiteres Juwel von Paravel, Inc ist FitText.js, ein jQuery-Plug-In, mit dem der Web-Typ für Überschriften auf das Design und das Gerät reagiert. Weitere Informationen finden Sie unter trentwalton.com/2011/05/10/fit-to-scale/.

22. slabText

Brian McAllisters slabText wurde von FitText und dem SlabType-Algorithmus inspiriert und ist ein jQuery-Plug-In, mit dem fette Textblöcke erstellt werden, deren Größe sich ändert und die definierte Breite eingehalten wird.

Tools für Medienabfragen

Nachdem Sie nun eine Vorstellung davon haben, wie sich Ihr Layout für verschiedene Geräte, ein flüssiges Raster und flüssige Bilder ändern wird, benötigen Sie Medienabfragen, um die Elemente der Seite in einen Zustand der Reaktionsfähigkeit zu versetzen.

23. Respond.js

Das einzige Problem beim reaktionsschnellen Design besteht darin, dass Browser, die Medienabfragen nicht lesen können, zurückbleiben. Dies ist möglicherweise kein Problem für Ihre Zielgruppe, es wird jedoch empfohlen, Benutzer in älteren Browsern unterzubringen. Respond.js von Scott Jehl unterstützt nur die Eigenschaften min-width und max-width.

Weitere Informationen finden Sie unter filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

Mit CSS3-Mediaqueries.js von Wouter van der Graaf können ältere Versionen von IE und anderen Browsern alle Arten von Medienabfragen effektiv testen und anwenden.

25. Adapt.js

Nathan Smith, Autor des ursprünglichen 960.gs-Rastersystems, hat Adapt.js geschrieben, ein Skript, das Browserdimensionen erkennt und nur die erforderlichen Stylesheets bereitstellt - wie Medienabfragen, jedoch ohne Medienabfragen, was bedeutet, dass es auch in älteren Browsern funktioniert.

26. Categorizr

Dies ist die Geräteerkennung, die aus dem entgegengesetzten Blickwinkel betrachtet wird. Das Categorizr-Skript von Brett Jankord geht davon aus, dass Geräte mobil sind, sofern nicht anders als Desktop oder Tablet erkannt, sodass Sie den Browsern Ressourcen auf sympathische Weise bereitstellen können.

Responsive Design (und mobile) Boilerplates

Im Sinne eines effizienten reaktionsschnellen Workflows erleichtern Boilerplates das Verschieben von Designs in den Browser früher als später. Die meisten dieser Boilerplates kombinieren die besten der oben genannten Tools in einem übersichtlichen Paket: einem flexiblen Raster, das mit Skripten erweitert wird, während die Mobile-First-Content-Out-Philosophie umgesetzt wird.

27. 320 und höher

Andy Clarkes 320 and Up ist ein Mobile-First-Boilerplate, das sich in viele andere moderne Webdesign-Tools wie LESS und Bootstrap integrieren lässt (siehe Nr. 30). Es ist eine leichte und agile Möglichkeit, eine Website schnell zum Laufen zu bringen. Schauen Sie sich auch unser Interview mit Andy an, in dem er uns mehr über die neue Version erzählt.

28. Gitterlos

Gridless ist ein HTML5- und CSS3-Boilerplate, das als Grundlage für Ihre reaktionsschnellen Designs dienen kann, wobei der Schwerpunkt auf Typografie und integrierter browserübergreifender Kompatibilität liegt.

29. Skelett

Im Gegensatz zu den beiden vorherigen Boilerplates, deren Ausgangspunkt die geringste Auflösung ist, basiert das von Dave Gamache entwickelte Skeleton Development Kit auf dem 960.gs-Rastersystem und lässt sich auf Mobilgeräte verkleinern. Skeleton bietet außerdem ein großartiges Stil-Framework, auf dem Entwickler Stile aufbauen können.

30. Bootstrap

Bootstrap wurde von Twitter entwickelt und ist jetzt Open-Source. Es ist ein Framework und eine Reihe von Komponenten, mit denen eine Website schnell online gestellt werden kann. Ab Version zwei funktionieren alle Kernteile reaktionsschnell.

Plugins, Shims und Polyfills

Obwohl moderne Browser und Software in der Regel auf Reaktionszeiten ausgerichtet sind, müssen wir manchmal zusätzliche Tools verwenden, um eine konsistente Benutzererfahrung zu erzielen.

31. Responsive Plugin

Marios Lublinski hat ein WordPress-Plug-In geschrieben, das verspricht, jedes aktuelle WP-Thema in ein responsives zu verwandeln. Wie das funktioniert, weiß ich noch nicht, da es zum Zeitpunkt dieses Schreibens noch nicht veröffentlicht wurde, aber wenn es sein Versprechen einhält, sollte es sehr nützlich sein.

32. Sturz

Die Behandlung von Inhaltsüberläufen funktioniert in Desktop-Browsern gut, ältere mobile Browser behandeln sie jedoch inkonsistent. Die Polyfill "Overthrow" der fleißigen Filament Group sorgt für eine konsistente, anmutige Verschlechterung aller Geräte und stellt sicher, dass alle mobilen Benutzer die bestmögliche Erfahrung erhalten.

33. MediaTable

Das jQuery-Plugin von Marco Pegoraro, MediaTable, arbeitet mit Respond.js zusammen, um das Problem zu umgehen, wie große Datentabellen auf Geräten mit kleinem Bildschirm angezeigt werden, reaktionsschnelle Spalten erstellt und gegebenenfalls ein Ein- / Ausblenden hinzugefügt wird.

"Testen, Testen: 1-2-3 ..."

Ein weiterer Aspekt des reaktionsschnellen Workflows besteht darin, Ihre Zielgeräte und Auflösungen zu kennen und diese dann zu testen.

34. resizeMyBrowser

resizeMyBrowser vom Frontend-Entwickler Chen Luo verfügt über mehrere voreingestellte Dimensionen für Ihr Browserfenster, um reaktionsschnell gestaltete Seiten zu testen oder eine neue Voreinstellung zu erstellen, wenn Sie nicht die finden, die Ihren Anforderungen entspricht.

35. responsivepx

Ähnlich wie resizeMyBrowser lädt responsivepx, erstellt von Remy Sharp, Ihre Seiten in ein Fenster, in dem Sie die Breite und Höhe testen können, um festzustellen, wie gut Ihre Medienabfragen ausgelöst werden und wo sich die Haltepunkte im Design befinden.

36. Responsive Design-Tests

Ein unglaublich nützliches Tool von Designer und Entwickler Matt Kersley: Geben Sie einfach die URL Ihrer responsiven Site in Responsive Design Testing ein, um zu sehen, wie sie in verschiedenen Browsergrößen gerendert wird.

37. Der Verantwortliche

Geben Sie eine URL ein und der Responsinator zeigt Ihnen, wie er in vielen gängigen Gerätegrößen angezeigt wird - mit rücksichtsloser Robotereffizienz. Tama Pugsley und Andy Hovey sind dafür verantwortlich.

38. Responsive.is

Mit Responsive.is, einem weiteren In-Page-Geräteemulator, können Sie eine URL eingeben und die Größe zwischen verschiedenen Voreinstellungen schnell ändern. Es wurde vom Team hinter der kommenden Typecast-App erstellt.

39. Screenqueri.es

Ein weiteres Tool für Browserdimensionen, aber Screenqueri.es von Mandar Shirke unterscheidet sich durch ein umfangreiches Set an Voreinstellungen für Mobilgeräte und Tablets sowie ein Raster und Lineale, die die Feinmessung erheblich vereinfachen.

40. Aptus

Eine weitere App zum Testen von Websites in mehreren definierten Größen, aber Aptus ist Mac-native. Es ist über den Mac App Store erhältlich und bietet zusätzliche Funktionen wie einfache Screenshots und Offline-Unterstützung.

41. Responsive Design Bookmarklet

Victor Coulon hat ein sehr einfaches, aber effektives Lesezeichen erstellt. Wenn Sie es auf einer beliebigen Webseite aktivieren, wird eine Symbolleiste hinzugefügt, mit der Sie zwischen vier allgemeinen Bildschirmabmessungen wechseln können, um zu sehen, wie Ihre Website in verschiedenen Größen gerendert wird.

42. Responsive Design Test Bookmarklet

Dieses Lesezeichen von Benjamin Keen ermöglicht weitere Anpassungen, indem Sie Ihre eigenen Gerätegrößen definieren können und so viele oder wenige, wie Sie möchten. Wenn diese Option aktiviert ist, wird die Site in allen ausgewählten Größen nebeneinander angezeigt, um einen einfachen Vergleich zu ermöglichen.

43. Screenfly

Mit Screenfly von QuirkTools können Sie eine Site mit verschiedenen Auflösungen auf Desktop, Tablet, Handy und Fernsehen testen. Die Desktop-Tests sind derzeit auf Safari beschränkt, während Tablet und Handy mehr Optionen für Geräte und Browser bieten. Das Fernsehen ist auf die Oper beschränkt.

44. Media Query Indicator

Johan Brook bietet eine reine CSS-Methode, um zu testen, wann eine Medienabfrage vom Browser ausgelöst wurde. Der Media Query Indicator ist ein weiteres gutes Tool zum Testen und Spielen mit Design-Bruchstellen.

45. Shim

Shim ist eines der Tools, die bei der Neugestaltung des Boston Globe, dem Aushängeschild der RWD-Bewegung, verwendet wurden. Es handelt sich um eine Node.js-App, mit der eine Webseite auf mehreren Geräten im selben Wifi-Netzwerk ausgeführt wird, wodurch geräteübergreifende Tests erheblich vereinfacht werden .

46. ​​Einfahrt

Wenn Sie keinen Node.js-Server zum Ausführen von Shim haben, hat Scott Jehl eine einfachere Version namens Drive-In erstellt, die im Wesentlichen genauso funktioniert, jedoch PHP, Apache und eine .htaccess-Datei verwendet.

47. Adobe Shadow

Adobe setzt mit diesem Remote-Debugging-Tool seine Bemühungen um Webtechnologien fort. Wenn Sie Shadow und die Chrome-Erweiterung auf Mac oder Windows sowie den Shadow-Client auf Android oder iPhone installieren, können Sie Webseiten für viele verschiedene Geräte freigeben.

48. Opera Mobile Emulator + Remote-Debug

Eine einfachere Möglichkeit zum Debuggen mobiler Seiten besteht darin, Opera und den Opera Mobile Emulator zu installieren und die beiden mit ihrer Remote-Debug-Option zu verbinden. Einfach und schnell einzurichten und bietet den zusätzlichen Vorteil, dass mehr als nur WebKit getestet werden kann.

Weitere Inspiration

Möchten Sie eine Vorstellung davon bekommen, wie andere ihre Designs ansprechen?

49. MediaQueri.es

Wenn Sie es noch nicht gesehen haben, gibt es auf der Website Mediaqueri.es immer mehr Websites, die auf die reaktionsfähige Seite übergegangen sind.

50. @RWD

Ethan Marcotte betreibt einen Twitter-Account, der die neuesten Nachrichten, Tools und Showcases aus der Welt von RWD enthält.

Denise Jacobs liebt es, Rednerin, Autorin, Webdesign-Trainerin und Kreativitäts-Evangelistin zu sein, während Peter Gasston die Autorin von The Book of CSS3 und eine erfahrene Webentwicklerin ist, die bei Broken Links bloggt.

Mochte dies? Lese das!

  • Profi-Tipps zum Erstellen einer mobilen Website
  • Top CSS- und JavaScript-Techniken
  • So erstellen Sie eine App
  • Die besten kostenlosen Web-Schriftarten für Designer
  • Entdecken Sie, was als nächstes für Augmented Reality kommt
  • Kostenlose Texturen herunterladen: hohe Auflösung und sofort einsatzbereit
Vorheriger Artikel

3D World feiert das Beste der CG-Community
Nächster Artikel

10 bahnbrechende technische Innovationen für 2020
Sowjetisch
Holz, das Sie glauben: von der Natur inspirierte iPhone-Hüllen
Weiter

Holz, das Sie glauben: von der Natur inspirierte iPhone-Hüllen

Kann 2024
Al Kreativer möchten ie zweifello , da Ihre Acce oire Ihren Ge chmack im De ign wider piegeln. Die e neuen iPhone-Hüllen von Eden ind elegant, raffiniert und voller von der Natur in pirierte...
Chris Shiflett im Brooklyn Beta Summer Camp
Weiter

Chris Shiflett im Brooklyn Beta Summer Camp

Kann 2024
Die Beta-Leute von Brooklyn, Chri hiflett und Cameron Koczon, haben da ummer Camp in Leben gerufen, ein Programm, da 25.000 U -Dollar für einen Anteil von ech Prozent in Ihr tartup inve tiert und...
5 neue Windows-Tools für kreative Profis
Weiter

5 neue Windows-Tools für kreative Profis

Kann 2024
Kreative, die Window -Computer, -Tablet und -Telefone verwenden, haben ich traditionell darüber be chwert, da ie ich gegenüber ihren Mac-liebenden Kollegen wie arme Cou in ​​fühlen. Da ...