Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.
 
Inhaltsverzeichnis
Vorwort
Teil I Grundlagen
1 Einleitung
2 Testumgebung einrichten
3 Live-Umgebung einrichten
4 Website planen
Teil II Joomla! benutzen
5 Website-Frontend kennenlernen
6 Administrations-Backend bedienen
7 Content verwalten
8 Contentpflege konfigurieren
9 Menüs aufbauen
10 Layout und Design anpassen
11 Benutzerverwaltung einrichten
12 Mehrsprachigkeit aktivieren
13 System konfigurieren
Teil III Joomla! erweitern
14 Erweiterungen aktivieren
15 Offizielle Joomla!-Komponenten
16 Empfohlene Erweiterungen
17 Joomla! als Content-Management‐System
18 Joomla! als Community-Plattform
19 Joomla! als Online-Shop
Teil IV Joomla! warten
20 Wartung allgemein
21 Joomla! und Content deployen
22 Sicherheit ausbauen
23 Performance- und Suchmaschinenoptimierung
24 Notfallmaßnahmen
Teil V Joomla!-Erweiterungen entwickeln
25 Grundlagen zur Erweiterungsentwicklung
26 Templates entwickeln
27 Plugins entwickeln
28 Module entwickeln
29 Komponenten entwickeln
30 Erweiterungen veröffentlichen
Stichwortverzeichnis

Jetzt Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Joomla! 3 von Richard Eisenmenger
Das umfassende Handbuch
Buch: Joomla! 3

Joomla! 3
Pfeil 4 Website planen
Pfeil 4.1 Anforderungen sammeln
Pfeil 4.2 Konzept entwerfen
Pfeil 4.2.1 Inhalte planen
Pfeil 4.2.2 Sitemap erstellen
Pfeil 4.2.3 Designrichtung festlegen
Pfeil 4.3 Implementierung
Pfeil 4.4 Testphase
Pfeil 4.5 Go-Live
 
Zum Seitenanfang

4.2    Konzept entwerfen Zur vorigen ÜberschriftZur nächsten Überschrift

Aus dem Briefing entsteht das Konzept. Da steht auf der einen Seite das Fachkonzept: ein Dokument aus Sicht des Auftraggebers, das die Funktionalitäten für den Internetbesucher beschreibt. Was passiert, wenn man auf diesen Button klickt? Auf der anderen Seite steht das technische Konzept: eine Implementierungsanleitung aus Sicht des Webentwicklers, die darstellt, wie Funktionalitäten umgesetzt werden und welcher Aufwand damit verbunden ist. Erst daraus wird es möglich, eine Zeit- und Kostenschätzung abzuleiten, um schließlich ein Timing, einen Zeitplan, für die Websiteerstellung zu erzeugen.

Bei größeren Websiteprojekten lassen sich weitere Teilkonzepte für die Gewerke, z. B. Design, Frontend, Drittsysteme, erstellen – je nach notwendigem Detailgrad. Bei kleineren Websites vermischen sich die beiden grundsätzlichen Konzeptarten zu einem Gesamtdokument. Wichtig ist, dass es ein Konzept gibt, um die Richtung, in die entwickelt und implementiert wird, zu steuern und Annahmen über die Zeit machen zu können, die bis zum Go-Live vergeht.

Die Erstellung des Konzepts ist ein zeitaufwendiger, aber wichtiger Job. Auf den folgenden Seiten lernen Sie Details kennen, auf die bei solch einem Dokument zu achten ist. Aspekte, die Sie schon bei der Planung berücksichtigen, um eine reibungslose Umsetzung zu gewährleisten.

 
Zum Seitenanfang

4.2.1    Inhalte planen Zur vorigen ÜberschriftZur nächsten Überschrift

Content is King. Dieses Bill-Gates-Zitat aus den frühen Internettagen unterstreicht die Wichtigkeit qualitativ hochwertigen Inhalts für eine Website. Da kann das Design noch so schön sein, die JavaScript-Effekte noch so spektakulär. Ohne ansprechende Inhalte ist eine Website nichts wert. Darum ist ein wichtiger Teil des Konzepts, sich Gedanken darüber zu machen, was auf den Webseiten präsentiert wird und in welcher Form. Welche Arten von Textinhalten gibt es (Artikel, Teaser, Newsbeiträge, Kundenmeinungen, Pressestimmen, Blogeinträge, Produktbeschreibungen, Herstellerspezifikationen etc.)? Wer verfasst diese Inhalte, und bis wann sind sie fertig? Liegt Bildmaterial vor? Videos? Andere multimediale Inhalte? Auch ein Benutzerkonzept mit Autoren, Lektoren und Publishern, allen, die mit Inhalten arbeiten, sollte schon in diesem Schritt abgeklärt werden, da die Einrichtung der entsprechenden Joomla!-Komponenten mit viel Konfigurationsarbeit verbunden ist und bei mangelnder Klärung in viel Extraarbeit resultiert.

 
Zum Seitenanfang

