Wirklich einfach reagierendes Design
Es ist kein Geheimnis, dass viele glauben, Responsive Web ist die Zukunft. Die Erstellung einer Responsive-Site bedeutet, dass sie sich an die vielen verschiedenen verfügbaren Browser und Größen anpassen kann. Wenn ich sicherstellen möchte, dass meine Website, die ich auf meinem Desktop erstellt habe, auf einem Tablet mit minimalem Scrollen und Zoomen angezeigt wird, werde ich daran interessiert sein, eine responsive Website zu erstellen.
Ein Grund dafür, dass Responsive-Sites populär geworden sind, ist, dass es nur Sinn macht. Es ist billiger als eine oder mehrere zusätzliche Websites für Mobiltelefone und Tablets zu erstellen. Es sorgt auch für eine konsistente Seherfahrung zwischen Geräten und Desktop-Bildschirmen. Es macht keinen Spaß, die Größe Ihres Fensters zu vergrößern oder horizontal zu blättern, um eine ganze Website zu sehen.
Während das Erstellen responsiver Webdesigns einfacher wird, gibt es einige Möglichkeiten, es noch schneller zu machen. Dank einiger CSS und HTML können wir es direkt in unsere Seiten einordnen. Andere Elemente erfordern ein bisschen mehr Arbeit. Wie auch immer, wir haben uns eine Liste ausgedacht, die Ihnen hilft, Ihre responsive Website mit minimalem Aufwand und maximalen Ergebnissen zusammenzustellen.
jQuery-Plugins
Isotop
Isotope ist ein jQuery-Plugin, das vorgibt, magische Layouts zu erstellen, die von CSS und HTML nicht erstellt werden können. Es bietet die Möglichkeit, Elemente innerhalb eines Containers so anzuordnen, dass sie bei der Größenänderung in den Container passen. Sie können Isotope auch zum Filtern und Sortieren von Elementen nach Kategorien usw. verwenden.
Haltepunkte.js
Breakpoint wurde im Hinblick auf Entwickler und Designer entwickelt. Es ist ein Plugin, mit dem Sie Breakpoints für verschiedene Browsergrößen erstellen können. Wenn Ihr Browser auf eine dieser Größen angepasst wird, können die Elemente in den Bildschirm passen.
FitText.js
Dies ist eines meiner Lieblings-jQuery-Plugins, weil es für Schriftarten ist. Viel zu oft im Responsive Web Design, berücksichtigen die Leute nicht, dass die Schlagzeilen reaktionsfähig sein sollten, anstatt in einen bestimmten Raum zu geraten. Mit FitText können Sie genau das tun, aber denken Sie daran, es nur für Überschriften zu verwenden!
Antwort.js
Wenn Sie die Idee von Breakpoint.js mögen, aber mehr Anpassung wünschen, ist Response.js die Antwort. Es ist wirklich großartig für diejenigen, die jQuery besser als CSS und HTML kennen und reaktionsschnelle Websites erstellen müssen. Sie verwenden Ihre Breakpoints, aber es gibt noch viel mehr Anpassungen, z. B. Gerätegröße, Pixelrationen und die Möglichkeit, unterschiedliche Quellen für unterschiedliche Größen zu laden.
TinyNav.js
TinyNav ist ein leichtgewichtiges jQuery-Plugin, mit dem Sie alle Menüelemente mithilfe von Listen ändern können, um in Dropdown-Menüs zu wechseln, wenn die Größe des Browsers geändert wird. Sie können sowohl die Größe als auch die zu ändernden Menüs festlegen. Es ist nicht so breit in der Funktion, aber es ist sehr effektiv für das, was es tut.
Beliebte Frameworks und Systeme
Responsives Rastersystem
Dieses System behauptet, kein Standard oder Framework zu sein, sondern nur ein System, um Ihre Designs ansprechend zu gestalten. Es scheint eine der flexibelsten zu sein, da es Sie nicht auf eine bestimmte Größe oder eine bestimmte Größe beschränkt. Sie verwenden unterschiedliche CSS-Klassen, die floaten und eigene Spalten erstellen können.
Goldenes Raster-System
Die GGS ist auch ein System und kein "Rahmen". Sie bezeichnen sich selbst gerne als Ausgangspunkt oder Richtlinie für diejenigen, die eine bestimmte Anzahl von Grids in ihrem Webdesign verwenden möchten. Du erhältst 18 Spalten auf dem Bildschirm, aber 16 für dein Design. Sie machen sich Ihre eigenen Breiten und Dachrinnen zu Nutze und gehen im Wesentlichen von dort aus.
1140 Gittersystem
Eine Zeitlang verwendeten viele Designer Webdesigns mit einer Breite von 960 Pixeln. Dann wurde das zu klein und sie gingen hinauf. Jetzt werden viele Designs mit einer Breite von 1140 Pixeln entwickelt. Mit diesem 1140-Rastersystem können Sie 12 Spalten erstellen, um sie in einem breiten Webdesign zu verwenden.
Twitter Bootstrap
Bootstrap ist eines der beliebtesten verfügbaren Frameworks. Es ist ein Framework mit 12 Grids, das sich browserübergreifend nutzbar gemacht hat (einschließlich Internet Explorer 7) und als Antwort auf Handheld-Geräten verwendet werden kann. Es kommt mit verschiedenen Styling-Komponenten, Typografie und JavaScript zu verwenden und schlanke, intuitive Websites zu erstellen.
SimpleGrid
SimpleGrid nimmt die Idee von Grids und vereinfacht sie. Bei den meisten Gridsystemen und Frameworks haben Sie diese unbekannten Klassen und unbekannten Spalten. Ein einfaches Gitter hat Klassen, die angeben, welche Spalten zuerst, mitte und zuletzt sind. Darüber hinaus können Sie den Spalten verschiedene 'Slots' hinzufügen, um den Eindruck zu erwecken, dass mehr Spalten vorhanden sind. Es ist ein sehr einfacher und unkomplizierter Rahmen.
Andere ansprechende Tools
Responsive Web Design Skizzenblätter
Wie jeder Designer oder Entwickler skizzieren Sie Ihre Entwürfe wahrscheinlich, bevor Sie sie tatsächlich erstellen. Hoffentlich tust du es. Wenn nicht, sollten Sie vielleicht mit diesen RWD-Skizzenblättern beginnen. Sie kommen mit unterschiedlichen Geräten und Desktop-Größen auf ihnen, so dass Sie alles planen können.
Responsive Design Skizzenbuch
Wenn Sie die Idee des Skizzierens auf Papier mögen, aber alle Ihre Kritzeleien zusammen haben möchten, können Sie sich das reaktionsschnelle Design-Skizzenbuch überlegen. Es kommt mit 50 Seiten, Spiralbindung mit verschiedenen Bildschirmgrößen auf jeder Seite. Alle Raster und Mathe sind bereits für Sie erledigt, also ist dies ein großartiges Werkzeug für Anfänger und Experten im Responsive Design.
Stil Fliesen
Dies ist eine nette kleine Ressource für Webdesigner, ob sie etwas für responsives Design suchen oder nicht. Es ist ein PSD, mit dem Sie die Essenz einer Website durch Hinzufügen von Überschriften (Typografie), Logos, Farben und anderen Elementen erhalten können. Der Grund, warum dies für responsives Webdesign funktioniert, ist, dass es keine Dimensionen beinhaltet, nur eine digitale Idee ohne Einschränkungen.
Responsiver Rechner
Es ist eine Menge Mathe in die Erstellung pixel-perfekter responsiver Designs involviert. Es ist notwendig, dass Ihre Mathematik auch korrekt ist, weil Sie mit verschiedenen Prozentsätzen, Breiten und Browsergrößen zu tun haben. Um zu helfen, hier ist ein Rechner, der Ihnen die richtige Mathematik und die CSS gibt, um damit zu gehen.
Fazit
Es ist wichtig, dass wir darauf achten, was Responsive Web macht. Viele Kunden möchten ihre Websites für eine Vielzahl von Geräten verfügbar haben, und es ist nur kostengünstiger, responsive Websites zu erstellen. Darüber hinaus helfen die meisten Ihrer Frameworks und anderen Ressourcen für Responsive Design, organisierte und hochwertige Standardwebsites zu pflegen.
Was sind Ihre bevorzugten Möglichkeiten, responsive Designs zu starten? Haben wir eine Ressource verpasst, auf die Sie sich verlassen? Lassen Sie es uns in den Kommentaren wissen.