Mediencampus Website Grobkonzept

Darmstadt, 02.05.2013

Mediencampus Website Anforderungen und Konzeptentwurf

Agenda

1. Einführung

•  Zielsetzung •  Vorgehensmodel •  Status Quo •  Abgaben •  Das Team

2. Website Anforderungen

•  FunkBonale Anforderungen •  AdministraBve Anforderungen •  Technische Anforderungen

•  Moderne Webstandards •  Responsive Design

•  Zielgruppenanforderungen •  Status Quo

3. Inhaltsstruktur •  Ziele •  HauptnavigaBonsauKau

4. Mock-‐ups •  Startseiten für Mobil, Tablet &

Desktop


Einführung

Ein Studienprojekt von Marisa Wollner und Alexander Vonnemann. Darmstadt, 02.05.2013 4

Zielsetzung

•  Eine Campuswebseite schaffen die den Nutzeranforderungen der kommenden Jahre gerecht wird und ressourcensparend in der redakBonellen Pflege und technischen Weiterentwicklung ist.

•  Den Mediencampus als eigenständige Marke präsenBeren

und das Leistungsspektrum des Mediencampus für die unterschiedlichen Zielgruppen opBmal darstellen.


Vorgehensmodell


Vorgehensmodel

Anforderungsanalyse

KonzepBon

Realisierung

Launch

Anforderungsanalyse

KonzepBon

Realisierung

Launch

IMD Studiengangswebsite Mediencampus Website


Status Quo

Realisierung

Launch

Realisierung

Launch

IMD Studiengangswebsite Mediencampus Website

Anforderungsanalyse

KonzepBon

Anforderungsanalyse (Basierend auf 3Spin Analyse)

KonzepBon


Abgaben KonzepBon & KreaBon

Realisierung

Launch

Anforderungsanalyse

KonzepBon

1.   Anforderungsanalyse 1.  Personas 2.  Maßnahmenempfehlung 3.  Benchmark

2.   KonzepEon 1.  Grobkonzept 2.  Feinkonzept

1.  Wireframes

3.   Realisierung 1.  Finales Design 2.  Styleguide 3.  Übergabe an die Entwicklung


Das Team

Alexander Vonnemann"Interactive Media Design""[email protected]"

Marisa Wollner"Interactive Media Design""[email protected]"

Matthias Kadenbach"Interactive Media Design""[email protected]"

Dominik Bleilevens"Interactive Media Design""[email protected]"

KonzepBon & KreaBon Entwicklung


Website Anforderungen


FunkBonale Anforderungen

•  Alle Inhalte müssen auf mobilen Endgeräten aufruKar sein.

•  Alle Inhalte müssen in deutsch und englisch vorhanden sein.

•  Die Website muss barrierefrei gestaltet werden.


AdministraBve Anforderungen

•  Alle Inhalte müssen über ein Content Management System pflegbar sein.

•  Das CMS muss ein Befgreifendes Rollen-‐ und Rechtemanagement zur Verfügung stellen.

•  Inhalte müssen in unterschiedlichen Sprachen pflegbar sein.


Technische Anforderungen

•  Flexibles Content-‐Modeling, Airibute und Aiributsets.

•  OpBmierte Auslieferung der Inhalte an unterschiedliche Endgeräte.

•  Strikte Trennung von Inhalt und Design. •  Content-‐Einspeisung in andere Websites muss möglich

sein.

•  IntegraBon von Social Media Komponenten.


Technische Anforderungen

Mediencampus Website Ausgewählte Inhalte

Unterschiedliche Inhalte sollen auf die Mediencampus Seite einspeisbar sein.

IMD Website


Technische Anforderungen – Content Modeling

Zerlegen wir den Inhalt unsere Projektes in dessen Bestandteile (Inhaltstypen, Airibute, LimitaBonen). So schaffen wir langanhaltend ein opBmales Nutzungserlebnis, egal auf welchem Gerät.

Content Modeling


Anforderungen – Warum Content Modeling?

•  Weil unterschiedliche Inhaltstypen unterschiedliche Airibute haben.

•  Weil unterschiedliche Inhaltstypen unterschiedlich ediBert und validiert werden.

•  Weil unterschiedliche Inhaltstypen unterschiedlich dargestellt werden.

•  Weil unterschiedliche Inhaltstypen unterschiedlich durchsucht werden.

•  Weil ein Inhaltstypen auf unterschiedlichen Endgeräten unterschiedlich dargestellt wird – AdapEve Content.


