Advertisement
  1. Web Design
  2. UX/UI
  3. UX Design

Checkliste für den Start der Site eines Webdesigners (einschließlich tragbarer Formate)

Scroll to top
Read Time: 14 min

() translation by (you can also view the original English article)

Bei FHOKE haben wir alles durchgemacht, von perfekten Starts bis hin zu solchen, die sich zu kompletten Albträumen entwickelt haben! Aufgrund unserer Erfahrungen haben wir eine Liste ohne bestimmte Reihenfolge eines Prozesses zusammengestellt, den wir durchlaufen, bevor wir unsere Websites starten.

Dies wird nicht alles abdecken, sollte Ihnen aber einen schnellen Überblick darüber geben, was Sie tun oder Ihrer eigenen Checkliste hinzufügen könnten.

Um Ihre Aufgabe noch einfacher zu gestalten, haben wir eine Reihe von Versionen dieser Checkliste erstellt, darunter eine HTML-Version, Markdown, PDF und Evernote. Laden Sie sie alle vom Tuts+ GitHub-Konto herunter.

evernoteevernoteevernote

Erfolgreicher Start

Nachdem viel Zeit in ein Projekt investiert wurde, ist der Launch Day in Sicht. Bevor Sie dort ankommen, werden Sie noch wichtige Probleme haben, die für eine erfolgreiche Einführung angegangen werden müssen. Wenn Sie diese richtig machen, werden Sie und Ihr Kunde glücklich sein.

Denken Sie daran, bevor Sie einem Kunden etwas zeigen, vergewissern Sie sich, dass die Site der ursprünglichen Spezifikation entspricht, pixelgenau zu den von Ihnen präsentierten Designs ist und ihren ursprünglichen Auftrag erfüllt.


Inhalt

Stellen Sie ein kleines Team zusammen und gehen Sie den Inhalt der Website mit einem feinen Zahnkamm durch - stellen Sie sicher, dass Sie alles richtig machen. Guter Inhalt ist der Grundstein einer großartigen Website.

  • Rechtschreibung: Überprüfe und überprüfe noch einmal. Führen Sie eine Rechtschreibprüfung durch. Noch besser: Beziehen Sie andere mit ein. Sie können nie genug Leute haben, die sicherstellen, dass die Kopie korrekt ist. Achten Sie auf Grammatikfehler und suchen Sie in wichtigen Absätzen nach Witwen oder verwaisten Wörtern.
  • Kopieren: Stellen Sie sicher, dass eine echte Kopie vorhanden ist und der gesamte Platzhaltertext entfernt wurde. Es gibt nichts Schlimmeres, als Lorem ipsum in einem Leitbild zu sehen.
  • Kontaktdaten: Es scheint offensichtlich, aber stellen Sie sicher, dass diese korrekt sind. Wie erwarten Sie, dass die Leute ohne sie Kontakt aufnehmen? Überprüfen Sie Telefonnummern, überprüfen Sie E-Mail-Adressen und testen Sie, ob diese funktionieren, rufen Sie an oder senden Sie eine E-Mail und überprüfen Sie den Eingang.
  • Copyright: Wenn Sie ein Datum in den Copyright-Informationen verwenden möchten, stellen Sie sicher, dass es so eingestellt ist, dass es automatisch vom Zeitstempel auf dem Server aktualisiert wird, und dass der Copyright-Inhaber korrekt ist.
  • Bedingungen: Wenn Sie einen Service anbieten oder an Werbeaktionen teilnehmen, benötigen Sie Bedingungen, die Besuchern zum Lesen zur Verfügung stehen. Wenn Sie sich nicht sicher sind, wie diese geschrieben werden sollen, wenden Sie sich an einen Anwalt, um sich am besten beraten zu lassen. Denken Sie daran: Machen Sie diese so klar wie möglich. Es gibt nichts Schlimmeres, als von juristischem Jargon verblüfft zu sein.
  • Datenschutz: Wenn Sie Cookies verwenden, Daten erfassen oder Daten verteilen, benötigen Sie eine Datenschutzerklärung. Halten Sie diese einfach und machen Sie klar, welche Daten Sie sammeln, und geben Sie an, wie Sie für weitere Informationen kontaktiert werden können.