4.2.2    Sitemap erstellen Zur vorigen ÜberschriftZur nächsten Überschrift

Auch die Strukturierung der Inhalte ist wichtig, um ein schlüssiges Navigationskonzept aufzubauen. Welches sind die wichtigsten Inhaltskategorien für die oberste Menüebene? Wie viele Untermenüebenen sind praktikabel? Welche Inhalte tauchen nicht im Hauptmenü auf, sondern in einem sekundären Menü, vielleicht im Seitenfooter?

Das Ergebnis der Klärung dieser Fragen ist eine Sitemap, eine flache Listendarstellung aller aufgeklappten Menüs mit allen Unterseiten. Als Werkzeug für die Erstellung dieser Übersicht bietet sich ein Excel-Spreadsheet an (siehe Reiseforum-Beispiel in Abbildung 4.3). Bulletlisten in Word und Co. oder sogar Strichlisten in einem Texteditor genügen für eine anfängliche Visualisierung. Aber eine tabellarische Ansicht erlaubt es, zusätzliche Informationen unterzubringen. Da jede Tabellenzeile auf der Website einem Menüpunkt und damit einer Webseite entspricht, eignet sich die Sitemap auch gleichzeitig dafür, Seitentitel und -beschreibungen aufzunehmen. Beide Elemente sind wichtig für die Suchmaschinenoptimierung, da man sich hier bereits überlegt, wie begehrte Keywords eingestreut werden.

Sitemaps legen Sie am besten in einer übersichtlichen Tabelle an, um nicht nur die Menü- und Seitenstruktur abzubilden, sondern auch Informationen zu Seitentitel und -beschreibungen zu verwalten.

Abbildung 4.3    Sitemaps legen Sie am besten in einer übersichtlichen Tabelle an, um nicht nur die Menü- und Seitenstruktur abzubilden, sondern auch Informationen zu Seitentitel und -beschreibungen zu verwalten.

SEO-Tipp: Achten Sie beim Erfinden der Seitenüberschriften auf eine Länge von etwa 55 Zeichen. Längere Überschriften werden in Suchergebnissen mit Auslassungszeichen (…) abgekürzt. Die tatsächliche Anzahl der Zeichen hängt natürlich davon ab, wie breit die Buchstaben sind. Enthält Ihr Titel breite Buchstaben (M, W), passen weniger Zeichen in eine Zeile, das ist also eine Annäherungssache. Wichtig: Der Seitentitel muss nicht der Seitenüberschrift entsprechen. SEO-technisch ist es sogar empfehlenswert, unterschiedliche Texte zu verwenden, um noch mehr Keywords unterzubringen. Natürlich müssen die Texte thematisch zueinanderpassen.

Info: Seitentitel mit oder ohne Firmen oder Sitename

Der Seitentitel ist eines der wichtigsten Werkzeuge, einer Webseite Keywords zuzuordnen. Es stellt sich die Frage, ob man diesen wertvollen Platz mit der Erwähnung der Firma oder des Sitenamens »verschwendet«. Die Entscheidung hängt davon ab, wie plakativ der Firmen- oder Sitename erscheinen soll. Ist die Marke oder Website noch nicht besonders bekannt, hilft die Erwähnung im Titel, den Namen dem Besucher immer wieder ins Gedächtnis zu rufen.

Seitenbeschreibungen sollten zwischen 150 und 160 Buchstaben enthalten und mit wichtigen Keywords getränkt sein. Diese Keywords werden von Google zwar nicht für die Bewertung der Seiten in Bezug auf Suchergebnisse herangezogen, die gesamte Beschreibung erscheint allerdings im Suchergebnis. Deshalb ist vor allem wichtig, dass jede Webseite ihre eigene Beschreibung erhält. Es ist der erste Content, den Ihre Besucher über Suchmaschinen zu Gesicht bekommen, und muss dementsprechend sorgfältig formuliert werden.

 
Zum Seitenanfang

4.2.3    Designrichtung festlegen Zur vorigen ÜberschriftZur nächsten Überschrift