Inhalte sehen auf jedem Medium anders aus – AdapBve Content

Inhalt

Mobile

Desktop

Social Media

Tablet

Print E-‐Mail

Apps


AuKau von Inhaltstypen & Aiributen

Inhaltstypen Airibute LimitaBonen

Semester-‐Projekt Projekt Name

Video URL

Beschreibungstext

Projekt Mitglied

Semester

...

Muss VIMEO URL SEIN

Semester Auswahl

Freitext

Moderne Webstandards


HTML5 der neue Webstandard

•  W3C hat den „Last Call“ für HTML5 bereits 2009 ausgerufen.1 W3C hat im Dezember 2012 HTML5 als ferBg erklärt2.

•  HTML5 ist in vielen Browser bereits fest implemenBert. •  HTML5 wird die Basis des Webs über einen sehr langen Zeitraum

bilden3.

•  FormaBerung & Design wird in HTML5 vollkommen von CSS übernommen, so kann Inhalt und Gestaltung besser getrennt werden4.

Quellen: 1)  hip://de.wikipedia.org/wiki/HTML5 2)  hip://www.heise.de/developer/meldung/W3C-‐erklaert-‐HTML5-‐fuer-‐ferBg-‐1770814.html 3)  hip://winfuture.de/news,73617.html 4)  hip://www.slideshare.net/fullscreen/faberNovel/html5-‐how-‐to-‐rethink-‐your-‐web-‐strategy/1


HTML5 Browser Support

Quellen: 1)  hip://html5test.com/ 2)  hip://gs.statcounter.com/#browser-‐DE-‐monthly-‐201206-‐201301-‐bar

457,0 448,0 419,0 392,0 378,0 320,0

0,0 100,0 200,0 300,0 400,0 500,0

Maxthon 3.4.5

Chrome 23

Opera 12.10

Firefox 17

Safari 6.0 Internet Explorer

10

Bewertung (von 500Pkt.) von HTML5 fähigen Browsern

Der neue Webstandard wird bereits von allen aktuellen marktührenden Desktop Browsern sehr gut unterstützt.

Marktanteile DE (06.2012-‐01.2013)

Firefox

IE

Chrome

Safari

Opera


HTML5 Fallback für alte Browser: Modernizr

Quellen: 1)  hip://die-‐netzialisten.de/webdesign/html-‐css/was-‐ist-‐eigentlich-‐modernizr/

Was ist mit alten Browsern wie dem IE8?FunkBoniert HTML5 auch dort? Der Internetexplorer 7 und 8 unterstützen das HTML5 Markup nicht, mit einer einfach JavaScript-‐Bibliothek kann der neue Markup den Browsern beigebracht werden: „Modernizr ist eine JavaScript-‐Bibliothek, mit deren Hilfe man HTML5/CSS3 einsetzen kann, ohne in Kauf nehmen zu müssen, dass die Website in älteren Browsern nicht richBg funkBoniert.“ – Netzialisten.de, April 2012


HTML5 und SEO

„Die semanBsche Struktur von Webseiten und Inhalten kann durch neue Elemente wie header, section oder article noch besser suchmaschinenrelevant markiert werden.“ -‐ AKM3, Juli 2012

Quellen: 1)  hip://www.akm3.de/blog/html5-‐aus-‐seo-‐perspekBve


Flash vs HTML5

Bildquellen: 1)  hip://de.slideshare.net/gadgetopia/just-‐put-‐that-‐in-‐the-‐zip-‐code-‐field?type=powerpoint 2)  hip://www.slideshare.net/KMcGrane/adapBng-‐ourselves-‐to-‐adapBve-‐content-‐12133365

Quellen: 1)  hip://www.spiegel.de/netzwelt/gadgets/adobe-‐stellt-‐flash-‐entwicklung-‐fuer-‐smartphones-‐ein-‐a-‐850332.html 2)  hip://de.slideshare.net/whafro/up-‐to-‐speed-‐on-‐html-‐5-‐and-‐css-‐3 3)  hip://createordie.de/cod/news/3-‐Beispiele-‐fuer-‐coole-‐HTML5-‐AnimaBonen-‐063821.html

•  Die Flash Entwicklung für mobile Endgeräte wurde vom Entwickler Adobe eingestellt.1

•  HTML5 unterstützt Video und Audio Formate. 3

•  Mit HTML5, CSS3 und JavaScript lassen sich komplexe AnimaBonen erstellen. 3