Funktionalität

Funktioniert es? Diese Frage mag offensichtlich erscheinen, aber vor allem ist dies der wichtigste Teil eines Projekts. Sie haben vielleicht alles andere an Ort und Stelle, aber wenn die Site nicht richtig funktioniert, was bringt es dann, sie zu starten?

Kleinere Fehler können auftreten, wenn Besucher die Website zum ersten Mal verwenden, aber wenn Sie sicherstellen, dass sie zu fast 100% funktioniert, wird ein erfolgreicher Start gewährleistet.

  • Kompatibilität: Überprüfen Sie, ob die Website auf allen Browsern und Plattformen funktioniert. Geben Sie dem Kunden zu Beginn eines Projekts an, auf welchen Plattformen Sie bauen und testen möchten, und halten Sie sich an diese. Verwenden Sie Plattformen wie Responsivator und BrowserStack, um Websites schnell zu testen sowie auf physischen Browsern und Geräten.
  • Favicon: Offensichtlich, aber das kann man übersehen. Sehen Sie sich auch das Erstellen eines iOS-Startbildschirmsymbols an.
  • Logo: Verlinkt das Logo auf die Indexseite?
  • 404 Seiten: Überprüfen Sie, ob diese vorhanden sind, stellen Sie sicher, dass sie Wegweiser für einen Benutzer darstellen, um wieder auf die Website zu gelangen, oder leiten Sie sie auf Seiten von Interesse mit relevanten Links weiter.
  • Weiterleitungen: Wenn Sie Seiten umleiten, verwenden Sie geeignete 301-Weiterleitungen über 302.
  • Formulare: Stellen Sie sicher, dass sie nicht an Spam-Postfächer senden oder nach dem Senden einen Fehler zurückgeben, und fügen Sie nach dem Senden eines Formulars einen Dankessatz hinzu, damit ein Besucher weiß, dass es gesendet wurde. Stellen Sie vor allem sicher, dass die E-Mail-Adresse des Kunden angegeben wird, wenn die Site live geht.
  • Links: Funktionieren interne Seitenlinks? Funktionieren alle externen Links und öffnen sie sich in einem neuen Tab, wenn dies beabsichtigt ist?
  • RSS-Feeds: Feeds können nützlich sein. Sie müssen diese nicht auf Artikel beschränken, Sie können Feeds für die meisten Seiten einrichten, beispielsweise neue Arbeiten oder Fallstudien zu einer Site hinzufügen.

Standards & Validierung

