Frontend-Entwicklung
Unter Frontend-Entwicklung fallen bei einer Website all die Arbeiten, die im Browser des Benutzers ablaufen. Also alles was mit der Anzeige der Website zu tun hat. Also zum Beispiel der Aufbau, die Farben oder auch Animationen.
Das Gegenstück zum Frontend ist das Backend, was die eingehenden Daten verarbeitet. Es stellt den Code zur Verfügung, der dann an den Server geschickt wird.
Diese beiden Bereiche werden teilweise auch von verschiedenen Leuten entwickelt. Die Person, die sich um das Frontend kümmert nennt man Frontend-Entwickler.
Woraus besteht das Frontend einer Website?
Alleine im Frontend gibt es schon einige Technologien, die die Darstellung einer Website beeinflussen. Am wichtigsten sind dabei HTML, CSS und JavaScript, die eigentlich in jedem Browser vorhanden sind.
Der wichtigste Bestandteil einer Website ist HTML (Hypertext Markup Language). Sie beinhaltet die wichtigsten Elemente, die man auf einer Website sieht und kann dadurch theoretisch auch ohne alle anderen Technologien verstanden werden. HTML ist oft der erste Schritt, um Programmierung zu lernen.
CSS (Cascading Style Sheets) ist für die Gestaltung der Webseiten zu ständig. Sie ist ein Regelwerk, dass zum Beispiel festlegt, welche Schriftgrößen oder Farben eine Internetseite hat. Mit CSS ist es auch möglich, dass eine Seite auf verschiedenen Geräten unterschiedlich dargestellt wird.
JavaScript hilft bei allem, was dynamisch ist. Ein wichtiger Bestandteil davon ist Ajax, mit dem es möglich ist, Inhalte nachzuladen, ohne dabei die Seite neu aufzurufen. Das ist die Basis, um zum Beispiel Chat-Systeme zu erstellen. Aber auch ein Großteil des Trackins läuft über JavaScript.
Progressive Web Apps
Progressive Web Apps sind Anwendungen, die sich auf Smartphone, Tablet und Desktop-Rechner installieren lassen. Sie eigenen sich vor allem für die mobile Softwareentwicklung, weil man mit sehr wenig Aufwand eine bestehende Website zu einer installierbaren App verwandeln kann.
Mehr zu PWAVeraltete Technologien
Da die Möglichkeiten von HTML, CSS und JavaScript früher noch begrenzt waren, gab es immer wieder Technologien, die darauf aufbauen. Einige davon funktionieren aktuell noch, andere werden schon nicht mehr unterstützt. Dazu zählen zum Beispiel Flash, HTA oder WML.
Qualitätssicherung
Das Frontend kann später in den verschiedensten Umgebungen aufgerufen werden. Dazu zählen zum Beispiel verschiedene Browser oder Endgeräte. Hinzu kommen noch verschiedene Einstellungen, die sich von Benutzer zu Benutzer unterscheiden können. Dadurch kann es sein, dass sich Darstellungen unterscheiden oder Funktionen auch nicht nutzbar sind, obwohl es in der Entwicklungsumgebung ohne Probleme funktioniert.
Außerdem ist es wichtig, dass die Besucher möglichst sich gut in auf der Website zurecht finden. So kann es sein, dass man mobil zum Beispiel die Telefonnummer hervorheben sollte und auf dem Desktop die E-Mail Adresse. Diese Situationen sollte man bereits beim Design berücksichtigen.
Das Wichtigste in der Qualitätssicherung im Frontend ist das Thema Webanalyse. Es ist nicht möglich bzw. auch nicht wirtschaftlich, jede mögliche Situation vorab zu testen. Aus diesem Grund sollte man analysieren, auf welchen Geräten zum Beispiel wenig Umsätze generiert werden und das dann gezielt optimieren. Das ist ein langfristiger Prozess der Optimierung.
Aber natürlich sollte man bereits zum Start einer neuen Webprojektes eine gute Qualität liefern. Hierzu kann man am besten so vorgehen:
- Umgebungen und Mindestanforderungen festlegen
- Sauber programmieren
- Testen in den vorher festgelegten Umgebungen
1. Umgebungen und Mindestanforderungen
Zum Start eines Projektes sollte man sich überlegen, welche Umgebungen man fokussieren möchte. In vielen Fällen lohnt es sich wirtschaftlich nicht, wirklich alles zu unterstützen. Wer zum Beispiel jede ältere Version des Internet Explorers oder auch ältere Smartphones akzeptieren möchte, muss dabei mit recht hohen Kosten in der Entwicklung rechnen. Manchmal ist es sogar gar nicht möglich, alles überall zum Laufen zu bringen.
Aus diesem Grund kann man zum Start schauen, welche Umgebungen später am meisten genutzt werden. Dabei ist es am besten, auf eigene Statistiken zurückzugreifen, um zu schauen mit welchen Umgebungen die Leute auf die Seite kommen. Bei neuen Projekten kann man sich über verschiedene allgemeine Browser-Statistiken aushelfen.
2. Sauber programmieren
Wer bei der Entwicklung selbst bereits sauber arbeitet, kann sich dadurch später viele Probleme sparen. Und noch besser: In der Regel laden sauber programmierte Seiten schneller.
Um das zu tun, ist es wichtig, selbst einen Einblick im Quellcode zu haben und sich nicht nur auf fertige Software zu setzen. Denn so einige Programme liefert wirklich schlechte Ergebnisse. Deswegen sollte man dabei immer einmal schauen, was am Ende wirklich am Code herauskommt.
Es gibt einige Anbieter, die Richtlinien für die Programmierung herausgeben, die in der Regel eine gute Performance und Kompatibilität sichern. Dazu zählen zum Beispiel auch die Guidlines von Google.
3. Testen in den vorher festgelegten Umgebungen
Man sollte bereits während der Entwicklung immer mal wieder verschiedene Browser testen. Dadurch wird man später nicht überrascht, wenn es später irgendwo komplett anders aussieht. Auch ein Test auf dem Smartphone macht, nach Möglichkeit, Sinn.
Zum Ende kann man dann noch einmal einen intensiveren Test machen und dabei zum Beispiel auch ältere Browser testen.
Software zur Frontend-Entwicklung
Zum Thema Frontend-Entwicklung gibt es eine ganze Reihe an Software. Aufpassen sollte man dabei vor allem bei grafischer Software, die HTML, CSS und JavaScript automatisch generiert. Dieser ist oftmal nicht sehr hochwertig, was zur Folge haben kann, dass die Ladezeiten hoch sind oder die Darstellung in Browsern fehlerhaft. Recht bekannte Tools sind dabei Dreamweaver und Microsoft Expression Web.
Unterstützung benötigt?
Die Browser möchten nicht so, wie Sie es möchten? Nehmen Sie doch einfach Kontakt auf. Zusammen finden wir eine Lösung!
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project