Eine ansprechende Frontend-Umsetzung zeichnet sich durch eine Vielzahl von wichtigen Aspekten aus, die Faktor E professionell umsetzen kann.
"Frontend" beschreibt im Allgemeinen die Schnittstelle zwischen dem fertigen Design und der Backend-Programmierung/dem Content-Management-System. Oder noch einfacher ausgedrückt: "Das, was Sie sehen können, wenn Sie eine Webseite im Browser aufrufen."
Zur Frontend-Entwicklung gehören auch die Bereiche Barrierefreiheit, SEO und Responsivität, die in den letzten Jahren immer mehr an Bedeutung gewonnen haben.
Wie arbeiten wir bei Faktor E mit dem Frontend?
Initial gibt es 3 wichtige Bausteine: das HTML, das CSS und Javascript.
Das HTML (Hyper Text Markup Language) ist sozusagen der strukturelle Aufbau der Webseite. Hier wird ein Element (z.B. Ihr Bilder-Slider oder die Navigation) in seiner reinen Struktur definiert. Vergleichen Sie das HTML z.B. mit einem Grundriss eines Hauses oder einer Blaupause. Es gibt keine grafischen Gestaltungen oder ähnliche Dinge. Im HTML werden auch bereits eine Vielzahl an wichtigen Definitionen bzgl. der Barrierefreiheit und der Suchmaschinenoptimierung getätigt, wie bspw. die "aria"-Attribute, Alt-Texte für Bilder oder Optionen für die Tastaturbedienung.
Das CSS (Cascading Style Sheets) hingegen sorgt dafür, dass die Strukturelemente des HTML "mit Leben gefüllt" werden. Hier wird definiert, welche Farben zum Einsatz kommen, welche Schriftart Ihre Seite hat oder welche Anordnungen bestimmte Elemente haben (bspw. 3 Textblöcke in einer Reihe). Sowohl das CSS, als auch die HTML-Struktur basieren sehr stark auf dem gelieferten Design. Zum Einsatz kommen bei uns entweder die CSS-Frameworks tailwindcss, Bootstrap oder ein gänzlich individuell erstelltes CSS mittels der Preprocessor-Technologie SCSS.
Javascript ist eine Programmiersprache, die es u.a. ermöglicht, dynamisches Verhalten auf einer Webseite zu erzeugen.Während einige einfache Animationen heutzutage auch mit CSS umsetzbar sind, benötigen andere Dinge zwingend Javascript-Anweisungen. Beispielsweise soll sich ein Popup-Fenster öffnen, wenn Sie auf einen Button klicken oder beim Laden der Webseite soll etwas spezielles passieren. Für solche Fälle reicht CSS in der Regel nicht aus. In den letzten Jahren hat sich die Popularität von Javascript so stark erhöht, sodass es heutzutage sogar möglich ist, ganze Webseiten mithilfe von Javascript-Frameworks und Javascript-Bibliotheken, wie bspw. React oder Vue zu realisieren.
Barrierefreiheit ist ein eminent wichtiger Aspekt der (Frontend-)Programmierung.
Das HTML muss so geschrieben werden, dass eine Webseite von allen Menschen vollzugänglich gelesen werden kann. Zu diesem Zweck achten wir stark darauf, dass die Grundprinzipien der Barrierefreiheit schon bei der Frontend-Umsetzung eingehalten werden.
SEO (Search Engine Optimization) ist nicht weniger wichtig, wenn es um die Umsetzung einer Webseite geht. Bereits scheinbar irrelevante Aspekte, wie eine valide HTML-Struktur oder das Verwenden von ALT- und Title-Attributen für Bilder und Links bewirken bereits eine Verbesserung der Auffindbarkeit in Suchmaschinen.