Frontend Frameworks – Teil 1

Frontend Frameworks – Teil 1

Da es eine solche Vielzahl an verschiedenen Frontend Frameworks gibt, kann sich die Wahl des richtigen Frameworks schwierig gestalten. Wie viele andere Entwickler auch, neigt man oftmals dazu die beliebten und bewährten Optionen wie Bootstrap und Foundation zu nehmen. Dann aber wieder kann ein weniger weit verbreitetes Framework effektiver auf individuelle Bedürfnisse angepasst werden. Daher lohnt es sich, sich auf den neuesten Stand zu bringen und sich über verschiedene neue Frameworks und ihren Nutzen zu informieren. Über neuere Alternativen klären wir euch im zweiten Teil auf. In diesem Beitrag konzentrieren wir uns erst einmal auf die Faktoren, die ihr zu einer Ermittlung des richtigen Frameworks beachten müsst.

Aspekte, die man bei der Wahl des Frameworks beachten muss

  • Dein Skill-Level: Du solltest dir immer darüber im Klaren sein, was du kannst und was nicht. Wenn du ein Anfänger bist, dann wäre es durchaus sinnvoller ein robusteres Framework wie Bootstrap zu wählen, da es schon vorausgestattet ist mit mehreren sinnvollen Widgets, die einem nicht allzu fordernde Coding Kenntnisse abverlangen. Bist du jedoch bereits geübter im Coden, solltest du Frameworks in Betracht ziehen, die mehr individuelle Anpassungen zulassen.
  • Responsive Design: Jede Website, die man entwickelt, sollte ordnungsgemäß über alle Geräte zugänglich sein, da immer mehr Menschen über mobile Geräte auf das Internet zugreifen. Die WELT berichtete erst kürzlich über eine Studie von Adobe Digital Insights, die ausgewertet hat, dass Webseiten fast nur noch über Smartphones angesehen werden. An zweiter Stelle steht das Tablet und die heute schon altmodische Desktop-Ansicht über PCs bilden damit das Schlusslicht. Um die Kunden also anzusprechen, ist ein responsive Design also unabdingbar.
    Darüber hinaus hat die Studie ergeben, dass die allgemeine App-Nutzung und Neuinstallationen von Apps im weltweiten Trend stagniert, aber Deutschland hierbei die große Ausnahme bildet. Somit bilden wir einen großen Inlands-Markt an App-Nutzung ab. Deshalb: Bleib bei Frontend Frameworks, die reaktionsfähige Web-Designs unterstützen. In dieser Hinsicht solltest du deine Experimentierfreudigkeit nicht ausleben und dich nach den Marktanalysen richten.
  • CSS Preprocessors: Solltest du diese benutzen und den ein oder anderen besonders nutzen, stelle im Voraus sicher, dass dein Framework diese unterstützt.

Alles zusammenfassend sollte das richtige Frontend-Framework das Webseiten-Design vereinfachen und optimieren und den Entwicklungsprozess beschleunigen. Dabei sollte bei der flexiblen Nutzung unterschiedlicher Funktionen keine Abstriche gemacht werden, damit immer noch ein einzigartiges und qualitatives Endergebnis rauskommt.

Hilfreiche jQuery / Javascript Plugins – Teil 4

Hilfreiche jQuery / Javascript Plugins – Teil 4

Heute stellen wir euch ein paar der jQuery Plugins für den Frontend Bereich vor, die wir persönlich für kreativ und nützlich erachten und warum.

  • Material Design Hierarchical Display
    Wenn ihr dem Link, unterlegt im Bild, folgt, seht ihr wie aus vielen verschiedenen Elementen, ein einziges großes entsteht. An den Beispielen könnt ihr euch mit den Animationseffekten ausprobieren. In jedem Fall ist hier ein einschlägiger Effekt gegeben, wenn man diese Plugins auf Internetshops als Logo oder auf Unternehmenswebsites nutzt. Der Kreativität sind dabei keine Grenzen gesetzt, denn sowohl Effekte als auch Elementenanordnung und ob man aus vielen kleinen überhaupt ein großes zusammenhängendes machen möchte, sind individuell gestaltbar.

Einen Einblick in den Code seht ihr hier:

Mit 2 Zeilen ist diese Codierung also recht kurz und simpel gehalten, erzielt aber einen einschlägigen Effekt für einen professionellen Internet-Auftritt.

  • TwentyTwenty

    Das perfekte Plugin, um einen Vergleich zwischen zwei Aspekten visuell hervorzuheben.
    Das Tool sorgt dafür, dass man zwei Bilder übereinander legen kann, ohne dass man zwei Bilder nebeneinander posten muss. Dabei kann man ganz einfach mittels eines Sliders das obere Bild schieben, um das untere zu sehen. Das eignet sich optimal für Vergleiche, in dem man diverse Änderungen an Gebäuden beispielsweise darstellen möchte. Durch den Slider bestimmt man selbst bis zu welchem Abschnitt man das obere Bild zur Seite schiebt und wie viel man vom anderen, unten gelegenen, offenbart. Somit kann man ganz genau Stück für Stück die übereinander liegenden Bilder live miteinander vergleichen. Für einen Vorher/Nachher-Effekt ideal.
    Hier der Code dazu:
  • RoundSlider

Hier haben wir einen Slider, den man ebenfalls individuell designen kann und für verschiedene Zwecke für sich nutzen kann. Auch hier sind Online-Shops als Beispiel zu nennen. Diese haben des Öfteren Funktionen, mit denen man die Mindest- sowie Maximal-Preishöhe einstellen kann. Dafür sind die modern gestalteten Slider ein Blickfang. Auch bei Abbildungen von Prozentzahlen können die Slider eine innovative Darstellungsform bieten, sodass man sich von anderen digitalen Präsenzen unterscheidet.
Hier könnt ihr euch die verschiedenen Optionen der Slides ansehen:

Das waren einige wenige Plugin Beispiele, in die man sich sowohl von der Programmierer-Seite als auch von einem unternehmerischen Standpunkt aus einarbeiten kann. Simple Codierung mit prägnantem Effekt durch Animation und Design ergeben Plugins, die jede digitale Präsenz nach Außen entsprechend vermarkten. In der heutigen Zeit ist das Visuelle aller anderen Vermarktung voraus. Daher lohnt es sich mit den einfachsten Mitteln auf Blickfang zu setzen.