Gegen den Strom

Nur tote Fische schwimmen mit dem Strom

Welches Webdesignderl hätten’s denn gern?

Was macht eigentlich so ein Webdesigner? Warum gibt es Leute, die sich für diese Berufsbezeichnung schämen? Und warum ist das eigentlich gar nicht nötig? Der Versuch einer Klärung.

Design_240x194Webdesigner und Journalisten teilen zwei gemeinsame Schicksale: Sie machen »was mit Medien« und tragen eine nicht geschützte Berufsbezeichnung. Letzteres bedeutet, dass sich jedermann nach Belieben so nennen darf, auch ohne entsprechende Ausbildung. Im Falle des Webdesigners kommt noch ein zweites Problem hinzu: Je nachdem, in welchem Zusammenhang und in welcher Branche man den Begriff verwendet, kann man sich durchaus etwas anderes darunter vorstellen.

Um der Sache genauer auf den Grund zu gehen, habe ich vor einigen Wochen meine Leser nach ihren Eindrücken und Vorstellungen befragt, die sie bezüglich des Webdesigners und verwandter Berufe haben. Dabei kamen einige interessante Ergebnisse zustande, die ich hier zum Teil mit einfließen lassen möchte.

Webdesign als interdisziplinäre Tätigkeit

Für den Laien klingt die Sache einfach: Der Webdesigner entwirft Internetseiten. Dummerweise ist die Sache in der Realität ein wenig komplexer. Vor einiger Zeit schon habe ich mal eine Grafik entworfen, die zeigt, wie ich mir das in der Regel vorstelle:

  • Usability
  • Design
  • Technik

(Manchmal ist man geneigt, auch noch den Punkt »Inhalt« hinzuzunehmen, da sowohl Usability als auch Design von redaktionellen Texten und Bildern abhängig ist. Der Einfachheit vernachlässige ich diese Disziplin aber hier.)

Diese Dreier-Aufteilung lässt sich noch weiter differenzieren. Dies könnten möglicherweise die Teilaufgaben sein bei der Umsetzung einer modernen Internetseite:

  • Konzeption (Umfang, Zielsetzung, Sitemap)
  • Informationsarchitektur (Groblayout, Usability)
  • Screendesign (statisch, meist pixelbasiert)
  • Frontend-Entwicklung (HTML/CSS, Dynamisches Verhalten per DOMScripting)
  • Installieren und Einrichten eines CMS
  • Template-Dynamisierung (zur Einbindung in das CMS)
  • Migration auf den Liveserver

Weiterlesen ...

Kommentar schreiben (0 Kommentare)

Joomla: Standard-Templates individuell abwandeln

Joomla! ist ein beliebtes Open-Source Content-Management-System mit vielen Möglichkeiten. Eine der Stärken von Joomla ist die riesige Anzahl sowohl freier als auch Premium Templates und und Erweiterung. Diese Template können Sie ganz einfach herunterladen und installieren. Aber auch diese Arbeit müssen Sie sich nicht machen, denn das Installationspaket von Joomla enthält mehrere verschiedene Templates.

Die meisten Einsteiger fangen mit einem davon an und sind damit zunächst zufrieden. Nach einiger Zeit kommen jedoch Änderungswünsche auf. Dieser Artikel führt Sie durch eins der Standardtemplates von Joomla und zeigt Ihnen, wie Sie es für Ihre Website modifizieren zu können.

In Joomla 1.5 verfügbare Templates

Joomla 1.5 beinhaltet drei Frontend-Templates. Eines von ihnen, Beez, wird lediglich als Beispiel dafür, wie man ein Template aufbaut, zur Verfügung gestellt (es ist scheußlich).

Die anderen zwei, JA Purity und Rhuk Milkyway, sind schon eher brauchbar.

Das Template Rhuk Milkyway beinhaltet abgerundete Ecken in seinem Design. Es wird häufig als Framework verwendet, um Erweiterungen für Joomla von Drittanbietern vorzuführen. Auch JA Purity weist eine Reihe von Farbthemen und Templateparametern für die Anpassung der Breite des Templates, des Logotyps (Text oder Bild) und anderer Optionen des Templates auf.

Tools, die Sie brauchen werden

Für dieses Tutorial werden Sie den Firefox browser. Sie werden außerdem die Firefox-ErweiterungFirebug add-on for Firefox (info on getting started) herunterladen und installieren müssen.

Firebug integriert sich in Firefox und gibt Ihnen beim Browsen eine Fülle von Entwicklungstools an die Hand. Sie können auf jeder Webseite live CSS, HTML und JavaScript editieren, debuggen und überwachen, was später praktisch sein wird, wenn Sie funktionierenden Code in Ihr Joomla Stylesheet implementieren. Firebug ist ein unschätzbares Werkzeug für Webseitenentwickler und -gestalter und unverzichtbar für dieses Tutorial.

Weiterlesen ...

Kommentar schreiben (0 Kommentare)

Per Selbstudium zum Webdesigner

Gerade für selbstständige Webdesigner gilt, dass man niemals ausgelernt hat. Um die steigenden Anforderungen der Kunden erfüllen zu können, ist ein gewisses Know-How erforderlich. Dass es genügend Ausbildungs- und Weiterbildungsmöglichkeiten gibt, wurde  in vergangenen Artikeln (siehe Ausbildungs- und Weiterbildungsmöglichkeiten) erläutert.

