... und Tipps, wie man sie vermeidet

Die 10 häufigsten Fehler in der Web-Entwicklung
Kommentare

Um eine Website zu entwickeln, die den heutigen Ansprüchen des Webs genügt, gibt es zahlreiche Möglichkeiten: Web-Entwickler müssen sich für eine Hosting-Plattform und den zugrunde liegenden Datenspeicher entscheiden, müssen auswählen, welche Tools sie zum Schreiben von HTML, CSS und JavaScript einsetzen, wie das Design implementiert wird und welche Frameworks sie verwenden. Nachdem alle diese Entscheidungen getroffen sind, finden sich im Web unzählige Tipps, die für eine bessere Web-Experience sorgen sollen. Egal, für welchen Weg man sich entscheidet, eins ist sicher: Jeder Entwickler ist anfällig für Fehler.

Als Web-Entwickler steht das Streben nach Perfektion oftmals an erster Stelle: Die Website soll möglichst benutzerfreundlich, stabil und zuverlässig sowie natürlich ansprechend gestaltet und mit sinnvollem Inhalt befüllt sein. Da so viele Dinge gleichzeitig zu beachten sind, kommt es durchaus dazu, dass Details vergessen oder als nicht so wichtig angesehen werden. Die Top-10-Fehler bei der Web-Entwicklung hat Michael Palermo zusammengefasst – gleichzeitig gibt er auch Tipps, wie sich diese vermeiden lassen.
1.

Old-School HTML

In den Anfangszeiten des Webs gab es wesentlich weniger Möglichkeiten für Markups. Mittlerweile hat sich das zum Glück geändert, dennoch nutzen viele Entwickler HTML-Code wie im vorherigen Jahrhundert. So werden beispielsweise immer noch table-Elemente für das Layout oder span– und div-Elemente verwendet – obwohl semantikspezifische Tags viel geeigneter wären. Auch werden oft noch Tags wie center oder font eingesetzt, die vom heutigen HTML-Standard nicht mehr unterstützt werden. Das führt zu einem überkomplizierten Markup, das sich in verschiedenen Browsern inkonsistent verhält. Zudem ist die Verwendung von veraltetem (aber bewährtem) HTML in modernen Browsern schlicht nicht nötig.

Michael Palermo empfiehlt, das <table>-Element nicht mehr für Layout zu nutzen und den Gebrauch für das Anzeigen von tabellarischen Daten einzuschränken. Vielmehr sollten sich Entwickler mit gängigen Markup-Optionen vertraut machen, wie sie etwa auf whatwg.org beschrieben werden. HTML sollte genutzt werden, um den Inhalt zu beschreiben, nicht die Darstellung. Um Content richtig anzuzeigen, rät Palermo zu CSS.
2.

„Es funktioniert in meinem Browser…“

Entwickler, die einen bestimmten Browser besonders schätzen, testen ihre Applikationen hauptsächlich in diesem. Auch werden online gefundene Code-Samples des Öfteren geschrieben, ohne darauf zu achten, wie diese in anderen Browsern rendern. Dazu kommt, dass manche Browser unterschiedliche vorgegebene Werte für Styles haben. Baut man nun eine browserzentrierte Site, führt das zu schlechter Qualität in anderen Browsern.

Webpages in jedem Browser und jeder Version zu testen, ist natürlich nicht besonders praktikabel. Dennoch sollten Entwickler immer wieder die Performance ihrer Site in verschiedenen Browsern checken. Dabei können Tools wie Ghostlab oder Sauce Labs helfen. Auch mit Visual Studio lassen sich verschiedene Browser aufrufen, in denen die Site, an der man gerade arbeitet, angezeigt wird.
3.

Schlechte Formulare

Ein oft begangener Fehler ist davon auszugehen, dass Nutzer in ein bereitgestelltes Formularfeld genau die Daten eingeben, die man sich als Developer wünscht. Vertraut man darauf, dass die Nutzereingaben stimmen, kann einiges schief gehen: Websites oder ganze Geschäftsmodelle können scheitern, wenn die benötigten Daten nicht oder falsch geliefert werden. Zudem ist es auch möglich, dass empfangene Daten nicht mit dem zugrunde liegenden Datensystem übereinstimmen. Ein weiteres – und schwerwiegendes – Problem sind beispielsweise Beeinträchtigungen der Website-Datenbank, beispielsweise durch (Hacker-)Angriffe von außen.

