7 Wichtige Tipps zum Entwerfen und Installieren einer großen Web-Site

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

Projekte unterscheiden sich in Umfang und Größe, und die damit verbundenen Herausforderungen variieren ebenfalls. Als einzelner Webdesigner ist FlashDen der größte Job, für den ich verantwortlich bin. Zusammen mit Tausenden von aktiven Mitgliedern, die alle chatten, hochladen und kaufen, verarbeitet die Site große Geldbeträge und große Mengen an Verkehr.

Das Entwerfen, Neugestalten, Verwalten und Arbeiten mit dem Entwicklerteam hat mir einige nützliche Einblicke und Tipps gegeben, um das Leben einfacher zu machen. Und da wir heute meine neueste Neugestaltung der Website gestartet haben, scheint es ein guter Zeitpunkt zu sein, meine Top-7-Tipps aufzuschreiben!

1. Design und Code für die Wartbarkeit

Der erste und größte Tipp ist die Website so zu gestalten, dass sie leicht zu warten ist. Oftmals opfern Sie beim Entwerfen einer Website Dinge für die Ästhetik. Beispielsweise könnten Sie Bilder verwenden, bei denen Text oder Stile ausreichen würden. Oder Sie wählen absichtlich eine Menüstruktur, die keinen Platz zum Wachsen bietet. Wenn die Site groß ist, wird dies eine wirklich schlechte Idee.

Als ich vor fast zwei Jahren die allererste Version von FlashDen erstellte, verwendete ich Bilder für Schaltflächen. Sie sahen wirklich gut aus, aber ich hatte eine Bibliothek mit 100 verschiedenen Schaltflächenbildern, ganz zu schweigen von Überschlägen. Dann musste ein Entwickler in den nächsten Monaten jedes Mal, wenn er einen neuen Button benötigte, mich bitten, ein Bild zu erstellen. Unnötig zu erwähnen, dass ich diese Lektion ziemlich schnell gelernt habe und wir zu einer Einzelknopfklasse gewechselt sind, die vielleicht nicht so gut aussieht, aber viel besser für die Sicherheit ist.

Ein weiterer Aspekt der Wartbarkeit besteht darin, darüber nachzudenken, wie die Website wachsen und sich ändern wird. Wenn neue Seiten hinzugefügt werden, wohin gehen sie dann? Früher wollte ich eine horizontale Navigation haben, aber sie ist wirklich begrenzt. Nach einigen Experimenten verwenden wir ein vertikales Navigationssystem , das Untermenüelemente stellt, und darüber hinaus eine Registerkartenstruktur in die Seiten eingefügt, um verwandte Seiten zuzulassen zusammen gruppiert werden. Ich sage nicht, dass es die beste Navigation der Welt ist, aber es bedeutet sicherlich, dass wir nicht jedes Mal neu gestalten, wenn der Site ein neuer Abschnitt hinzugefügt wird!

Suchen Sie beim Entwerfen für eine große Website nach Möglichkeiten, das Leben später einfacher zu gestalten, denn Sie werden es nicht bereuen!

2. Finden Sie Ihre Benutzergruppen und Aufgaben heraus

Einer der größten Unterschiede zwischen einer großen und einer kleinen Site ist die Anzahl der verschiedenen Benutzertypen, die die Site möglicherweise verwenden. Auf FlashDen gibt es beispielsweise Käufer, Autoren, Besucher, Administratoren und Mitglieder. Jede Gruppe hat unterschiedliche Ziele und Aufgaben, die sie ausführen muss. Manchmal überschneiden sich diese Aufgaben, aber manchmal sind sie ganz anders.

Das beste Beispiel für einen Ort, an dem Benutzeraufgaben im Widerspruch zueinander stehen, ist eine Homepage. Nirgendwo sonst auf einer Site konvergiert jede Benutzergruppe, und nirgendwo sonst ist es so wichtig sicherzustellen, dass jeder das bekommt, was er will. Und natürlich müssen Sie darauf achten, dass Sie bei der Bedienung einer Benutzergruppe keine andere ignorieren.