Diese beiden Dinge sollten während des gesamten Designs und Builds berücksichtigt werden, damit alle Benutzer Ihre Website so gut wie möglich erleben. Punkte, die man beachten sollte:

  • Zugänglichkeit: Es ist leicht zu vergessen, wie unzugänglich eine Webseite für einige Benutzer ist. Haben Sie sich überlegt, wie Hilfstechnologien wie Screenreader auf Ihrer Website navigieren? Haben Sie WIA-ARIA-Rollen und -Status implementiert oder zumindest die Registerkartenreihenfolge der Formularsteuerelemente berücksichtigt?
  • Kontrast: Dies folgt aus unserem Punkt zur Barrierefreiheit. Mit den neuesten Monitoren sind feine Farbunterschiede leicht zu erkennen. Testen Sie Ihre Website auf mehreren Geräten und Laptops, um sicherzustellen, dass das Design klar ist und der Text problemlos gelesen werden kann.
  • Textgröße: Machen Sie den Text klar und leicht lesbar, passen Sie den Zeilenabstand an und lassen Sie viel Leerraum. Größer, kann besser bedeuten, wenn es um Text im Web geht.
  • Alt-Tags: Stellen Sie sicher, dass alle Bilder klare beschreibende ALT-Tags für Sehbehinderte haben. Nicht nur das, ohne sie werden sie in Suchmaschinen nicht gefunden.
  • Konsistenz: Stellen Sie sicher, dass gemeinsame Elemente auf der gesamten Website konsistent sind, um Ihre Benutzer nicht zu verwirren. Lassen Sie Schaltflächen wie Schaltflächen aussehen, Links wie Links, und Titel und Text sollten in Größe und Farbe einheitlich sein.
  • Gerätekompatibilität: Überlegen Sie, wie die Website auf mehreren Geräten verwendet wird, ob responsive oder nicht, Ihre Website sollte für Desktop- und mobile Webbenutzer funktionieren.
  • Validierung: Streben Sie immer eine 100%ige Validität an. Wenn Ihre Website nicht vollständig validiert werden kann, sollten Sie sich nicht zu sehr aufregen, aber stellen Sie sicher, dass Sie alle Fehler verstehen, um unerwünschte Probleme zu beseitigen.
  • JavaScript: Viele Leute, die im Internet surfen, haben JavaScript aus Sicherheitsgründen deaktiviert. Stellen Sie sicher, dass Ihre Site voll funktionsfähig ist und Formulare ohne sie weiterhin serverseitige Validierungsprüfungen durchführen.
  • Flash: Ja, wir wissen, dass niemand Flash mehr benutzt, oder? Wenn Flash verwendet werden muss, stellen Sie sicher, dass ein alternatives Backup-Image hinzugefügt wird, falls Flash Player nicht installiert ist.

Sitemaps

Stellen Sie sicher, dass Sie Sitemaps einschließen. Diese helfen Suchmaschinen, Ihre Website während des Crawling-Prozesses korrekt zu indizieren.

  • HTML-Sitemaps: Obwohl diese Form der Sitemap nicht so gängige Praxis ist, kann sie ihre Vorteile haben, indem sie Besuchern hilft, einen vollständigen Überblick über die Seiten der Site zu erhalten. Links dazu finden Sie normalerweise in der Fußzeile einer Site.
  • XML-Sitemaps: Diese werden immer nur von Suchmaschinen wie Google, Bing und Yahoo verwendet. Erstellen Sie einfach eine XML-Sitemap und senden Sie sie über die Webmaster-Tools. Diese werden dann verwendet, um Suchmaschinen über die von Ihnen veröffentlichten Seiten zu informieren.

Leistung

Eine schnellere Site ist eine bessere Ranking-Site. Sie senken auch die Absprungraten auf Seiten, wenn Sie die Ladezeiten verkürzen können – wer möchte warten, bis die Seiten geladen sind?

  • Website-Geschwindigkeit überprüfen: Sie können Dienste wie Google Page Speed verwenden, um die Ladezeiten der Seiten Ihrer Website zu überprüfen.
  • Bildgrößen: Halten Sie Ihre Bilder so klein wie möglich. Obwohl die Netzwerkgeschwindigkeiten besser sind als je zuvor, möchte niemand warten, bis eine 10 MB-Seite geladen ist. Das Komprimieren von Bildern verbessert nur die Seitenladezeiten.

SEO

Gute SEO bedeutet, dass Ihre Website härter arbeitet und mehr Erfolg hat als eine Website, die wenig oder schlechte Techniken verwendet. Machen Sie Ihre Recherche richtig und der Rest wird sich von selbst ergeben.