Bei dem heuBgen Entwicklungsstand von HTML5, CSS3 und JavaScript gibt es für uns keinen Grund mehr Flash einsetzen zu müssen.


Ein Gutes Team: HTML5, CSS3 und jQuery

HTML5 CSS3 jQuery

Neuer Webstandard, der die Basis des Webs über

einen sehr langen Zeitraum bildet, schax eine klarere und schlankere DOM-‐

Struktur.

Grundlage zur Gestaltung moderner Webseiten, die auf unterschiedlichen

Endgeräten eine einheitlich gutes Nutzungserlebnis

schax.

Bekannteste JavaScript-‐Bibliothek, welche

komfortable FunkBonen zur schnellen Enterprise

Web-‐Entwicklung bereitstellt.

Quelle:

hip://www.w3schools.com/js/js_libraries.asp [07.12.2013]


Fazit moderne Webstandards

Durch den Einsatz moderner Web Standards machen wir unsere Website langfrisBg auf allen Endgeräten mit Webbrowser benutzbar. HTML5, CSS3 und jQuery werden uns dabei eine solide Grundlage für die Frontend-‐Entwicklung geben.

Responsive Webdesign


Eine gleichbleibendes Nutzungserlebnis schaffen, kanalübergreifend

Mit Responsive Webdesign schaffen wir es unseren Inhalt dynamisch auf unterschiedlichsten modernen Endgeräten opBmal für den Nutzer darzustellen!


Eine gleichbleibendes Nutzungserlebnis schaffen, kanalübergreifend

„Given the rapid adopBon of tablets and smartphones -‐-‐ and the fact that users currently seem to prefer reading their news on the mobile web rather than in apps -‐-‐ I think it's inevitable that 2013 will be the year that responsive design takes off. For publishers, it offers the simplest way to reach readers across mulBple devices. For users, it ensures a great experience on every screen.“ -‐ Pete Cashmore, CEO Mashable, 2012


Responsive Webdesign, so geht’s!

Quellen: 1)  hip://webdesignerwall.com/tutorials/css3-‐media-‐queries 2)  hip://mashable.com/2012/12/11/responsive-‐web-‐design/

Kurz gesagt: Responsive Webdesign nutzt CSS3 „Media Queries“ um zu idenBfizieren, wie die Website auf welchem Endgerät dargestellt werden soll. Grundlage dafür ist eine flexible KonzepBon der Website: Flexible Design-‐Elemente: Größe, Breite und Höhe aller Elemente (Bilder, Videos, Textcontainer, etc.) werden an die Größe des Ausgabe-‐Screens angepasst. Flexible Strukturierung: Je nach Endgerät ändert sich die Platzierung von NavigaBons-‐ und Inhaltselementen. Flexible Darstellung: Bei der Anzeige auf kleineren Smartphone-‐Bildschirmen können weniger wichBge Inhalte entallen, bzw. nur noch verlinkt werden.


Die Vorteile von Responsive Webdesign

Quellen: 1)  hip://html5test.com/compare/browser/ios60/android40/wp80.html

•  Eine Lösung für alle Endgeräte.

•  Zukun�ssicher für eine immer größer werdende Anzahl von internetähigen Geräten.

•  Ressourcensparend in der redakBonellen Pflege: Redakteure müssen

nur eine Version der Website pflegen.

•  Ressourcensparend in der technischen Pflege und Weiterentwicklung: Niedriger Entwicklungsaufwand als eine getrennte Mobile und Desktop Version.


Hürden von Responsive Webdesign

•  Erhöht den Frontend-‐Entwicklungs-‐ und Designaufwand bei der Realisierung einer Website, da mehrere Dimensionen berücksichBgt werden müssen.

•  Unterstützt nicht die volle Performance-‐Power und FunkBonen, wie

beispielsweise naBve ApplikaBonen.

•  Ladezeiten können bei mobilen Endgeräten negaBv beeinflusst werden, wenn Grafiken, zwar kleiner dargestellt werden, aber vom Endgerät komplei geladen werden.


Fazit Responsive Webdesign

Responsive Webdesign ist die zukun�ssichere Technologie zur Darstellung von InterneBnhalten für eine immer größer werdende Anzahl von internetähigen Geräten. Durch Responsive Webdesign schaffen wir eine Lösung für alle Endgeräte und generieren dabei eine gleichbleibend gutes Nutzererlebnis. LangfrisBg sparen wir Ressourcen in der redakBonellen Pflege und in der Weiterentwicklung über alle Geräte hinweg.