Nach der Sammlung der Anforderungen, einer relativ systematischen Aufgabe, kommt der schwierige Teil. Wie designt man eigentlich eine Website? Jeder Webdesigner hat seinen eigenen Prozess, und nur durch das Studium dieser Prozesse und einen regelmäßigen Sprung ins kalte Wasser werden Sie Ihren eigenen entwickeln. An dieser Stelle daher hilfreiche Tipps, wie Sie sich mit dem Thema Design auseinandersetzen.

  • Finden Sie ein Basistemplate
    Design – das heißt bei Joomla! Templates; fertige Pakete gestalteter Webseiten mit allen Seitenelementen, Farbschemen und Schriften. Die gibt es teils umsonst, teils kostenpflichtig zum Herunterladen im Internet und bilden eine hervorragende Basis für die Annäherung ans eigene Design. Wichtig: Sehen Sie sich möglichst früh nach einem passenden Template um, denn Sie werden viel Zeit (Tage) mit dem Tweaken, der Anpassung an eigene Designideen, verbringen. Kurz vor dem Go-Live ein anderes Template auszuprobieren ist fatal, weil dann sämtliche Inhaltselemente anders dargestellt werden und das neue Template wieder angepasst werden muss.

    Schon eine einfache Suche nach »joomla templates« präsentiert kostenlose und -pflichtige Designs verschiedener Anbieter.

    Abbildung 4.4    Schon eine einfache Suche nach »joomla templates« präsentiert kostenlose und -pflichtige Designs verschiedener Anbieter.

    Suchen Sie sich ein Template, das schon ungefähr so aussieht, wie Sie sich die Website vorstellen. Achten Sie auf die Darstellung der Menüs, die Aufteilung der Inhaltselemente auf der Seite und den Einsatz der Farben. Sie können alle visuellen Elemente, auch die Farben und Schriften, später anpassen (siehe Abschnitt 10.5, »Template anpassen«), aber bei der Vielzahl verfügbarer Vorlagen sparen Sie sich eine Menge Implementierungsaufwand, wenn Sie etwas mehr Zeit beim Stöbern nach dem idealen Kandidaten aufwenden. Erörtern Sie auch ruhig den Kauf eines kommerziellen Templates. Diese sind ungemein flexibel zu konfigurieren, integrieren moderne Frontend-Technologien (Stichwort Responsive Design) und kosten nicht die Welt (unter 50 €). Bei den großen Templateherstellern finden Sie aber auch kostenlose Alternativen mit abgespecktem Funktionsumfang. Abschnitt 10.4, »Neue Templates im Internet finden und installieren«, beschäftigt sich intensiv mit der Recherche und Wahl des idealen Templates.

  • Finden Sie ein zum Thema passendes Farbschema
    Farben lösen starke Emotionen aus. Rot steht beispielsweise für Aktion bis hin zu Aggression, Blau beruhigt und wirkt offen und frei, mit Grün assoziiert man die Natur und mit Gelb die Wärme der Sonne. Verschiedene Farbkombinationen akkumulieren diese Effekte. Lassen Sie sich vielleicht von Logos großer Marken inspirieren, von bekannten Websites und dem Farbenspiel von Fernsehwerbespots. Eine beliebte Technik von Designern ist es auch, Fotos zu sammeln, z. B. über Flickr, Pinterest oder einfach nur die Google-Bildersuche, und dabei Stichworte aus dem Briefing zu berücksichtigen und stets die Zielgruppe im Auge zu behalten. Die warnenden Hautfarben giftiger Tiere, die beruhigenden Töne einer weiten Landschaft oder die sterile Technokratie moderner Glas- und Betonarchitektur – all das lässt sich in der Marke wiederfinden, um daraus ein Farbschema zu entwickeln, das sich durchaus vom Brand-Guide unterscheiden darf, z. B. für eine besondere Promotionaktion.

    Tipp: Farbschemen finden

    Welche Farben passen gut zueinander? Im Netz gibt es zahlreiche Tools, die bei der Farbauswahl helfen, z. B. die beliebte Website paletton.com (siehe Abbildung 4.5).

    Paletton (http://paletton.com) erstellt verschiedene Farbschemen aufgrund einer Basisfarbe – geben Sie die Startfarbe ins Feld »Base RGB« unten links ein, wählen Sie eines der fünf Farbschemen oben links, und fahren Sie dann mit der Maus über die neuen Farben, um ihren RGB-Wert abzulesen.

    Abbildung 4.5    Paletton (http://paletton.com) erstellt verschiedene Farbschemen aufgrund einer Basisfarbe – geben Sie die Startfarbe ins Feld »Base RGB« unten links ein, wählen Sie eines der fünf Farbschemen oben links, und fahren Sie dann mit der Maus über die neuen Farben, um ihren RGB-Wert abzulesen.

    • ColourLovers sammelt Farbkombinationen, die von Besuchern eingesendet werden. Über die Suchfunktion lassen sich dann Paletten finden, die mit einer vorgegebenen Farbe harmonieren: http://www.colourlovers.com.

    • Material Palette erzeugt eine harmonische Farbpalette auf Basis von zwei angeklickten Grundfarben: http://www.materialpalette.com.

  • Wählen Sie passende Schriften
    Einige Schriften sind technokratisch, andere assoziieren Traditionen oder Persönlichkeit, die Bandbreite kostenloser, auf Webseiten anwendbarer Fonts ist unüberschaubar. Nehmen Sie Tools im Internet zu Hilfe, um mit verschiedenen Schriftvariationen zu experimentieren.

    • The Web Font Combinator: Auf http://font-combinator.com weisen Sie Fließtext und zwei Überschriftenebenen Schriften nebst Farben, Größen und Zeilenhöhen zu und sehen sofort das Endresultat.

    • Typecast (siehe Abbildung 4.6): Der beliebte Dienst Typecast (https://typecast.com) ist kostenlos für einen Benutzer und erlaubt detaillierte CSS-Einstellungen Ihres Webprojekts. Besonders praktisch ist das Versionierungs-Feature, mit dem Sie verschiedene Entwürfe anlegen.

      Mit dem professionellen Tool Typecast lassen sich Schriftparameter anpassen, um Ihre Typografieidee möglichst exakt abzubilden; am Ende entstehen fertige CSS-Styles.

      Abbildung 4.6    Mit dem professionellen Tool Typecast lassen sich Schriftparameter anpassen, um Ihre Typografieidee möglichst exakt abzubilden; am Ende entstehen fertige CSS-Styles.

    Das Kombinieren von Schriften ist schwierig, da es viel Zeit und Muße kostet, verschiedene Zusammenstellungen auszuprobieren und ästhetisch zu bewerten. Zum Glück haben sich einige Experten diese Mühe bereits gemacht und präsentieren in ihren Blogs das Ergebnis. Suchen Sie im Internet z. B. nach »google font combinations« für stimmige Überschriften- und Fließtextkombinationen aus Googles kostenlosem Schriftenportfolio.

  • Experimentieren Sie mit den Elementen des Basistemplates
    Moderne Joomla!-Templates kommen mit einer unüberschaubaren Anzahl von Einstellungsmöglichkeiten daher. Testen Sie alle Seitenelemente, befüllen Sie Menüs bis zur dritten Ebene, aktivieren Sie Seitenleisten, und wechseln Sie zwischen verschiedenen Layoutvorlagen, um die Möglichkeiten des Templates kennen- und ausreizen zu lernen. Das dient als Inspiration für weitere Designideen, aber auch dem Ausloten der Stylinggrenzen. Die müssen Sie kennen, um zu wissen, ab wann CSS-Styling per Hand (über Template und CSS-Overrides) angesagt ist.

Hinweis: Für Querleser lohnt an dieser Stelle ein Blick in Kapitel 10, »Layout und Design anpassen«. Dort finden Sie Anleitungen für die technische Implementierung der gesammelten Gestaltungsideen.

Um das Konzept abzurunden, stehen Ihnen weitere Dokumente und Elemente zur Wahl. Sie könnten einen Styleguide einarbeiten, der alle Layout- und Designelemente, Farbschemen und Schriften übersichtlich zusammenfasst. Mit Wireframes ließen sich komplexe Webseitenstrukturen klarer erfassen. Besonders professionell sind Use Cases, in denen Sie die Interaktion zwischen Internetbesucher und komplexen Websitekomponenten aufzeigen, z. B. beim Check-out-Prozess eines Online-Shops oder anderen mehrseitigen Formularen. Am Ende hängt es von der Größe des Projekts ab, welchen Aufwand die Konzepterstellung rechtfertigt. Übrigens: Das Schreiben des Konzepts ist keine kostenlose Vorleistung, sondern eine ganz normale abrechenbare Tätigkeit im Aufgabenbereich eines Webentwicklers.

 


Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

<< zurück
 Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Joomla! 3 Joomla! 3
Jetzt Buch bestellen

 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchempfehlungen
Zum Rheinwerk-Shop: HTML5 und CSS3
HTML5 und CSS3


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS und JavaScript
Schrödinger lernt HTML5, CSS und JavaScript


Zum Rheinwerk-Shop: Einstieg in PHP 7 und MySQL
Einstieg in PHP 7 und MySQL


Zum Rheinwerk-Shop: PHP 7 und MySQL
PHP 7 und MySQL


Zum Rheinwerk-Shop: Erfolgreiche Websites
Erfolgreiche Websites


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2019
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern