Frontend Technologien und Frameworks

Nachdem wir das Design Ihrer Website mithilfe von Programmen wie beispielsweise Figma oder Adobe XD erstellt haben, muss dieses Design programmiert werden. Das Design an sich ist keine Webseite, sondern nur eine Darstellung, wie sie im Browser aussehen wird.

Das heißt: Das Layout Ihrer Website wird umgesetzt, damit es für Internet Browser wie Google Chrome, Mozilla Firefox, Opera usw. lesbar ist. Dieser Prozess nennt sich Frontend Development (zu Deutsch Frontend-Entwicklung). Das ermöglicht Ihnen, dass Ihre Website nicht nur ein Designprojekt bleibt, sondern auch von Ihren Kunden im Internet besucht werden kann. Kurzum: Das Frontend ist das, was der User auf Ihrer Website sieht.

Wie arbeitet ein Frontend-Developer?

Ein Frontend-Entwickler hat hauptsächlich mit drei Programmiersprachen zu tun: HTML (kurz für Hypertext Markup Language – ist eigentlich eine Auszeichnungssprache), CSS (Cascading Style Sheets) und JavaScript (JS).

Um das Ganze zu verdeutlichen, fangen wir mit HTML an. HTML ist eine Auszeichnungssprache, die jedem Element eine Rolle erteilt: Du bist eine Überschrift, du bist eine Liste, du bist ein Bild, du bist ein Paragraph usw. Im Prinzip funktioniert sie wie Microsoft Word oder ähnliche Textverarbeitungsprogrammen.

CSS ist nun für das Optische zuständig. Anhand von Klassen (ein Name für ein HTML Element) kann man den HTML Elementen sagen: Überschriften sollen in einer bestimmten Größe, einer bestimmten Farbe und einem bestimmten Abstand zum nächsten Element dargestellt werden. Genau so werden Listen und alle anderen HTML Elemente angesprochen.

JS (JavaScript) galt 2012 noch sehr als verrufen, da diese Programmiersprache als Sicherheitsrisiko eingestuft wurde, ist aber heutzutage eine der wichtigsten Programmiersprachen im World Wide Web. Facebook, Google Maps, Uber und tausende andere Applikationen würden ohne JS kaum noch mehr funktionieren. Mit JS wird eine Funktionalität bzw. eine Interaktivität der Website programmiert. Beispielsweise das Aufklappen von Menüs oder das Versenden von Formularen werden mit JS bewältigt.

Responsive Design als hohe Priorität

Da in den letzten Jahren immer mehr Internetnutzer eher von einem Tablet oder Handy aus surfen, legt man immer mehr Wert auf ein responsive Design. Responsive Design bedeutet, dass das Design Ihrer Website so programmiert wird, dass Ihre Website auf verschiedenen mobilen Endgeräten gut aussieht.

Ein Desktop-User braucht eine übersichtliche Website, die sich über die ganze Monitorbreite streckt, während sie für das Smartphone oder das Tablet relativ kompakt und vor allem sehr gut lesbar sein sollte. All diese Faktoren muss ein Frontend-Entwickler in die Programmierung mit einbeziehen.

CSS-Frameworks

Auch wenn dem Design der Website buchstäblich fast keine Grenzen gesetzt werden, muss der Frontend-Developer beim Programmieren nicht unbedingt das Rad jedesmal neu erfinden. Nail It vertraut auf CSS-Frameworks wie etwa UiKit, Bootstrap oder auch Bulma, die nicht nur die Erstellung eines responsive Designs deutlich vereinfachen.

Diese CSS-Frameworks sind wie ein kleiner Baukasten, der gewisse Elemente schon programmiert hat (Grids, Buttons usw.). Dabei passen wir gut auf, dass der Code möglichst schlank und übersichtlich bleibt, damit jegliche Änderungen und Anpassungen im Nachhinein ohne Kopfschmerzen erledigt werden können.

Es gibt auch JS-Frameworks wie angular.js, react.js oder vue.js, die dasselbe Prinzip verfolgen wie die CSS-Frameworks, aber eben nur für andere Zwecke. Google, Amazon und alle großen Player verwenden Frameworks. Zu Recht.