Wie fangen Sie an, eine Website zu erstellen?
Die Mehrheit der Entwickler fängt wahrscheinlich bei Null an oder zieht einige Ressourcen von früheren Websites ein. Die besser organisierten unter uns haben eine benutzerdefinierte Toolbox entwickelt, von der aus sie eine Site starten können, die sich als wesentlicher Bestandteil ihres Workflows erweist.
Heute besprechen wir, warum Sie ein eigenes Front-End-Paket als Ausgangspunkt für jeden einzelnen von Ihnen erstellten Standort erstellen sollten.
Was ist ein Frontend-Paket?
Was ich unter Frontend-Paket verstehe, ist im Wesentlichen eine Reihe von Tools und Konventionen, die bestimmte Elemente des Webentwicklungsprozesses standardisieren. Die Inspiration für diesen Artikel stammt von den kreativen Köpfen von Erskine Design. Als Designer sind Sie wahrscheinlich ein visueller Denker, also gehen wir direkt zum Diagramm:
Die grundlegende Übersicht oder das ultimative Frontend-Paket von Erskine
Wie Sie sehen, hat Erskine im Wesentlichen ein grundlegendes Framework geschaffen, von dem aus Sie bei großen Webdesign-Projekten aufspringen können. Sie fassen es als zusammen - ein umfangreiches Kompendium aus kaskadierenden und verbundenen CSS-Dateien, Namenskonventionen, Modulen, Plugins und Bibliotheksskripts, die sicherstellen, dass jedes Projekt, das von einem oder mehreren Mitgliedern des Teams angeführt oder bearbeitet wird, auf Konventionen bleibt und für alle anderen einfacher ist jederzeit in und arbeiten mit.?
Ein solches Framework zu besitzen, kann aus verschiedenen Gründen von unschätzbarem Wert sein. Einige argumentieren, dass ein solches Framework oder Toolkit nicht nur hilfreich, sondern absolut notwendig ist. Simon Collison von Erskine Design geht so weit zu sagen: Ohne Fragen oder Kompromisse muss jede Website mit einer soliden Fundamentschicht und einer Das ultimative Paket.?
Werfen wir einen Blick auf einige Vorteile und Gründe für die Erstellung Ihres eigenen Front-End-Pakets. (Basierend auf einigen Vorschlägen von Erskines Präsentation, die hier zu finden sind)
Beseitigung der Wiederholung
Dies ist der grundlegendste und verständlichste Grund für die Entwicklung eines Front-End-Pakets. Jedes Mal, wenn Sie mit dem Erstellen einer Site beginnen, durchlaufen Sie verschiedene Einrichtungsschritte, z. B. das Erstellen der bloßen HTML-Struktur, das Erstellen der externen CSS-Dateien, das Verknüpfen des HTML-Codes mit dem externen CSS, das Importieren von jQuery und / oder anderen häufig verwendeten JavaScript-Bibliotheken usw. Durch die Entwicklung eines Front-End-Pakets wird diese verlorene Zeit wiederhergestellt, da der Start einer neuen Website extrem einfach ist: Kopieren Sie einfach den Ordner mit dem Framework, und schon können Sie loslegen.
Sie könnten argumentieren, dass diese Aufgaben nicht viel Zeit in Anspruch nehmen oder sogar notwendig sind, um Ihr Gehirn in die Denkweise der Webentwicklung zu bringen. Um diese Argumente zu beantworten, schlage ich zuerst vor, wie lange Sie bei jedem Projekt verlieren, um Ihre Dateihierarchie zu installieren, Skripte und Stile einzurichten und zu laden, Namenskonventionen zu ermitteln und nachlässige Fehler zu beheben. Ich wette, es ist viel mehr als Sie denken. Zum letzten Argument möchte ich Sie schließlich auffordern, Ihr Gehirn neu zu schulen, um einen neuen Teil des Prozesses als Anfang zu akzeptieren. Versuchen Sie, direkt mit Ihrem System zu experimentieren, und entdecken Sie, wie viel schöner es ist, alle langwierigen, sich wiederholenden Aufgaben zu überspringen.
Standardisierung
Die Standardisierung ist ein großer Vorteil, wenn Sie ein vorgefertigtes Toolkit verwenden. Jedes Mal, wenn Sie ein neues Projekt beginnen, können Sie etwas anders vorgehen. Dies kann etwas Großes sein, wie das Layout Ihres HTML-Codes zu ändern, oder etwas Kleines, wie die Entscheidung für eine neue Namenskonvention. Dies kann es für andere extrem schwierig machen, Ihrer Arbeit zu folgen, oder Sie können später zurückgehen und sich daran erinnern, wie Sie zu dieser Zeit Dinge getan haben.
Behalten Sie bei der Entwicklung Ihres Front-End-Pakets die Standardisierung im Vordergrund. Entscheiden Sie sich für die beste Methode, die Sie kennen, um alles zu tun, und halten Sie sich bei jedem Projekt, das Sie beginnen, an diesen Konventionen. Markieren Sie Ihre Kommentare auf dieselbe Weise, organisieren Sie Ihr CSS auf dieselbe Weise, verwenden Sie dieselben Namenskonventionen für Variablen, verwenden Sie die gleiche Ordnerhierarchie, verwenden Sie dieselben CSS-Resets usw. Wenn Sie alle kleinen Entscheidungen treffen und aus Ihrem System raten, hat dies den Vorteil Rationalisierung des gesamten Entwicklungsprozesses, um sicherzustellen, dass Sie so schnell wie möglich eine erkennbare, organisierte Site erstellen.
Dies bedeutet nicht, dass Sie sich für ein System entscheiden und dauerhaft dabei bleiben sollten. Lassen Sie es sich weiterentwickeln, während Sie bessere Methoden lernen und entdecken, integrieren Sie neue Methoden einfach nicht flippig oder häufig genug, um den Nutzen des gesamten Pakets aufzuheben. Wenn Sie sich für eine bessere Vorgehensweise entscheiden, stellen Sie sicher, dass Sie absolut sicher sind, dass Ihr System verbessert wird, und machen Sie sich eine Notiz, in der die Änderung und der Zeitpunkt der Integration beschrieben werden, damit Sie wissen, was Sie von älteren Projekten erwarten.
Bessere Zusammenarbeit
Dies ist, wo ein Frontend-Paket von "nett zu haben" kreuzen absolut notwendig. Wenn Sie mit einem Entwicklerteam an einem großen Projekt arbeiten, besteht eine der größten Ineffizienzen, die Sie haben können, darin, dass Sie von Anfang an nicht alle auf die gleiche Seite bringen.
Wenn Bill seinen Teil des Projekts so strukturiert hat, Jill seinen Teil anders strukturiert und Will versucht, sowohl mit Bill als auch mit Jill auf dem Laufenden zu bleiben, werden die Dinge schnell chaotisch werden (und nicht nur weil alle Ihre die Namen der Angestellten passieren Reim Dies führt unweigerlich zu langen Besprechungen, in denen über Kleinigkeiten gestritten wird. Wenn Sie Teammitglieder haben, die bereits ein Projekt mit bestimmten Konventionen gestartet haben, können Sie darauf wetten, dass sie diese Methode bis zum Tode verteidigen, um zu vermeiden, dass das, was sie für erledigt halten, zurückgeht. Aus diesem Grund ist es äußerst wichtig, ein Front-End-Paket zu entwickeln, wenn eine umfangreiche Zusammenarbeit erforderlich ist.Sie müssen wahrscheinlich immer noch eine Besprechung abhalten, um bestimmte Konventionen zu befolgen. Sie werden jedoch feststellen, dass die Teammitglieder viel flexibler für neue Methoden sind, wenn kein Backtracking erforderlich ist.
Der Schlüssel dazu ist, ein System zu entwickeln, bevor ein Projekt beginnt, nicht während. Dies erhöht die Akzeptanzwahrscheinlichkeit und verhindert eine Reihe von Inkompatibilitätsproblemen auf der Straße. Stellen Sie außerdem sicher, dass Ihr Team in den Entscheidungsprozess einbezogen wird. Dies ist aus mehreren Gründen äußerst wichtig für den Erfolg des Pakets. Erstens ist es immer eine schlechte Idee für das Management, ein System zu schaffen, um eine bestimmte Aufgabe zu rationalisieren, ohne die Personen zu konsultieren, die dieser Aufgabe am nächsten sind. Egal wie viele Hochschulabschlüsse Sie noch haben als die Menschen unter Ihnen, die Chancen stehen gut, dass sie die beste Autorität für das sind, was funktionieren wird und was nicht. Abgesehen von der Frage der Wirksamkeit ist schließlich noch einmal die Frage der Akzeptanz. Wenn Sie Ihrem Team eine Reihe von Richtlinien geben, an deren Entwicklung sie nicht beteiligt waren, ziehen sie die Füße hoch und beschweren sich, weil Sie sie zu etwas zwingen, das sie nicht tun möchten. Wenn Sie jedoch Teammitglieder von jeder Ebene aktiv an der Entwicklung der Konventionen mitwirken lassen, entsprechen sie viel eher dem neuen System, da sie bei der Erstellung und Ausrichtung des Konzepts hilfreich waren.
Qualitätskontrolle
Durch die Entwicklung eines Front-End-Pakets können Sie von Anfang an ein gewisses Maß an Qualitätskontrolle für die Mitglieder Ihres Teams implementieren. Dadurch werden häufig auftretende Fehler, z. B. das Auffinden eines falschen Dokumenttyps oder das Vergessen, ein bestimmtes browserspezifisches Stylesheet zu verwenden, nicht gemacht. Ein striktes System kann außerdem dazu beitragen, absichtlich nachlässige Arbeiten zu verhindern. In einem verrückten Tempo, um ein Projekt zum Laufen zu bringen, verwenden Entwickler häufig nicht standardkonformen Code, vage Variablennamen, obskure Tricks und eine beliebige Anzahl anderer Abkürzungen mit dem Argument, dass sie später zurückkehren und diese Dinge beheben werden. Das Problem ist natürlich, dass es normalerweise keine Zeit gibt, diese Dinge später im Projekt zu beheben, wenn Sie sich den wichtigen Fristen nähern. Viele dieser Probleme werden verschwinden, wenn Sie eine Kultur pflegen, die solche Praktiken vermeidet und das Abweichen von vereinbarten Konventionen abschreckt.
In Bezug auf Design & Innovation
Bevor ich schließe und bitte, Ihre Meinungen zu hören, möchte ich ein mögliches Argument vorwegnehmen. Viele sehen gängige Konventionen und strenge Regeln als etwas an, das den Designprozess behindern und praktisch keinen Raum für Kreativität oder Innovation schaffen wird. Dies ist in diesem Fall einfach nicht der Fall und ist das gegenteilige Ergebnis dessen, was ein durchdachtes Frontend-Paket bietet.
Ein gutes Frontend-Paket ermöglicht es Ihnen, sich mehr auf die kreativen Elemente des Entwicklungsprozesses zu konzentrieren, indem Sie Bereiche standardisieren, die Zeit beanspruchen und deren Variation keinen wesentlichen Einfluss auf das Endergebnis hat. Ich meine damit, dass Elemente wie Ihre Ordnerhierarchie vom Endbenutzer völlig unbemerkt bleiben und daher nicht der Ort sind, an dem Sie Ihre Kreativität auf jedes einzelne Projekt konzentrieren können. Die Idee hier ist, das langweilige Zeug auf einen Schlag durchzustehen, so dass Sie sich schnell mit den Dingen befassen können, die von Standort zu Standort unterschiedlich sind und sollten; die Dinge, die jeden Standort einzigartig machen. Mit dieser Art von System können Sie mehr Zeit damit verbringen, originale Benutzeroberflächen zu entwickeln, benutzerdefinierte Farbschemas auszuwählen, verschiedene Schriftfamilien auszuprobieren und innovative Funktionen zu codieren.
Wenn das System, mit dem Sie arbeiten, den kreativen Prozess behindert, macht es einfach seine Arbeit nicht und sollte daher zugunsten einer Rückreise zum Zeichenbrett verschrottet werden.
Kostenlose Ressourcen
Verkauft von der Idee, ein eigenes Frontend-Paket zu entwickeln, wissen aber nicht, wo Sie anfangen sollen? Hier sind einige kostenlose Ressourcen, um Ihnen den Einstieg zu erleichtern.
- Eine Killersammlung globaler CSS-Reset-Styles
- Beispiele für leere HTML-Seiten
- Ein einfaches PHP-Template-System
- Google Code: Gehostete JavaScript-Bibliotheken (jQuery, MooTools usw.)
- 16 Grundlegende CSS-Layoutvorlagen
Sprechen Sie Ihre Meinung
Das oben genannte ist mein langatmiges Argument, warum ich glaube, dass Erskine Design zu Recht geltend macht, dass jede Website auf einer starken, standardisierten und voreingestellten Grundlage aufgebaut sein sollte. Lassen Sie uns wissen, wenn Sie der Meinung sind, dass die Entwicklung eines solchen Systems Ihre Zeit wert ist. Besser noch, wenn Sie ein System haben, lassen Sie uns wissen, wie es funktioniert!