Bei dieser letzten Neugestaltung von FlashDen war der größte Bereich, an dem ich gearbeitet habe, die Homepage. Als erstes habe ich mir alle Dinge aufgelistet, die jede Benutzergruppe tun muss:

Käufer - Personen, die auf FlashDen sind, um Dateien zu kaufen
Starten Sie das Durchsuchen von Artikeln, beginnen Sie mit der Suche, greifen Sie auf deren persönliche Homepage zu, zahlen Sie Geld ein und erfahren Sie, wie die Website funktioniert (für neuere Käufer).
Autoren - Personen, die Waren auf FlashDen verkaufen
Chatten Sie mit anderen Mitgliedern, werden Sie auf der Homepage vorgestellt, um ihre Artikel zu veröffentlichen, sich über Neuigkeiten auf der Website zu informieren und schnell zu ihrem Portfolio und ihren Einnahmen zu gelangen
Neue Besucher - Potenzielle Käufer/Autoren/Mitglieder, die gerade angekommen sind
Erfahren Sie sehr schnell, was die Site ist/macht, legen Sie los, finden Sie Dateitypen und Preise heraus
Mitglieder - Personen, die nicht wirklich Käufer oder Autoren sind, sondern nur an der Community teilnehmen
Chatten Sie mit anderen Mitgliedern, sehen Sie sich die Site-News an und durchsuchen Sie Dateien
Administratoren/Prüfer - Unsere Mitarbeiter, die Dateibewilligungen verwalten, Foren moderieren und im Allgemeinen teilnehmen
Holen Sie sich schnell Genehmigungen, sehen Sie sich die neuesten Forenthreads an und hören Sie Neuigkeiten auf der Website

Wenn Sie wissen, was verschiedene Benutzergruppen tun möchten, können Sie eine Seite entwerfen, die alle ihre Anforderungen erfüllt. Es ist unnötig zu sagen, dass dies eine Aufgabe ist, die schwieriger wird, wenn wir mehr Gruppen und Aufgaben haben Auf anderen Seiten der Site erhalten Sie häufig eine Untergruppe von Benutzergruppen, über die Sie sich Sorgen machen müssen, aber auf der Homepage befinden sie sich alle zusammen. Nicht zufällig ist die Homepage die wichtigste Designarbeit, die Sie auf einer Website ausführen müssen.

Bevor Sie jedoch die unterschiedlichen Anforderungen lösen können, müssen Sie die Benutzergruppen priorisieren. Dazu müssen Sie verstehen, was die Site erreichen möchte.

3. Verstehen Sie die Site-Ziele

Obwohl jede Benutzergruppe natürlich der Meinung ist, dass sie am wichtigsten ist, liegt es an Ihnen, sie nach dem zu priorisieren, was die Site selbst erreichen möchte. Zum Beispiel haben wir auf FlashDen, nachdem wir uns mit dem Team zusammengesetzt haben, einige Schlussfolgerungen gezogen:

Die oberste Priorität der Website ist es, Käufer zu bedienen. Wenn Käufer gut bedient werden, kaufen sie weiterhin, bringen Einkommen und dienen gleichzeitig den Autoren.
Es ist wichtig, neue Besucher dazu zu bringen, sich schnell über die Website zu informieren und hoffentlich Mitglieder zu werden. FlashDen befindet sich immer noch in einem relativ neuen Markt, und es treten immer noch neue Wettbewerber auf. Daher ist es wichtiger, Besucher zu erfassen und sie in Käufer, Autoren oder Mitglieder umzuwandeln.
Autoren sind wichtig, weil FlashDen im Kern wirklich von ihren Autoren handelt, aber von allen Benutzergruppen sind sie der Website am meisten verpflichtet.
Mitglieder sind nicht so wichtig wie Autoren und Käufer, tragen aber zur Community rund um die Website bei.
Administratoren/Rezensenten sind am wenigsten wichtig, da sie eine bezahlte Gruppe sind.