Diese Liste ist keineswegs umfangreich und wenn Sie mehr erfahren möchten, empfehlen wir Ihnen, mehr aus diesen kürzlich erschienenen Artikeln zur Suchmaschinenoptimierung(FAQ) und der SEO-Checkliste eines Webdesigners zu lesen.

  • Keyword-Recherche: Stellen Sie sicher, dass Sie die richtige Zielgruppe und den richtigen Markt ansprechen. Es ist wichtig, dies richtig zu machen, um relevanten Traffic auf Ihre Website zu lenken. Recherchieren Sie mit Google AdWords und finden Sie heraus, welches Keyword (oder Suchbegriff) das höchste Traffic-Potenzial und die geringste Konkurrenz hat und gleichen Sie diese beiden Faktoren aus.
  • Seitentitel & Beschreibungen: Verfügen alle Vorlagen über die erforderlichen Seitentitel und Metadaten basierend auf Ihrer Keyword-Recherche? Wenn Sie sich auf ein bestimmtes Schlüsselwort konzentrieren, versuchen Sie, diese an den Anfang der Beschreibungen zu bringen und sehen Sie sich die Verwendung von Singular- und Pluralformen an.
  • Bild-Alt-Tags: Enthalten die Hauptbilder der Site relevante und beschreibende Alt-Tags? Die Verwendung von Kurzbeschreibungen hilft. Und denken Sie daran, versuchen Sie, einen beschreibenden Dateinamen anstelle von zufälligen Wörtern und Zahlen für diese Bilder zu wählen.
  • Schlüsselwörter: Betten Sie diese in Titel, Beschreibungen und Texte ein.
  • Inhalt: Wenn der Inhalt gut ist, wird die SEO optimiert und ergänzt. Eine gute Keyword-Dichte innerhalb der Kopie funktioniert gut. Verwenden Sie daher sowohl Singular- als auch Pluralformen von Keywords in Ihrem Text. Überfrachten Sie den Inhalt nicht und denken Sie nicht zu viel darüber nach, machen Sie ihn natürlich und fügen Sie nur hinzu, wenn und wenn es relevant ist. Suchmaschinen bevorzugen auch längere Inhaltsseiten, also achten Sie darauf, den Inhalt auf +300 Wörter zu bringen, konzentrieren Sie sich jedoch mehr auf die Qualität als auf die Quantität.
  • URLs: Stellen Sie sicher, dass die URLs der Site sauber sind. Die Verwendung einer beschreibenden URL anstelle von URLs, die aus Zufallszahlen oder Wörtern bestehen, hilft bei der SEO und hilft Besuchern, eine Seite zu finden, zu der sie zurückkehren möchten, und prüfen, ob ein Keyword in die URL eingefügt wird, falls relevant.

Analytik

Unabhängig davon, wie klein eine Website ist, erhalten Sie durch die Ausführung von Webanalysen wertvolle Informationen darüber, wie Sie Ihre Website in Zukunft verbessern können.

  • Überwachung: Verwenden Sie bei guter SEO Tracking-Codes, um dies zu messen. Tools wie Google Analytics (kostenlos) oder Dienste wie Hubspot, GoSquared oder KISSmetrics (kostenpflichtig) geben wertvolles Feedback.

Sicherheit

Sie haben vielleicht viele Dinge, von denen Sie nicht möchten, dass die Welt davon erfährt. Beispielsweise; von Benutzern hochgeladene Medien oder Kreditkartendetails von Käufern.

  • Schützen Sie sensible Seiten: Schützen Sie sensible Seiten oder Ordner davor, in Suchmaschinen indiziert zu werden, indem Sie robots.txt-Dateien einfügen und sie aus den Webmaster-Tools ausschließen. Überlegen Sie auch, ob Sie eine .htaccess-Datei verwenden müssen, um die Ordneransicht in Verzeichnissen zu deaktivieren.
  • Sicherheitszertifikate: Bei der Entwicklung einer E-Commerce-Website oder einer Website, die sensible Besucherinformationen verarbeitet, ist das Sicherheitsniveau von größter Bedeutung. Stellen Sie sicher, dass Sie Protokolle wie SSL-Verschlüsselung verwenden, um sich vor unerwünschtem Informationsdiebstahl zu schützen. Es wurde auch nachgewiesen, dass das Anzeigen von Siegeln wie TRUSTe die Glaubwürdigkeit einer Website erhöhen kann.