Der erste Tipp lautet daher: Von vornherein deutlich machen, welche Daten gewünscht sind. Fragt man beispielsweise nach einer Adresse, kann das die Heim-, Firmen- oder E-Mail-Adresse bedeuten. Zusätzlich sollten Entwickler Datenvalidierungstechniken nutzen. Daten sollten nicht nur browserseitig bestätigt werden, sondern auch immer serverseitig. In keinem Fall sollte einer verketteten T-SQL-Anweisung gestattet werden, Daten aus Usereinträgen ohne Validierung zu nutzen.
4.

Verzögerte Rückmeldungen

Um eine Website ansprechend zu gestalten, nutzen Webdesigner gerne hochauflösende Grafiken und Bilder, die mittels img-Element herunterskaliert werden. Auch von der Page verlinkte Dateien wie CSS und JavaScript führen zu einem Anwachsen der Site. Zudem ist das HTML-Quellmarkup oft unnötig komplex und umfangreich. Das führt alles dazu, dass eine Website eine unglaublich lange Ladezeit aufweist – und User entweder abspringen oder die Site ständig neu laden.

Man ertappt sich ab und an bei dem Gedanken, dass die Internetverbindungen ja immer schneller werden, also kann auch der Content der Website gerne umfangreich werden. Das ist aber ein Trugschluss:

In 2012, the average page took 7.1 seconds to load in Chrome 20. In 2015, the average load time had increased to 10.4 seconds for pages tested in Chrome 40.

Auch zeigt sich, dass eine mehr als 300 Prozent schnellere Bandbreite nur zu einer 24,6 Prozent verbesserten Seitenleistung führt. Aus diesem Grund sollten Entwickler darauf achten, ihre Website nicht zu überfrachten: Gerade Bilder blähen eine Site immens auf. Deswegen ist es ratsam, sich stets an folgende Tipps zu halten: 1. Sind wirklich alle Bilder nötig? Wenn nein, runter damit! 2. Datengröße verringern. Dabei helfen Tools wie Shrink O’Matic. 3. Bilder vorladen. Das verringert zwar nicht die Downloadzeit, beschleunigt aber die Ladezeit anderer Unterseiten, die das Bild auch verwenden. Außerdem können verlinkte JavaScript- und CSS-Files mit Programmen wie Minify CSS und Minify JS verkleinert werden.
5.

Code entwickeln, der funktionieren sollte

Entwickler haben Code, Frameworks usw. in einer Testumgebung geprüft und dabei festgestellt, dass alles funktioniert. Deswegen wird also auch davon ausgegangen, dass der Code auch in der echten Umgebung läuft. Allerdings führen Sites, die nicht ordentlich auf Fehler geprüft wurden, bei Endnutzern manchmal zu hässlichen Fehlern: So wird nicht nur die User Experience dramatisch beeinflusst, sondern die Art der Fehlermeldung kann auch Hackern Hinweise darauf geben, wie sie die Site am besten angreifen.

Wie schon die lateinischen Philosophen sagten: Irren ist menschlich. Dieser Ausspruch muss auch aufs Coding angewendet werden: Nutzt man zum Beispiel JavaScript, sollten Entwickler gute Techniken implementieren, um Fehler zu vermeiden und aufzudecken. Eine weitere Methode, um stabilen Code zu entwickeln, der auch zukünftigen Veränderungen standhält, ist das Unit Testing. Auch nutzerfreundliche 404-Fehlerseiten sind empfehlenswert.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.


6.

Forking Code

Will man es nun aber richtig machen und Code schreiben, der alle Browser und Versionen unterstützt, kann das auch zu Problemen führen. Denn der Code verkommt zu einer „Müllhalde“ unterschiedlicher Anweisungen und verteilt sich unkontrolliert in alle Richtungen. Gibt es dann auch noch Browserupdates, wird der Code ziemlich schnell unhandlich und schwierig zu handlen.

Um das zu vermeiden, hilft es, Feature Detection im Code zu implementieren – anstatt Browser/Version-Detection. Feature-Detection-Techniken erlauben es, die Code-Menge zu reduzieren und zugleich sind sie einfacher zu lesen und zu managen. Libraries wie Modernizr unterstützen nicht nur Feature Detection, sondern bewahren auch vor einem Fallback-Support für ältere Browser.
7.

Nicht-responsives Design