Daraus lässt sich schließen, dass die Homepage Benutzer in dieser Reihenfolge bedienen muss: Besucher > Käufer > Autoren > Mitglieder > Administratoren.

Zu verstehen, was Ihre Site erreichen möchte, ist der letzte Thread, der Ihre Benutzeraufgaben zusammenfügt und Ihnen sagt, was Sie versuchen sollten, auf die Seite zu setzen. Idealerweise sollten Sie auf jeder Schlüsselseite die Benutzergruppen, Aufgaben und Prioritäten identifizieren. Für die wichtigen Seiten, wie die Homepage, mache ich das formal auf Papier, und für kleinere Seiten nur in meinem Kopf, während ich entwerfe.

4. Entwerfen, verfeinern, verfeinern, verfeinern...

Erst wenn Sie Benutzergruppen, Aufgaben, Site-Ziele, Prioritäten usw. herausgefunden haben, ist es Zeit zu entwerfen! Es ist wirklich wichtig, dass Sie dies zuerst tun, da dies auf praktischer Ebene die Wahrscheinlichkeit, dass Sie zurückkehren und Ihr Design wiederholen, drastisch senkt. Immer wenn ich gerade angefangen habe, eine große Site zu entwerfen, ohne vorher wirklich zu analysieren, musste ich unweigerlich viele Bildschirme oder sogar ganze Schnittstellen überarbeiten.

Viele Designer verwenden an dieser Stelle gerne Drahtgitter - das heißt, sie legen einfach ein paar Linien und Kästchen an, die ungefähr angeben, wohin die Dinge gehen sollen. Persönlich arbeite ich lieber von Anfang an in Photoshop, weil ich schnell genug bin und wirklich sehen kann, was passieren wird. Ich denke auch, dass Informationsdesign mehr beinhaltet, als wenn etwas auf einer Seite erscheint. Durch einfaches Ändern von Farben und Hintergrundfarben kann ein Seitenelement weiter unten auf der Seite plötzlich wichtiger erscheinen.

Sobald Sie eine Vorstellung davon haben, wie die Informationen zusammenarbeiten müssen, sollten Sie ein funktionierendes Design erstellen, das im Allgemeinen in Ordnung ist, und dann verfeinern, verfeinern, verfeinern. Ich werde oft mit 5 oder 6 Versionen desselben Looks enden, in denen ich verschiedene Dinge wie Schriftgrößen, Bilder, Layoutänderungen, Hintergründe usw. ausprobiert habe, um zu sehen, wie sie auf die von Ihnen präsentierten Informationen auswirken.

Egal wie gut Sie das erste Layout finden, ich kann Ihnen garantieren, dass Sie nach mehr Zeit und mehr Versionen festgestellt haben, dass Ihr Original nicht ganz so gut war, wie Sie zuerst dachten. Manchmal wirft man das gesamte Design weg und beginnt von vorne, aber wenn man eine gute Basis hat, sollte das Verfeinern zu einem großartigen Finish führen.

5. Holen Sie sich die Meinungen anderer, aber machen Sie die letzten Anrufe

Bei jedem großen Job werden Sie viele andere Meinungen haben. In den meisten Fällen sind dies die Meinungen Ihres Kunden. Vor dem Start von FlashDen habe ich mit allen möglichen Unternehmen zusammengearbeitet, die Websites hatten. Ich hatte das Unglück, für mehrere große Versicherungsunternehmen und einige Regierungsorganisationen zu entwerfen. Ich sage Unglück, denn wenn Sie diese Kundengröße erreichen, haben Sie es mit vielen Stakeholdern zu tun, und in vielen Situationen ist nicht klar, wo die wirkliche Entscheidungsbefugnis liegt. Das kann zu endlosen Besprechungen, endlosen Veränderungen und einem hohen Schwierigkeitsgrad für die Umsetzung Ihrer Vision führen.

Was auch immer der Kunde ist, es ist wirklich wichtig, seine Meinung zu erfahren. Abgesehen von allem anderen wissen sie in den meisten Fällen viel mehr über das Geschäft als Sie. Hoffentlich wissen sie auch mehr über die Benutzer als Sie und können mit diesem Wissen konstruktive Ratschläge geben.