Hosting & Backups

Es kann schwierig sein, einen Webhosting-Anbieter zu finden, und zu wissen, was Sie brauchen, kann noch schwerer zu verstehen sein. Es gibt viele Optionen und Preispläne zur Auswahl, aber stellen Sie sicher, dass Sie einen Anbieter wählen, der Ihren Bedürfnissen entspricht, und nicht einen, der mehr bietet, als Sie bezahlen müssen.

  • Typen: Shared Hosting, Reseller-Hosting, Cloud-Hosting, VPS-Hosting und dedizierte Server. Nicht sicher, was diese bedeuten? Dann lesen Sie diese schnellen Tipps.
  • Backups: Stellen Sie sicher, dass Sie einen Anbieter verwenden, der tägliche und wöchentliche Backups Ihres Servers bereitstellen kann, und stellen Sie sicher, dass Sie auch lokale Backups erstellen.
  • Überwachung: Richten Sie Dienste wie Pingdom oder andere Serverüberwachungstools ein, um den Zustand Ihres Servers zu überwachen.

Rechtliches

Bevor Sie mit einem Projekt beginnen, sollte ein unterschriebener Vertrag vorliegen. Der Vertrag sollte die Projektleistungen und -prozesse klar umreißen, damit sich beide Parteien zu 100 % darüber im Klaren sind, was als Endergebnis erreicht wird. Stellen Sie als Teil dieses Vertrages sicher, dass Folgendes vereinbart wurde, um unvorhergesehene Umstände abzudecken.

  • Bild- / Inhaltsrechte: Geben Sie eindeutig an, dass alle von Ihnen verarbeiteten Inhalte oder Bilder in der Verantwortung des Kunden bleiben. Machen Sie klar, dass Sie nicht für die Veröffentlichung von Inhalten und Bildern haftbar gemacht werden, für die sie keine Nutzungsrechte haben. Weisen Sie den Kunden auch darauf hin, dass er Bilder oder Inhalte verwenden sollte, für die er entweder bezahlt wird oder für die er die Nutzungsrechte besitzt.
  • Zahlungsbedingungen: Legen Sie faire und gestaffelte Zahlungsbedingungen zu klar definierten Meilensteinen eines Projekts fest (am Ende der Designphase - zum Beispiel vor Beginn einer Entwicklung), gehen Sie nie zur nächsten Phase eines Projekts über, bis die vereinbarte Zahlung eingegangen ist.
  • Zeitpläne: Legen Sie angemessene Zeitpläne fest, die für Ihren Kunden fair und für Sie und Ihr Team überschaubar sind. Machen Sie deutlich, dass Sie nicht für Verluste oder Schäden haftbar gemacht werden, die durch eine vom Kunden verursachte Verzögerung des Zeitplans verursacht werden. Es ist eine gute Idee, Ihre Projekte mit Basecamp zu verwalten, damit alle Arbeiten und Gespräche aufgezeichnet werden, falls Sie sie in Zukunft benötigen.
  • Rechte an geistigem Eigentum: Dies hängt davon ab, wer Sie sind, was Sie anbieten oder das betreffende Projekt. Geben Sie klar an, was Ihnen und dem Kunden gehört, sobald das Projekt abgeschlossen und die Zahlung vollständig geleistet wurde. Berücksichtigen Sie die Rechte an Software oder Code, die von Ihnen geschrieben wurden und die Sie nicht weiterverkaufen möchten, oder ähnliches, an dem Sie die Rechte behalten müssen.

Leistungen