Zielgruppenanforderungen (aus der Anforderungsanalyse 3Spin)

Studieninteressierte

-  InformaBonen zum Studienprogramm, Studium und zum Campus finden -  Bewerbungsfragen klären -  Über berufliche Möglichkeiten informieren -  Anschauen, was man am Fachbereich bzw. im Studiengang macht und was

die Studenten können -  Über internaBonale Austauschmöglichkeiten informieren -  Ansprechpartner finden -  Prüfen, ob der Studiengang und die Hochschule den Ansprüchen

entsprechen

Anm.: Durchgestrichene Inhalte werden von den Studiengangswebseiten abgebildet und nicht von der Mediencampuswebseite.



Studenten

-  An Media teilhaben -  Mit der Website für sich, eigene Projekte und die Hochschule werben -  Betrachten, was andere am Fachbereich bzw. im Studiengang machen -  Ansprechpartner finden

Alumni

-  Im Kontakt mit dem Fachbereich bleiben -  Sich über aktuelle Entwicklungen informieren -  Projekte betrachten -  Sich mit anderen Alumni austauschen



Personen aus dem Bereich Wissenscha� und Forschung

-  Wissenscha�liche Berichte und PublikaBonen lesen -  Neuigkeiten aus dem Forschungsumfeld des Fachbereichs erfahren -  Austausch mit Dozenten des Fachbereichs -  Sich über Lehrstellen informieren

Presse

-  Sich über aktuelle Projekte und KooperaBonen informieren -  Neuigkeiten aus dem Forschungsumfeld des Fachbereichs erfahren -  Schwerpunkte des Fachbereichs erfahren -  Veranstaltungstermine erfahren


Inhaltsstruktur Mediencampus


Ziele der Mediencampus Webseite

Die Mediencampus Webseite soll als lebendige InformaEonsplaYorm DER Anlaufpunkt für die

Zielgruppenvertreter bei studiengangübergreifenden Fragen sein.

WichBg hierbei ist, dass die Webseite die Inhalte größtenteils von anderen Seiten einspeist und bündelt, um somit den

redakBonellen Aufwand so gering wie möglich zu halten.


Ziele der Mediencampus Webseite

PräsentaBon der „Marke“ Mediencamp

us

Gemeinsame Webseite des Fachbereich „Media“

Stets aktuelle Themen

Barrierefreiheit

Sprachversionen

Einfache Sprache

Modernes Erscheinungs

bild als DemonstraB

on

PräsentaEon

Veranstaltungen des

Mediencampus

Projektarchiv

Kontaktmöglichkeiten

InternaBonaler Austausch

Campus-‐ Leben

Job-‐ und PrakBkumspl

a�orm

Profilseiten für

Angehörige

Online Studienberat

ung

Studien-‐angebot

Ansprache

Inhalte


HauptnavigaBonsauKau Mediencampus

Startseite Studium Campus Veranstaltungen Forschung & Entwicklung

Studiengänge Projektarchiv Online-‐Studienberatung Studieren im Ausland

DE EN

Studiengänge anpreisen. Was kann hier studiert werden? Wie unterscheiden sich die einzelnen Studiengänge? Was sind die Bewerbungsvoraussetzungen?

Einblick in die Projektvielfalt der Medienstudiengänge. Einreichung von Projekten.

Durch Fragen wie Interessengebiete + Arbeitsverhalten wird dem Bewerber der passende Studiengang vorgeschlagen.

Partnerhochschulen und KooperaBon mit Irland werden angepriesen. Erfahrungsberichte zeigen potenBelle ausländische Studienmöglichkeiten auf.

Entspricht der Studiengang meinen Erwartungen?

Was wird gelehrt? Welcher Studiengang passt zu mir?

Was machen die anderen

Semester und Studiengänge?

Welcher Studiengang passt zu mir?

Wie internaBonal ist der

Mediencampus aufgestellt?

Übersicht über die vielfälBgen Möglichkeiten am Mediencampus zu studieren

Magazin Kontakt Anfahrt Impressum




Arbeitsräume (Workspace)

Entspannung & Sport (Lifestyle) Wohnen Karriere Professoren &

Mitarbeiter

DE EN

Medienstudios geben Einblick in die VielfälBgkeit der Arbeitsmöglichkeiten am Campus. Ein virtueller Campusrundgang zeigt alles in AkBon. Die eigene Bibliothek.