Es ist auch wichtig, die Meinung des Entwicklungsteams einzuholen, mit dem Sie arbeiten. Wir bei FlashDen haben das Glück, zwei Entwickler zu haben, die sich mit Design und Benutzerfreundlichkeit von Benutzeroberflächen auskennen. Und ihr Beitrag, zusammen mit dem Rest des Teams, machte einen großen Unterschied für das Endprodukt.

Aber am Ende liegt es an Ihnen als erfahrenem Designer, den letzten Anruf zu machen. Wenn Sie einen schwierigen Kunden haben, kann dies schwierig sein, da ein Kunde häufig der Meinung ist, dass er die letzten Anrufe tätigen sollte. Wenn dies der Fall ist, müssen Sie (a) Wege finden, um dem Kunden zu erklären, aufzuklären und zu zeigen, dass Ihre Entscheidungen zu seinem Vorteil sind; und (b) manchmal in die Kugel beißen und die Anweisungen des Kunden als weitere Einschränkung in Ihrem Projekt akzeptieren und Wege finden, wie es funktioniert.

6. Organisieren Sie für die Zukunft

Wenn Sie ein Design für eine große Site programmieren, ist es wirklich wichtig, erneut über die Zukunft nachzudenken. Wie Sie Ihre Dateien und Ordner verwalten, wirkt sich später erheblich auf Sie aus. Zum Beispiel haben wir kürzlich beschlossen, eine Schwestersite für FlashDen zu erstellen, die sich auf Audio konzentriert, das nur AudioJungle heißt. Zur Vereinfachung wird auf der Site derselbe HTML-Code ausgeführt, mit nur Stylesheets, damit sie wie eine andere Site aussieht. Eine solche Entwicklung stellt meine Datei- und Ordnerstrukturen, meine Stylesheets und mein HTML vor viele neue Herausforderungen. Hier sind einige Dinge zu beachten:

Organisieren Sie sich in einer guten Ordnerstruktur
Skripte, Stylesheets, Schnittstellenbilder, Inhaltsbilder usw. müssen separat aufbewahrt werden. Mit einer kleinen Site können Sie möglicherweise nur Dinge zusammenfügen, aber je größer Sie werden, desto wichtiger ist es, das zu finden, was Sie benötigen.
Verwenden Sie ein kohärentes und intelligentes Benennungssystem für Ihre Dateien
Es gibt nichts Schlimmeres, als sich einen Stapel Bilder mit Namen wie "gd_l3.jpg" anzusehen. Wie Sie das machen, ist größtenteils eine persönliche Angelegenheit, aber ich finde, dass die Benennung mit gängigen Präfixen und beschreibenden Dateinamen sehr hilfreich ist. So könnte ich zum Beispiel jedes Bild in der Kopfzeile mit dem Wort 'header_' beginnen, jeder Hintergrund mit 'bg_' und dann ein Menühintergrund aus der Kopfzeile 'header_bg_menu.jpg'. Präfixe haben den Vorteil, dass Ihre Dateien, wenn sie nach Namen sortiert sind, alle zusammen angezeigt werden.
Verwenden Sie Subversion
Dies wurde mir von unseren Entwicklern aufgezwungen, aber Gott sei Dank war es das! Subversion verfolgt Dateien und Dateiänderungen und verhindert, dass Sie andere Designer/Entwickler überschreiben, die an demselben Projekt arbeiten. Wichtig ist auch, dass Sie auf alte Versionen zurückgreifen können. Es ist gewöhnungsbedürftig, aber auch ohne die Gründe, warum Entwickler es verwenden, lohnt es sich für HTML/CSS-Designer. Sie wissen nichts über Subversion? Schauen Sie sich Subversion für Designer an
Denken Sie darüber nach, wie Sie HTML und CSS schreiben
Es ist wirklich einfach, Ihre HTML- und CSS-Dateien in Unordnung zu bringen, und es ist wirklich schwierig, sie wieder zu bereinigen. Nach vier Neugestaltungen verwende ich immer noch viele der gleichen CSS-Dateien und es ist eine Mission, Klassen zu bereinigen, die nicht mehr verwendet werden, oder obskure Definitionen zu finden, die in viele Ebenen eingeschlossen sind. Verwenden Sie viele Kommentare, möglicherweise sogar mehrere Stylesheets, und benennen Sie Ihre Styles gut!
Sorgen Sie dafür, dass die Browserkompatibilität FRÜH funktioniert
Dies ist ein Bereich, in dem ich mit FlashDen wirklich einen Fehler gemacht habe und für den wir seitdem bezahlt haben. Mein anfängliches Layout funktionierte in IE7 und ich ignorierte IE6, bis wir die gesamte Site fertiggestellt hatten. Seitdem haben wir IE-Bedingungen sowie Hacks und Workarounds hinzugefügt. Es ist viel einfacher, etwas kompatibel zu machen, wenn nur wenige Elemente auf der Seite vorhanden sind, als wenn Sie eine massive Website erstellt haben. Folgen Sie also nicht meiner Dummheit!