Erklären Sie im Projektvertrag klar, was der Kunde nach Abschluss eines Projekts physisch erhält. Folgendes empfehlen wir.

  • Live-Website: Dies ist das absolute Minimum. Stellen Sie sicher, dass die Website online ist und wie vorgesehen funktioniert.
  • Styleguide: Ein einfacher Styleguide ist für jeden Website-Besitzer äußerst vorteilhaft. Folgende Punkte sind zu beachten:
    • Schriftstile
    • Bildgrößen
    • Tonfall
    • Farben
    • Bildstil
    • Farben
  • Assets & Icons: Alle Icons, Illustrationen oder Infografiken, die für die Website entworfen und erstellt wurden, können für Ihren Kunden in Zukunft hilfreich sein. Stellen Sie ihnen die Dateien in verschiedenen Formaten zur Verfügung, damit sie sie in Präsentationen oder zukünftigen Designarbeiten verwenden können.
  • Offline-Kopie: Falls vom Kunden angefordert, stellen Sie eine Kopie der Site bereit. Denken Sie daran, dass Websites ein lebendiges Dokument sind, das ständig aktualisiert und verbessert werden sollte. Wenn die Website also nicht statisch ist, müssen Sie regelmäßig Offline-Backups für den Client erstellen.

Wann starten?

Denken Sie daran: Übergeben Sie niemals ein Projekt oder Dateien ohne Freigabe und Begleichung ausstehender Zahlungen. Sie werden an dieser Stelle nicht zurückkommen, wenn Sie auf beides verzichten. Die unentgeltliche Übergabe eines Projekts ist gleichbedeutend damit, dass ein Ladenbesitzer einen Kunden mit einem Einkaufswagen voller Waren aus dem Laden gehen lässt, mit dem Versprechen, dass er Sie später bezahlen wird.

Jetzt ist alles an seinem Platz und Sie können loslegen. Aber wann sollten Sie? Wir versuchen unser Bestes, um eine Website nie innerhalb von zwei Tagen eines Wochenendes zu starten. Manchmal muss diese Praxis gelegentlich aus dem Fenster gehen, aber wir versuchen immer, einen Startslot von Montag bis Mittwoch anzustreben. Dies gibt Ihnen die Möglichkeit, alle lebenden Käfer, die während einer Arbeitswoche auftauchen, auszubügeln. Der Versuch, diese an einem Wochenende zu beheben, wenn entweder Sie oder Ihre Entwickler nicht da sind, wird Ihnen nur Kopfschmerzen bereiten, wenn Sie einen Kunden haben, der seine Site voll funktionsfähig benötigt. Vertrauen Sie uns, Sie werden nur auf die harte Tour lernen, wenn Sie diesen Ansatz nicht übernehmen.


Laufende Wartung

Sie haben also die Site gestartet, sie funktioniert großartig und der Kunde ist zufrieden, was nun? Sie müssen sicherstellen, dass es weiterhin störungsfrei läuft. Es können Dinge schief gehen oder übersehen werden, die Serversicherheit gefährdet sein oder es könnte umfallen. Stellen Sie sicher, dass Sie für alle Eventualitäten gerüstet sind.

  • Backups: Stellen Sie immer, immer sicher, dass Backups vorhanden sind. Führen Sie täglich mindestens zwei Backups durch - eines morgens und eines 12 Stunden später, um die Datenmenge zu begrenzen, die verloren gehen kann.
  • Versionskontrolle: Versuchen Sie, ein Projekt über Git auszuführen, es ist ein großartiges Versionskontrollsystem für Entwicklerteams, die zusammenarbeiten. Der Quellcodeverlauf wird gespeichert, sodass Sie bei Bedarf auf frühere Versionen verweisen oder auf diese zurückgreifen können. Eine Einführung in Git finden Sie in diesem ausführlichen Artikel Easy Version Control with Git.
  • Analytics: Um zukünftige Verbesserungen vorzuschlagen, bitten Sie darum, die Analytics des Kunden einzurichten. Auf diese Weise können Sie den Verkehr und die Site-Statistiken für den Kunden überwachen und im folgenden Monat und Jahr nach der Einführung Verbesserungen vorschlagen.

Nicht mehr?

Wenn Sie weitere Punkte haben, die Ihrer Meinung nach in die Liste aufgenommen werden sollten, lassen Sie uns diese in den Kommentaren hören!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.