Unterstützt wurde ich bei meinem ersten IT-Projekt von BCG Platinion. BCG Platinion ist Teil der Boston Consulting Group und ergänzt mit über 700 Digital-, Daten- und Technologieexpert:innen das Leistungsspektrum mit Technologie-Know-how. Bei meinem Projekt werden mir einige dieser Expert:innen mit Rat und Tat zur Seite stehen.
In diesem Artikel beantworte ich Dir folgende Punkte:
- Vorgehen zur Entwicklung einer Website
- Auswahl und Zusammenhang verschiedener Technologien
- Next.js
- CSS-Framework
- Headless CMS
- Vercel
- BCG Platinion als Sponsor
Wie ist unser Vorgehen bei der Entwicklung unserer Website?
Bei meinem ersten IT-Projekt möchte ich unsere ITgirls Website selbst programmieren. Wie im letzten Artikel berichtet, verwenden wir aktuell WordPress und Elementor. Das führt jedoch dazu, dass unsere Website nicht sehr performant ist und es immer wieder Fehler gibt, die durch z.B. Plugins ausgelöst werden und uns schon das ein oder andere graue Haar beschert haben. Daher wollen wir die Website selbst programmieren, um so eine schnellere, modernere und SEO-optimierte Website zukünftig zu haben.
ℹ️ Wusstest Du, dass es mehr als 1,8 Mrd. Webseiten gibt? (Bitkom e.V.)
BCG Platinion hat mich dabei unterstützt, das Vorgehen zu strukturieren. Im Allgemeinen umfasst es die folgenden Schritte:
1. Analyse und Planung: In diesem Schritt definierst Du die Ziele der Website und analysierst, wer die Zielgruppe ist. Du solltest auch den Umfang der Website bestimmen, d.h. welche Seiten und Funktionen benötigt werden.
Die ITgirls haben zwei Zielgruppen: junge Frauen zwischen 15 und 25 Jahren und Unternehmen. Der primäre Fokus der Website wird aber auf den jungen Frauen liegen. Durch unsere bestehende Website haben wir bereits eine Seitenstruktur und einen Überblick, was wir verbessern möchten. Unsere Seitenstruktur ist eher einfach gehalten und umfasst zunächst folgende Seiten:
- Startseite
- Blog
- Blogartikel
- Kooperationspartner
- Team
- Impressum
- Datenschutz
- Kontakt
Unsere Website ist auch primär statisch und hat keine großen Funktionen wie z.B. einen Bestellprozess. Die Blogartikel sind die Inhalte, die sich am häufigsten verändern.
2. Webdesign: Nachdem Du ein Konzept erstellt hast, kannst Du mit dem Design der Website beginnen. Dazu gehören das Erstellen von Wireframes und Prototypen, die Gestaltung des Layouts, die Auswahl der Farben, Schriftarten und Bilder. Der Umfang und die Tiefe Deiner Designs sind von Deinen Ressourcen und Kenntnissen abhängig. Ich bin z.B. keine Webdesignerin und habe für unsere Seite Wireframes erstellt. Das Design wird durch das CSS-Framework vorgegeben und nimmt mir so einen großen Teil ab. Ich habe daher darauf verzichtet, detaillierte Designs zu erstellen.
ℹ️ Was ist ein Wireframe?
Ein Wireframe ist eine visuelle Darstellung eines Designs für eine Website, eine App oder eine Softwareanwendung. Es handelt sich im Wesentlichen um eine Skizze oder eine Grundrisszeichnung, die die wichtigsten Strukturelemente des Designs wie Navigation, Inhalt und Interaktionen zeigt. Wireframes werden normalerweise in der Anfangsphase der Design- und Entwicklungsprozesse erstellt, um die Grundlagen der Benutzeroberfläche und der Benutzererfahrung zu planen und zu diskutieren.
3. Entwicklung: Sobald das Design erstellt wurde, beginnt die eigentliche Entwicklung der Website. Hier erstellst Du die Website mit HTML, CSS und JavaScript und stellst dabei sicher, dass sie auf verschiedenen Geräten und Browsern gut funktioniert. Außerdem solltest Du Aspekte wie Sicherheit und SEO nicht vernachlässigen. Was genau ich für die Entwicklung der Website verwende, findest Du im nächsten Abschnitt.
4. Erstellung der Inhalte: Du musst auch die Inhalte der Website erstellen, d.h. Texte, Bilder und Videos. Diese sollten die Ziele und die Zielgruppe der Website berücksichtigen und suchmaschinenoptimiert sein. Viele unserer Inhalte gibt es bereits, da wir schon eine bestehende Website haben, aber auch wir wollen viele Texte und Bilder überarbeiten und austauschen. Dies tue ich gemeinsam mit dem gesamten ITgirls-Team.
5. Testing und Fehlerbehebung: Nachdem die Website erstellt wurde, musst Du sicherstellen, dass sie so funktioniert, wie sie sollte. Dazu gehören das Testen auf verschiedenen Geräten, Bildschirmauflösungen und Browsern, die Überprüfung der Ladezeit und das Beheben von Fehlern.
6. Veröffentlichung: Sobald die Website getestet und bereit ist, kannst Du sie auf einem Webserver hosten und online stellen.
7. Wartung und Aktualisierung: Nach der Veröffentlichung solltest Du die Website regelmäßig warten und aktualisieren, um sicherzustellen, dass sie auf dem neuesten Stand bleibt und gut funktioniert.
Dies sind die grundlegenden Schritte, um eine Website zu entwickeln. Natürlich können sie je nach Art und Umfang des Projekts variieren. Es ist auch wichtig, immer die Benutzer:innen im Auge zu behalten und sicherzustellen, dass die Website leicht zu navigieren und benutzerfreundlich ist.
Welche Technologien nutzen wir für unsere neue Website?
Das war für mich eine der spannendste und herausforderndsten Fragen, denn wie man Technologien auswählt, habe ich in der Uni nicht gelernt und häufig wird in Uni-Modulen auch mit Technologien und Konzepten von vor 20 Jahren gearbeitet. Bevor ich mit BCG Platinion darüber gesprochen habe, habe ich verschiedene Personen, die als Entwickler:innen arbeiten, nach ihren Erfahrungen befragt. Anschließend habe ich mich in die unterschiedlichsten Technologien eingelesen und eine Auswahl getroffen. Für mich war besonders fraglich, wie arbeiten die Technologien eigentlich zusammen. In meinem Gespräch mit BCG Platinion haben wir genau das besprochen. Zwar arbeitet BCG Platinion normalerweise an deutlich komplexeren und größeren IT Projekten, trotzdem hatten die IT-Berater:innen von BCG Platinion super Input, der sich auch auf unser „kleines“ Projekt anwenden ließ.
Warum BCG Platinion als Sponsor?
BCG Platinion ist schon seit mehr als einem Jahr Kooperationspartner von ITgirls. Die Partnerschaft und Kommunikation ist immer auf Augenhöhe und bietet Dir viele spannende Einblicke ins IT-Consulting einer der Top-Strategieberatungen.
Ich selbst kenne BCG Platinion von dem Female Mentoring Program, welches sie einmal im Jahr anbieten. Dort habe ich auch Xisa kennengelernt, die inzwischen sowohl Teil des ITgirls Teams ist als auch bei BCG Platinion als IT Consultant tätig ist. Unseren Erfahrungsbericht zum Female Mentoring Programm findest Du hier. Inzwischen bietet BCG Platinion auch ein Female Internship an. Alle Informationen findest Du hier. Mit BCG Platinion haben wir verschiedene Projekte umgesetzt. Ich war unter anderem als Teilnehmerin beim BCG Platinion Hackathon 2022 in Amsterdam. Dort konnte ich in einem Team in 48 Stunden an einer technologischen Lösung im Bereich Nachhaltigkeit arbeiten. Dort habe ich das erste Mal mit einem Raspberry Pi gearbeitet und selbst an einem IT-Projekt als “Entwicklerin” mitgearbeitet. Ich habe in den 48 Stunden so viel lernen können und dies hat mich nochmal in meiner Entscheidung, ein eigenes IT-Projekt zu machen, gestärkt. Es hat mir auch nochmal gezeigt, dass ich alles nachfragen kann. Alle IT-Expert:innen waren begeistert, mir Dinge zu zeigen und zu erklären. Die Mentor:innen von BCG Platinion haben uns viele wertvolle Tipps zum Projekt, aber auch zu Soft Skills gegeben. Daher habe ich mich entschieden, BCG Platinion zu fragen, ob sie mich bei meinem ersten IT-Projekt unterstützen können und mir eine:n Mentor:in zur Seite stellen können. Durch ihre starke Tech-Expertise können sie mir sowohl in detaillierten Fragestellungen der unterschiedlichen Technologien als auch im Großen und Ganzen, also in strategischen Entscheidungen, helfen. Was ist aktuell “State of the Art”? Was würden sie mir empfehlen zu verwenden? Und welche Technologien erfüllen das Ziel und die notwendigen Funktionen von der ITgirls Website?
Wir haben dann folgenden Stack festgelegt: Next.js, TailwindCSS, ein Headless CMS und Vercel für das Deployment. Im nächsten Abschnitt werde ich Dir die Technologien näher beschreiben. In Kombination ermöglichen diese Technologien eine schnelle und effektive Entwicklung von unserer Website. Next.js bietet dafür den Grundbaustein. Mit einem Headless CMS kann ich die Inhalte in die Website integrieren, das Layout und das Design mit TailwindCSS gestalten und die Anwendung schnell und einfach mit Vercel bereitstellen.
ℹ️ Was ist ein Stack?
Ein Stack bezieht sich auf eine Gruppe von Technologien und Tools, die für die Entwicklung von Software-Anwendungen verwendet werden. Der Begriff „Stack“ kommt aus der Tatsache, dass diese Technologien und Tools aufeinander aufbauen, um ein vollständiges System zu bilden, ähnlich wie ein Stapel von Schichten. Ein typischer Stack für die Entwicklung von Webanwendungen umfasst zum Beispiel einen Frontend-Stack (z.B. HTML, CSS, JavaScript) für die Erstellung der Benutzeroberfläche, einen Backend-Stack (z.B. PHP, Node.js, Ruby on Rails) für die Datenverarbeitung und eine Datenbank-Technologie (z.B. MySQL, MongoDB) für die Speicherung von Daten. Die Wahl des Stacks hängt von den Anforderungen des Projekts, den Fähigkeiten des Entwicklungsteams und den Vorlieben des Kunden ab. Ein gut ausgewählter Stack kann die Effizienz und Skalierbarkeit der Anwendung verbessern und Entwicklungszeit und Kosten reduzieren.
Next.js
Next.js ist ein Open-Source-Framework für React, welches die Standardfunktionalitäten von React erweitert und eine Struktur für den Aufbau größerer Webanwendungen bereitstellt. Beispielsweise kann man damit Server-seitiges Rendern (SSR) und statisches Rendern (SSG) für ihre React-Apps umsetzen. Next.js erlaubt es, eine React-Anwendung auf dem Server auszuführen, bevor sie an den Browser gesendet wird. Dadurch wird die Website schneller geladen und die Suchmaschinenoptimierung verbessert. Next.js bietet auch viele Funktionen, wie zum Beispiel Code-Splitting, automatische Optimierung von Bildern, eine einfache Möglichkeit zum Einrichten von Serverless-Funktionen und vieles mehr. Es ist ein beliebtes Framework für die Entwicklung von Webanwendungen und wird von vielen Unternehmen genutzt, da es die Entwicklung von leistungsstarken und skalierbaren Webanwendungen erleichtert. Alternativen sind beispielsweise Gatsby oder auch Nuxt (für Vue.js).
TailwindCSS
Um Deiner Website ein Design zu verschaffen, nutzt Du normalerweise HTML und CSS. Dies kann aber sehr aufwendig sein, z.B. weil Du jedes Element für Mobile, Tablet und Deskop gestalten musst. Es gibt verschiedene Wege dies zu vereinfachen. Ich habe mich gemeinsam mit BCG Platinion für ein CSS-Framework entschieden. TailwindCSS ist ein Open-Source-CSS-Framework, das es Dir ermöglicht, schnell und einfach ein konsistentes und skalierbares Design für Deine Webanwendungen zu erstellen. Tailwind stellt zahlreiche vordefinierte CSS-Klassen bereit, die es schnell und einfach ermöglichen, Design-Elemente wie Farben, Schriftarten, Abstände und Größen anpassen. TailwindCSS bietet auch eine Vielzahl von vorgefertigten Komponenten und Funktionen, die es Dir erleichtern, komplexe Designs einfach umzusetzen und den Entwicklungsaufwand deutlich reduzieren. Es wird von vielen Unternehmen und Entwickler:innen genutzt, da es die Entwicklung von Webanwendungen beschleunigt und gleichzeitig ein konsistentes und skalierbares Design ermöglicht. Alternativen sind Bootstrap oder MaterialUI.
Headless CMS
Ein Headless CMS (Content Management System) ermöglicht es, Inhalte unabhängig von einem Frontend zu erstellen, zu verwalten und bereitzustellen. Im Gegensatz zu traditionellen CMS wie z.B. WordPress, bei denen das Frontend und das Backend eng miteinander verknüpft sind, trennt das Headless CMS die Inhalte vom Präsentationslayer und stellt diese über Schnittstellen (APIs) bereit. Das bedeutet, dass Du die Freiheit hast, die Inhalte über verschiedene Kanäle wie Web, Mobil-Apps, Smart-TVs und mehr zu verteilen, ohne dass der Inhalt erneut erstellt werden muss. Ein weiterer Vorteil eines Headless CMS ist, dass es Dir ermöglicht, flexibler und schneller zu arbeiten, da Inhalt und Layout unabhängig voneinander bearbeitet werden können und dies die Wartbarkeit verbessert. Headless CMS werden von vielen Unternehmen genutzt, die eine konsistente Content-Erstellung und -Verwaltung für verschiedene Kanäle benötigen. Ich habe mich noch für kein Headless CMS entschieden. Dies erfolgt in den nächsten Wochen. Zur Auswahl stehen unter anderem Contentful, STRAPI oder Cosmic.
Vercel
Vercel ist eine Cloud-Plattform, die es Dir ermöglicht, Webanwendungen schnell und einfach bereitzustellen und zu skalieren. Die Plattform ist besonders auf die Bedürfnisse von Next.js-Anwendungen ausgerichtet, kann aber auch für andere Frontend-Technologien genutzt werden. Vercel bietet eine einfache Integration mit Git-Repositories, automatisierte Bereitstellung und Skalierung von Anwendungen sowie viele weitere Funktionen, wie zum Beispiel eine globale CDN-Integration und eine einfache Möglichkeit zur Einrichtung von Serverless-Funktionen. Vercel dient quasi dazu, die Anwendung über das Internet erreichbar zu machen. Alternativen sind AWS, Firebase und Netlify.
ℹ️ Was ist eigentlich serverless computing?
Ausblick: Headless CMS und SEO
Die Entwicklung der Website schreitet gut voran und als Nächstes steht die Konfiguration des Headless CMS und die Einarbeitung in SEO-Themen an. Dazu mehr im nächsten Erfahrungsbericht.