Beim Entwickeln vergessen Developer oftmals, dass Nutzer nicht zwingend das gleiche Gerät oder den gleichen Bildschirm nutzen wie sie selbst. So kommt es dazu, dass bei der Ansicht auf einem mobilen Device oder einem sehr großen Bildschirm die User Experience leidet: Entweder sind wichtige Bereiche der Website nicht zu sehen oder die Navigation zu anderen Sites wird sogar verhindert.

Was dagegen hilft? Think responsively! Entwickler sollten Responsive Webdesign nutzen. Auch die Verwendung von responsiven Bildern ist eine Möglichkeit. Eine beliebte ready-to-serve Library ist Bootstrap, die ein flexibles Grid-System mit einem standardisierten und dokumentierten Layout bereitstellt und das Thema der responsiven Bilder stärker in den Vordergrund rückt.
8.

Unbedeutende Websites & Barrierefreiheit

Auch Websites, die ansprechende, spannende Inhalte bieten, können bedeutungslos sein. Und zwar unbedeutend für Suchmaschinen. Sind Pages nicht suchmaschinenoptimiert, werden sie auch nicht gefunden. Wenn zudem noch Accessibility-Features nicht implementiert sind, bietet die Website keinen Mehrwert für Nutzer mit eingeschränkten körperlichen Funktionen.

Um auf Google auf der ersten Seite zu erscheinen, hilft die Suchmaschinenoptimierung (SEO). Dafür sollten Tags gesetzt werden, die einer Website durch Keywords Bedeutung verleihen. Außerdem sollte in HTML Accessibility, sprich Barrierefreiheit, unterstützt werden: So kann zum Beispiel jeder img– oder area-Tag mit einem alt="your image description"-Attribut versehen werden. Unter Cynthia Says lässt sich jede beliebige Website darauf testen, ob sie die Ansprüche für körperlich eingeschränkte Nutzer erfüllt.
9.

Zu viele Reloads

Genauso wie aufgeblähte Sites (Punkt 4) führen Websites, die für jede neue Interaktion einen Reload erfordern, zu einer schlechten User Experience. Zudem wird auch die Performance der Seitenladezeit beeinflusst. Nutzer werden so mit einer Website konfrontiert, die für jede Handlung eine Rücksetzung der Page nach sich zieht.

Der einfachste Weg, dieses Problem zu lösen, besteht in der Festlegung, ob das Rückposting zum Server wirklich nötig ist. Beispielsweise kann Client-Side-Script verwendet werden, um direkte Resultate zu liefern, sofern keine Abhängigkeit für serverseitige Ressourcen vorliegt. Auch AJAX oder Single-Page-Applications helfen bei der Problemlösung. JavaScript-Libraries wie JQuery oder AngularJS unterstützen bei der Verwendung der genannten Methoden.
10.

Entwickler arbeiten zu viel

Da jeder Entwickler natürlich die perfekte Website erstellen möchte, erfordert das einen immensen Zeitaufwand. Unzählige Tests und lange Codepassagen führen dazu, dass man sich zeitlich schnell verrennt. Bemerkt man dann auch noch, dass andere Developer in der gleichen Zeit viel mehr schaffen, führt das zu Frustration und immer mehr Arbeit.

Stellt man in einer Entwicklungsphase fest, dass man nicht weiterkommt oder schlicht zu viel Zeit verliert, hilft ein effizientes Ressourcenmanagement. Genauso hilfreich ist aber auch die genaue Lektüre der verwendeten Tools – studiert man die Funktionsweise anfangs richtig, spart einem das hinterher viel Ärger und Zeit. Außerdem finden sich im Web unzählige Tools, die Testing und Fehlersuche vereinfachen. Auch das Automatisieren von Prozessen sorgt für weniger Stress und Fehler; Grunt ist hierfür ein hilfreiches Werkzeug.

Fazit

Beachtet man die Tipps und ist sich der zehn häufigsten Fehler bei der Web-Entwicklung bewusst, kann man sich einige Frustration sparen. Fehler passieren und sind nicht schlimm; man muss sie nur erkennen, verstehen und schließlich beheben. Gelingt das, steht einem entspannten Entwicklungsprozess mit einem alle zufriedenstellenden Ergebnis nichts im Weg.

Aufmacherbild: Help Avoiding Mistakes von Shutterstock / Urheberrecht: retrorocket 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -