Webworking

Nachrichten und Artikel des WebTeams

Inhalt

Neues Standarddesign und kleinere Updates am CSS-Design

Mit dem gestrigen Update erhält der Web-Baukasten ein neues Standarddesign. Das neue Design “Techfak” ist eine aktualisierte und bereinigte Version des bereits von der Website der Technischen Fakultät bekannten Designs. Die Vorlage beinhaltet standardmäßig einige Modifikationen, die beispielsweise verschiedene Farbgestaltungen (nach dem Vorbild der Departments der Techn. Fakultät) aktivieren. Das neue Design ist ab sofort in allen Komplettpaketen enthalten ( http://vorlagen.fau.de/downloads/komplettpakete.php ).

Weitere Informationen zum Design “Techfak” gibt es unter: http://vorlagen.fau.de/designs/design-techfak.shtml

Neue Funktionen & Bugfixes

In der neuen Version wurden einige kleine Darstellungsfehler (vor allem an der Version für Smartphones) behoben, sodass nun auch längere Titel mit Beschreibung (und auch mit Logo) im mobilen Design richtig dargestellt werden. Außerdem wurde das Headerstyling entsprechend aktualisiert, sodass (in der Design-Version für normale Bildschirme) nun problemlos Logo, Titel und Beschreibung gleichzeitig eingebunden werden können, ohne gesonderte Anpassungen an den CSS-Dateien durchführen zu müssen.

Die neue CSS-Klasse “flaggen” wurde mit entsprechendem Styling für Sprachauswahlflaggen versehen. Diese erscheinen nun (falls sie verwendet werden) wahlweise rechts oben im Kopfbereich der Seite bzw. rechts über dem Inhaltsbereich der Seite (bei Integration der Sprachauswahl innerhalb des “content”-Div-Elements).

Auch am Styling des Feedimports und in anderen Bereichen der Designs wurden kleinere Fehler behoben, weshalb ein Update auf die neue Version in jedem Fall sinnvoll, aber nicht notwendig ist.

Webdesign Trends 2011

Das Web verändert sich und entwickelt sich stetig weiter.

Dabei nicht nur in in Bezug auf Techniken und Standards,sondern auch in Usability und Design. War früher Web nur mehr eine zusätzliche Ausgabe zum Print, hat es heute den Printbereich in seiner Bedeutung überholt. Mehr noch: Print wird aufgrund seiner eingeschränkten Möglichkeiten immer mehr zum “Abfallprodukt” vom Webdesign: In einem professionellen und guten Webdesign sind grundsätzlich Ausgabemedien, wie Smartphones, Small Screen Devices,  große wie kleine Bildschirme aber auch Druckausgaben enthalten.

Will man dagegen von einem DinA4-Entwurf ausgehend ein Webdesign machen, muss man mit großen Problemen und hohen Kosten rechnen. (vgl. BI Artikel Aus Print macht Web – Wes Printdesigner wissen müssen). Sowas sollte man heutzutage sein lassen, wenn man sich nicht den berechtigten Spott in diversen sozialen Netzwerken aussetzen möchte und dem Vorwurf der Geldverschwendung…

Gleichzeitig ist eine Website längst nicht mehr nur vergleichbar mit einer schönen im Photoshop gestalteten DinA4-Fylerseite. Eine Papierseite ist nunmal nicht interaktiv und in Bezug auf Design und Usability fehlen dem Papier Darstellungsmöglichkeiten, die nur auf einem Bildschirm optimal sind.

Einen aktuellen Stand der Webdesign Trends liefert der (englischsprachige) Artikel The Best Of 2011: Trendy Web Designs From Deviantart .

In 50 Beispielen von Screenshots verschiedenster Designer wird gezeigt wohin die Entwicklung geht. Alles ist im vergleich zu traditionellen Websites sehr visuell ausgelegt. Boxen und Kanten  werden kaum noch verwendet und wenn, dann haben diese eine “Tiefe” (auch dies etwas, was auf einem Flyer nur schwer darstellbar ist).

Ansprechend und für die Werbung (aber nicht für ein Webauftritt einer Verwaltung) geeignet finde ich bspw. ein Design wie das Beispiel 25 Kolibri: Designstudie auf Deviantart

Es erfordert zugegebenermaßen Mut, sich auf einige dieser Trends einzulassen.
Aber letztlich  ist alles Geschmacksache.

Die Universität Harvard erlaubt, wie auch die FAU durch das RRZE-Angebot, ebenfalls seinen Einrichtungen eigenständige Webauftritte mit eigenen werbenden Designs, die nicht uniform und verwechselbar sind und sich so von ihren uniinternen Konkurrenten abheben.

Mit der zentralen Startseite und der zentralen News-Site, der Gazette, ist Harvard auch auf den Zug der neuen Designtrends aufgesprungen.

Gleichzeitig nutzt Harvard gezielt verschiedene Designs (und damit Ansprachen an verschiedene Zielgruppen) aus. So sieht man bei der Alumni-Site von Harvard ein völlig anders Design als bei der Gazette.

Die Gazette wendet sich sowohl in Aufmachung als auch in Design an jungen Studieninteressierte und Studierende. Die Alumni-Site hingegen wendet sich an Personen, die bereits ihr Studium (weit) hinter sich haben und einer anderen Generation angehören.

Übrigens: Auch Harvard nutzt inzwischen das CMS WordPress. Das ist dasselbe System mit diesem dieser Artikel geschrieben wurde und das wir für ein zentrales CMS-Erweiterungsangebot zum Webbaukasten vorsehen.

Sollten Sie Fragen zu diesen neuen Trends haben oder nach professionelle Agenturen suchen, die solche Webdesigns umsetzen können, setzen Sie sich mit uns in Verbindung.

 

 

 

 

 

Anleitung zur Durchführung des CSS-Updates

Der Updatevorgang auf die neue Version der CSS-Designs dauert in etwa 30 Minuten, sofern nur wenige Anpassungen an den Designs durchgeführt wurden. Sollten zu einem früheren Zeitpunkt Anpassungen (wie eigene Definitionen in CSS-Dateien bzw. eigene Grafiken im /grafiken/-Ordner des Webauftritts) durchgeführt worden sein, die von der Standardvorgabe abweichen, so führen Sie vor dem Update unbedingt ein Backup durch bzw. kopieren Sie die geänderten Daten in einen gesonderten Ordner, sodass Sie nach dem Update schnell darauf zurückgreifen können. In diesem Fall sind nach dem Update auch ggf. weitere Anpassungen nötig.

Es wird empfohlen, alle Dateien aus den Ordnern /grafiken/, /css/ und /ssi/ gesondert zu sichern, da diese nach dem Update ggf. noch benötigt werden.

Führen Sie im Anschluss folgende Schritte zur Aktualisierung durch:

  • http://www.vorlagen.uni-erlangen.de/downloads/designs.php aufrufen und “Paket aller CSS-Designs” und “Paket aller Grafik-Dateien” herunterladen
  • Dateien entpacken und in den Ordner /websource/ des Webauftritts kopieren (bestätigen Sie ggf. alle Meldungen zum Integrieren von Ordnern und zum Überschreiben von Dateien)
  • Ersetzen Sie den Inhalt der Datei /ssi/head.shtml mit folgendem Code:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Language" content="Deutsch" />
<meta name="generator" content="Web-Baukasten der Friedrich-Alexander-Universität (06/2011)" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0" />

<link rel="bookmark" href="http://www.uni-erlangen.de" title="Offizieller Webauftritt der Universität Erlangen-Nürnberg" />
<link rel="contents" href="/inhaltsuebersicht.shtml" title="Inhaltsübersicht" />
<link rel="copyright" href="/impressum.shtml" title="Impressum" />
<link rel="start" href="/" title="Startseite" />

<link rel="section" href="#content" media="handheld" title="Zum Inhalt" />
<link rel="section" href="#leftnavi" media="handheld" title="Zur Navigation" />
<link rel="section" href="#seitenanfang" media="handheld" title="Zum Seitenanfang" />

<link href="/css/d7/layout.css" type="text/css" rel="stylesheet" title="default" />
<link href="/css/tools.css" type="text/css" rel="stylesheet" title="default" />
<!--[if lte IE 7]>
    <link href="/css/d7/patches/patch.css" rel="stylesheet" type="text/css" />
<![endif]-->

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />



Anmerkung: Sie können /css/d7/layout.css auch aus einem beliebigen anderen Design wählen. Ändern Sie hierfür d7 in d3, d4, d5, d6 oder flexi. Analog gehen Sie für /css/d7/patches/patch.css vor.


Laden Sie im Anschluss die Ordner /css/, /grafiken/ und /ssi/ auf Ihren Webserver hoch. Damit ist das Update für den Fall, dass keine Anpassungen am ursprünglichen Design durchgeführt wurden, abgeschlossen. Wahrscheinlich sind aber noch kleine Änderungen notwendig, damit Ihr Webauftritt optisch wieder der ursprünglichen Version gleicht. Gehen Sie wie folgt vor:


Erstellen Sie in dem Ordner /screen/ des Designs, das Sie verwenden (z.B. /css/d7/screen/) eine neue Datei: basemod_custom.css bzw. kopieren eine bestehende Datei und benennen diese entsprechend um (und leeren deren Inhalt). In der Datei /css/d7/layout.css fügen Sie an unterster Stelle folgende Code-Zeile ein:


@import url(screen/basemod_custom.css);


In der Datei basemod_custom.css können Sie nun alle angepassten und zusätzlichen CSS-Definitionen Ihres ursprünglichen Designs platzieren, diese werden umgehend vom Browser erkannt und eingelesen. So sollte es Ihnen gelingen, die Anpassungen an Ihrem ursprünglichen Design auch wieder nach dem Update integrieren. Alternativ können Sie auch bestehende Dateien des Designs editieren. Dies erschwert allerdings die Durchführung zukünftiger Updates, so sollten Sie zumindest den kompletten Ordner des Designs, in dem Sie tiefgreifende Änderungen durchführen wollen, kopieren und umbenennen (diese natürlich entsprechend in der head.shtml verlinken) und im Anschluss nur in der Kopie arbeiten.


Alternativ gibt es auch die Möglichkeit, das Update über ein Komplettpaket durchzuführen: http://www.vorlagen.uni-erlangen.de/downloads/komplettpakete.php. Dies empfiehlt sich vor allem dann, wenn Sie Dateien oder Ordner zu einem früheren Zeitpunkt gelöscht oder abgeändert haben, diese Änderungen aber rückgängig machen wollen. Das Komplettpaket enthält auch Musterseiten zur Verwendung sog. “Subtemplates”, die eine neue Funktion der aktuellen CSS-Design-Version darstellt. Zu den weiteren Neuerungen des Updates lohnt sich ein Blick in den Artikel: Neue CSS-Struktur & Funktionen der Designs des Webbaukastens.

Aus Print mach Web − Was Printdesigner wissen müssen

Dass Webseiten keine Gemälde sind und die Gestaltung für das WWW anderen Regeln gehorcht als für Printlayouts, wurde bereits von vielen Experten ausführlich beschrieben (z.B. im Artikel von Marc Hinse). Trotzdem versuchen viele noch immer, Webauftritte anhand einer Printvorlage zu gestalten. Dieser Beitrag zeigt auf, welche Vorleistungen nicht nur sinnvoll, sondern notwenig sind, um dennoch aus einer Printvorlage ein funktionales, barrierefreies und nachhaltig entwickeltes Webdesign zu erstellen.

Immer wieder lassen sich Kunden zuerst von einer Agentur, die auf Printprodukte spezialisiert ist, ein Design erstellen und wollen dieses dann von einem Webdesigner für den Gebrauch im Internet „umarbeiten“ lassen. Worauf muss der Printdesigner achten, um sicherzugehen, dass sein Design später auch webtauglich ist?

Der folgende Artikel wurde im Januar 2011 von mir geschrieben und im Rahmen der Benutzerinformation 85 aktualisiert. Er gibt einen Leitfaden an, wie vorzugehen ist:

Aus Print mach Web − Was Printdesigner wissen müssen

Zu beachten ist jedoch der Fazit am Ende: Besser als umfangreiche Arbeiten durch einen Printdesigner vornehmen zu lassen, ist es, gleich von vornerein jemand zu beschäftigen, der sich hauptsächlich mit Webdesign auskennt. Nämlich einen Webdesigner. Die Print-Ausgabe ist, wie auch die Ausgabe auf diverse Smartphones und Monitore mit unterschiedlichen Auflösungen eine von vielen Ausgabeformen einer Webseite.
Die Ausgabe auf Print ist reduziert um alle dynamische Teile (bspw. eines Menüs oder Hovereffekte).  Daher bildet die Ausgabe auf Print nur eine Untergruppe von der umfangreicheren und flexibleren Webausgabe dar.

 

 


Praktikum in Web-Frontendentwicklung an der Uni Mainz

Leider gibt es hier an der Uni Erlangen noch kein Informatik-Lehrstuhl, welches sich ernsthaft mit Web-Technologien beschäftigt. Um so erfreulicher ist es zu sehen, daß an der Uni Mainz eine eigene Praktikumsvorlesung für Frontendentwicklung gehalten wird.
Diese wird dabei nicht von irgendeinem unbekannten Dozenten gehalten, sondern von zwei international bekannten Webkrauts: Jens Grochtdreis und Martin Kliehm.

Praktikum in Frontendentwicklung – Session1

Wie es sich für eine professionelle Vorlesung über Web-Technologien gehört ist auch diese öffentlich abrufbar und wird über eine CC-Lizenz verbreitet.

In Ergänzung zu den Slides hier auch ein Artikel von dem Webdesign Marc Hinse bzgl. den Unterschied zwischen Print-Design und Webdesign: Web ist nicht Print.

Diesen Artikel empfehle ich auch etwas in Hinblick auf immer wieder eintreffende Anfragen von Kunden, die von irgendeiner Agentur ein Design “gekauft” haben und nun einen Programmierer brauchen, der es ins Web überträgt.
leider muss man all diesen Menschen sagen, daß sie sich nicht an Profis gewandt haben.
Aufgrund der Darstellungsvielfalt von Websites auf verschiedenste Medien (Handys, verschiedene Monitorauflösungen, darunter neuerdings mit dem 16:9-Standard, der auch nicht mehr dem einer DinA4-Seite entspricht, Pads, Drucker, Fernseher, und andere) im Vergleich zu der einzelnen festgelegten Ausgabe auf üblicherweise zwei Papierformate, sollte eher den umgekehrte Weg in Betracht gezogen werden:

Professionelle Webdesign entwerfen die optische Gestaltung für die verschiedenen Ausgabemedien.
Print ist darunter nur einer von vielen.