21 großartige Tools für responsives Webdesign
Als Webdesigner wissen wir, dass responsives Webdesign gekommen ist, um zu bleiben. Sie haben sich die Zeit genommen, eine sehr schöne und solide Website zu erstellen, mit einer beträchtlichen Anzahl von Zugriffen von Suchmaschinen auf Ihre Website. Dann kommen Sie in die Realität der Geräte. Welches Gerät wird verwendet, um Ihre Website zu öffnen?. Was ist mit der Höhe und Breite des Geräts? Es gibt Tausende von Geräten, zusammen mit mehreren Dimensionen und Ansichtsfenstern.
Als Webdesigner wissen wir, dass unser Design von verschiedenen Geräten und Browsern aus betrachtet wird und gleichzeitig unsere Codeblöcke von verschiedenen Geräten ausgeführt werden.
Die Zahl der internetfähigen Geräte hat massiv zugenommen, was mit einer hohen Pixeldichte, Interaktion, Auflösung usw. einhergeht. Auch nach den aktuellen Technologietrends zu urteilen, wird es mehr Geräte geben, mit denen Menschen auf das Internet zugreifen können.
Dass Responsive Webdesign für jedes Web notwendig ist, bedeutet nicht, dass es so einfach ist, wenn man bedenkt, dass man mehrere Geräte sowie Dimensionen und Viewports berücksichtigen muss. Die Herausforderung besteht darin, dass wir eine Schnittstelle erstellen müssen, die mit praktisch allen Geräten skaliert, von kleinen Bildschirmen bis hin zu großen Bildschirmen im Theatersaal.
Dies machte es einfach zwingend erforderlich, dass alle Websites für eine einfache Navigation und eine bessere Benutzererfahrung auf verschiedene Geräte reagieren.
Wenn Sie einen unserer früheren Beiträge zur nützlichen Toolbox für responsives Webdesign gelesen haben, dann wissen Sie, dass es im Web so viele Tools für responsives Webdesign gibt. Aber aus meiner langjährigen Erfahrung als Webdesigner, Entwickler und Berater, gepaart mit gründlicher Recherche, die ich gemacht habe, werde ich 21 großartige Tools und Ressourcen für responsives Webdesign teilen. Wohlgemerkt für Designer, die sich noch nicht mit responsivem Webdesign anfreunden müssen. Ich empfehle, Wichtigkeit und Gründe für responsives Webdesign zu lesen, Sie können auch Ihre Frage stellen, und ein Experte wird Ihnen über Ihre E-Mail-Adresse antworten. Danach können Sie hier mit 21 großartigen Tools für Responsive Webdesign fortfahren.
01 ZURB-Stiftung
ZURB Foundation ist eines der weltweit anerkanntesten und fortschrittlichsten Frameworks für eine responsive Website. ZURB hat viele Ressourcen für das Framework aufgewendet, zusätzlich zu den vielen Anstrengungen, die für das Open-Source-Projekt des Frameworks aufgewendet wurden.
ZURB Foundation hat eine enorme Verbesserungsstrategie, da Sie die Komplexitätsebene basierend auf der Größe des Bildschirms und den Designmöglichkeiten erhöhen dürfen. Nicht nur das, Sie werden auch eine umfassende Bibliothek finden, die aus mehreren UI-Komponenten besteht, was es Ihnen erleichtert, Prototypen für jede erdenkliche Schnittstelle zu erstellen.
02 Jetband
Es gab eine massive Wende im Wed-Designprozess, da Wireframe nicht zeigt, wie ein bestimmtes Design in verschiedenen Webumgebungen aussehen wird. Und Programmierkenntnisse sind erforderlich, um einige Prototyping-Tools zu nutzen.
Hier kommt Jetstrap ins Spiel. Es ermöglicht Designern, Prototypen schnell zusammenzubauen, indem sie Komponenten einfach per Drag & Drop von der Benutzeroberfläche auf die Arbeitsfläche ziehen. Frontend-Entwicklungsfähigkeiten sind nicht erforderlich, um zu beginnen, und Sie werden mit einer atmenden Webseite enden. Sie müssen nur die Drag-and-Drop-Tools auf der Benutzeroberfläche verwenden.
03 Woche für responsives Design
Der Webentwickler Justin Avery verbringt viel Zeit damit, spezielle Newsletter zu Ressourcen, Tools und Techniken für responsives Webdesign zu versenden. Als Designer verbringe ich einen Teil meiner Zeit auf Twitter und lese Feeds zu responsivem Webdesign. Einige der Feeds enthalten neueste Ressourcen und hilfreiche Tipps zum Erstellen eines responsiven Webdesigns. Die Teilnahme an Diskussionen über responsives Webdesign von LinkedIn wird Ihre Fähigkeiten sicherlich verbessern und Ihnen die neuesten Ideen zu aktuellen Trends im responsiven Webdesign liefern.
04 Style-Prototyp
Stilprototyp ist eine HTML-Seite, die Schaltflächenstil, Typografie, Farbe, Fotografiestil, Rollover und andere Elemente für eine vorgeschlagene Website zeigt.
Einer der Hauptzwecke des Stilprototyps besteht darin, Ergebnisse zu erstellen, die nützlich und reproduzierbar sind. Es gibt zwar keine Regeln zum Erstellen eines Stilprototyps, aber Sie müssen einige grundlegende Elemente wie Schaltflächenstil, Typografie, Farbe und Rollover neben anderen Elementen, die enthalten sein können, einbeziehen.
Mit dem Style-Prototyp können Sie Animationen, Farben und andere Elemente in der Webumgebung hinzufügen.
05 Element-Collagen
Beim Erstellen ganzseitiger Mock-ups ist eines der schwierigsten Dinge, mit denen wir uns als Designer auseinandersetzen müssen, die Gestaltung der Minute jeder Seite. Beruflich ist es ratsam, mehr Zeit für die Gestaltung der Heldenbotschaften auf der Homepage zu verwenden, als mehr Zeit für den Rest der Seiten zu verwenden.
Als Designer ist es angesichts der aktuellen Trends in der Webentwicklungsbranche nicht ratsam, Ihre Website-Mockups in Photoshop zu erstellen, da Sie viele andere Dinge zu tun haben.
Der Gründer der Agentur SuperFriendly Dan Mall war mit Element Collages noch einen Schritt weiter gegangen, um Dinge zu vereinfachen.
Element Collages hat eine sehr gute Benutzeroberfläche für die visuelle Erkundung von Schnittstellenkomponenten. Collagen helfen Ihnen bei der visuellen Ausrichtung, und Sie müssen nicht die gesamte Komponente selbst erstellen, da Sie nicht nur für ein Gerät entwerfen.
06 Birnen
Einige wichtige Vorteile von Frontend-Styleguides sind, dass sie einfacheres Testen, einen besseren Workflow, ein gemeinsames Vokabular ermöglichen und als Referenz dienen, auf die man immer wieder zurückgreifen kann. Pears ist ein Open-Source-Wordpress-Theme, das von Dan erstellt wurde, um einen Leitfaden für den Frontend-Stil zu erstellen.
Pears macht es Designern leicht, eine gemeinsame Bibliothek für ein konsistentes Designsystem zu nutzen.
07 Icomoon
Retina- und andere hochauflösende Displays werden schnell zur Tagesordnung, Bitmap-Symbole skalieren nicht sehr gut mit diesen hochauflösenden Geräten. Zum Glück ist die Webentwicklungsbranche dieser Aufgabe gewachsen.
Die effektive Lösung hierfür besteht darin, ein auflösungsunabhängiges Symbol zu erstellen, das durch Erstellen einer benutzerdefinierten Symbolschriftart und Einbetten mit CSS @font-face erreicht werden kann.
Iconmoon macht das Erstellen und Anzeigen von Icon-Fonts ganz einfach. Sie können aus einer Bibliothek von Symbolen auswählen, mit Optionen zum Hochladen Ihres Symbols. Von dort aus können Sie dann Ihre benutzerdefinierte Symbolschriftart generieren und ein Paket herunterladen, das die Schriftart und das entsprechende CSS enthält. Wenn es darum geht, auflösungsunabhängige Icons zu erstellen, ist Iconmoon ein wichtiges Werkzeug.
08 Vorausschau.js
Verschiedene Geräte haben unterschiedliche Möglichkeiten zum Anzeigen von Bitmap-Bildern, aber als Designer müssen Sie bedenken, dass das Laden von Bildern mit hoher Auflösung das Seitengewicht erhöhen kann. Foresight.js erkennt die Geräteanzeige und Konnektivität, um zu bestimmen, ob hochauflösende Komponenten geladen werden sollen oder nicht.
09 Detektor
Geräteerkennung und Profilerstellung können manchmal schwierig sein, da Gerätebibliotheken schwer zu verwalten sind. Da die Funktionserkennung auf der clientseitigen Erkennung beruht, kann die alleinige Abhängigkeit davon die Flexibilität bei der Bereitstellung von Funktionen für eine Vielzahl von Geräten einschränken.
Dies führt zur Erstellung des Detektors durch Dave Olsen unter Verwendung von PHP-Skript und einem auf Javascript basierenden Browser sowie einer Vielzahl von Funktionserkennungsbibliotheken. Die Bibliotheksbenutzer modernizr und User-Agent-Erkennung zur Bestimmung von Geräteklassen. Detector kann sich selbst an neue Geräte und Browser anpassen, ohne Browserinformationen aus einer zentralen Datenbank abrufen zu müssen.
10 Enquire.js
Jeder Designer weiß, wie wichtig es ist, Medienabfragen in CSS zu verwenden. Was passiert dann, wenn Sie einige Erfahrungen an einem bestimmten Punkt ändern möchten? Diese können einfach durch das Enquire.js-Skript ausgeführt werden.
Das Enquire.js-Skript verwendet Matchmedia, um einige Funktionen bedingt auszuführen und ein Skript zu laden, wenn bestimmte Bedingungen erfüllt sind. Damit können Sie von den Benutzern eine bessere und einfachere Benutzererfahrung erwarten.
11 SocialCount
Das Laden von Social-Media-Share-Widgets wie Facebook, Twitter und Google erfordert 19 HTTP-Anfrage-Widgets und fügt dem Seitengewicht zusätzliche 246,7 KB hinzu, was oft die Ladezeit von Webseiten verlängert und mehr Bandbreite verbraucht.
Zach Leatherman ging darauf ein, indem er eine leichte Lösung mit dem Namen Social Count entwickelte. Es ist ein kleines Skript, das soziale Widgets faul lädt, sodass Benutzer überhaupt nicht bestraft werden.
12 FitVids
Mehrere Medienobjekte, einschließlich Videos, unterscheiden sich im Vergleich zu Bildern in dem Sinne, dass sie nach der Größenänderung einen Teil ihres Seitenverhältnisses nicht beibehalten. Dies führt zu einem Skalierungsproblem, wenn Videos von einer Vielzahl verschiedener webfähiger Geräte angezeigt werden.< br/> Chris und anderen Designern gelang die Entwicklung eines Plugins namens FitVids.js. Das Plugin kann das richtige Seitenverhältnis von Videos oder andere erkennen und verwenden Medienobjekte bei Größenänderung. Auf diese Weise können Sie das richtige Größenverhältnis erhalten, wenn die Größe Ihres Videos geändert wird, und als Ergebnis fein angezeigte Medienobjekte einschließlich Videos in Ihren Anwendungen erhalten.
13 IE-freundliches Mobile-First-CSS
Jeder Designer weiß, wie wichtig Medienabfragen sind, aber Tatsache ist, dass der Internet Explorer keine Medienabfragen unterstützt. Gleichzeitig können Sie sich als Designer nicht dafür entscheiden, die Medienabfrage abzuschaffen, nur weil Sie den alten IE unterstützen möchten. Dieses Problem kann leicht durch die Verwendung von Sass überwunden werden. Sass wird uns zu Mobile-First-Stilen verhelfen und gleichzeitig geeignete Desktop-Stile für alte Versionen von IE bereitstellen.
14 Arbeitsplätze.
Wenn Sie als Designer online nach Tools zum Testen von Ansichtsfenstern suchen, werden Sie viele Tools zum Testen von Ansichtsfenstern finden. Das Problem dabei ist jedoch, dass die meisten Viewport-Testtools auf gängigen Gerätebreiten wie 320, 768, 1024 usw. basieren.
Ish klassifizieren und bringen allgemeine Bereiche (klein, mittel, groß usw.) heraus, nur um sicherzustellen, dass Sie das allgemeine Auflösungsspektrum hervorheben.
15 Proportionale Medienabfragen
Einige Designer verwenden immer noch Pixelwerte, um Haltepunkte zu setzen, während wir Breiten, Maßeinheiten und Schrifteinheiten relativ zu verschiedenen Geräteansichten verwendet haben. Ein gutes Tutorial wurde von Lyza Gardner gegeben, das erklärt, wie wir relative Einheiten für Haltepunkte verwenden können, um eine bessere Benutzererfahrung zu schaffen.
16 MQTest.io
Als Designer kann es manchmal etwas entmutigend sein, Medienabfragen zu verfolgen, die ein bestimmter Browser unterstützt. Dies lässt sich leicht mit MQTest.io lösen, das von Viljami Salminen entwickelt wurde. Das Tool hilft Ihnen, verschiedene Medienanfragen zu erkennen und zu analysieren, auf die verschiedene Webbrowser reagieren. Damit können Sie möglicherweise auch Medienabfragen verwenden, die nicht häufig verwendet werden.
17 Sparkbox-Lesezeichen für Medienabfragen
Sparkbox ist ein Lesezeichen für Medienabfragen, mit dessen Hilfe Abfragen für aktuelle oder verwendete Medien ermittelt werden können. Für Designer ist es unerlässlich, Zugriff auf Bildschirmabmessungen zu haben, da dies Zeit spart und auch bei der Bestimmung proportionaler Medienanfragen hilft.
18 BrowserStack
Als Designer wissen wir, wie teuer, herausfordernd und sogar entmutigend es sein kann, wenn es um das Testen in einem repräsentativen Stack von Browsern und Geräten geht. Dies lässt sich leicht lösen, wenn wir BrowserStack verwenden.
Der Browser-Stack bietet Fernzugriff auf mehrere Geräte und Umgebungen, wodurch Sie einige Qualitätssicherungstests durchführen können. BrowserStack ist so beeindruckend wie alles andere, da es auch beim Testen mit alten Versionen des Internet Explorers effektiv ist.
19 Mobitest
Leistung ist einer der wichtigsten Aspekte des Webdesigns. Mit Mobitest können Sie mit einigen Analysen sehen, wie Ihre Designs abschneiden.
Wenn Sie Ihr Design auf Mobitest testen, müssen Sie nur eine Webadresse eingeben, woraufhin das Tool die Website auf einem echten Gerät anzeigt und Ihnen gleichzeitig viele Leistungsstatistiken liefert, da Sie auch die Auslastung kennen können Zeit und durchschnittliche Seitengröße zusammen mit anderen Statistiken.
20 Adobe Edge-Prüfung
Die Bedeutung des Testens auf einem realen Gerät kann für einen Webdesigner nicht genug betont werden, da Sie vor der Veröffentlichung sehen und analysieren müssen, welche Art von Leistung Ihr Design einem Benutzer bringt. Ein Adobe Edge Inspect hat das Testen auf einem realen Gerät sehr einfach und unkompliziert gemacht, da das Tool alle angeschlossenen Geräte automatisch aktualisiert. Sie können Code auch auf einer Vielzahl von Geräten testen.
21 Codepen Pro
CodePen ist ein Tool, das schnell dabei hilft, responsive Muster und Techniken zu demonstrieren. Es ist ein Tool, das auch die Leistung unserer Designs auf verschiedenen Geräten und Computern unterstützt, während wir noch tippen.
CodePen ist ein leistungsstarkes Tool, mit dem Sie die Ergebnisse Ihres Codes auf mehreren Geräten und Computern sehen können, während Sie tippen.
Fazit
Alle 21 oben erwähnten Tools eignen sich gut für responsives Webdesign. Aber jedes der Tools hat unterschiedliche Funktionen, ich persönlich habe keine Präferenz, da alle Tools effektiv sind, wenn auch mit unterschiedlicher Oberfläche und Funktionalität. Es ist deine Entscheidung.