Sport, Ess-‐ und Ruheräume bieten den Studierenden am Campus ein breitgefächertes Lifestyleangebot.

Wohnen direkt am Campus oder im nahe gelegenen Darmstadt machen den Campus airakBv.

Wie wird am Campus gearbeitet / studiert?

Wo kann ich mich in den Freistunden entspannen? Was für Sportmöglichkeiten bietet der Campus?

Wo kann ich am Campus wohnen? Wie finde ich Wohnungen im Raum Darmstadt / Dieburg?

Weiterbildungen (iKum), Career Center, Inkubator zeigen Karrieremöglichkeiten nach dem Studium

Wie unterstützt mich die Hochschule nach dem Studienabschluss?

Magazin Kontakt Anfahrt Impressum Campuskarte mit Angaben der einzelnen StaBonen auf dem Campus und der Räume (evtl. Google Maps Indoor).

Professoren & Mitarbeiter werden vorgestellt, mit Aufgabenbereichen und Kontaktdaten.

Wer unterrichtet was? Was für Referenzen haben sie? Wer ist der richBge Ansprechpartner für mein Anliegen?





Zeitraum TV Media Monday Science

Wednesday Mediale Alumni meets media ...

DE EN

Die Online-‐Fernsehshow des Mediencampus wird vorgestellt und Inhalte der aktuellen Seite eingespeist. z

Nächste Themen und Rückblicke der vergangenen Science Wednesday werden präsenBert.

Nächste Themen und Rückblicke der vergangenen MediaMondays werden präsenBert.

Termin der nächsten Mediale, Rückblicke der letzten Mediale und Voraussetzungen zur PräsentaBon der eigenen Projekte.

Termine, Vorstellung der Alunmi und Kontaktdaten.

Was gibt es Neues am Campus?

An was wird gerade geforscht? Was sind die neuesten Erkenntnisse aus dem Bereich xy?

Wo kann ich mein PrakBkum

absolvieren? In welche Branche möchte ich später

gehen? Kann ich als

Unternehmen dort einen Vortrag

halten?

Wann kann ich mein Projekt ausstellen und was muss ich dafür machen?

Wann kann ich die Projekte live sehen?

Wo gibt es potenBelle Jobmöglichkeiten?

Mit wem kann ich mich über PrakBka,

Trainee-‐ oder Anstellungen unterhalten?

Veranstaltungskalender über alle kün�igen Veranstaltungen. (Herunterladen eines Google Kalender)




iKum KooperaBonen PhD Driimiielprojekte

DE EN

Vorstellung des InsBtuts mit Aufgaben und Forschern, sowie deren laufende Projekte und Forschungsarchiv.

KooperaBonen die die Hochschule hat mit Projekten und Beteiligten.

Was macht das InsBtut am Campus und wie kann ich

mitwirken?

Aktuelle Projekte / PublikaBonen aus dem Bereich Forschung


Weiterbildungsmöglichkeiten im iKum aufzeigen. Doktoranten und PublikaBonen.


Mock-‐ups Mediencampus


Mock-‐up Mediencampus – Startseite Desktop

Prominente Bühne Aktuelle Veranstaltung auf dem Campus Sowie aktuelle redakBonelle ArBkel (Fallback um Aktualität zu garanBeren)

Social Media Newsfeed Aktuellste Meldungen aus allen relevanten Social Media Kanälen

Neueste Projekte Was wird am Campus entwickelt?


Mock-‐up Mediencampus – Startseite Smartphone

Aktuelle redakEonelle ArEkel / Veranstaltungen Was passiert gerade am Mediencampus? Für wen ist es interessant?

Prominente NavigaEon Was für InformaBonen bietet mir die Webseite?

Social Media Newsfeed Aktuellste Meldungen aus allen relevanten Social Media Kanälen

Neueste Projekte Was wird am Campus entwickelt?


Mock-‐up Mediencampus – Startseite Smartphone

NavigaBon immer prominent

Quellen: hip://www.harvard.edu/ [07.12.2013]


GaranBe der Lebendigkeit & Aktualität

Startseite •  Aktuellste ArBkel und Veranstaltungen immer prominent als

Quick Links •  News aus den Social Media Kanälen (Filterbar nach Interesse) •  Neueste Projekte vom Campus

Einspeisung von externen Inhalten •  Kaum eigene staBsche Inhalte (immer aktuell gezogen von

anderen Seiten) Zentrales InformaEonspool für alle Zielgruppenvertreter Geballte Kompetenz am Mediencampus