Nicht jeder hat genügend Zeit, um regelmäßig an einem Präsenzunterricht teilzunehmen. Hinzu kommt die finanzielle Belastung. Mehrwöchige Seminare verschlingen meist vierstellige Beträge. Selbst ein Wochenendseminar kostet mehrere hundert Euro. Glücklicherweise jedoch ist niemand dazu gezwungen, solche kostspieligen Weiterbildungsmöglichkeiten wahrzunehmen. Das Internet bietet viele Tutorials und Blogs, wodurch das Auto-didaktische Lernen ebenso sinnvoll sein kann wie der Präsenzunterricht. Hier nun einige interessante und vor allem kostenlose Lern-Webseiten:

Little Boxes - Webseiten gestalten mit HTML und CSS
Mit den Little-Boxes-Büchern hat Peter M. Müller, der bei der PROCON GmbH als Dozent mit dem Themenschwerpunkten Web Publishing angestellt ist, der nachrückenden Webdesign-Generation einen einfachen Einstieg ermöglicht. Die drei Bücher sind unterhaltsam geschrieben, teilweise sogar ein bisschen humorvoll, und vermitteln das erforderliche Basiswissen. Außerdem begeht Peter Müller nicht den Fehler vieler Autoren, mit Fachwörtern um sich zu werfen und die Einsteiger zu überfordern. Im Gegenteil: Auf fast jede Erklärung folgt ein Beispiel, wodurch die Inhalte besser nachvollziehbar sind.
Eines dieser Werke, Teil 1 - Webseiten gestalten mit HTML und CSS, ist auf der Internetseite von Peter Müller komplett online gestellt. Die Kapitel lauten: HTML Grundlagen - Kästchen gestalten, CSS Grundlagen - Kästchen gestalten, CSS Positionierung - Kästchen verschieben, CSS mehrspaltige Layouts, Nützliche Werkzeuge.

Weiterlesen ...

Kommentar schreiben (0 Kommentare)

CSS-Spaltenlayouts: Die zukünftigen Möglichkeiten

Nachdem die schreckliche Phase der Tabellenlayouts überwunden war, setzten sich glücklicherweise CSS-Layouts durch. Das war zweifelsohne ein Fortschritt, doch rückblickend darf man mit den neuen Techniken auch nicht hundertprozentig zufrieden sein. Spalten realisiert man auch heute noch gezwungenermaßen mit "float", wobei dessen eigentlicher Zweck ein ganz anderer ist. Deshalb sind mit float formatierte Blöcke, die man wie Spalten behandelt, auch schlechter handhabbar. Spaltenlayouts sind in den bisherigen CSS-Standards schlicht nicht vorgesehen. Mit CSS3 soll sich das ändern. Es liegen einige vielversprechende Konzepte vor, die sogar teilweise schon implementiert sind.

Ein Rückblick: Float

Wie gesagt, sind Floats derzeit das weitgehend einzige Mittel, Spaltenlayouts zu erstellen. Weist man einem Block beispielsweise float: left zu, richtet sich dieser am linken Rand aus und lässt die restlichen Elemente rechts an ihm vorbeifließen. Möchte man ein Layout mit drei Spalten realisieren, weist man allen drei Blöcken diese Formatierung zu. Wenn alles glatt geht, sollten diese dann als Spalten nebeneinander stehen. Ein schwerwiegendes Problem taucht zum Beispiel dann auf, wenn man die Spalten in ihrer Höhe begrenzen und darunter weitere Spalten in anderen Proportionen anlegen möchte. Hier hilft nur ein kleiner Hack. Bei der so genannten Clearfix-Technik wird zwischen die entsprechenden Blöcke ein Element, dem die Eigenschaft clear zugewiesen wird, gelegt. Dies führt dazu, dass die oberen Spalten abgebrochen werden und wieder klare Verhältnisse geschaffen sind. Damit man dabei nicht in die Semantik des HTML-Dokuments eingreifen muss, empfiehlt sich die Verwendung des Pseudo-Elements :after.

Weiterlesen ...

Kommentar schreiben (0 Kommentare)

YAML 3.2 - Schärfung des Profils

Die neue Version 3.2 des (X)HTML/CSS Frameworks YAML steht ab sofort im Downloadbereich der Projektseite zum herunterladen bereits. Erst vor wenigen Tagen, am 15. Oktober 2009 konnte das Projekt seinen nun schon vierten Geburtstag feiern und ich freue mich außerordentlich, dass auch nach einer so langen Zeit die Luft für Verbesserungen und Weiterentwicklungen noch nicht aufgebraucht ist. Die vorliegende Version 3.2 bringt einige wichtige Änderungen mit sich, die ich im Folgenden kurz vorstellen und begründen werde.

Schlankerer Framework-Core

Die wichtigste Änderung gleich zu Beginn: YAML besteht nunmehr nur noch aus zwei Kernbausteinen. Die base.css ist das Herzstück des Frameworks und stellt dem Nutzer ein schonendes Browser-Reset, oft benötige CSS-Klassen für die Layouterstellung (Float Clearing, Skiplinks, ect.), die “Subtemplates” als flexible Grid-Bausteine, ein universelles Fallback auf ein dreispaltiges Basislayout und wichtige Vorgaben für eine fehlerfreie Druckausgabe bereit. Über den zweiten Baustein, die iehacks.css werden die älteren Versionen des Internet Explorers 5.x bis 7.0 mit Bugfixes versorgt, die so formuliert sind, dass sie ohne Eingreifen des Anwenders den überwiegenden Teil der CSS-Bugs dieser Browser korrigieren. Der ehemaliige dritte Baustein, die print_base.css ist in der base.css aufgegangen. Weiterlesen

Kommentar schreiben (0 Kommentare)
Aktuelle Seite: Startseite Webdesign Webdesign