7. Erleichtern Sie die Entwicklung mit Ihrem Stylesheet

Je größer die Site, desto weniger wahrscheinlich ist es, dass ein Designer jede einzelne Seite sieht oder ändert. Wenn Sie ein einzelner Designer auf einer großen Website sind - wie ich -, möchten Sie möglicherweise auch nicht für alles angerufen werden. Es lohnt sich also, ein Stylesheet zu erstellen, mit dem die Dinge fast standardmäßig gut aussehen. Zum Beispiel:

Stellen Sie sicher, dass Sie Standardelemente wie <input>, <strong> usw. formatieren.
Auf diese Weise wird die Seite automatisch gut dargestellt. Wenn Sie sich darauf verlassen, dass Leute Dinge wie <strong class="my_bold"> tun, werden Sie unweigerlich Abweichungen auf den Seiten feststellen.
Erstellen Sie wiederverwendbare Elemente, die Entwickler verwenden können.
Zum Beispiel haben wir auf FlashDen eine Tabellenklasse namens "general_table", die einen guten Fallback-Stil für Daten darstellt. Wenn ich die Möglichkeit habe, eine Seite zu formatieren, kann ich spezifischere Arten von Tabellen und Daten hervorheben, aber zumindest ein Entwickler, der eine Seite zusammenstellt, kann einen guten Allround-Tabellenstil verwenden.
Stellen Sie sicher, dass Ihr Seitenlayout eine Struktur hat, die auch dann gut aussieht, wenn nur Text darin enthalten ist.
Es wird unweigerlich Seiten geben, zu denen Sie noch keine Bilder hinzufügen konnten und die möglicherweise etwas langweilig aussehen. Durch die Verwendung von Überschriftenstilen, Seitenleisten usw. können Sie sicherstellen, dass sie immer noch angenehm aussehen und einen visuellen Stil haben. Zum Beispiel wickeln wir auf FlashDen die meisten Textblöcke ein in:
<fieldset>
<legend>Heading</legend>
Content
</fieldset>

Und dies schließt den Text standardmäßig mit einem schönen kleinen Rand und einer Überschrift ein. Für Entwickler ist es einfach, mit Text zu arbeiten, und er kann Text gut trennen und lesbarer machen. Wir haben auch eine Seitenleisten-Komponente, die nur ein weiteres Paket für zusätzlichen Textinhalt ist, aber dadurch sieht die Seite wieder visueller aus.

Natürlich ist es optimal, wenn jede Seite einen Designer durchläuft, aber es ist auch viel weniger stressig zu wissen, dass sie auch dann professionell und einheitlich aussieht, wenn dies nicht der Fall ist.

Was ist deine Meinung?

Das sind also meine Tipps. Wenn Sie eigene Erfahrungen mit der Arbeit an größeren Websites haben, hinterlassen Sie einen Kommentar!